@ohhwells/bridge 0.1.70-next.210 → 0.1.70-next.212

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,
@@ -8617,7 +8615,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 +8643,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 +8698,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 +8710,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 +8815,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 +10849,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 +10876,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 +10918,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 +10997,67 @@ 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) 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 +11068,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 +11124,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 +11135,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 +11167,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);
@@ -11126,9 +11175,9 @@ function insertSocialItem(row, after, content = {}, { placeholder = true } = {})
   markSocialsRows(row.ownerDocument);
   if (placeholder) {
     const label = socialLabelElement(item);
-    if (label && !label.textContent?.trim()) label.textContent = PLACEHOLDER_SOCIAL_LABEL;
+    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 +11194,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 +11237,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 +11272,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 +11351,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 +11402,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 +11435,14 @@ 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 ensureIconSlot(item) {
   const existing = item.querySelector(ICON_SELECTOR);
@@ -11372,6 +11456,8 @@ function ensureIconSlot(item) {
   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 +14031,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 +14404,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 +14427,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",
@@ -14793,6 +14894,10 @@ function getNavigationItemAnchor(el) {
 function isNavigationItem2(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function socialWordsClicked(target, item) {
+  const text = target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
+  return Boolean(text && item.contains(text));
+}
 function requestSocialDialog(anchor, post, content) {
   const item = getSocialItem(anchor);
   if (!item) return false;
@@ -14936,6 +15041,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();
@@ -16518,7 +16632,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({
@@ -16778,7 +16893,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();
@@ -16968,7 +17084,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 });
   }, []);
@@ -17123,13 +17239,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;
@@ -17138,6 +17257,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 });
         }
@@ -17227,8 +17347,16 @@ function OhhwellsBridge() {
   );
   const activate = (0, import_react17.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
-    if (isIconEditable(el)) return;
-    if (el.hasAttribute("data-ohw-social-label")) 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;
     selectedHrefKeyRef.current = null;
@@ -17406,6 +17534,7 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(content);
       reconcileSocialsFromContent(content);
       applySocialsDisplayFromContent(content);
+      applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
       if (isEditModeRef.current) requestMissingSocialIconsRef.current();
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
@@ -17591,6 +17720,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]")) {
@@ -17677,6 +17807,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)) {
@@ -17781,6 +17912,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"]) {
@@ -18033,6 +18224,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();
@@ -18087,6 +18285,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;
@@ -18095,7 +18306,9 @@ function OhhwellsBridge() {
           e.stopPropagation();
           if (selectedElRef.current === navAnchor) {
             if (e.detail >= 2) return;
-            if (requestSocialDialog(navAnchor, postToParentRef.current, editContentRef.current)) return;
+            if (!socialWordsClicked(target, navAnchor) && requestSocialDialog(navAnchor, postToParentRef.current, editContentRef.current)) {
+              return;
+            }
             const activateTarget = isButtonLikeElement(hrefLookupTarget) ? navAnchor.querySelector('[data-ohw-editable="text"]') ?? hrefLookupTarget : hrefLookupTarget;
             activateRef.current(activateTarget, { caretX: e.clientX, caretY: e.clientY });
             return;
@@ -18113,7 +18326,9 @@ function OhhwellsBridge() {
         e.preventDefault();
         e.stopPropagation();
         if (selectedElRef.current === hrefAnchor) {
-          if (requestSocialDialog(hrefAnchor, postToParentRef.current, editContentRef.current)) return;
+          if (!socialWordsClicked(target, hrefAnchor) && requestSocialDialog(hrefAnchor, postToParentRef.current, editContentRef.current)) {
+            return;
+          }
           const textEditable = hrefAnchor.querySelector('[data-ohw-editable="text"]') ?? hrefAnchor.querySelector("[data-ohw-editable]");
           if (textEditable) {
             activateRef.current(textEditable, {
@@ -18152,7 +18367,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();
@@ -18212,7 +18427,8 @@ function OhhwellsBridge() {
       if (target.closest('[data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"]')) {
         return;
       }
-      if (getSocialItem(target)) return;
+      const socialWords = getSocialItem(target) ? target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]') : null;
+      if (getSocialItem(target) && (!socialWords || socialWords.offsetParent === null)) return;
       const navLabel = getNavigationLabelEditable(target);
       const editable = navLabel?.editable ?? target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
       if (!editable || isMediaEditable(editable) || editable.dataset.ohwEditable === "link") return;
@@ -19153,15 +19369,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 });
@@ -19173,6 +19399,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 });
         }
@@ -19180,9 +19407,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;
@@ -19315,8 +19543,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;
@@ -20656,15 +20887,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,
@@ -21191,7 +21430,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,
               {