@ohhwells/bridge 0.1.75 → 0.1.76

package/dist/index.cjs

@@ -74,7 +74,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/OhhwellsBridge.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 var import_client2 = require("react-dom/client");
 var import_react_dom3 = require("react-dom");
 
@@ -1420,6 +1420,7 @@ function applyAiSectionsToDom(state, options) {
       mounted.delete(entry.id);
     }
     container.setAttribute("data-ohw-section", entry.id);
+    container.setAttribute("data-ohw-instance", entry.id);
     container.setAttribute("data-ohw-section-label", entry.label);
     placeContainer(container, entry);
     const root = mounted.get(entry.id)?.root ?? (0, import_client.createRoot)(container);
@@ -7390,6 +7391,9 @@ var import_lucide_react7 = require("lucide-react");
 
 // src/lib/sections.ts
 var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function isChromeSection(el) {
+  return el.matches("header, nav, footer, aside");
+}
 function titleCaseSectionId(id) {
   return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -7415,10 +7419,158 @@ function parseSectionsFromHtml(html) {
   return parseSectionsFromRoot(doc);
 }
 
+// src/lib/section-instances.ts
+var SECTION_ORDER_KEY = "__ohw_section_order";
+var REMOVED_ATTR2 = "data-ohw-section-removed";
+function isRemovedSection(el) {
+  return el.hasAttribute(REMOVED_ATTR2);
+}
+function topLevelSections() {
+  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
+  );
+}
+function instanceIdOf(el) {
+  return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
+}
+function planSectionMove(instanceId, targetIndex, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const dragged = sections[index];
+  const others = sections.filter((_, i) => i !== index);
+  const clamped = Math.max(0, Math.min(targetIndex, others.length));
+  const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
+  return reordered.map((el, order) => ({
+    instanceId: instanceIdOf(el),
+    type: el.getAttribute("data-ohw-section") ?? "",
+    order,
+    pagePath: currentPath
+  }));
+}
+function moveSectionInstance(instanceId, direction, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const siblingIndex = direction === "up" ? index - 1 : index + 1;
+  if (siblingIndex < 0 || siblingIndex >= sections.length) return null;
+  const entries = planSectionMove(instanceId, siblingIndex, currentPath);
+  if (!entries) return null;
+  applyPersistedOrder(entries);
+  return entries;
+}
+function syncRemovedFlags(entries) {
+  const removedIds = new Set(entries.filter((e) => e.removed).map((e) => e.instanceId));
+  document.querySelectorAll(`[${REMOVED_ATTR2}]`).forEach((el) => {
+    if (!removedIds.has(instanceIdOf(el))) {
+      el.style.removeProperty("display");
+      el.removeAttribute(REMOVED_ATTR2);
+    }
+  });
+  for (const id of removedIds) {
+    const el = document.querySelector(`[data-ohw-instance="${CSS.escape(id)}"]`);
+    if (el) {
+      el.style.display = "none";
+      el.setAttribute(REMOVED_ATTR2, "");
+    }
+  }
+}
+function applyPersistedOrder(entries) {
+  syncRemovedFlags(entries);
+  if (entries.length === 0) return;
+  const sections = topLevelSections();
+  if (sections.length === 0) return;
+  const orderIndex = new Map(entries.map((e) => [e.instanceId, e.order]));
+  const ordered = [...sections].sort((a, b) => {
+    const aOrder = orderIndex.get(instanceIdOf(a));
+    const bOrder = orderIndex.get(instanceIdOf(b));
+    if (aOrder === void 0 && bOrder === void 0) return 0;
+    if (aOrder === void 0) return 1;
+    if (bOrder === void 0) return -1;
+    return aOrder - bOrder;
+  });
+  let prev = null;
+  for (const el of ordered) {
+    if (prev) prev.after(el);
+    prev = el;
+  }
+}
+function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
+  if (!document.querySelector(`[data-ohw-instance="${CSS.escape(instanceId)}"]`)) return null;
+  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
+  const allSections = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
+  );
+  allSections.forEach((el, order) => {
+    const id = instanceIdOf(el);
+    if (!byId.has(id)) {
+      byId.set(id, { instanceId: id, type: el.getAttribute("data-ohw-section") ?? "", order, pagePath: currentPath });
+    }
+  });
+  const target = byId.get(instanceId);
+  if (!target) return null;
+  byId.set(instanceId, { ...target, removed });
+  const entries = Array.from(byId.values());
+  applyPersistedOrder(entries);
+  return entries;
+}
+function deleteSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, true);
+}
+function restoreSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, false);
+}
+function newInstanceId() {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `instance-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function getPageSectionOrderEntries(raw, currentPath) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
+  } catch {
+    return [];
+  }
+}
+function rekeySectionSubtree(root, instanceId) {
+  const suffix = `::${instanceId}`;
+  const rekey = (el, attr) => {
+    const current = el.getAttribute(attr);
+    if (current) el.setAttribute(attr, `${current}${suffix}`);
+  };
+  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
+  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
+  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
+  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
+}
+function initSectionInstancesFromContent(content, currentPath) {
+  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
+    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
+  });
+  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
+  for (const entry of entries) {
+    if (entry.instanceId === entry.type) continue;
+    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
+    const original = document.querySelector(
+      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
+    );
+    if (!original) continue;
+    const clone = original.cloneNode(true);
+    clone.setAttribute("data-ohw-instance", entry.instanceId);
+    rekeySectionSubtree(clone, entry.instanceId);
+    original.insertAdjacentElement("afterend", clone);
+  }
+  applyPersistedOrder(entries);
+}
+
 // src/ui/ai-section/AiSectionOverlay.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function readRect(sectionId) {
-  const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
+function findSectionElement(instanceId) {
+  const escaped = CSS.escape(instanceId);
+  return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
+}
+function readRect(instanceId) {
+  const el = findSectionElement(instanceId);
   if (!el) return null;
   const r2 = el.getBoundingClientRect();
   if (r2.width <= 0 || r2.height <= 0) return null;
@@ -7441,7 +7593,7 @@ function useLiveSectionRect(sectionId) {
     const opts = { capture: true, passive: true };
     window.addEventListener("scroll", update, opts);
     window.addEventListener("resize", update);
-    const el = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
+    const el = findSectionElement(sectionId);
     const ro = el ? new ResizeObserver(update) : null;
     if (el && ro) ro.observe(el);
     const interval = setInterval(update, 500);
@@ -7454,6 +7606,12 @@ function useLiveSectionRect(sectionId) {
   }, [sectionId]);
   return rect;
 }
+function computeSectionBoundaryFlags(instanceId) {
+  const topLevel = topLevelSections();
+  const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
+  if (index === -1) return { isFirst: true, isLast: true };
+  return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
+}
 var PRIMARY2 = "#0885FE";
 function edgeAwareRadius(rect) {
   const container = window.innerWidth <= 480 ? 16 : 24;
@@ -7535,7 +7693,7 @@ function AiSectionOverlay({
     (el) => {
       postToParent2({
         type: "ow:section-selected",
-        sectionId: el?.dataset.ohwSection ?? null,
+        sectionId: el ? el.dataset.ohwInstance ?? el.dataset.ohwSection ?? null : null,
         sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
       });
     },
@@ -7544,7 +7702,7 @@ function AiSectionOverlay({
   const selectFromElement = (0, import_react8.useCallback)(
     (el, options) => {
       const sectionEl = el?.closest("[data-ohw-section]") ?? null;
-      const id = sectionEl?.dataset.ohwSection ?? null;
+      const id = sectionEl ? sectionEl.dataset.ohwInstance ?? sectionEl.dataset.ohwSection ?? null : null;
       if (id === selectedIdRef.current) return;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
@@ -7565,12 +7723,15 @@ function AiSectionOverlay({
         selectFromElement(sectionEl);
         return sectionEl != null;
       },
-      clear: () => setSelectedId(null)
+      clear: () => {
+        setSelectedId(null);
+        report(null);
+      }
     };
     return () => {
       apiRef.current = null;
     };
-  }, [apiRef, selectFromElement]);
+  }, [apiRef, selectFromElement, report]);
   (0, import_react8.useEffect)(() => {
     const onMessage = (e) => {
       if (e.data?.type === "ow:ai-select" && e.data.sectionId === null) {
@@ -7587,7 +7748,7 @@ function AiSectionOverlay({
         setReviewId(found ? sectionId : null);
         postToParent2({ type: "ow:ai-review-started", sectionId, found });
         if (found) {
-          document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          document.querySelector(`[data-ohw-instance="${CSS.escape(sectionId)}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
         }
       }
     };
@@ -7606,7 +7767,7 @@ function AiSectionOverlay({
         return;
       }
       const sec = t.closest("[data-ohw-section]");
-      setHoveredId(sec?.dataset.ohwSection ?? null);
+      setHoveredId(sec ? sec.dataset.ohwInstance ?? sec.dataset.ohwSection ?? null : null);
     };
     const onLeave = () => setHoveredId(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -7638,9 +7799,30 @@ function AiSectionOverlay({
     },
     [postToParent2]
   );
-  const selectionRect = useLiveSectionRect(reviewId ? null : selectedId);
+  const activeSelectionId = reviewId ? null : selectedId;
+  const selectionRect = useLiveSectionRect(activeSelectionId);
   const reviewRect = useLiveSectionRect(reviewId);
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
+  (0, import_react8.useEffect)(() => {
+    const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
+    if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
+      postToParent2({ type: "ow:section-rect", instanceId: null, rect: null });
+      return;
+    }
+    const { isFirst, isLast } = computeSectionBoundaryFlags(activeSelectionId);
+    postToParent2({
+      type: "ow:section-rect",
+      instanceId: activeSelectionId,
+      rect: {
+        top: selectionRect.top + window.scrollY,
+        left: selectionRect.left + window.scrollX,
+        width: selectionRect.width,
+        height: selectionRect.height
+      },
+      isFirst,
+      isLast
+    });
+  }, [activeSelectionId, selectionRect, postToParent2]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     hoverRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "div",
@@ -7720,47 +7902,6 @@ function AiSectionOverlay({
   ] });
 }
 
-// src/lib/section-instances.ts
-var SECTION_ORDER_KEY = "__ohw_section_order";
-function getPageSectionOrderEntries(raw, currentPath) {
-  if (!raw) return [];
-  try {
-    const entries = JSON.parse(raw);
-    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
-  } catch {
-    return [];
-  }
-}
-function rekeySectionSubtree(root, instanceId) {
-  const suffix = `::${instanceId}`;
-  const rekey = (el, attr) => {
-    const current = el.getAttribute(attr);
-    if (current) el.setAttribute(attr, `${current}${suffix}`);
-  };
-  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
-  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
-  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
-  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
-}
-function initSectionInstancesFromContent(content, currentPath) {
-  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
-    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
-  });
-  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
-  for (const entry of entries) {
-    if (entry.instanceId === entry.type) continue;
-    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
-    const original = document.querySelector(
-      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
-    );
-    if (!original) continue;
-    const clone = original.cloneNode(true);
-    clone.setAttribute("data-ohw-instance", entry.instanceId);
-    rekeySectionSubtree(clone, entry.instanceId);
-    original.insertAdjacentElement("afterend", clone);
-  }
-}
-
 // src/OhhwellsBridge.tsx
 var import_react_dom4 = require("react-dom");
 var import_navigation3 = require("next/navigation");
@@ -12980,6 +13121,333 @@ function useNavItemDrag({
   };
 }
 
