@ohhwells/bridge 0.1.70-next.211 → 0.1.70-next.215

package/dist/index.cjs

@@ -6296,16 +6296,14 @@ var import_react6 = require("react");
 var import_lucide_react3 = require("lucide-react");
 
 // src/ui/dropdown-menu.tsx
+var React6 = __toESM(require("react"), 1);
 var import_radix_ui3 = require("radix-ui");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function DropdownMenu({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui3.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
 }
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui3.DropdownMenu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
+var DropdownMenuTrigger = React6.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_radix_ui3.DropdownMenu.Trigger, { ref, "data-slot": "dropdown-menu-trigger", ...props }));
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 function DropdownMenuGroup({
   className,
   ...props
@@ -7558,11 +7556,11 @@ function FieldTypePicker({ onPick }) {
 }
 
 // src/ui/MediaOverlay.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_lucide_react5 = require("lucide-react");
 
 // src/ui/button.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_radix_ui5 = require("radix-ui");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var buttonVariants = cva(
@@ -7585,7 +7583,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React6.forwardRef(
+var Button = React7.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -7640,7 +7638,7 @@ function MediaOverlay({
   onVideoSettingsChange
 }) {
   const { rect } = hover;
-  const skeletonRef = React7.useRef(null);
+  const skeletonRef = React8.useRef(null);
   const isVideo = hover.elementType === "video";
   const showChrome = !selected || hovered;
   const autoplay = hover.videoAutoplay ?? true;
@@ -7653,7 +7651,7 @@ function MediaOverlay({
     height: rect.height,
     zIndex: 2147483646
   };
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!isUploading || !fadingOut || !skeletonRef.current) return;
     const anim = skeletonRef.current.animate([{ opacity: 1 }, { opacity: 0 }], {
       duration: MEDIA_UPLOAD_FADE_MS,
@@ -7872,6 +7870,150 @@ 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 findSectionElement(instanceId) {
@@ -7916,9 +8058,7 @@ function useLiveSectionRect(sectionId) {
   return rect;
 }
 function computeSectionBoundaryFlags(instanceId) {
-  const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
-  );
+  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 };
@@ -8035,12 +8175,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) {
@@ -8215,101 +8358,6 @@ function AiSectionOverlay({
   ] });
 }
 
-// src/lib/section-instances.ts
-var SECTION_ORDER_KEY = "__ohw_section_order";
-function topLevelSections() {
-  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(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 applyPersistedOrder(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 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/OhhwellsBridge.tsx
 var import_react_dom4 = require("react-dom");
 var import_navigation3 = require("next/navigation");
@@ -8617,7 +8665,7 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
 var import_react12 = require("react");
 
 // src/ui/dialog.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_radix_ui6 = require("radix-ui");
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -8645,7 +8693,7 @@ function DialogOverlay({
     }
   );
 }
-var DialogContent = React8.forwardRef(
+var DialogContent = React9.forwardRef(
   ({ className, children, showCloseButton = true, container, ...props }, ref) => {
     const positionMode = container ? "absolute" : "fixed";
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogPortal, { container: container ?? void 0, children: [
@@ -8700,7 +8748,7 @@ function DialogFooter({
     }
   );
 }
-var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_radix_ui6.Dialog.Title,
   {
     ref,
@@ -8712,7 +8760,7 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
-var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
   import_radix_ui6.Dialog.Description,
   {
     ref,
@@ -8817,9 +8865,9 @@ function SectionTreeItem({
 var import_react9 = require("react");
 
 // src/ui/input.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Input = React9.forwardRef(
+var Input = React10.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
@@ -10851,7 +10899,9 @@ function deleteNavbarItem(sourceAnchor) {
 var GLYPH_SELECTOR = "svg, img";
 function referenceBox(slot) {
   const row = slot.closest("[data-ohw-socials-row]") ?? slot.closest("a")?.parentElement ?? null;
-  const neighbour = row ? Array.from(row.querySelectorAll('[data-ohw-editable="icon"]')).find((el) => el !== slot) : null;
+  const neighbour = row ? Array.from(row.querySelectorAll('[data-ohw-editable="icon"]')).find(
+    (el) => el !== slot && !el.hasAttribute("data-ohw-social-icon-placeholder")
+  ) : null;
   if (neighbour) {
     const box2 = neighbour.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect();
     if (box2?.width && box2.height) return box2;
@@ -10876,11 +10926,14 @@ function iconMarkupSizedFor(slot, markup) {
   glyph.style.height = `${Math.round(box.height)}px`;
   return holder.innerHTML;
 }
+var ICON_SOURCE_ATTR = "data-ohw-icon-source";
 function applyIconMarkup(slot, markup) {
   if (!markup) return;
+  if (slot.getAttribute(ICON_SOURCE_ATTR) === markup) return;
   const coloured = iconMarkupInheritingColour(markup);
   const sized = iconMarkupSizedFor(slot, coloured);
   if (slot.innerHTML !== sized) slot.innerHTML = sized;
+  slot.setAttribute(ICON_SOURCE_ATTR, markup);
   if (sized === coloured) {
     requestAnimationFrame(() => {
       if (!slot.isConnected) return;
@@ -10915,7 +10968,7 @@ function iconMarkupInheritingColour(markup) {
 
 // src/lib/socials-items.ts
 var ICON_SELECTOR = '[data-ohw-editable="icon"]';
-var PLACEHOLDER_SOCIAL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>';
+var PLACEHOLDER_SOCIAL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><path d="M2 12h20"/></svg>';
 var PLACEHOLDER_SOCIAL_LABEL = "Social";
 var SOCIAL_KEY_RE = /(^|-)social(s)?(-|$)/i;
 var SOCIAL_PLATFORM_KEY_RE = /(^|-)(instagram|facebook|fb|linkedin|twitter|tiktok|youtube|threads|whatsapp|telegram|pinterest|snapchat|discord|behance|dribbble|vimeo|spotify|github|reddit|medium|twitch)(-|$)/i;
@@ -10994,31 +11047,71 @@ function listSocialsRows(root = document) {
 }
 var rowTemplates = /* @__PURE__ */ new Map();
 function markSocialsRows(root = document) {
-  root.querySelectorAll(`[${SOCIALS_ITEM_ATTR}]`).forEach((item) => {
-    item.removeAttribute(SOCIALS_ITEM_ATTR);
-  });
+  const stillInARow = /* @__PURE__ */ new Set();
   listSocialsRows(root).forEach((row) => {
-    row.setAttribute(SOCIALS_ROW_ATTR, "");
+    if (row.getAttribute(SOCIALS_ROW_ATTR) === null) row.setAttribute(SOCIALS_ROW_ATTR, "");
+    queueMicrotask(
+      () => markEmptySocialLabels(row.ownerDocument, row.ownerDocument.activeElement)
+    );
     allowRowToWrap(row);
     const items = listSocialItems(row);
     const firstUnit = items[0] ? socialRowUnit(items[0], row) : null;
     if (firstUnit) rowTemplates.set(rowKeyOf(row), firstUnit.outerHTML);
     items.forEach((item, index) => {
-      item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
-      const iconKey = socialIconKey(item);
+      stillInARow.add(item);
+      if (item.getAttribute(SOCIALS_ITEM_ATTR) !== String(index)) {
+        item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
+      }
+      const iconKey = socialIconKey(item) ?? socialHrefKey(item)?.replace(/-href$/, "");
+      if (iconKey && !item.querySelector(ICON_SELECTOR)) {
+        const drawn = item.querySelector("svg, img");
+        if (drawn) adoptAsIconSlot(drawn, iconKey);
+      }
       if (iconKey) ensureLabelSlot(item, iconKey);
     });
   });
+  root.querySelectorAll(`[${SOCIALS_ITEM_ATTR}]`).forEach((item) => {
+    if (!stillInARow.has(item)) item.removeAttribute(SOCIALS_ITEM_ATTR);
+  });
 }
 var SOCIALS_LABEL_ATTR = "data-ohw-social-label";
+var SOCIALS_ICON_PLACEHOLDER_ATTR = "data-ohw-social-icon-placeholder";
+var SOCIALS_EMPTY_LABEL_ATTR = "data-ohw-empty-label";
+var EMPTY_LABEL_WIDTH = "8ch";
+function markEmptySocialLabels(root = document, skip) {
+  root.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`).forEach((row) => {
+    listSocialItems(row).forEach((item) => {
+      const label = socialLabelElement(item);
+      if (!label || label === skip) return;
+      const empty = !label.textContent?.trim();
+      if (empty === label.hasAttribute(SOCIALS_EMPTY_LABEL_ATTR)) return;
+      if (empty) {
+        label.setAttribute(SOCIALS_EMPTY_LABEL_ATTR, "");
+        label.style.display = "inline-block";
+        label.style.minWidth = EMPTY_LABEL_WIDTH;
+        label.style.minHeight = "1.4em";
+      } else {
+        label.removeAttribute(SOCIALS_EMPTY_LABEL_ATTR);
+        label.style.display = "";
+        label.style.minWidth = "";
+        label.style.minHeight = "";
+      }
+    });
+  });
+}
 function ensureLabelSlot(item, iconKey) {
   if (socialLabelElement(item)) return;
   const label = document.createElement("span");
   label.setAttribute("data-ohw-key", `${iconKey}-label`);
   label.setAttribute("data-ohw-editable", "text");
   label.setAttribute(SOCIALS_LABEL_ATTR, "");
-  label.style.display = "none";
-  label.textContent = item.getAttribute("aria-label") ?? "";
+  const ownText = Array.from(item.childNodes).filter(
+    (node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+  );
+  const carried = ownText.map((node) => node.textContent?.trim()).join(" ");
+  ownText.forEach((node) => node.remove());
+  label.textContent = carried || item.getAttribute("aria-label") || "";
+  label.style.display = carried ? "" : "none";
   item.appendChild(label);
 }
 function socialLabelElement(item) {
@@ -11029,17 +11122,26 @@ function socialLabelElement(item) {
 function socialLabelKey(iconKey) {
   return `${iconKey}-label`;
 }
+function isEmptyLabelValue(value) {
+  return !value.replace(/<br\s*\/?>/gi, "").replace(/&nbsp;/gi, " ").trim();
+}
 function applyStoredValues(item, content) {
   const hrefKey = socialHrefKey(item);
   const iconKey = socialIconKey(item);
   if (hrefKey && content[hrefKey] !== void 0) item.setAttribute("href", content[hrefKey]);
   if (iconKey) {
     const glyph = item.querySelector(ICON_SELECTOR);
-    if (glyph && content[iconKey]) applyIconMarkup(glyph, content[iconKey]);
+    if (glyph && content[iconKey]) {
+      applyIconMarkup(glyph, content[iconKey]);
+      glyph.removeAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
+    }
     const label = item.querySelector(`[${SOCIALS_LABEL_ATTR}]`);
     label?.setAttribute("data-ohw-key", socialLabelKey(iconKey));
     const stored = content[socialLabelKey(iconKey)];
-    if (label && stored) label.textContent = stored;
+    if (label && stored !== void 0) {
+      const words = isEmptyLabelValue(stored) ? "" : stored;
+      if (label.innerHTML !== words) label.innerHTML = words;
+    }
   }
 }
 function socialPlatformKey(iconKey) {
@@ -11076,7 +11178,7 @@ function getSocialsOrderFromDom(root = document) {
 }
 function hasStoredValue(content, hrefKey) {
   const iconKey = hrefKey.replace(/-href$/, "");
-  return Boolean(content[hrefKey]) || Boolean(content[iconKey]);
+  return Boolean(content[hrefKey]) || Boolean(content[iconKey]) || Boolean(content[socialLabelKey(iconKey)]);
 }
 function parseSocialsOrder(raw) {
   if (!raw) return null;
@@ -11087,24 +11189,24 @@ function parseSocialsOrder(raw) {
     return null;
   }
 }
-function nextSocialIndex(row, rowKey, content) {
-  const used = listSocialItems(row).map((item) => socialHrefKey(item)).concat(Object.keys(content)).map((key) => key?.match(new RegExp(`^${rowKey}-(\\d+)`))?.[1]).map((digits) => digits === void 0 ? -1 : Number(digits));
+function nextSocialIndex(row, rowKey, content, reserved = []) {
+  const used = listSocialItems(row).map((item) => socialHrefKey(item)).concat(Object.keys(content)).concat(reserved).map((key) => key?.match(new RegExp(`^${rowKey}-(\\d+)`))?.[1]).map((digits) => digits === void 0 ? -1 : Number(digits));
   return Math.max(-1, ...used) + 1;
 }
-function planSocialInsert(row, content = {}) {
+function planSocialInsert(row, content = {}, reserved = []) {
   if (!canAddSocialItem(row)) return null;
   const rowKey = rowKeyOf(row);
-  const iconKey = `${rowKey}-${nextSocialIndex(row, rowKey, content)}`;
+  const iconKey = `${rowKey}-${nextSocialIndex(row, rowKey, content, reserved)}`;
   return { hrefKey: `${iconKey}-href`, iconKey };
 }
-function insertSocialItem(row, after, content = {}, { placeholder = true } = {}) {
+function insertSocialItem(row, after, content = {}, { placeholder = true, keys } = {}) {
   const rowKey = rowKeyOf(row);
   const template = listSocialItems(row)[0];
   const remembered = rowTemplates.get(rowKey);
   if (!template && !remembered) return null;
-  const index = nextSocialIndex(row, rowKey, content);
-  const iconKey = `${rowKey}-${index}`;
-  const hrefKey = `${iconKey}-href`;
+  const display = socialsDisplayFor(row, content);
+  const iconKey = keys?.iconKey ?? `${rowKey}-${nextSocialIndex(row, rowKey, content)}`;
+  const hrefKey = keys?.hrefKey ?? `${iconKey}-href`;
   const templateUnit = template ? socialRowUnit(template) : null;
   const unit = templateUnit ? templateUnit.cloneNode(true) : fromMarkup(remembered);
   const item = unit && (unit.matches("a") ? unit : unit.querySelector("a"));
@@ -11119,6 +11221,7 @@ function insertSocialItem(row, after, content = {}, { placeholder = true } = {})
   const icon = item.querySelector(ICON_SELECTOR);
   icon?.setAttribute("data-ohw-key", iconKey);
   if (placeholder && icon) icon.innerHTML = PLACEHOLDER_SOCIAL_ICON;
+  socialLabelElement(item)?.setAttribute("data-ohw-key", socialLabelKey(iconKey));
   item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)?.remove();
   const afterUnit = after ? socialRowUnit(after) : null;
   if (afterUnit && afterUnit.parentElement === row) afterUnit.insertAdjacentElement("afterend", unit);
@@ -11128,7 +11231,7 @@ function insertSocialItem(row, after, content = {}, { placeholder = true } = {})
     const label = socialLabelElement(item);
     if (label) label.textContent = PLACEHOLDER_SOCIAL_LABEL;
   }
-  applySocialsDisplayToRow(row, socialsDisplayFor(row, content));
+  applySocialsDisplayToRow(row, display);
   return { item, hrefKey, iconKey, order: getSocialsOrderFromDom(row.ownerDocument) };
 }
 function duplicateSocialItem(item, content) {
@@ -11145,9 +11248,9 @@ function duplicateSocialItem(item, content) {
     const slot = link.querySelector(ICON_SELECTOR);
     if (slot) slot.innerHTML = glyph;
   }
-  const sourceLabel = socialLabelElement(item)?.textContent?.trim();
+  const sourceLabel = socialLabelElement(item);
   const copyLabel = socialLabelElement(link);
-  if (copyLabel && sourceLabel) copyLabel.textContent = sourceLabel;
+  if (copyLabel && sourceLabel) copyLabel.innerHTML = sourceLabel.innerHTML;
   if (row) applySocialsDisplayToRow(row, socialsDisplayFor(row, content));
   return {
     ...created,
@@ -11188,17 +11291,32 @@ function applySocialsOrder(order, root = document) {
     const wanted = order[rowKeyOf(row)];
     if (!wanted) return;
     const byKey = new Map(listSocialItems(row).map((item) => [socialHrefKey(item), item]));
-    wanted.forEach((key) => {
-      const item = byKey.get(key);
-      if (!item) return;
-      const unit = socialRowUnit(item, row);
-      if (unit) row.appendChild(unit);
-    });
+    const units = wanted.map((key) => byKey.get(key)).filter((item) => Boolean(item)).map((item) => socialRowUnit(item, row)).filter((unit) => Boolean(unit));
+    const tail = Array.from(row.children).slice(-units.length);
+    const inPlace = units.length > 0 && tail.length === units.length && units.every((unit, i) => tail[i] === unit);
+    if (inPlace) return;
+    units.forEach((unit) => row.appendChild(unit));
   });
   markSocialsRows(root);
 }
 function reconcileSocialsFromContent(content, root = document) {
   markSocialsRows(root);
+  listSocialsRows(root).forEach((row) => {
+    const rowDisplay = socialsDisplayFor(row, content);
+    listSocialItems(row).forEach((item) => {
+      const key = socialIconKey(item) ?? socialHrefKey(item)?.replace(/-href$/, "");
+      const stored2 = key ? content[key] : void 0;
+      if (!stored2?.trim()) return;
+      const existing = item.querySelector(ICON_SELECTOR);
+      if (existing && existing.innerHTML.trim() && !existing.hasAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR)) return;
+      ensureIconSlot(item);
+      const slot = item.querySelector(ICON_SELECTOR);
+      if (!slot) return;
+      applyIconMarkup(slot, stored2);
+      slot.removeAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
+      if (!rowDisplay.icon) slot.style.display = "none";
+    });
+  });
   const stored = parseSocialsOrder(content[SOCIALS_ORDER_KEY]);
   if (!stored) return;
   listSocialsRows(root).forEach((row) => {
@@ -11208,12 +11326,11 @@ function reconcileSocialsFromContent(content, root = document) {
     wanted.forEach((key) => {
       if (listSocialItems(row).some((item) => socialHrefKey(item) === key)) return;
       if (!hasStoredValue(content, key)) return;
-      const created = insertSocialItem(row, null, content);
-      if (created) {
-        created.item.setAttribute("data-ohw-href-key", key);
-        created.item.querySelector(ICON_SELECTOR)?.setAttribute("data-ohw-key", key.replace(/-href$/, ""));
-        applyStoredValues(created.item, content);
-      }
+      const created = insertSocialItem(row, null, content, {
+        placeholder: false,
+        keys: { hrefKey: key, iconKey: key.replace(/-href$/, "") }
+      });
+      if (created) applyStoredValues(created.item, content);
     });
     const present = listSocialItems(row);
     const surviving = present.filter((item) => {
@@ -11288,9 +11405,10 @@ var SOCIALS_DISPLAY_KEY = "__ohw_socials_display";
 function readSocialsDisplay(row) {
   const items = listSocialItems(row);
   const visible = (el) => Boolean(el) && el.style.display !== "none" && el.getAttribute("data-ohw-hidden") === null;
+  const drawn = (el) => Boolean(el && visible(el) && el.innerHTML.trim());
   return {
     text: items.some((item) => visible(socialLabelElement(item))),
-    icon: items.some((item) => visible(item.querySelector(ICON_SELECTOR)))
+    icon: items.some((item) => drawn(item.querySelector(ICON_SELECTOR)))
   };
 }
 function parseSocialsDisplay(raw) {
@@ -11338,6 +11456,20 @@ function allowRowToWrap(row) {
   const display = row.ownerDocument.defaultView?.getComputedStyle(row).display ?? "";
   if (display === "flex" || display === "inline-flex") row.style.flexWrap = "wrap";
 }
+function applySocialsLabelsFromContent(content, root = document, { fillEmptyOnly = false } = {}) {
+  const focused = root.activeElement ?? document.activeElement;
+  listSocialsRows(root).forEach((row) => {
+    listSocialItems(row).forEach((item) => {
+      const label = socialLabelElement(item);
+      const key = label?.getAttribute("data-ohw-key");
+      const stored = key ? content[key] : void 0;
+      if (!label || !stored || label === focused) return;
+      if (fillEmptyOnly && label.textContent?.trim()) return;
+      if (!stored.replace(/<br\s*\/?>/gi, "").trim()) return;
+      if (label.innerHTML !== stored) label.innerHTML = stored;
+    });
+  });
+}
 function applySocialsDisplayFromContent(content, root = document) {
   const stored = parseSocialsDisplay(content[SOCIALS_DISPLAY_KEY]);
   if (!stored) return;
@@ -11357,8 +11489,27 @@ function applySocialsDisplayFromContent(content, root = document) {
 function socialsMissingIcons(row) {
   return listSocialItems(row).filter((item) => {
     const slot = item.querySelector(ICON_SELECTOR);
-    return !slot || !slot.firstElementChild;
-  }).map((item) => ({ hrefKey: socialHrefKey(item) ?? "", url: item.getAttribute("href") ?? "" })).filter((entry) => Boolean(entry.hrefKey));
+    return !slot || !slot.firstElementChild || slot.hasAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
+  }).map((item) => ({
+    hrefKey: socialHrefKey(item) ?? "",
+    url: item.getAttribute("href") ?? "",
+    // Templates ship placeholder addresses — serene-oasis writes "[INSTAGRAM URL]" — and then the
+    // words are the only thing naming the network.
+    label: (socialLabelElement(item)?.textContent ?? item.getAttribute("aria-label") ?? "").trim()
+  })).filter((entry) => Boolean(entry.hrefKey));
+}
+function adoptAsIconSlot(drawn, base) {
+  const parent = drawn.parentElement;
+  if (!parent) return null;
+  const taken = drawn.ownerDocument.querySelector(`[data-ohw-key="${base}"]`);
+  const iconKey = taken ? `${base}-icon` : base;
+  const slot = drawn.ownerDocument.createElement("span");
+  slot.setAttribute("data-ohw-key", iconKey);
+  slot.setAttribute("data-ohw-editable", "icon");
+  slot.style.display = "inline-flex";
+  parent.insertBefore(slot, drawn);
+  slot.appendChild(drawn);
+  return iconKey;
 }
 function ensureIconSlot(item) {
   const existing = item.querySelector(ICON_SELECTOR);
@@ -11366,12 +11517,19 @@ function ensureIconSlot(item) {
   const hrefKey = socialHrefKey(item);
   if (!hrefKey) return null;
   const base = hrefKey.replace(/-href$/, "");
+  const drawn = item.querySelector("svg, img");
+  if (drawn) {
+    const adopted = adoptAsIconSlot(drawn, base);
+    if (adopted) return adopted;
+  }
   const taken = document.querySelector(`[data-ohw-key="${base}"]`);
   const iconKey = taken && taken !== item ? `${base}-icon` : base;
   const slot = document.createElement("span");
   slot.setAttribute("data-ohw-key", iconKey);
   slot.setAttribute("data-ohw-editable", "icon");
   slot.style.display = "inline-flex";
+  slot.innerHTML = PLACEHOLDER_SOCIAL_ICON;
+  slot.setAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR, "");
   item.prepend(slot);
   return iconKey;
 }
@@ -13945,12 +14103,27 @@ function collectEditableNodes(extraContent, root = document) {
     nodes.push({ key, type: "link", text: href });
   }
   if (extraContent) {
-    for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY, SECTION_ORDER_KEY]) {
+    for (const key of [
+      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).
+      SOCIALS_ORDER_KEY,
+      SOCIALS_DISPLAY_KEY
+    ]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {
         nodes.push({ key, type: "meta", text });
       }
     }
+    for (const [key, text] of Object.entries(extraContent)) {
+      if (key.endsWith("-platform") && typeof text === "string" && text.length > 0) {
+        nodes.push({ key, type: "meta", text });
+      }
+    }
   }
   if (!isScoped) {
     document.querySelectorAll('[data-ohw-editable="video"]').forEach((el) => {
@@ -14303,7 +14476,7 @@ function NavbarContainerChrome({
 }
 
 // src/ui/drop-indicator.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var dropIndicatorVariants = cva(
   "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
@@ -14326,7 +14499,7 @@ var dropIndicatorVariants = cva(
     }
   }
 );
-var DropIndicator = React10.forwardRef(
+var DropIndicator = React11.forwardRef(
   ({ className, direction, state, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
@@ -14940,6 +15113,15 @@ function isPointOverNavItem(container, x, y) {
     return x >= itemRect.left && x <= itemRect.right && y >= itemRect.top && y <= itemRect.bottom;
   });
 }
+function socialsRowAtPoint(x, y) {
+  const inside = (el) => {
+    const r2 = el.getBoundingClientRect();
+    return x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom;
+  };
+  return Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).find(
+    (row) => inside(row) && !listSocialItems(row).some(inside)
+  ) ?? null;
+}
 function isPointOverFooterColumn(x, y) {
   return listFooterColumns().some((col) => {
     const r2 = col.getBoundingClientRect();
@@ -16256,7 +16438,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 });
       }
     }
@@ -16418,7 +16600,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 });
       }
     }
@@ -16522,7 +16704,8 @@ function OhhwellsBridge() {
         return;
       }
       const after = getSocialItem(selected);
-      const planned = planSocialInsert(socialsRow, editContentRef.current);
+      const stillPromised = pendingSocialAddRef.current ? [pendingSocialAddRef.current.iconKey] : [];
+      const planned = planSocialInsert(socialsRow, editContentRef.current, stillPromised);
       if (!planned) return;
       pendingSocialAddRef.current = { row: socialsRow, after, ...planned };
       postToParentRef.current({
@@ -16782,7 +16965,8 @@ function OhhwellsBridge() {
         applySocialsOrder(nextSocialsOrder);
         postToParentRef.current({
           type: "ow:change",
-          nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }]
+          nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }],
+          flush: true
         });
         applySelectionAfterDrop();
         clearFooterDragVisuals();
@@ -16972,7 +17156,7 @@ function OhhwellsBridge() {
     }
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
-    const editable = selected.querySelector('[data-ohw-editable="text"]') ?? selected.querySelector("[data-ohw-editable]");
+    const editable = selected.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? selected.querySelector('[data-ohw-editable]:not([data-ohw-editable="icon"])');
     if (!editable) return;
     activateRef.current(editable, { caretX: clientX, caretY: clientY });
   }, []);
@@ -17127,13 +17311,16 @@ function OhhwellsBridge() {
   const isEditModeRef = (0, import_react17.useRef)(false);
   const requestMissingSocialIconsRef = (0, import_react17.useRef)(() => {
   });
+  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));
       return missing;
     });
-    if (items.length) postToParentRef.current({ type: "ow:social-icons-needed", items });
+    const fresh = items.filter((item) => !askedSocialIconsRef.current.has(`${item.hrefKey}|${item.url}`));
+    fresh.forEach((item) => askedSocialIconsRef.current.add(`${item.hrefKey}|${item.url}`));
+    if (fresh.length) postToParentRef.current({ type: "ow:social-icons-needed", items: fresh });
   }, []);
   requestMissingSocialIconsRef.current = requestMissingSocialIcons;
   isEditModeRef.current = isEditMode;
@@ -17142,6 +17329,7 @@ function OhhwellsBridge() {
       if (next.icon) {
         const missing = socialsMissingIcons(row);
         listSocialItems(row).forEach((item) => ensureIconSlot(item));
+        missing.forEach((item) => askedSocialIconsRef.current.delete(`${item.hrefKey}|${item.url}`));
         if (missing.length) {
           postToParentRef.current({ type: "ow:social-icons-needed", items: missing });
         }
@@ -17231,7 +17419,15 @@ function OhhwellsBridge() {
   );
   const activate = (0, import_react17.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
-    if (isIconEditable(el)) return;
+    if (isIconEditable(el)) {
+      const social = getSocialItem(el);
+      const words = social ? social.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') : null;
+      if (words && words.offsetParent !== null) {
+        if (social && selectedElRef.current !== social) selectRef.current(social);
+        activateRef.current(words, options);
+      }
+      return;
+    }
     if (el.hasAttribute("data-ohw-social-label") && el.offsetParent === null) return;
     clearSelectedAttr();
     selectedElRef.current = null;
@@ -17410,6 +17606,7 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(content);
       reconcileSocialsFromContent(content);
       applySocialsDisplayFromContent(content);
+      applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
       if (isEditModeRef.current) requestMissingSocialIconsRef.current();
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
@@ -17595,6 +17792,7 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
           if (!form.querySelector("[data-ohw-form-success]")) {
@@ -17681,6 +17879,7 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key")) || getSocialItem(el)) {
@@ -17785,6 +17984,66 @@ function OhhwellsBridge() {
       [style*="100vh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
       [style*="100svh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
       [style*="100dvh"] { min-height: ${initialVh}px !important; height: ${initialVh}px !important; }
+      /* Emptied text keeps somewhere to click. A label typed down to nothing collapses to a
+         couple of pixels, and getting back into it meant hunting for the caret with the mouse.
+         Edit mode only \u2014 the published page shows nothing where there is nothing (OHH-736). */
+      [data-ohw-editable="text"]:empty,
+      [data-ohw-editable="plain"]:empty,
+      [data-ohw-editable="text"]:has(> br:only-child),
+      [data-ohw-editable="plain"]:has(> br:only-child) {
+        min-width: 8ch;
+        min-height: 1.4em;
+        padding: 0 4px;
+      }
+      /* A social left deliberately wordless is a choice, not a mistake, so its empty label takes no
+         room at rest \u2014 the row stays as tight as the site draws it. The box appears only while that
+         row is being worked on: pointer over it, or the item selected (OHH-736). */
+      /* The room itself is kept by the element in both modes \u2014 see markEmptySocialLabels. Left
+         here is only what belongs to editing: something to aim at inside that room. */
+      [data-ohw-socials-row] [data-ohw-empty-label] {
+        padding: 0 4px;
+      }
+      [data-ohw-editable="text"]:empty::before,
+      [data-ohw-editable="plain"]:empty::before {
+        content: '';
+        display: inline-block;
+        width: 100%;
+        height: 1.4em;
+      }
+      /* Not inside a socials row. A stand-in the width of its container is right for a paragraph
+         that has been emptied, but beside an icon it opened a gap as wide as the row would allow:
+         the editor showed the icons strewn across three lines while the published page \u2014 which
+         carries no editing chrome at all \u2014 packed them together, and the two looked nothing alike
+         (OHH-736). The box is given its width on hover and selection instead, which is when it is
+         there to be clicked into. */
+      [data-ohw-socials-row] [data-ohw-editable="text"]:empty::before,
+      [data-ohw-socials-row] [data-ohw-editable="plain"]:empty::before {
+        width: 0;
+      }
+      /* Room inside a socials row so the row itself can be clicked. Without it the items fill their
+         own frame edge to edge and the only way to the row was through an icon and Select parent. */
+      [data-ohw-socials-row] {
+        padding: 6px;
+      }
+      /* A row of socials stays a row. The blanket block above is for body text; applied to the
+         words inside a social it stacked every item on its own line, so instead of wrapping the
+         row grew downwards and pushed the footer with it (OHH-736). */
+      [data-ohw-socials-row] [data-ohw-editable="text"],
+      [data-ohw-socials-row] [data-ohw-editable="plain"] {
+        display: inline-block;
+      }
+      /* The glyph too, and this one mattered most: as a block it filled the whole width of its
+         link and sat over the words, so every click meant for the text landed on the icon. */
+      [data-ohw-socials-row] [data-ohw-editable="icon"] {
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+      }
+      [data-ohw-socials-row] a {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
       /* Not the form: it is a layout container (flex/grid with gaps), and forcing block
          crushed its fields together (OHH-490). */
       [data-ohw-editable]:not([data-ohw-editable="form"]) {
@@ -18037,6 +18296,13 @@ function OhhwellsBridge() {
           return;
         }
       }
+      const socialsRowUnderPoint = socialsRowAtPoint(e.clientX, e.clientY);
+      if (socialsRowUnderPoint) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectFrameRef.current(socialsRowUnderPoint);
+        return;
+      }
       const logoEl = getLogoElement(target);
       if (logoEl) {
         e.preventDefault();
@@ -18091,6 +18357,19 @@ function OhhwellsBridge() {
           }
           return;
         }
+        const socialItem = getSocialItem(editable);
+        const isVisibleWords = (editable.dataset.ohwEditable === "text" || editable.dataset.ohwEditable === "plain") && editable.offsetParent !== null;
+        if (socialItem && isVisibleWords) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (activeElRef.current === editable) return;
+          if (selectedElRef.current === socialItem) {
+            activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
+            return;
+          }
+          selectRef.current(socialItem);
+          return;
+        }
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
@@ -18160,7 +18439,7 @@ function OhhwellsBridge() {
         selectFrameRef.current(navContainerToSelect);
         return;
       }
-      const socialsRowToSelect = isSocialsRow(target) ? target : null;
+      const socialsRowToSelect = isSocialsRow(target) ? target : findSocialsRow(target);
       if (socialsRowToSelect && !getSocialItem(target)) {
         e.preventDefault();
         e.stopPropagation();
@@ -19162,15 +19441,25 @@ function OhhwellsBridge() {
       if (pending && updates.some((update) => update.hrefKey === pending.hrefKey)) {
         pendingSocialAddRef.current = null;
         if (pending.row.isConnected) {
-          const created = insertSocialItem(pending.row, pending.after, editContentRef.current);
+          const created = insertSocialItem(pending.row, pending.after, editContentRef.current, {
+            keys: { hrefKey: pending.hrefKey, iconKey: pending.iconKey }
+          });
           if (created) {
             const orderJson = JSON.stringify(created.order);
             editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
             nodes.push({ key: SOCIALS_ORDER_KEY, text: orderJson });
+            const words = created.item.querySelector(
+              '[data-ohw-social-label], [data-ohw-editable="text"], [data-ohw-editable="plain"]'
+            );
+            const labelKey = words?.getAttribute("data-ohw-key");
+            const labelText = words?.textContent?.trim();
+            if (labelKey && labelText && !editContentRef.current[labelKey]) {
+              nodes.push({ key: labelKey, text: labelText });
+            }
           }
         }
       }
-      for (const { hrefKey, iconKey: requestedIconKey, url, iconMarkup, platformId, label } of updates) {
+      for (const { hrefKey, iconKey: requestedIconKey, url, iconMarkup, platformId, label, keepLabel } of updates) {
         if (hrefKey) {
           document.querySelectorAll(`[data-ohw-href-key="${hrefKey}"]`).forEach((el) => applyLinkHref(el, url));
           nodes.push({ key: hrefKey, text: url });
@@ -19182,6 +19471,7 @@ function OhhwellsBridge() {
         if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
           document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
             applyIconMarkup(el, iconMarkup);
+            el.removeAttribute(SOCIALS_ICON_PLACEHOLDER_ATTR);
           });
           nodes.push({ key: iconKey, text: iconMarkup });
         }
@@ -19189,9 +19479,10 @@ function OhhwellsBridge() {
         if (iconKey && label) {
           const labelKey = socialLabelKey(iconKey);
           document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
+            if (keepLabel && el.textContent?.trim()) return;
             el.textContent = label;
           });
-          nodes.push({ key: labelKey, text: label });
+          if (!keepLabel) nodes.push({ key: labelKey, text: label });
         }
       }
       if (!nodes.length) return;
@@ -19324,8 +19615,11 @@ function OhhwellsBridge() {
         }
         setMaxBadge({ rect: el.getBoundingClientRect(), current: Math.min(current, maxLen), max: maxLen });
       }
+      if (el.closest(`[${SOCIALS_ROW_ATTR}]`)) markEmptySocialLabels(document, el);
       const html = sanitizeHtml(el.innerHTML);
-      document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((sibling) => {
+      editContentRef.current = { ...editContentRef.current, [key]: html };
+      const sharing = document.querySelectorAll(`[data-ohw-key="${key}"]`);
+      sharing.forEach((sibling) => {
         if (sibling !== el) sibling.innerHTML = html;
       });
       const timers = autoSaveTimers.current;
@@ -19334,7 +19628,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));
     };
@@ -19402,7 +19696,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" });
     };
@@ -19484,7 +19778,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)}"]`);
@@ -19506,7 +19800,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 });
@@ -19520,7 +19814,7 @@ function OhhwellsBridge() {
       aiSectionsRef.current = value;
       applyAiSectionsToDom(parseAiSectionsState(value));
       applyStylesToDom(parseStyleStore(stylesRef.current));
-      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();
@@ -19574,6 +19868,48 @@ function OhhwellsBridge() {
       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;
@@ -19909,7 +20245,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) => {
@@ -20260,6 +20596,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiSetStyles);
       window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handlePanelDragging);
+      window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
@@ -20665,15 +21002,23 @@ function OhhwellsBridge() {
       const result = duplicateSocialItem(social, editContentRef.current);
       if (!result) return;
       const orderJson = JSON.stringify(result.order);
+      const copyIcon = result.item.querySelector('[data-ohw-editable="icon"]');
+      const copyLabel = result.item.querySelector(
+        '[data-ohw-social-label], [data-ohw-editable="text"], [data-ohw-editable="plain"]'
+      );
+      const storedOf = (key) => key ? editContentRef.current[key] : void 0;
       const carried = [
-        { from: result.copiedFrom?.href, to: result.hrefKey },
-        { from: result.copiedFrom?.icon, to: result.iconKey },
-        { from: result.copiedFrom?.icon ? socialPlatformKey(result.copiedFrom.icon) : null, to: socialPlatformKey(result.iconKey) }
+        { key: result.hrefKey, text: storedOf(result.copiedFrom?.href) ?? result.item.getAttribute("href") },
+        { key: result.iconKey, text: storedOf(result.copiedFrom?.icon) ?? copyIcon?.innerHTML },
+        {
+          key: socialPlatformKey(result.iconKey),
+          text: storedOf(result.copiedFrom?.icon ? socialPlatformKey(result.copiedFrom.icon) : null)
+        },
+        { key: copyLabel?.getAttribute("data-ohw-key"), text: copyLabel?.textContent?.trim() }
       ];
       const nodes = [{ key: SOCIALS_ORDER_KEY, text: orderJson }];
-      for (const { from, to } of carried) {
-        const value = from ? editContentRef.current[from] : void 0;
-        if (value) nodes.push({ key: to, text: value });
+      for (const { key, text } of carried) {
+        if (key && text) nodes.push({ key, text });
       }
       editContentRef.current = {
         ...editContentRef.current,
@@ -21200,7 +21545,7 @@ function OhhwellsBridge() {
             onDragHandleDragEnd: handleItemDragEnd,
             onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
             onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
-            itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
+            itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
             toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               ItemActionToolbar,
               {