+// src/useSectionDrag.ts
+var import_react15 = require("react");
+
+// src/lib/section-dnd.ts
+function isFooterSection(el) {
+  return el.dataset.ohwSection === "footer";
+}
+function buildSectionDropSlots(draggedInstanceId) {
+  const sections = topLevelSections().filter(
+    (el) => instanceIdOf(el) !== draggedInstanceId && !isFooterSection(el)
+  );
+  const slots = [];
+  if (sections.length === 0) return slots;
+  const left = 0;
+  const width = document.documentElement.clientWidth;
+  for (let i = 0; i <= sections.length; i++) {
+    let y;
+    if (i === 0) {
+      y = sections[0].getBoundingClientRect().top;
+    } else if (i === sections.length) {
+      y = sections[sections.length - 1].getBoundingClientRect().bottom;
+    } else {
+      const prev = sections[i - 1].getBoundingClientRect();
+      const next = sections[i].getBoundingClientRect();
+      y = (prev.bottom + next.top) / 2;
+    }
+    slots.push({ insertIndex: i, y, left, width });
+  }
+  return slots;
+}
+function hitTestSectionDropSlot(y, slots) {
+  let best = null;
+  for (const slot of slots) {
+    const dist = Math.abs(y - slot.y);
+    if (!best || dist < best.dist) best = { slot, dist };
+  }
+  return best?.slot ?? null;
+}
+
+// src/useSectionDrag.ts
+var PRESS_THRESHOLD = 10;
+var EDGE_ZONE = 60;
+var MAX_AUTO_SCROLL_SPEED = 18;
+var SECTION_DRAG_EXCLUDED_SELECTOR = [
+  "[data-ohw-toolbar]",
+  "[data-ohw-edit-chrome]",
+  "[data-ohw-item-interaction]",
+  "[data-ohw-drag-handle-container]",
+  '[data-slot="drag-handle"]',
+  "[data-ohw-item-toolbar-anchor]",
+  "[data-ohw-item-drag-surface]",
+  "[data-ohw-more-menu]",
+  '[data-slot="dropdown-menu-content"]',
+  '[data-slot="dropdown-menu-item"]',
+  "[data-ohw-state-toggle]",
+  "[data-ohw-max-badge]",
+  "[data-ohw-floating-panel]",
+  "[data-ohw-section-picker]",
+  "[data-ohw-link-popover-root]",
+  "[data-ohw-link-modal-root]",
+  "[data-ohw-link-page-dropdown]",
+  '[data-slot="popover-content"]',
+  '[data-slot="dialog-content"]',
+  '[data-slot="dialog-overlay"]',
+  "[data-ohw-ai-review]",
+  "[data-ohw-editable]",
+  "[data-ohw-editable-state]",
+  "[contenteditable]",
+  "[data-ohw-href-key]",
+  "[data-ohw-footer-col]",
+  "[data-ohw-social-label]",
+  "a",
+  "button",
+  '[role="button"]',
+  '[data-ohw-role="navbar-button"]',
+  '[data-ohw-role="button"]',
+  "[data-ohw-carousel]",
+  "[data-ohw-carousel-value]",
+  "[data-ohw-carousel-slide]",
+  "[data-ohw-carousel-overlay]",
+  "[data-ohw-media-chrome]",
+  "[data-ohw-media-overlay]",
+  "[data-ohw-media-skeleton]"
+].join(", ");
+function visibleClip(ps) {
+  if (!ps) return null;
+  const top = Math.max(0, ps.headerH - ps.iframeOffsetTop);
+  const bottom = Math.min(window.innerHeight, ps.headerH + ps.canvasH - ps.iframeOffsetTop);
+  return { top, bottom: Math.max(top, bottom) };
+}
+function useSectionDrag({
+  isEditMode,
+  editContentRef,
+  postToParentRef,
+  parentScrollRef,
+  navDragRef,
+  footerDragRef,
+  suppressNextClickRef,
+  suppressClickUntilRef
+}) {
+  const sectionDragRef = (0, import_react15.useRef)(null);
+  const [sectionDropSlots, setSectionDropSlots] = (0, import_react15.useState)([]);
+  const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react15.useState)(null);
+  const [isSectionDragging, setIsSectionDragging] = (0, import_react15.useState)(false);
+  const sectionPointerDragRef = (0, import_react15.useRef)(null);
+  const autoScrollRafRef = (0, import_react15.useRef)(null);
+  const autoScrollDeltaRef = (0, import_react15.useRef)(0);
+  const stopAutoScroll = (0, import_react15.useCallback)(() => {
+    if (autoScrollRafRef.current != null) {
+      cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
+    }
+    autoScrollDeltaRef.current = 0;
+  }, []);
+  const tickAutoScroll = (0, import_react15.useCallback)(() => {
+    if (!sectionDragRef.current) {
+      stopAutoScroll();
+      return;
+    }
+    if (autoScrollDeltaRef.current !== 0) {
+      postToParentRef.current({ type: "ow:request-scroll", deltaY: autoScrollDeltaRef.current });
+    }
+    autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
+  }, [postToParentRef, stopAutoScroll]);
+  const updateAutoScroll = (0, import_react15.useCallback)(
+    (clientY) => {
+      const clip = visibleClip(parentScrollRef.current);
+      let delta = 0;
+      if (clip) {
+        const distTop = clientY - clip.top;
+        const distBottom = clip.bottom - clientY;
+        if (distTop >= 0 && distTop < EDGE_ZONE) {
+          delta = -MAX_AUTO_SCROLL_SPEED * (1 - distTop / EDGE_ZONE);
+        } else if (distBottom >= 0 && distBottom < EDGE_ZONE) {
+          delta = MAX_AUTO_SCROLL_SPEED * (1 - distBottom / EDGE_ZONE);
+        }
+      }
+      autoScrollDeltaRef.current = delta;
+      if (delta !== 0 && autoScrollRafRef.current == null) {
+        autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
+      } else if (delta === 0) {
+        stopAutoScroll();
+      }
+    },
+    [parentScrollRef, stopAutoScroll, tickAutoScroll]
+  );
+  const clearSectionDragVisuals = (0, import_react15.useCallback)(() => {
+    sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
+    sectionDragRef.current = null;
+    setSectionDropSlots([]);
+    setActiveSectionDropIndex(null);
+    setIsSectionDragging(false);
+    stopAutoScroll();
+    document.documentElement.removeAttribute("data-ohw-section-dragging-root");
+    unlockItemDragInteraction();
+  }, [stopAutoScroll]);
+  const refreshSectionDragVisuals = (0, import_react15.useCallback)(
+    (session, clientX, clientY) => {
+      session.lastClientX = clientX;
+      session.lastClientY = clientY;
+      const slots = buildSectionDropSlots(session.instanceId);
+      const activeSlot = hitTestSectionDropSlot(clientY, slots);
+      session.activeSlot = activeSlot;
+      setSectionDropSlots(slots);
+      const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
+      setActiveSectionDropIndex(activeIdx >= 0 ? activeIdx : null);
+      updateAutoScroll(clientY);
+    },
+    [updateAutoScroll]
+  );
+  const beginSectionDrag = (0, import_react15.useCallback)(
+    (session) => {
+      sectionDragRef.current = session;
+      setIsSectionDragging(true);
+      lockItemDuringDrag();
+      document.documentElement.setAttribute("data-ohw-section-dragging-root", "");
+      session.draggedEl.setAttribute("data-ohw-section-dragging", "");
+      refreshSectionDragVisuals(session, session.lastClientX, session.lastClientY);
+    },
+    [refreshSectionDragVisuals]
+  );
+  const commitSectionDrag = (0, import_react15.useCallback)(() => {
+    const session = sectionDragRef.current;
+    if (!session) {
+      clearSectionDragVisuals();
+      return;
+    }
+    const slot = session.activeSlot ?? hitTestSectionDropSlot(session.lastClientY, buildSectionDropSlots(session.instanceId));
+    const entries = slot ? planSectionMove(session.instanceId, slot.insertIndex, window.location.pathname) : null;
+    if (!entries) {
+      clearSectionDragVisuals();
+      return;
+    }
+    const orderJson = JSON.stringify(entries);
+    editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+    postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
+    applyPersistedOrder(entries);
+    clearSectionDragVisuals();
+    requestAnimationFrame(() => {
+      if (editContentRef.current[SECTION_ORDER_KEY] === orderJson) {
+        applyPersistedOrder(entries);
+      }
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event("resize"));
+      });
+    });
+  }, [clearSectionDragVisuals, editContentRef, postToParentRef]);
+  const startSectionPressDrag = (0, import_react15.useCallback)(
+    (el, clientX, clientY, pointerId) => {
+      if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
+      const instanceId = instanceIdOf(el);
+      if (!instanceId) return false;
+      sectionPointerDragRef.current = {
+        el,
+        instanceId,
+        startX: clientX,
+        startY: clientY,
+        pointerId,
+        started: false
+      };
+      return true;
+    },
+    [footerDragRef, navDragRef]
+  );
+  (0, import_react15.useEffect)(() => {
+    if (!isEditMode) return;
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return;
+      if (sectionPointerDragRef.current) return;
+      const target = e.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (target.closest(SECTION_DRAG_EXCLUDED_SELECTOR)) return;
+      const sectionEl = target.closest("[data-ohw-section]");
+      if (!sectionEl || isChromeSection(sectionEl) || sectionEl.dataset.ohwSection === "footer") return;
+      if (!topLevelSections().includes(sectionEl)) return;
+      startSectionPressDrag(sectionEl, e.clientX, e.clientY, e.pointerId);
+    };
+    const onPointerMove = (e) => {
+      const pending = sectionPointerDragRef.current;
+      if (!pending) return;
+      if (pending.started) {
+        e.preventDefault();
+        clearTextSelection();
+        const session = sectionDragRef.current;
+        if (!session) return;
+        refreshSectionDragVisuals(session, e.clientX, e.clientY);
+        return;
+      }
+      const dx = e.clientX - pending.startX;
+      const dy = e.clientY - pending.startY;
+      if (dx * dx + dy * dy < PRESS_THRESHOLD * PRESS_THRESHOLD) return;
+      e.preventDefault();
+      pending.started = true;
+      armItemPressDrag();
+      clearTextSelection();
+      try {
+        document.body.setPointerCapture(pending.pointerId);
+      } catch {
+      }
+      beginSectionDrag({
+        instanceId: pending.instanceId,
+        draggedEl: pending.el,
+        lastClientX: e.clientX,
+        lastClientY: e.clientY,
+        activeSlot: null
+      });
+    };
+    const endPointerDrag = (e) => {
+      const pending = sectionPointerDragRef.current;
+      sectionPointerDragRef.current = null;
+      try {
+        if (document.body.hasPointerCapture(e.pointerId)) {
+          document.body.releasePointerCapture(e.pointerId);
+        }
+      } catch {
+      }
+      if (!pending) return;
+      if (!pending.started) {
+        unlockItemDragInteraction();
+        return;
+      }
+      suppressNextClickRef.current = true;
+      suppressClickUntilRef.current = Date.now() + 500;
+      commitSectionDrag();
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      if (!sectionDragRef.current && !sectionPointerDragRef.current) return;
+      sectionPointerDragRef.current = null;
+      clearSectionDragVisuals();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("pointermove", onPointerMove, true);
+    document.addEventListener("pointerup", endPointerDrag, true);
+    document.addEventListener("pointercancel", endPointerDrag, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointermove", onPointerMove, true);
+      document.removeEventListener("pointerup", endPointerDrag, true);
+      document.removeEventListener("pointercancel", endPointerDrag, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      unlockItemDragInteraction();
+      stopAutoScroll();
+    };
+  }, [
+    beginSectionDrag,
+    clearSectionDragVisuals,
+    commitSectionDrag,
+    footerDragRef,
+    isEditMode,
+    navDragRef,
+    refreshSectionDragVisuals,
+    startSectionPressDrag,
+    stopAutoScroll,
+    suppressClickUntilRef,
+    suppressNextClickRef
+  ]);
+  return {
+    sectionDragRef,
+    sectionDropSlots,
+    activeSectionDropIndex,
+    isSectionDragging
+  };
+}
+
 // src/ui/footer-container-chrome.tsx
 var import_lucide_react15 = require("lucide-react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -13032,7 +13500,7 @@ function FooterContainerChrome({
 }
 
 // src/lib/carousel.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var CAROUSEL_ATTR = "data-ohw-carousel";
 var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
 var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
@@ -13094,8 +13562,8 @@ function applyCarouselNode(key, val) {
   return true;
 }
 function useOhwCarousel(key, initial) {
-  const [images, setImages] = (0, import_react15.useState)(initial);
-  (0, import_react15.useEffect)(() => {
+  const [images, setImages] = (0, import_react16.useState)(initial);
+  (0, import_react16.useEffect)(() => {
     const el = document.querySelector(
       `[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
     );
@@ -13177,6 +13645,7 @@ function collectEditableNodes(extraContent, root = document) {
       NAV_ORDER_KEY,
       FOOTER_ORDER_KEY,
       NAV_COUNT_KEY,
+      SECTION_ORDER_KEY,
       // A socials row's order and its icons-vs-words setting live under keys no element carries,
       // so collecting the DOM alone left them behind: the draft knew the row was showing icons and
       // had gained an item, and the published page went back to the template's own (OHH-736).
@@ -13641,6 +14110,7 @@ function fadeInImageElement(img, onReady) {
 function applyEditableImageSrc(img, url) {
   img.removeAttribute("srcset");
   img.removeAttribute("sizes");
+  if (img.loading === "lazy") img.loading = "eager";
   img.src = url;
 }
 function fadeInBgImage(el, url, onReady) {
@@ -14723,9 +15193,9 @@ function FloatingToolbar({
   showEditLink,
   onEditLink
 }) {
-  const localRef = import_react16.default.useRef(null);
-  const [measuredW, setMeasuredW] = import_react16.default.useState(330);
-  const setRefs = import_react16.default.useCallback(
+  const localRef = import_react17.default.useRef(null);
+  const [measuredW, setMeasuredW] = import_react17.default.useState(330);
+  const setRefs = import_react17.default.useCallback(
     (node) => {
       localRef.current = node;
       if (typeof elRef === "function") elRef(node);
@@ -14737,7 +15207,7 @@ function FloatingToolbar({
     },
     [elRef]
   );
-  import_react16.default.useLayoutEffect(() => {
+  import_react17.default.useLayoutEffect(() => {
     const node = localRef.current;
     if (!node) return;
     const update = () => {
@@ -14763,7 +15233,7 @@ function FloatingToolbar({
         pointerEvents: "auto"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react16.default.Fragment, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react17.default.Fragment, { children: [
           gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
@@ -14847,9 +15317,47 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
-function resolveSubdomain(subdomainFromQuery) {
-  if (subdomainFromQuery) return subdomainFromQuery;
-  if (typeof window !== "undefined") {
+var OHW_LOADER_STYLE = {
+  position: "fixed",
+  inset: 0,
+  background: "#fff",
+  zIndex: 2147483646,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+function OhwLoaderSpinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "circle",
+      {
+        cx: "14",
+        cy: "14",
+        r: "11",
+        stroke: "#1C1917",
+        strokeWidth: "3",
+        strokeDasharray: "17 52",
+        strokeLinecap: "round",
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            from: "0 14 14",
+            to: "360 14 14",
+            dur: "0.7s",
+            repeatCount: "indefinite"
+          }
+        )
+      }
+    )
+  ] });
+}
+var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=p.length>=3&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";if(!fromHost&&!fromQuery)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
+function resolveSubdomain(subdomainFromQuery) {
+  if (subdomainFromQuery) return subdomainFromQuery;
+  if (typeof window !== "undefined") {
     const parts = window.location.hostname.split(".");
     if (parts.length >= 3 && parts[0] !== "www") return parts[0];
   }
@@ -14869,8 +15377,8 @@ function OhhwellsBridge() {
   const router = (0, import_navigation3.useRouter)();
   const searchParams = (0, import_navigation3.useSearchParams)();
   const isEditMode = isEditSessionActive();
-  const [bridgeRoot, setBridgeRoot] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [bridgeRoot, setBridgeRoot] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
       const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
@@ -14899,82 +15407,82 @@ function OhhwellsBridge() {
   const subdomain = resolveSubdomain(subdomainFromQuery);
   useLinkHrefGuardian(pathname, subdomain, isEditMode);
   useSavedLinkNavigation(isEditMode);
-  const postToParent2 = (0, import_react16.useCallback)((data) => {
+  const postToParent2 = (0, import_react17.useCallback)((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
   }, []);
-  const [fetchState, setFetchState] = (0, import_react16.useState)("idle");
-  const autoSaveTimers = (0, import_react16.useRef)(/* @__PURE__ */ new Map());
-  const activeElRef = (0, import_react16.useRef)(null);
-  const pointerHeldRef = (0, import_react16.useRef)(false);
-  const selectedElRef = (0, import_react16.useRef)(null);
-  const selectedHrefKeyRef = (0, import_react16.useRef)(null);
-  const selectedFooterColAttrRef = (0, import_react16.useRef)(null);
-  const originalContentRef = (0, import_react16.useRef)(null);
-  const activeStateElRef = (0, import_react16.useRef)(null);
-  const parentScrollRef = (0, import_react16.useRef)(null);
-  const visibleViewportRef = (0, import_react16.useRef)(null);
-  const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react16.useState)(null);
-  const attachVisibleViewport = (0, import_react16.useCallback)((node) => {
+  const [fetchState, setFetchState] = (0, import_react17.useState)("idle");
+  const autoSaveTimers = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
+  const activeElRef = (0, import_react17.useRef)(null);
+  const pointerHeldRef = (0, import_react17.useRef)(false);
+  const selectedElRef = (0, import_react17.useRef)(null);
+  const selectedHrefKeyRef = (0, import_react17.useRef)(null);
+  const selectedFooterColAttrRef = (0, import_react17.useRef)(null);
+  const originalContentRef = (0, import_react17.useRef)(null);
+  const activeStateElRef = (0, import_react17.useRef)(null);
+  const parentScrollRef = (0, import_react17.useRef)(null);
+  const visibleViewportRef = (0, import_react17.useRef)(null);
+  const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react17.useState)(null);
+  const attachVisibleViewport = (0, import_react17.useCallback)((node) => {
     visibleViewportRef.current = node;
     setDialogPortalContainer(node);
     if (node) applyVisibleViewport(node, parentScrollRef.current);
   }, []);
-  const toolbarElRef = (0, import_react16.useRef)(null);
-  const glowElRef = (0, import_react16.useRef)(null);
-  const hoveredImageRef = (0, import_react16.useRef)(null);
-  const hoveredImageHasTextOverlapRef = (0, import_react16.useRef)(false);
-  const dragOverElRef = (0, import_react16.useRef)(null);
-  const [mediaHover, setMediaHover] = (0, import_react16.useState)(null);
-  const [carouselHover, setCarouselHover] = (0, import_react16.useState)(null);
-  const [uploadingRects, setUploadingRects] = (0, import_react16.useState)({});
-  const hoveredGapRef = (0, import_react16.useRef)(null);
-  const imageUnhoverTimerRef = (0, import_react16.useRef)(null);
-  const imageShowTimerRef = (0, import_react16.useRef)(null);
-  const editStylesRef = (0, import_react16.useRef)(null);
-  const activateRef = (0, import_react16.useRef)(() => {
+  const toolbarElRef = (0, import_react17.useRef)(null);
+  const glowElRef = (0, import_react17.useRef)(null);
+  const hoveredImageRef = (0, import_react17.useRef)(null);
+  const hoveredImageHasTextOverlapRef = (0, import_react17.useRef)(false);
+  const dragOverElRef = (0, import_react17.useRef)(null);
+  const [mediaHover, setMediaHover] = (0, import_react17.useState)(null);
+  const [carouselHover, setCarouselHover] = (0, import_react17.useState)(null);
+  const [uploadingRects, setUploadingRects] = (0, import_react17.useState)({});
+  const hoveredGapRef = (0, import_react17.useRef)(null);
+  const imageUnhoverTimerRef = (0, import_react17.useRef)(null);
+  const imageShowTimerRef = (0, import_react17.useRef)(null);
+  const editStylesRef = (0, import_react17.useRef)(null);
+  const activateRef = (0, import_react17.useRef)(() => {
   });
-  const deactivateRef = (0, import_react16.useRef)(() => {
+  const deactivateRef = (0, import_react17.useRef)(() => {
   });
-  const selectRef = (0, import_react16.useRef)(() => {
+  const selectRef = (0, import_react17.useRef)(() => {
   });
-  const selectFrameRef = (0, import_react16.useRef)(() => {
+  const selectFrameRef = (0, import_react17.useRef)(() => {
   });
-  const selectLogoRef = (0, import_react16.useRef)(() => {
+  const selectLogoRef = (0, import_react17.useRef)(() => {
   });
-  const openLogoSizePanelRef = (0, import_react16.useRef)(() => {
+  const openLogoSizePanelRef = (0, import_react17.useRef)(() => {
   });
-  const deselectRef = (0, import_react16.useRef)(() => {
+  const deselectRef = (0, import_react17.useRef)(() => {
   });
-  const closeFloatingPanelOnlyRef = (0, import_react16.useRef)(() => {
+  const closeFloatingPanelOnlyRef = (0, import_react17.useRef)(() => {
   });
-  const reselectNavigationItemRef = (0, import_react16.useRef)(() => {
+  const reselectNavigationItemRef = (0, import_react17.useRef)(() => {
   });
-  const commitNavigationTextEditRef = (0, import_react16.useRef)(() => {
+  const commitNavigationTextEditRef = (0, import_react17.useRef)(() => {
   });
-  const handleDeleteSelectedRef = (0, import_react16.useRef)(() => false);
-  const runPendingDeleteUndoRef = (0, import_react16.useRef)(() => false);
-  const isFooterFrameSelectionRef = (0, import_react16.useRef)(false);
-  const refreshActiveCommandsRef = (0, import_react16.useRef)(() => {
+  const handleDeleteSelectedRef = (0, import_react17.useRef)(() => false);
+  const runPendingDeleteUndoRef = (0, import_react17.useRef)(() => false);
+  const isFooterFrameSelectionRef = (0, import_react17.useRef)(false);
+  const refreshActiveCommandsRef = (0, import_react17.useRef)(() => {
   });
-  const postToParentRef = (0, import_react16.useRef)(postToParent2);
+  const postToParentRef = (0, import_react17.useRef)(postToParent2);
   postToParentRef.current = postToParent2;
-  const aiSectionApiRef = (0, import_react16.useRef)(null);
-  const sectionsLoadedRef = (0, import_react16.useRef)(false);
-  const pendingScheduleConfigRequests = (0, import_react16.useRef)([]);
-  const [toolbarRect, setToolbarRect] = (0, import_react16.useState)(null);
-  const [formPickRect, setFormPickRect] = (0, import_react16.useState)(null);
-  const formPickElRef = (0, import_react16.useRef)(null);
-  const [formViewState, setFormViewStateUi] = (0, import_react16.useState)("default");
-  const [formPickCount, setFormPickCount] = (0, import_react16.useState)(null);
-  const [formHoverRect, setFormHoverRect] = (0, import_react16.useState)(null);
-  const formHoverElRef = (0, import_react16.useRef)(null);
-  const [fieldPickRect, setFieldPickRect] = (0, import_react16.useState)(null);
-  const fieldPickElRef = (0, import_react16.useRef)(null);
-  const [fieldPickState, setFieldPickState] = (0, import_react16.useState)(null);
-  const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react16.useState)(false);
-  const clearFormPick = (0, import_react16.useCallback)(() => {
+  const aiSectionApiRef = (0, import_react17.useRef)(null);
+  const sectionsLoadedRef = (0, import_react17.useRef)(false);
+  const pendingScheduleConfigRequests = (0, import_react17.useRef)([]);
+  const [toolbarRect, setToolbarRect] = (0, import_react17.useState)(null);
+  const [formPickRect, setFormPickRect] = (0, import_react17.useState)(null);
+  const formPickElRef = (0, import_react17.useRef)(null);
+  const [formViewState, setFormViewStateUi] = (0, import_react17.useState)("default");
+  const [formPickCount, setFormPickCount] = (0, import_react17.useState)(null);
+  const [formHoverRect, setFormHoverRect] = (0, import_react17.useState)(null);
+  const formHoverElRef = (0, import_react17.useRef)(null);
+  const [fieldPickRect, setFieldPickRect] = (0, import_react17.useState)(null);
+  const fieldPickElRef = (0, import_react17.useRef)(null);
+  const [fieldPickState, setFieldPickState] = (0, import_react17.useState)(null);
+  const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react17.useState)(false);
+  const clearFormPick = (0, import_react17.useCallback)(() => {
     const form = formPickElRef.current;
     const editing = fieldPickElRef.current;
     if (commitPlaceholderEdit(editing) && editing) {
@@ -14994,7 +15502,7 @@ function OhhwellsBridge() {
     formPickElRef.current = null;
     setFormPickRect(null);
   }, []);
-  const clearFieldPick = (0, import_react16.useCallback)(() => {
+  const clearFieldPick = (0, import_react17.useCallback)(() => {
     const wrapper = fieldPickElRef.current;
     if (commitPlaceholderEdit(wrapper) && wrapper) {
       const form = wrapper.closest('[data-ohw-editable="form"]');
@@ -15004,9 +15512,9 @@ function OhhwellsBridge() {
     setFieldPickRect(null);
     setFieldPickState(null);
   }, []);
-  const persistFieldsRef = (0, import_react16.useRef)(() => {
+  const persistFieldsRef = (0, import_react17.useRef)(() => {
   });
-  const persistFields = (0, import_react16.useCallback)(
+  const persistFields = (0, import_react17.useCallback)(
     (form) => {
       const key = formKeyOf(form);
       if (!key) return;
@@ -15017,7 +15525,7 @@ function OhhwellsBridge() {
     []
   );
   persistFieldsRef.current = persistFields;
-  const selectField = (0, import_react16.useCallback)((wrapper) => {
+  const selectField = (0, import_react17.useCallback)((wrapper) => {
     if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
       commitPlaceholderEdit(fieldPickElRef.current);
     }
@@ -15030,7 +15538,7 @@ function OhhwellsBridge() {
     setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
     setFieldTypePickerOpen(false);
   }, []);
-  const withSelectedField = (0, import_react16.useCallback)(
+  const withSelectedField = (0, import_react17.useCallback)(
     (run) => {
       const wrapper = fieldPickElRef.current;
       const form = formPickElRef.current;
@@ -15043,28 +15551,28 @@ function OhhwellsBridge() {
     },
     [persistFields]
   );
-  const handleFieldTypeChange = (0, import_react16.useCallback)(
+  const handleFieldTypeChange = (0, import_react17.useCallback)(
     (type) => withSelectedField((_form, wrapper) => {
       applyFieldType(wrapper, type);
       selectField(wrapper);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldRequiredToggle = (0, import_react16.useCallback)(
+  const handleFieldRequiredToggle = (0, import_react17.useCallback)(
     () => withSelectedField((_form, wrapper) => {
       setFieldRequired(wrapper, !isFieldRequired(wrapper));
       selectField(wrapper);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldDuplicate = (0, import_react16.useCallback)(
+  const handleFieldDuplicate = (0, import_react17.useCallback)(
     () => withSelectedField((form, wrapper) => {
       const copy = duplicateField(form, wrapper);
       selectField(copy);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldDelete = (0, import_react16.useCallback)(
+  const handleFieldDelete = (0, import_react17.useCallback)(
     () => withSelectedField((_form, wrapper) => {
       removeField(wrapper);
       clearFieldPick();
@@ -15072,7 +15580,7 @@ function OhhwellsBridge() {
     }),
     [clearFieldPick, withSelectedField]
   );
-  const handleAddField = (0, import_react16.useCallback)(
+  const handleAddField = (0, import_react17.useCallback)(
     (type) => {
       const form = formPickElRef.current;
       if (!form) return;
@@ -15088,8 +15596,8 @@ function OhhwellsBridge() {
     },
     [persistFields, selectField]
   );
-  const fieldDragRef = (0, import_react16.useRef)(null);
-  const buildFieldDropSlots = (0, import_react16.useCallback)((form, draggedKey) => {
+  const fieldDragRef = (0, import_react17.useRef)(null);
+  const buildFieldDropSlots = (0, import_react17.useCallback)((form, draggedKey) => {
     const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
     const slots = others.map((el) => {
       const rect = el.getBoundingClientRect();
@@ -15102,7 +15610,7 @@ function OhhwellsBridge() {
     }
     return slots;
   }, []);
-  const handleFieldDragStart = (0, import_react16.useCallback)(() => {
+  const handleFieldDragStart = (0, import_react17.useCallback)(() => {
     const wrapper = fieldPickElRef.current;
     const form = formPickElRef.current;
     if (!wrapper || !form) return;
@@ -15111,18 +15619,18 @@ function OhhwellsBridge() {
     setFieldDragging(true);
     setFieldDropSlots(buildFieldDropSlots(form, key));
   }, [buildFieldDropSlots]);
-  const handleFieldDragEnd = (0, import_react16.useCallback)(() => {
+  const handleFieldDragEnd = (0, import_react17.useCallback)(() => {
     fieldDragRef.current = null;
     setFieldDropIndex(null);
     setFieldDropSlots([]);
     setFieldDragging(false);
   }, []);
-  const [fieldDropIndex, setFieldDropIndex] = (0, import_react16.useState)(null);
-  const [fieldDropSlots, setFieldDropSlots] = (0, import_react16.useState)([]);
-  const [fieldDragging, setFieldDragging] = (0, import_react16.useState)(false);
-  const clearFormPickRef = (0, import_react16.useRef)(clearFormPick);
+  const [fieldDropIndex, setFieldDropIndex] = (0, import_react17.useState)(null);
+  const [fieldDropSlots, setFieldDropSlots] = (0, import_react17.useState)([]);
+  const [fieldDragging, setFieldDragging] = (0, import_react17.useState)(false);
+  const clearFormPickRef = (0, import_react17.useRef)(clearFormPick);
   clearFormPickRef.current = clearFormPick;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = fieldPickElRef.current;
     if (!el || fieldPickRect === null) return;
     const observer = new ResizeObserver(() => {
@@ -15131,7 +15639,7 @@ function OhhwellsBridge() {
     observer.observe(el);
     return () => observer.disconnect();
   }, [fieldPickRect !== null, fieldPickState]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = formPickElRef.current;
     if (!el || formPickRect === null) return;
     const observer = new ResizeObserver(() => {
@@ -15140,25 +15648,25 @@ function OhhwellsBridge() {
     observer.observe(el);
     return () => observer.disconnect();
   }, [formPickRect !== null, formViewState]);
-  const [toolbarVariant, setToolbarVariant] = (0, import_react16.useState)("none");
-  const toolbarVariantRef = (0, import_react16.useRef)("none");
+  const [toolbarVariant, setToolbarVariant] = (0, import_react17.useState)("none");
+  const toolbarVariantRef = (0, import_react17.useRef)("none");
   toolbarVariantRef.current = toolbarVariant;
-  const [selectedIsCta, setSelectedIsCta] = (0, import_react16.useState)(false);
-  const [selectedIsSocial, setSelectedIsSocial] = (0, import_react16.useState)(false);
-  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react16.useState)(false);
-  const [reorderHrefKey, setReorderHrefKey] = (0, import_react16.useState)(null);
-  const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react16.useState)(false);
-  const [toggleState, setToggleState] = (0, import_react16.useState)(null);
-  const [maxBadge, setMaxBadge] = (0, import_react16.useState)(null);
-  const [activeCommands, setActiveCommands] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
-  const [sectionGap, setSectionGap] = (0, import_react16.useState)(null);
-  const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react16.useState)(false);
-  const hoveredNavContainerRef = (0, import_react16.useRef)(null);
-  const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react16.useState)(null);
-  const hoveredItemElRef = (0, import_react16.useRef)(null);
-  const [hoveredItemRect, setHoveredItemRect] = (0, import_react16.useState)(null);
-  const [hoveredTextRect, setHoveredTextRect] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [selectedIsCta, setSelectedIsCta] = (0, import_react17.useState)(false);
+  const [selectedIsSocial, setSelectedIsSocial] = (0, import_react17.useState)(false);
+  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react17.useState)(false);
+  const [reorderHrefKey, setReorderHrefKey] = (0, import_react17.useState)(null);
+  const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react17.useState)(false);
+  const [toggleState, setToggleState] = (0, import_react17.useState)(null);
+  const [maxBadge, setMaxBadge] = (0, import_react17.useState)(null);
+  const [activeCommands, setActiveCommands] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = (0, import_react17.useState)(null);
+  const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react17.useState)(false);
+  const hoveredNavContainerRef = (0, import_react17.useRef)(null);
+  const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react17.useState)(null);
+  const hoveredItemElRef = (0, import_react17.useRef)(null);
+  const [hoveredItemRect, setHoveredItemRect] = (0, import_react17.useState)(null);
+  const [hoveredTextRect, setHoveredTextRect] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     const sync = () => {
       const el = document.querySelector(
         '[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
@@ -15183,41 +15691,41 @@ function OhhwellsBridge() {
     });
     return () => observer.disconnect();
   }, []);
-  const siblingHintElRef = (0, import_react16.useRef)(null);
-  const [siblingHintRect, setSiblingHintRect] = (0, import_react16.useState)(null);
-  const [siblingHintRects, setSiblingHintRects] = (0, import_react16.useState)([]);
-  const [isItemDragging, setIsItemDragging] = (0, import_react16.useState)(false);
-  const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react16.useState)(false);
+  const siblingHintElRef = (0, import_react17.useRef)(null);
+  const [siblingHintRect, setSiblingHintRect] = (0, import_react17.useState)(null);
+  const [siblingHintRects, setSiblingHintRects] = (0, import_react17.useState)([]);
+  const [isItemDragging, setIsItemDragging] = (0, import_react17.useState)(false);
+  const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react17.useState)(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = (0, import_react16.useState)(null);
-  const floatingPanelOpenRef = (0, import_react16.useRef)(false);
+  const [floatingPanel, setFloatingPanel] = (0, import_react17.useState)(null);
+  const floatingPanelOpenRef = (0, import_react17.useRef)(false);
   floatingPanelOpenRef.current = floatingPanel !== null;
-  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react16.useState)(null);
-  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react16.useState)(null);
-  const [editorViewport, setEditorViewport] = (0, import_react16.useState)("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = (0, import_react16.useState)(null);
-  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react16.useState)(null);
-  const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react16.useState)(null);
-  const footerDragRef = (0, import_react16.useRef)(null);
-  const [footerDropSlots, setFooterDropSlots] = (0, import_react16.useState)([]);
-  const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react16.useState)(null);
-  const [draggedItemRect, setDraggedItemRect] = (0, import_react16.useState)(null);
-  const footerPointerDragRef = (0, import_react16.useRef)(null);
-  const suppressNextClickRef = (0, import_react16.useRef)(false);
-  const suppressClickUntilRef = (0, import_react16.useRef)(0);
-  const [linkPopover, setLinkPopover] = (0, import_react16.useState)(null);
-  const linkPopoverSessionRef = (0, import_react16.useRef)(null);
-  const addNavAfterAnchorRef = (0, import_react16.useRef)(null);
-  const editContentRef = (0, import_react16.useRef)({});
-  const aiSectionsRef = (0, import_react16.useRef)("");
-  const pendingDeleteUndoRef = (0, import_react16.useRef)(null);
-  const [sitePages, setSitePages] = (0, import_react16.useState)([]);
-  const [sectionsByPath, setSectionsByPath] = (0, import_react16.useState)({});
-  const sectionsPrefetchGenRef = (0, import_react16.useRef)(0);
-  const setLinkPopoverRef = (0, import_react16.useRef)(setLinkPopover);
-  const linkPopoverPanelRef = (0, import_react16.useRef)(null);
-  const linkPopoverOpenRef = (0, import_react16.useRef)(false);
-  const linkPopoverGraceUntilRef = (0, import_react16.useRef)(0);
+  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react17.useState)(null);
+  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react17.useState)(null);
+  const [editorViewport, setEditorViewport] = (0, import_react17.useState)("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = (0, import_react17.useState)(null);
+  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react17.useState)(null);
+  const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react17.useState)(null);
+  const footerDragRef = (0, import_react17.useRef)(null);
+  const [footerDropSlots, setFooterDropSlots] = (0, import_react17.useState)([]);
+  const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react17.useState)(null);
+  const [draggedItemRect, setDraggedItemRect] = (0, import_react17.useState)(null);
+  const footerPointerDragRef = (0, import_react17.useRef)(null);
+  const suppressNextClickRef = (0, import_react17.useRef)(false);
+  const suppressClickUntilRef = (0, import_react17.useRef)(0);
+  const [linkPopover, setLinkPopover] = (0, import_react17.useState)(null);
+  const linkPopoverSessionRef = (0, import_react17.useRef)(null);
+  const addNavAfterAnchorRef = (0, import_react17.useRef)(null);
+  const editContentRef = (0, import_react17.useRef)({});
+  const aiSectionsRef = (0, import_react17.useRef)("");
+  const pendingDeleteUndoRef = (0, import_react17.useRef)(null);
+  const [sitePages, setSitePages] = (0, import_react17.useState)([]);
+  const [sectionsByPath, setSectionsByPath] = (0, import_react17.useState)({});
+  const sectionsPrefetchGenRef = (0, import_react17.useRef)(0);
+  const setLinkPopoverRef = (0, import_react17.useRef)(setLinkPopover);
+  const linkPopoverPanelRef = (0, import_react17.useRef)(null);
+  const linkPopoverOpenRef = (0, import_react17.useRef)(false);
+  const linkPopoverGraceUntilRef = (0, import_react17.useRef)(0);
   setLinkPopoverRef.current = setLinkPopover;
   linkPopoverSessionRef.current = linkPopover;
   const {
@@ -15252,10 +15760,20 @@ function OhhwellsBridge() {
     getNavigationItemAnchor,
     isDragHandleDisabled
   });
+  const { sectionDropSlots, activeSectionDropIndex, isSectionDragging } = useSectionDrag({
+    isEditMode,
+    editContentRef,
+    postToParentRef,
+    parentScrollRef,
+    navDragRef,
+    footerDragRef,
+    suppressNextClickRef,
+    suppressClickUntilRef
+  });
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
   };
-  const runSectionsPrefetch = (0, import_react16.useCallback)((pages) => {
+  const runSectionsPrefetch = (0, import_react17.useCallback)((pages) => {
     if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
     const gen = ++sectionsPrefetchGenRef.current;
     const paths = pages.map((p) => p.path);
@@ -15274,9 +15792,9 @@ function OhhwellsBridge() {
       );
     });
   }, [isEditMode, pathname]);
-  const runSectionsPrefetchRef = (0, import_react16.useRef)(runSectionsPrefetch);
+  const runSectionsPrefetchRef = (0, import_react17.useRef)(runSectionsPrefetch);
   runSectionsPrefetchRef.current = runSectionsPrefetch;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!linkPopover) {
       document.documentElement.removeAttribute("data-ohw-link-popover-open");
       return;
@@ -15304,7 +15822,7 @@ function OhhwellsBridge() {
       document.documentElement.removeAttribute("data-ohw-link-popover-open");
     };
   }, [linkPopover, postToParent2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const useFixtures = shouldUseDevFixtures();
     if (useFixtures) {
@@ -15328,14 +15846,14 @@ function OhhwellsBridge() {
     if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
     return () => window.removeEventListener("message", onSitePages);
   }, [isEditMode, postToParent2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode || shouldUseDevFixtures()) return;
     void loadAllSectionsManifest().then((manifest) => {
       if (Object.keys(manifest).length === 0) return;
       setSectionsByPath((prev) => ({ ...manifest, ...prev }));
     });
   }, [isEditMode]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const update = () => {
       const el = activeElRef.current ?? selectedElRef.current;
       if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
@@ -15359,10 +15877,10 @@ function OhhwellsBridge() {
       vvp.removeEventListener("resize", update);
     };
   }, []);
-  const refreshStateRules = (0, import_react16.useCallback)(() => {
+  const refreshStateRules = (0, import_react17.useCallback)(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
-  const processConfigRequest = (0, import_react16.useCallback)((insertAfterVal) => {
+  const processConfigRequest = (0, import_react17.useCallback)((insertAfterVal) => {
     const tracker = getSectionsTracker();
     let entries = [];
     try {
@@ -15385,7 +15903,7 @@ function OhhwellsBridge() {
     }
     window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
   }, [isEditMode]);
-  const deactivate = (0, import_react16.useCallback)(() => {
+  const deactivate = (0, import_react17.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
     const isFormBlock = el.dataset.ohwEditable === "form";
@@ -15401,7 +15919,7 @@ function OhhwellsBridge() {
       const original = originalContentRef.current ?? "";
       if (html !== sanitizeHtml(original)) {
         postToParentRef.current({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }
     }
@@ -15426,12 +15944,12 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     postToParent2({ type: "ow:exit-edit" });
   }, [postToParent2]);
-  const clearSelectedAttr = (0, import_react16.useCallback)(() => {
+  const clearSelectedAttr = (0, import_react17.useCallback)(() => {
     document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
       el.removeAttribute("data-ohw-selected");
     });
   }, []);
-  const deselect = (0, import_react16.useCallback)(() => {
+  const deselect = (0, import_react17.useCallback)(() => {
     clearSelectedAttr();
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
@@ -15460,20 +15978,20 @@ function OhhwellsBridge() {
       setToolbarVariant("none");
     }
   }, [clearSelectedAttr]);
-  const markSelected = (0, import_react16.useCallback)((el) => {
+  const markSelected = (0, import_react17.useCallback)((el) => {
     clearSelectedAttr();
     el.removeAttribute("data-ohw-hovered");
     el.setAttribute("data-ohw-selected", "");
   }, [clearSelectedAttr]);
-  const isSelectedForHover = (0, import_react16.useCallback)((el) => {
+  const isSelectedForHover = (0, import_react17.useCallback)((el) => {
     if (!el) return false;
     return [selectedElRef.current, activeElRef.current].some(
       (busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
     );
   }, []);
-  const isSelectedForHoverRef = (0, import_react16.useRef)(isSelectedForHover);
+  const isSelectedForHoverRef = (0, import_react17.useRef)(isSelectedForHover);
   isSelectedForHoverRef.current = isSelectedForHover;
-  const resolveHrefKeyElement = (0, import_react16.useCallback)((hrefKey) => {
+  const resolveHrefKeyElement = (0, import_react17.useCallback)((hrefKey) => {
     if (isFooterHrefKey(hrefKey)) {
       return document.querySelector(
         `footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
@@ -15488,7 +16006,7 @@ function OhhwellsBridge() {
       `[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
     );
   }, []);
-  const resyncSelectedNavigationItem = (0, import_react16.useCallback)(() => {
+  const resyncSelectedNavigationItem = (0, import_react17.useCallback)(() => {
     const hrefKey = selectedHrefKeyRef.current;
     if (hrefKey) {
       const link = resolveHrefKeyElement(hrefKey);
@@ -15526,7 +16044,7 @@ function OhhwellsBridge() {
       );
     }
   }, [resolveHrefKeyElement]);
-  const reselectNavigationItem = (0, import_react16.useCallback)((navAnchor) => {
+  const reselectNavigationItem = (0, import_react17.useCallback)((navAnchor) => {
     selectedElRef.current = navAnchor;
     selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
@@ -15557,7 +16075,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [markSelected]);
-  const commitNavigationTextEdit = (0, import_react16.useCallback)((navAnchor) => {
+  const commitNavigationTextEdit = (0, import_react17.useCallback)((navAnchor) => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -15571,7 +16089,7 @@ function OhhwellsBridge() {
       const original = originalContentRef.current ?? "";
       if (html !== sanitizeHtml(original)) {
         postToParent2({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParent2({ type: "ow:height", height: h });
       }
     }
@@ -15590,7 +16108,7 @@ function OhhwellsBridge() {
     postToParent2({ type: "ow:exit-edit" });
     reselectNavigationItem(navAnchor);
   }, [postToParent2, reselectNavigationItem]);
-  const handleAddTopLevelNavItem = (0, import_react16.useCallback)(() => {
+  const handleAddTopLevelNavItem = (0, import_react17.useCallback)(() => {
     const items = listNavbarRootItems();
     addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
     deselectRef.current();
@@ -15602,7 +16120,7 @@ function OhhwellsBridge() {
       intent: "add-nav"
     });
   }, []);
-  const maybeWarnNavLinkDropdownConflict = (0, import_react16.useCallback)(
+  const maybeWarnNavLinkDropdownConflict = (0, import_react17.useCallback)(
     (anchor) => {
       if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
       if (!navDropdownsOpenOnClick()) return;
@@ -15615,7 +16133,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const handleNavDropdownOpenChange = (0, import_react16.useCallback)((open) => {
+  const handleNavDropdownOpenChange = (0, import_react17.useCallback)((open) => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
     setNavGroupForceOpen(selected, open);
@@ -15627,7 +16145,7 @@ function OhhwellsBridge() {
       }
     });
   }, []);
-  const handleFooterHeadingVisibleChange = (0, import_react16.useCallback)(
+  const handleFooterHeadingVisibleChange = (0, import_react17.useCallback)(
     (visible) => {
       const selected = selectedElRef.current;
       if (!selected || !isFooterFrameSelectionRef.current) return;
@@ -15651,7 +16169,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const enterEditOnNewItem = (0, import_react16.useCallback)((anchor) => {
+  const enterEditOnNewItem = (0, import_react17.useCallback)((anchor) => {
     const label = anchor.querySelector('[data-ohw-editable="text"]');
     if (!label) {
       selectRef.current(anchor);
@@ -15660,8 +16178,8 @@ function OhhwellsBridge() {
     setNavGroupForceOpen(anchor, true);
     activateRef.current(label);
   }, []);
-  const pendingSocialAddRef = (0, import_react16.useRef)(null);
-  const handleAddChildItem = (0, import_react16.useCallback)(() => {
+  const pendingSocialAddRef = (0, import_react17.useRef)(null);
+  const handleAddChildItem = (0, import_react17.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
     const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
@@ -15770,7 +16288,7 @@ function OhhwellsBridge() {
       enterEditOnNewItem(result.anchor);
     });
   }, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
-  const handleAddFooterColumn = (0, import_react16.useCallback)(() => {
+  const handleAddFooterColumn = (0, import_react17.useCallback)(() => {
     if (!canAddFooterColumn()) {
       postToParent2({
         type: "ow:toast",
@@ -15791,7 +16309,7 @@ function OhhwellsBridge() {
       selectRef.current(result.firstLink);
     });
   }, [postToParent2]);
-  const clearFooterDragVisuals = (0, import_react16.useCallback)(() => {
+  const clearFooterDragVisuals = (0, import_react17.useCallback)(() => {
     footerDragRef.current = null;
     setSiblingHintRects([]);
     setFooterDropSlots([]);
@@ -15800,7 +16318,7 @@ function OhhwellsBridge() {
     setIsItemDragging(false);
     unlockFooterDragInteraction();
   }, []);
-  const refreshFooterDragVisuals = (0, import_react16.useCallback)((session, activeSlot, clientX, clientY) => {
+  const refreshFooterDragVisuals = (0, import_react17.useCallback)((session, activeSlot, clientX, clientY) => {
     const dragged = session.draggedEl;
     setDraggedItemRect(dragged.getBoundingClientRect());
     if (typeof clientX === "number" && typeof clientY === "number") {
@@ -15832,13 +16350,13 @@ function OhhwellsBridge() {
     const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
     setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
   }, []);
-  const refreshFooterDragVisualsRef = (0, import_react16.useRef)(refreshFooterDragVisuals);
+  const refreshFooterDragVisualsRef = (0, import_react17.useRef)(refreshFooterDragVisuals);
   refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
-  const commitFooterDragRef = (0, import_react16.useRef)(() => {
+  const commitFooterDragRef = (0, import_react17.useRef)(() => {
   });
-  const beginFooterDragRef = (0, import_react16.useRef)(() => {
+  const beginFooterDragRef = (0, import_react17.useRef)(() => {
   });
-  const beginFooterDrag = (0, import_react16.useCallback)(
+  const beginFooterDrag = (0, import_react17.useCallback)(
     (session) => {
       const rect = session.draggedEl.getBoundingClientRect();
       session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
@@ -15858,7 +16376,7 @@ function OhhwellsBridge() {
     [refreshFooterDragVisuals]
   );
   beginFooterDragRef.current = beginFooterDrag;
-  const commitFooterDrag = (0, import_react16.useCallback)(
+  const commitFooterDrag = (0, import_react17.useCallback)(
     (clientX, clientY) => {
       const session = footerDragRef.current;
       if (!session) {
@@ -15987,7 +16505,7 @@ function OhhwellsBridge() {
     [clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
   );
   commitFooterDragRef.current = commitFooterDrag;
-  const startFooterLinkDrag = (0, import_react16.useCallback)(
+  const startFooterLinkDrag = (0, import_react17.useCallback)(
     (anchor, clientX, clientY, wasSelected) => {
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
       if (!hrefKey) return false;
@@ -16023,7 +16541,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const startFooterColumnDrag = (0, import_react16.useCallback)(
+  const startFooterColumnDrag = (0, import_react17.useCallback)(
     (columnEl, clientX, clientY, wasSelected) => {
       const columns = listFooterColumns();
       const idx = columns.indexOf(columnEl);
@@ -16043,7 +16561,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const handleItemDragStart = (0, import_react16.useCallback)(
+  const handleItemDragStart = (0, import_react17.useCallback)(
     (e) => {
       const selected = selectedElRef.current;
       if (!selected) {
@@ -16063,7 +16581,7 @@ function OhhwellsBridge() {
     },
     [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
   );
-  const handleItemDragEnd = (0, import_react16.useCallback)(
+  const handleItemDragEnd = (0, import_react17.useCallback)(
     (e) => {
       if (footerDragRef.current) {
         const x = e?.clientX;
@@ -16089,7 +16607,7 @@ function OhhwellsBridge() {
     },
     [commitFooterDrag, commitNavDrag, navDragRef]
   );
-  const handleItemChromePointerDown = (0, import_react16.useCallback)((e) => {
+  const handleItemChromePointerDown = (0, import_react17.useCallback)((e) => {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
@@ -16120,7 +16638,7 @@ function OhhwellsBridge() {
     }
     if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
   }, [armNavPressFromChrome]);
-  const handleItemChromeClick = (0, import_react16.useCallback)((clientX, clientY) => {
+  const handleItemChromeClick = (0, import_react17.useCallback)((clientX, clientY) => {
     if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
       suppressNextClickRef.current = false;
       return;
@@ -16133,7 +16651,7 @@ function OhhwellsBridge() {
   }, []);
   reselectNavigationItemRef.current = reselectNavigationItem;
   commitNavigationTextEditRef.current = commitNavigationTextEdit;
-  const select = (0, import_react16.useCallback)((anchor) => {
+  const select = (0, import_react17.useCallback)((anchor) => {
     if (!isNavigationItem2(anchor)) return;
     if (activeElRef.current) deactivate();
     aiSectionApiRef.current?.selectFromElement(anchor);
@@ -16176,7 +16694,7 @@ function OhhwellsBridge() {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
   }, [deactivate, markSelected]);
-  const selectFrame = (0, import_react16.useCallback)((el) => {
+  const selectFrame = (0, import_react17.useCallback)((el) => {
     if (!isNavigationContainer(el)) return;
     if (activeElRef.current) deactivate();
     aiSectionApiRef.current?.selectFromElement(el);
@@ -16227,7 +16745,7 @@ function OhhwellsBridge() {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
   }, [deactivate, markSelected, postToParent2]);
-  const selectLogo = (0, import_react16.useCallback)(
+  const selectLogo = (0, import_react17.useCallback)(
     (logoEl) => {
       if (activeElRef.current) deactivate();
       selectedElRef.current = logoEl;
@@ -16256,7 +16774,7 @@ function OhhwellsBridge() {
     },
     [deactivate, markSelected]
   );
-  const openLogoSizePanel = (0, import_react16.useCallback)((logoEl) => {
+  const openLogoSizePanel = (0, import_react17.useCallback)((logoEl) => {
     const placement = getLogoPlacement(logoEl);
     const draft = readLogoSizeState(editContentRef.current, placement);
     setLogoSizeDraft(draft);
@@ -16269,7 +16787,7 @@ function OhhwellsBridge() {
       placement
     });
   }, []);
-  const openSocialsDisplayPanel = (0, import_react16.useCallback)((row) => {
+  const openSocialsDisplayPanel = (0, import_react17.useCallback)((row) => {
     setParentScrollSnap(parentScrollRef.current);
     setFloatingPanel({
       key: "socials-display",
@@ -16279,11 +16797,11 @@ function OhhwellsBridge() {
       row
     });
   }, []);
-  const isEditModeRef = (0, import_react16.useRef)(false);
-  const requestMissingSocialIconsRef = (0, import_react16.useRef)(() => {
+  const isEditModeRef = (0, import_react17.useRef)(false);
+  const requestMissingSocialIconsRef = (0, import_react17.useRef)(() => {
   });
-  const askedSocialIconsRef = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
-  const requestMissingSocialIcons = (0, import_react16.useCallback)(() => {
+  const askedSocialIconsRef = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
+  const requestMissingSocialIcons = (0, import_react17.useCallback)(() => {
     const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
       const missing = socialsMissingIcons(row);
       listSocialItems(row).forEach((item) => ensureIconSlot(item));
@@ -16295,7 +16813,7 @@ function OhhwellsBridge() {
   }, []);
   requestMissingSocialIconsRef.current = requestMissingSocialIcons;
   isEditModeRef.current = isEditMode;
-  const changeSocialsDisplay = (0, import_react16.useCallback)(
+  const changeSocialsDisplay = (0, import_react17.useCallback)(
     (row, next) => {
       if (next.icon) {
         const missing = socialsMissingIcons(row);
@@ -16319,17 +16837,17 @@ function OhhwellsBridge() {
     },
     []
   );
-  const closeFloatingPanelOnly = (0, import_react16.useCallback)(() => {
+  const closeFloatingPanelOnly = (0, import_react17.useCallback)(() => {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
   }, []);
   closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
-  const closeFloatingPanelAndDeselect = (0, import_react16.useCallback)(() => {
+  const closeFloatingPanelAndDeselect = (0, import_react17.useCallback)(() => {
     setFloatingPanel(null);
     setLogoSizeDraft(null);
     deselectRef.current();
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
     if (!session || !logoSizeDraft) {
       postToParentRef.current({ type: "ow:logo-size-panel", open: false });
@@ -16348,7 +16866,7 @@ function OhhwellsBridge() {
       max: LOGO_SIZE_MAX
     });
   }, [floatingPanel, logoSizeDraft, editorViewport]);
-  const persistLogoSizeDraft = (0, import_react16.useCallback)(
+  const persistLogoSizeDraft = (0, import_react17.useCallback)(
     (placement, draft) => {
       const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
       const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
@@ -16388,7 +16906,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const activate = (0, import_react16.useCallback)((el, options) => {
+  const activate = (0, import_react17.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
     document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
       hovered.removeAttribute("data-ohw-hovered");
@@ -16486,8 +17004,8 @@ function OhhwellsBridge() {
   openLogoSizePanelRef.current = openLogoSizePanel;
   deselectRef.current = deselect;
   closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
-  const lastSiteWideScopeRef = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const lastSiteWideScopeRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) {
       if (lastSiteWideScopeRef.current !== false) {
         lastSiteWideScopeRef.current = false;
@@ -16513,7 +17031,7 @@ function OhhwellsBridge() {
     isFooterFrameSelection,
     postToParent2
   ]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (!subdomain || isEditMode) {
       setFetchState("done");
       return;
@@ -16607,7 +17125,7 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const resolveIndex = (form, clientY) => {
       const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
@@ -16648,7 +17166,7 @@ function OhhwellsBridge() {
       window.removeEventListener("drop", onDrop, true);
     };
   }, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
       markFormFields(form);
@@ -16660,7 +17178,7 @@ function OhhwellsBridge() {
     });
     return () => observer.disconnect();
   }, [isEditMode, fetchState, pathname]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     let saveTimer = null;
     const onInput = (e) => {
@@ -16682,14 +17200,14 @@ function OhhwellsBridge() {
     document.addEventListener("input", onInput, true);
     return () => document.removeEventListener("input", onInput, true);
   }, [isEditMode, persistFields]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isEditMode || fetchState !== "done") return;
     const content = contentCache.get(subdomain) ?? {};
     document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
       reconcileFieldsFromContent(form, content);
     });
   }, [isEditMode, fetchState, subdomain]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const swallow = (e) => {
       const target = e.target;
@@ -16698,12 +17216,12 @@ function OhhwellsBridge() {
     document.addEventListener("submit", swallow, true);
     return () => document.removeEventListener("submit", swallow, true);
   }, [isEditMode]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (isEditMode || fetchState !== "done") return;
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
   }, [isEditMode, fetchState, subdomain]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!subdomain || isEditMode) return;
     let debounceTimer = null;
     let observer = null;
@@ -16770,16 +17288,16 @@ function OhhwellsBridge() {
       if (debounceTimer) clearTimeout(debounceTimer);
     };
   }, [subdomain, isEditMode, pathname]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     const el = document.getElementById("ohw-loader");
     if (!el) return;
     const visible = Boolean(subdomain) && fetchState !== "done";
     el.style.display = visible ? "flex" : "none";
   }, [subdomain, fetchState]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     postToParent2({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     if (linkPopoverSessionRef.current?.intent === "add-nav") return;
     if (document.querySelector("[data-ohw-section-picker]")) return;
@@ -16787,7 +17305,7 @@ function OhhwellsBridge() {
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
       if (!subdomain) return {};
@@ -16856,7 +17374,7 @@ function OhhwellsBridge() {
       observer?.disconnect();
     };
   }, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const measure = () => {
       const h = document.body.scrollHeight;
@@ -16884,7 +17402,7 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!subdomainFromQuery || isEditMode) return;
     const handleClick = (e) => {
       const anchor = e.target.closest("a");
@@ -16900,7 +17418,7 @@ function OhhwellsBridge() {
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [subdomainFromQuery, isEditMode, router]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) {
       editStylesRef.current?.base.remove();
       editStylesRef.current?.forceHover.remove();
@@ -17284,6 +17802,14 @@ function OhhwellsBridge() {
         }
         const clickedButton = findClosestButtonLike(target);
         const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
+        console.log("[click-debug]", {
+          editableType: editable.dataset.ohwEditable,
+          editableTag: editable.tagName,
+          targetTag: target.tagName,
+          clickedButtonTag: clickedButton?.tagName ?? null,
+          buttonOnMedia,
+          isMediaEditableEditable: isMediaEditable(editable)
+        });
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
@@ -17307,6 +17833,11 @@ function OhhwellsBridge() {
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
+        console.log("[click-debug 2]", {
+          hrefLookupTargetTag: hrefLookupTarget.tagName,
+          hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
+          navAnchorTag: navAnchor?.tagName ?? null
+        });
         if (navAnchor) {
           e.preventDefault();
           e.stopPropagation();
@@ -18548,7 +19079,7 @@ function OhhwellsBridge() {
       timers.set(key, setTimeout(() => {
         timers.delete(key);
         postToParentRef.current({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }, 400));
     };
@@ -18602,7 +19133,7 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
       enforceLinkHrefs();
-      const hydratedHeight = document.documentElement.scrollHeight;
+      const hydratedHeight = document.body.scrollHeight;
       if (hydratedHeight > 50) postToParentRef.current({ type: "ow:height", height: hydratedHeight });
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
@@ -18675,7 +19206,7 @@ function OhhwellsBridge() {
       const nextValue = serializeAiSectionsState(nextState);
       aiSectionsRef.current = nextValue;
       applyAiSectionsToDom(nextState);
-      const newHeight = document.documentElement.scrollHeight;
+      const newHeight = document.body.scrollHeight;
       if (newHeight > 50) postToParentRef.current({ type: "ow:height", height: newHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: nextValue }] });
       const appliedEl = document.querySelector(`[data-ohw-section="${CSS.escape(payload.id)}"]`);
@@ -18697,7 +19228,7 @@ function OhhwellsBridge() {
       const nextValue = serializeAiSectionsState(nextState);
       aiSectionsRef.current = nextValue;
       applyAiSectionsToDom(nextState);
-      const newHeight = document.documentElement.scrollHeight;
+      const newHeight = document.body.scrollHeight;
       if (newHeight > 50) postToParentRef.current({ type: "ow:height", height: newHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: nextValue }] });
       postToParentRef.current({ type: "ow:ai-section-deleted", sectionId, previous, value: nextValue });
@@ -18709,18 +19240,73 @@ function OhhwellsBridge() {
       const value = typeof e.data.value === "string" ? e.data.value : "";
       aiSectionsRef.current = value;
       applyAiSectionsToDom(parseAiSectionsState(value));
-      const restoredHeight = document.documentElement.scrollHeight;
+      const restoredHeight = document.body.scrollHeight;
       if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
       postAiSectionsChanged();
     };
     window.addEventListener("message", handleAiSetSections);
+    const handleMoveSection = (e) => {
+      if (e.data?.type !== "ow:move-section") return;
+      const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
+      const direction = e.data.direction === "up" || e.data.direction === "down" ? e.data.direction : null;
+      if (!instanceId || !direction) return;
+      const entries = moveSectionInstance(instanceId, direction, window.location.pathname);
+      if (!entries) return;
+      const orderJson = JSON.stringify(entries);
+      editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
+      window.dispatchEvent(new Event("resize"));
+    };
+    window.addEventListener("message", handleMoveSection);
     const handlePanelDragging = (e) => {
       if (e.data?.type !== "ow:panel-dragging") return;
       if (e.data.dragging) document.documentElement.setAttribute("data-ohw-panel-dragging", "");
       else document.documentElement.removeAttribute("data-ohw-panel-dragging");
     };
     window.addEventListener("message", handlePanelDragging);
+    const handleDeleteSection = (e) => {
+      if (e.data?.type !== "ow:delete-section") return;
+      const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
+      if (!instanceId) return;
+      const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname);
+      const entries = deleteSectionInstance(instanceId, window.location.pathname, currentEntries);
+      if (!entries) return;
+      const orderJson = JSON.stringify(entries);
+      editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
+      aiSectionApiRef.current?.clear();
+      window.dispatchEvent(new Event("resize"));
+      const deleteHeight = document.body.scrollHeight;
+      if (deleteHeight > 50) postToParentRef.current({ type: "ow:height", height: deleteHeight });
+      const actionId = newInstanceId();
+      pendingDeleteUndoRef.current = {
+        actionId,
+        restore: () => {
+          const restoredEntries = getPageSectionOrderEntries(
+            editContentRef.current[SECTION_ORDER_KEY],
+            window.location.pathname
+          );
+          const restored = restoreSectionInstance(instanceId, window.location.pathname, restoredEntries);
+          if (!restored) return;
+          const restoredJson = JSON.stringify(restored);
+          editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: restoredJson };
+          postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: restoredJson }] });
+          window.dispatchEvent(new Event("resize"));
+          const restoreHeight = document.body.scrollHeight;
+          if (restoreHeight > 50) postToParentRef.current({ type: "ow:height", height: restoreHeight });
+        }
+      };
+      postToParentRef.current({
+        type: "ow:toast",
+        title: "Section deleted",
+        toastType: "success",
+        actionLabel: "Undo",
+        actionId,
+        duration: 6e3
+      });
+    };
+    window.addEventListener("message", handleDeleteSection);
     const handleDeactivate = (e) => {
       if (e.data?.type !== "ow:deactivate") return;
       if (document.documentElement.hasAttribute("data-ohw-panel-dragging")) return;
@@ -18993,7 +19579,7 @@ function OhhwellsBridge() {
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }
     };
@@ -19035,7 +19621,7 @@ function OhhwellsBridge() {
       const updated = sections.filter((s) => !(s.type === "scheduling" && s.pagePath === currentPath));
       tracker.textContent = JSON.stringify(updated);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
-      const h = document.documentElement.scrollHeight;
+      const h = document.body.scrollHeight;
       if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
     const handleCollectSection = (e) => {
@@ -19390,7 +19976,9 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiApplyTree);
       window.removeEventListener("message", handleAiDeleteSection);
       window.removeEventListener("message", handleAiSetSections);
+      window.removeEventListener("message", handleMoveSection);
       window.removeEventListener("message", handlePanelDragging);
+      window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDeactivate);
       document.documentElement.removeAttribute("data-ohw-panel-dragging");
       window.removeEventListener("message", handleToastAction);
@@ -19402,7 +19990,7 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const THRESHOLD = 10;
     const resolveWasSelected = (el) => {
@@ -19558,7 +20146,7 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
       const insertAfterVal = e.data.insertAfter;
@@ -19574,7 +20162,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
   }, [processConfigRequest]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
       el.removeAttribute("data-ohw-active-state");
@@ -19598,7 +20186,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.74",
+        bridgeVersion: "0.1.75",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -19610,13 +20198,13 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     scrollToHashSectionWhenReady();
     const onHashChange = () => scrollToHashSectionWhenReady();
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
-  const handleCommand = (0, import_react16.useCallback)((cmd) => {
+  const handleCommand = (0, import_react17.useCallback)((cmd) => {
     const el = activeElRef.current;
     const selBefore = window.getSelection();
     let savedOffsets = null;
@@ -19652,7 +20240,7 @@ function OhhwellsBridge() {
     if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
     if (!session || !logoSizeDraft) return;
     const onPanelAction = (e) => {
@@ -19690,7 +20278,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", onPanelAction);
     return () => window.removeEventListener("message", onPanelAction);
   }, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
-  const handleStateChange = (0, import_react16.useCallback)((state) => {
+  const handleStateChange = (0, import_react17.useCallback)((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
     if (state === "Default") {
@@ -19703,7 +20291,7 @@ function OhhwellsBridge() {
     }
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
-  const reselectAfterLinkPopover = (0, import_react16.useCallback)(
+  const reselectAfterLinkPopover = (0, import_react17.useCallback)(
     (hrefKey) => {
       requestAnimationFrame(() => {
         const el = resolveHrefKeyElement(hrefKey);
@@ -19712,7 +20300,7 @@ function OhhwellsBridge() {
     },
     [resolveHrefKeyElement]
   );
-  const closeLinkPopover = (0, import_react16.useCallback)(() => {
+  const closeLinkPopover = (0, import_react17.useCallback)(() => {
     const session = linkPopoverSessionRef.current;
     addNavAfterAnchorRef.current = null;
     setLinkPopover(null);
@@ -19720,9 +20308,9 @@ function OhhwellsBridge() {
       reselectAfterLinkPopover(session.key);
     }
   }, [reselectAfterLinkPopover]);
-  const closeLinkPopoverRef = (0, import_react16.useRef)(closeLinkPopover);
+  const closeLinkPopoverRef = (0, import_react17.useRef)(closeLinkPopover);
   closeLinkPopoverRef.current = closeLinkPopover;
-  const openLinkPopoverForActive = (0, import_react16.useCallback)(() => {
+  const openLinkPopoverForActive = (0, import_react17.useCallback)(() => {
     const hrefCtx = getHrefKeyFromElement(activeElRef.current);
     if (!hrefCtx) return;
     bumpLinkPopoverGrace();
@@ -19733,7 +20321,7 @@ function OhhwellsBridge() {
     });
     deactivate();
   }, [deactivate]);
-  const openLinkPopoverForSelected = (0, import_react16.useCallback)(() => {
+  const openLinkPopoverForSelected = (0, import_react17.useCallback)(() => {
     const anchor = selectedElRef.current;
     if (!anchor) return;
     const key = anchor.getAttribute("data-ohw-href-key");
@@ -19750,7 +20338,7 @@ function OhhwellsBridge() {
     });
     deselect();
   }, [deselect]);
-  const handleSelectParent = (0, import_react16.useCallback)(() => {
+  const handleSelectParent = (0, import_react17.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
     if (toolbarVariantRef.current === "select-frame") {
@@ -19777,7 +20365,7 @@ function OhhwellsBridge() {
     }
     deselectRef.current();
   }, []);
-  const handleDuplicateSelected = (0, import_react16.useCallback)(() => {
+  const handleDuplicateSelected = (0, import_react17.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
     const hrefKey = selected.getAttribute("data-ohw-href-key");
@@ -19910,7 +20498,7 @@ function OhhwellsBridge() {
       });
     }
   }, [postToParent2]);
-  const runPendingDeleteUndo = (0, import_react16.useCallback)(() => {
+  const runPendingDeleteUndo = (0, import_react17.useCallback)(() => {
     const pending = pendingDeleteUndoRef.current;
     if (!pending) return false;
     pendingDeleteUndoRef.current = null;
@@ -19918,7 +20506,7 @@ function OhhwellsBridge() {
     enforceLinkHrefs();
     return true;
   }, []);
-  const handleDeleteSelected = (0, import_react16.useCallback)(() => {
+  const handleDeleteSelected = (0, import_react17.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return false;
     return deleteSelectedNavFooterItem({
@@ -19939,7 +20527,7 @@ function OhhwellsBridge() {
   }, [postToParent2]);
   handleDeleteSelectedRef.current = handleDeleteSelected;
   runPendingDeleteUndoRef.current = runPendingDeleteUndo;
-  const handleLinkPopoverSubmit = (0, import_react16.useCallback)(
+  const handleLinkPopoverSubmit = (0, import_react17.useCallback)(
     (target) => {
       const session = linkPopoverSessionRef.current;
       if (!session) return;
@@ -20005,19 +20593,19 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
-  const handleMediaReplace = (0, import_react16.useCallback)(
+  const handleMediaReplace = (0, import_react17.useCallback)(
     (key) => {
       postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
     },
     [postToParent2, mediaHover?.elementType]
   );
-  const handleEditCarousel = (0, import_react16.useCallback)(
+  const handleEditCarousel = (0, import_react17.useCallback)(
     (key) => {
       postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
     },
     [postToParent2]
   );
-  const handleMediaFadeOutComplete = (0, import_react16.useCallback)((key) => {
+  const handleMediaFadeOutComplete = (0, import_react17.useCallback)((key) => {
     setUploadingRects((prev) => {
       if (!(key in prev)) return prev;
       const next = { ...prev };
@@ -20025,7 +20613,7 @@ function OhhwellsBridge() {
       return next;
     });
   }, []);
-  const handleVideoSettingsChange = (0, import_react16.useCallback)(
+  const handleVideoSettingsChange = (0, import_react17.useCallback)(
     (key, settings) => {
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const video = getVideoEl2(el);
@@ -20047,430 +20635,450 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  return bridgeRoot ? (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
-      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        MediaOverlay,
-        {
-          hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
-          isUploading: true,
-          fadingOut,
-          onFadeOutComplete: handleMediaFadeOutComplete,
-          onReplace: handleMediaReplace
-        },
-        `uploading-${key}`
-      )),
-      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        MediaOverlay,
-        {
-          hover: mediaHover,
-          isUploading: false,
-          onReplace: handleMediaReplace,
-          onVideoSettingsChange: handleVideoSettingsChange
-        }
-      ),
-      carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
-      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-      isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
-      isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "div",
-        {
-          className: "pointer-events-none fixed z-2147483646",
-          style: {
-            left: slot.left,
-            top: slot.top,
-            width: slot.width,
-            height: slot.height
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OhwLoaderSpinner, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
+    bridgeRoot ? (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-2147483646",
+            style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              DropIndicator,
+              {
+                direction: "horizontal",
+                state: activeSectionDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!h-full !w-full"
+              }
+            )
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            DropIndicator,
-            {
-              direction: slot.direction,
-              state: activeFooterDropIndex === i ? "dragActive" : "dragIdle",
-              className: "!h-full !w-full"
-            }
-          )
-        },
-        `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
-      )),
-      isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "div",
-        {
-          className: "pointer-events-none fixed z-2147483646",
-          style: {
-            left: slot.left,
-            top: slot.top,
-            width: slot.width,
-            height: slot.height
+          `section-drop-${slot.insertIndex}-${i}`
+        )),
+        Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          MediaOverlay,
+          {
+            hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
+            isUploading: true,
+            fadingOut,
+            onFadeOutComplete: handleMediaFadeOutComplete,
+            onReplace: handleMediaReplace
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            DropIndicator,
-            {
-              direction: slot.direction,
-              state: activeNavDropIndex === i ? "dragActive" : "dragIdle",
-              className: "!h-full !w-full"
-            }
-          )
-        },
-        `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
-      )),
-      hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
-      formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ItemInteractionLayer,
-        {
-          rect: formPickRect,
-          state: "active-top",
-          itemDragSurface: false,
-          toolbarAlign: "left",
-          chromeGap: 24,
-          toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          `uploading-${key}`
+        )),
+        mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          MediaOverlay,
+          {
+            hover: mediaHover,
+            isUploading: false,
+            onReplace: handleMediaReplace,
+            onVideoSettingsChange: handleVideoSettingsChange
+          }
+        ),
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+        siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+        siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+        isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-2147483646",
+            style: {
+              left: slot.left,
+              top: slot.top,
+              width: slot.width,
+              height: slot.height
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              DropIndicator,
+              {
+                direction: slot.direction,
+                state: activeFooterDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!h-full !w-full"
+              }
+            )
+          },
+          `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
+        )),
+        isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-2147483646",
+            style: {
+              left: slot.left,
+              top: slot.top,
+              width: slot.width,
+              height: slot.height
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              DropIndicator,
+              {
+                direction: slot.direction,
+                state: activeNavDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!h-full !w-full"
+              }
+            )
+          },
+          `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
+        )),
+        hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+        hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+        hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
+        formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ItemInteractionLayer,
+          {
+            rect: formPickRect,
+            state: "active-top",
+            itemDragSurface: false,
+            toolbarAlign: "left",
+            chromeGap: 24,
+            toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              "div",
+              {
+                "data-ohw-form-toolbar": "",
+                className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Add field",
+                      className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
+                      onClick: () => setFieldTypePickerOpen((open) => !open),
+                      "data-ohw-add-field": "",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Plus, { size: 15, "aria-hidden": true })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
+                      onClick: () => {
+                        setFieldTypePickerOpen(false);
+                        const form = formPickElRef.current;
+                        if (!form) return;
+                        postToParent2({
+                          type: "ow:form-pick",
+                          formKey: formKeyOf(form),
+                          hasLongText: formHasLongText(form)
+                        });
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Settings, { size: 14, "aria-hidden": true }),
+                        "Form settings",
+                        formPickCount ? (
+                          // Counter pill, per the design — not a text suffix.
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            "span",
+                            {
+                              "data-ohw-form-count": "",
+                              className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
+                              children: formPickCount
+                            }
+                          )
+                        ) : null
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": formViewState === state,
+                      className: "rounded-md px-2.5 py-1 text-[13px] font-semibold capitalize transition-colors " + (formViewState === state ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+                      onClick: () => {
+                        setFieldTypePickerOpen(false);
+                        const form = formPickElRef.current;
+                        const key = form ? formKeyOf(form) : null;
+                        if (!form || !key) return;
+                        const initial = successInitialFor(form, key, editContentRef.current);
+                        setFormViewState(form, key, state, initial);
+                        setFormViewStateUi(state);
+                        setFormPickRect(form.getBoundingClientRect());
+                        if (state === "success") {
+                          const successEl = form.querySelector(`[${SUCCESS_TEXT_ATTR}]`);
+                          if (successEl) requestAnimationFrame(() => activateRef.current(successEl));
+                        } else {
+                          deactivateRef.current();
+                        }
+                      },
+                      children: state
+                    },
+                    state
+                  )) })
+                ]
+              }
+            )
+          }
+        ),
+        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ItemInteractionLayer,
+          {
+            rect: formHoverRect,
+            state: "hover",
+            chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
+          }
+        ),
+        fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ItemInteractionLayer,
+          {
+            rect: fieldPickRect,
+            state: fieldDragging ? "dragging" : "active-top",
+            itemDragSurface: false,
+            toolbarAlign: "left",
+            chromeGap: 10,
+            showHandle: true,
+            dragHandleLabel: "Reorder field",
+            onDragHandleDragStart: handleFieldDragStart,
+            onDragHandleDragEnd: handleFieldDragEnd,
+            toolbar: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              FormFieldToolbar,
+              {
+                type: fieldPickState.type,
+                required: fieldPickState.required,
+                onTypeChange: handleFieldTypeChange,
+                onRequiredToggle: handleFieldRequiredToggle,
+                onDuplicate: handleFieldDuplicate,
+                onDelete: handleFieldDelete
+              }
+            )
+          }
+        ),
+        fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-[2147483644]",
+            style: { top: slot.top, left: slot.left, width: slot.width },
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              DropIndicator,
+              {
+                direction: "horizontal",
+                state: fieldDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!w-full"
+              }
+            )
+          },
+          `field-drop-${i}`
+        )) : null,
+        fieldTypePickerOpen && formPickRect ? (() => {
+          const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "div",
             {
-              "data-ohw-form-toolbar": "",
-              className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": "Add field",
-                    className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
-                    onClick: () => setFieldTypePickerOpen((open) => !open),
-                    "data-ohw-add-field": "",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Plus, { size: 15, "aria-hidden": true })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
-                    onClick: () => {
-                      setFieldTypePickerOpen(false);
-                      const form = formPickElRef.current;
-                      if (!form) return;
-                      postToParent2({
-                        type: "ow:form-pick",
-                        formKey: formKeyOf(form),
-                        hasLongText: formHasLongText(form)
-                      });
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.Settings, { size: 14, "aria-hidden": true }),
-                      "Form settings",
-                      formPickCount ? (
-                        // Counter pill, per the design — not a text suffix.
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                          "span",
-                          {
-                            "data-ohw-form-count": "",
-                            className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
-                            children: formPickCount
-                          }
-                        )
-                      ) : null
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-pressed": formViewState === state,
-                    className: "rounded-md px-2.5 py-1 text-[13px] font-semibold capitalize transition-colors " + (formViewState === state ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
-                    onClick: () => {
-                      setFieldTypePickerOpen(false);
-                      const form = formPickElRef.current;
-                      const key = form ? formKeyOf(form) : null;
-                      if (!form || !key) return;
-                      const initial = successInitialFor(form, key, editContentRef.current);
-                      setFormViewState(form, key, state, initial);
-                      setFormViewStateUi(state);
-                      setFormPickRect(form.getBoundingClientRect());
-                      if (state === "success") {
-                        const successEl = form.querySelector(`[${SUCCESS_TEXT_ATTR}]`);
-                        if (successEl) requestAnimationFrame(() => activateRef.current(successEl));
-                      } else {
-                        deactivateRef.current();
-                      }
-                    },
-                    children: state
-                  },
-                  state
-                )) })
-              ]
+              className: "pointer-events-none fixed z-[2147483645]",
+              style: {
+                top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
+                left: toolbar ? toolbar.left : formPickRect.left + 24
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldTypePicker, { onPick: handleAddField })
             }
-          )
-        }
-      ),
-      formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ItemInteractionLayer,
-        {
-          rect: formHoverRect,
-          state: "hover",
-          chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
-        }
-      ),
-      fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ItemInteractionLayer,
-        {
-          rect: fieldPickRect,
-          state: fieldDragging ? "dragging" : "active-top",
-          itemDragSurface: false,
-          toolbarAlign: "left",
-          chromeGap: 10,
-          showHandle: true,
-          dragHandleLabel: "Reorder field",
-          onDragHandleDragStart: handleFieldDragStart,
-          onDragHandleDragEnd: handleFieldDragEnd,
-          toolbar: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            FormFieldToolbar,
+          );
+        })() : null,
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          FooterContainerChrome,
+          {
+            rect: toolbarRect,
+            onAdd: handleAddFooterColumn,
+            addDisabled: !canAddFooterColumn()
+          }
+        ),
+        toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          ItemInteractionLayer,
+          {
+            rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
+            toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
+            elRef: glowElRef,
+            state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanelRect(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
+            showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
+            dragDisabled: reorderDragDisabled,
+            dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
+            onDragHandleDragStart: handleItemDragStart,
+            onDragHandleDragEnd: handleItemDragEnd,
+            onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
+            onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
+            itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
+            toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              ItemActionToolbar,
+              {
+                onEditLink: openLinkPopoverForSelected,
+                onStyle: () => {
+                  const row = selectedElRef.current;
+                  if (!row) return;
+                  if (floatingPanel?.kind === "socials-display") closeFloatingPanelOnly();
+                  else openSocialsDisplayPanel(row);
+                },
+                showStyle: selectedIsSocialsRow,
+                styleActive: floatingPanel?.kind === "socials-display",
+                onAddItem: handleAddChildItem,
+                onSelectParent: handleSelectParent,
+                onDuplicate: handleDuplicateSelected,
+                onDelete: handleDeleteSelected,
+                addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current) || selectedElRef.current !== null && (() => {
+                  const row = isSocialsRow(selectedElRef.current) ? selectedElRef.current : findSocialsRow(selectedElRef.current);
+                  return row ? !canAddSocialItem(row) : false;
+                })(),
+                editLinkDisabled: false,
+                moreDisabled: false,
+                deleteDisabled: selectedElRef.current !== null && (() => {
+                  const social = getSocialItem(selectedElRef.current);
+                  return social ? !canRemoveSocialItem(social) : false;
+                })(),
+                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && (() => {
+                  const social = getSocialItem(selectedElRef.current);
+                  const row = social ? findSocialsRow(social) : null;
+                  return row ? !canAddSocialItem(row) : false;
+                })(),
+                showEditLink: !isFooterFrameSelection && !selectedIsSocialsRow && navDropdownPreviewOpen === null,
+                showAddItem: isFooterFrameSelection || selectedIsSocialsRow || !selectedIsCta && Boolean(
+                  selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
+                ),
+                showMore: (!selectedIsCta || isFooterFrameSelection) && !selectedIsSocialsRow,
+                dropdownOpen: navDropdownPreviewOpen,
+                onDropdownOpenChange: handleNavDropdownOpenChange,
+                headingVisible: footerHeadingVisible,
+                onHeadingVisibleChange: handleFooterHeadingVisibleChange
+              }
+            ) : void 0
+          }
+        ),
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            EditGlowChrome,
             {
-              type: fieldPickState.type,
-              required: fieldPickState.required,
-              onTypeChange: handleFieldTypeChange,
-              onRequiredToggle: handleFieldRequiredToggle,
-              onDuplicate: handleFieldDuplicate,
-              onDelete: handleFieldDelete
+              rect: toolbarRect,
+              elRef: glowElRef,
+              reorderHrefKey,
+              dragDisabled: reorderDragDisabled,
+              hideHandle: isItemDragging
             }
-          )
-        }
-      ),
-      fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        "div",
-        {
-          className: "pointer-events-none fixed z-[2147483644]",
-          style: { top: slot.top, left: slot.left, width: slot.width },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            DropIndicator,
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            FloatingToolbar,
             {
-              direction: "horizontal",
-              state: fieldDropIndex === i ? "dragActive" : "dragIdle",
-              className: "!w-full"
+              rect: toolbarRect,
+              parentScroll: parentScrollRef.current,
+              elRef: toolbarElRef,
+              onCommand: handleCommand,
+              activeCommands,
+              showEditLink,
+              onEditLink: openLinkPopoverForActive
             }
           )
-        },
-        `field-drop-${i}`
-      )) : null,
-      fieldTypePickerOpen && formPickRect ? (() => {
-        const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        ] }),
+        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           "div",
           {
-            className: "pointer-events-none fixed z-[2147483645]",
+            "data-ohw-max-badge": "",
             style: {
-              top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
-              left: toolbar ? toolbar.left : formPickRect.left + 24
+              position: "fixed",
+              top: maxBadge.rect.bottom + 4,
+              left: maxBadge.rect.right,
+              transform: "translateX(-100%)",
+              zIndex: 2147483647,
+              background: maxBadge.current > maxBadge.max ? "#FEF2F2" : "#F5F5F4",
+              color: maxBadge.current > maxBadge.max ? "#DC2626" : "#78716C",
+              border: `1px solid ${maxBadge.current > maxBadge.max ? "#FECACA" : "#E7E5E4"}`,
+              borderRadius: 4,
+              padding: "2px 6px",
+              fontSize: 11,
+              fontWeight: 500,
+              pointerEvents: "none"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldTypePicker, { onPick: handleAddField })
+            children: [
+              maxBadge.current,
+              "/",
+              maxBadge.max
+            ]
           }
-        );
-      })() : null,
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        FooterContainerChrome,
-        {
-          rect: toolbarRect,
-          onAdd: handleAddFooterColumn,
-          addDisabled: !canAddFooterColumn()
-        }
-      ),
-      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ItemInteractionLayer,
-        {
-          rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
-          toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
-          elRef: glowElRef,
-          state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanelRect(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
-          showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
-          dragDisabled: reorderDragDisabled,
-          dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
-          onDragHandleDragStart: handleItemDragStart,
-          onDragHandleDragEnd: handleItemDragEnd,
-          onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
-          onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
-          itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            ItemActionToolbar,
-            {
-              onEditLink: openLinkPopoverForSelected,
-              onStyle: () => {
-                const row = selectedElRef.current;
-                if (!row) return;
-                if (floatingPanel?.kind === "socials-display") closeFloatingPanelOnly();
-                else openSocialsDisplayPanel(row);
-              },
-              showStyle: selectedIsSocialsRow,
-              styleActive: floatingPanel?.kind === "socials-display",
-              onAddItem: handleAddChildItem,
-              onSelectParent: handleSelectParent,
-              onDuplicate: handleDuplicateSelected,
-              onDelete: handleDeleteSelected,
-              addItemDisabled: isFooterFrameSelection && isFooterAddItemDisabled(selectedElRef.current) || selectedElRef.current !== null && (() => {
-                const row = isSocialsRow(selectedElRef.current) ? selectedElRef.current : findSocialsRow(selectedElRef.current);
-                return row ? !canAddSocialItem(row) : false;
-              })(),
-              editLinkDisabled: false,
-              moreDisabled: false,
-              deleteDisabled: selectedElRef.current !== null && (() => {
-                const social = getSocialItem(selectedElRef.current);
-                return social ? !canRemoveSocialItem(social) : false;
-              })(),
-              duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && (() => {
-                const social = getSocialItem(selectedElRef.current);
-                const row = social ? findSocialsRow(social) : null;
-                return row ? !canAddSocialItem(row) : false;
-              })(),
-              showEditLink: !isFooterFrameSelection && !selectedIsSocialsRow && navDropdownPreviewOpen === null,
-              showAddItem: isFooterFrameSelection || selectedIsSocialsRow || !selectedIsCta && Boolean(
-                selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
-              ),
-              showMore: (!selectedIsCta || isFooterFrameSelection) && !selectedIsSocialsRow,
-              dropdownOpen: navDropdownPreviewOpen,
-              onDropdownOpenChange: handleNavDropdownOpenChange,
-              headingVisible: footerHeadingVisible,
-              onHeadingVisibleChange: handleFooterHeadingVisibleChange
-            }
-          ) : void 0
-        }
-      ),
-      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          EditGlowChrome,
+        ),
+        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          StateToggle,
           {
-            rect: toolbarRect,
-            elRef: glowElRef,
-            reorderHrefKey,
-            dragDisabled: reorderDragDisabled,
-            hideHandle: isItemDragging
+            rect: toggleState.rect,
+            activeState: toggleState.activeState,
+            states: toggleState.states,
+            onStateChange: handleStateChange
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          FloatingToolbar,
+        sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "div",
           {
-            rect: toolbarRect,
-            parentScroll: parentScrollRef.current,
-            elRef: toolbarElRef,
-            onCommand: handleCommand,
-            activeCommands,
-            showEditLink,
-            onEditLink: openLinkPopoverForActive
+            "data-ohw-section-insert-line": "",
+            className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
+            style: { top: sectionGap.y, transform: "translateY(-50%)" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                Badge,
+                {
+                  className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
+                  onClick: () => {
+                    window.parent.postMessage(
+                      {
+                        type: "ow:add-section",
+                        insertAfter: sectionGap.insertAfter,
+                        insertBefore: sectionGap.insertBefore
+                      },
+                      "*"
+                    );
+                  },
+                  children: "Add Section"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            ]
           }
-        )
-      ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        "div",
-        {
-          "data-ohw-max-badge": "",
-          style: {
-            position: "fixed",
-            top: maxBadge.rect.bottom + 4,
-            left: maxBadge.rect.right,
-            transform: "translateX(-100%)",
-            zIndex: 2147483647,
-            background: maxBadge.current > maxBadge.max ? "#FEF2F2" : "#F5F5F4",
-            color: maxBadge.current > maxBadge.max ? "#DC2626" : "#78716C",
-            border: `1px solid ${maxBadge.current > maxBadge.max ? "#FECACA" : "#E7E5E4"}`,
-            borderRadius: 4,
-            padding: "2px 6px",
-            fontSize: 11,
-            fontWeight: 500,
-            pointerEvents: "none"
+        ),
+        linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          LinkPopover,
+          {
+            panelRef: linkPopoverPanelRef,
+            portalContainer: dialogPortalContainer,
+            open: true,
+            mode: linkPopover.mode ?? "edit",
+            pages: sitePages,
+            sections: currentSections,
+            sectionsByPath,
+            initialTarget: linkPopover.target,
+            existingTargets: linkPopover.intent === "add-nav" ? getNavbarExistingTargets() : [],
+            onClose: closeLinkPopover,
+            onSubmit: handleLinkPopoverSubmit
           },
-          children: [
-            maxBadge.current,
-            "/",
-            maxBadge.max
-          ]
-        }
-      ),
-      toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        StateToggle,
-        {
-          rect: toggleState.rect,
-          activeState: toggleState.activeState,
-          states: toggleState.states,
-          onStateChange: handleStateChange
-        }
-      ),
-      sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        "div",
-        {
-          "data-ohw-section-insert-line": "",
-          className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
-          style: { top: sectionGap.y, transform: "translateY(-50%)" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              Badge,
+          linkPopover.key
+        ) : null,
+        floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          FloatingPanel,
+          {
+            open: true,
+            title: floatingPanel.title,
+            context: floatingPanel.context,
+            position: floatingPanelPos,
+            onPositionChange: setFloatingPanelPos,
+            parentScroll: parentScrollSnap ?? parentScrollRef.current,
+            onClose: closeFloatingPanelOnly,
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              SocialsDisplayPanel,
               {
-                className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
-                onClick: () => {
-                  window.parent.postMessage(
-                    {
-                      type: "ow:add-section",
-                      insertAfter: sectionGap.insertAfter,
-                      insertBefore: sectionGap.insertBefore
-                    },
-                    "*"
-                  );
-                },
-                children: "Add Section"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
-          ]
-        }
-      ),
-      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        LinkPopover,
-        {
-          panelRef: linkPopoverPanelRef,
-          portalContainer: dialogPortalContainer,
-          open: true,
-          mode: linkPopover.mode ?? "edit",
-          pages: sitePages,
-          sections: currentSections,
-          sectionsByPath,
-          initialTarget: linkPopover.target,
-          existingTargets: linkPopover.intent === "add-nav" ? getNavbarExistingTargets() : [],
-          onClose: closeLinkPopover,
-          onSubmit: handleLinkPopoverSubmit
-        },
-        linkPopover.key
-      ) : null,
-      floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        FloatingPanel,
-        {
-          open: true,
-          title: floatingPanel.title,
-          context: floatingPanel.context,
-          position: floatingPanelPos,
-          onPositionChange: setFloatingPanelPos,
-          parentScroll: parentScrollSnap ?? parentScrollRef.current,
-          onClose: closeFloatingPanelOnly,
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            SocialsDisplayPanel,
-            {
-              display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
-              onChange: (next) => {
-                changeSocialsDisplay(floatingPanel.row, next);
-                setFloatingPanel({ ...floatingPanel });
+                display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
+                onChange: (next) => {
+                  changeSocialsDisplay(floatingPanel.row, next);
+                  setFloatingPanel({ ...floatingPanel });
+                }
               }
-            }
-          )
-        }
-      ) : null
-    ] }),
-    bridgeRoot
-  ) : null;
+            )
+          }
+        ) : null
+      ] }),
+      bridgeRoot
+    ) : null
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {