@ohhwells/bridge 0.1.54-next.151 → 0.1.54-next.153

package/dist/index.cjs

@@ -236,13 +236,17 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath && !isIcon ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "image" } : {};
+  const editAttrs = ctx.keyFor && editPath ? {
+    "data-ohw-key": ctx.keyFor(editPath),
+    "data-ohw-editable": isIcon ? "icon" : "image"
+  } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -9528,6 +9532,358 @@ function deleteNavbarItem(sourceAnchor) {
   };
 }
 
+// src/lib/icon-markup.ts
+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 source = (neighbour ?? slot).querySelector(GLYPH_SELECTOR);
+  const box = source?.getBoundingClientRect() ?? null;
+  return box?.width && box.height ? box : null;
+}
+function iconMarkupSizedFor(slot, markup) {
+  const box = referenceBox(slot);
+  if (!box) return markup;
+  const holder = document.createElement("div");
+  holder.innerHTML = markup;
+  const glyph = holder.querySelector(GLYPH_SELECTOR);
+  if (!glyph) return markup;
+  glyph.style.width = `${Math.round(box.width)}px`;
+  glyph.style.height = `${Math.round(box.height)}px`;
+  return holder.innerHTML;
+}
+function applyIconMarkup(slot, markup) {
+  if (!markup) return;
+  const coloured = iconMarkupInheritingColour(markup);
+  const sized = iconMarkupSizedFor(slot, coloured);
+  if (slot.innerHTML !== sized) slot.innerHTML = sized;
+  if (sized === coloured) {
+    requestAnimationFrame(() => {
+      if (!slot.isConnected) return;
+      const resized = iconMarkupSizedFor(slot, coloured);
+      if (resized !== coloured && slot.innerHTML !== resized) slot.innerHTML = resized;
+    });
+  }
+}
+function detectIconStyle(el) {
+  const row = el.closest("[data-ohw-socials-row]");
+  const glyphs = Array.from((row ?? el).querySelectorAll("svg"));
+  const outlined = glyphs.some((svg) => {
+    return Array.from(svg.querySelectorAll("*")).some((node) => {
+      return node.getAttribute("stroke") !== null && node.getAttribute("stroke") !== "none";
+    });
+  });
+  return outlined ? "outline" : "fill";
+}
+function iconMarkupInheritingColour(markup) {
+  const holder = document.createElement("div");
+  holder.innerHTML = markup;
+  holder.querySelectorAll("svg *").forEach((node) => {
+    if (node.getAttribute("fill") && node.getAttribute("fill") !== "none") {
+      node.setAttribute("fill", "currentColor");
+    }
+    if (node.getAttribute("stroke") && node.getAttribute("stroke") !== "none") {
+      node.setAttribute("stroke", "currentColor");
+    }
+  });
+  return holder.innerHTML;
+}
+
+// src/lib/socials-items.ts
+var ICON_SELECTOR = '[data-ohw-editable="icon"]';
+var SOCIALS_ROW_ATTR = "data-ohw-socials-row";
+var SOCIALS_ITEM_ATTR = "data-ohw-social-item";
+function isSocialItem(el) {
+  if (!el) return false;
+  const anchor = el instanceof HTMLAnchorElement ? el : el.closest("a");
+  if (!anchor) return false;
+  return anchor.querySelectorAll(ICON_SELECTOR).length === 1;
+}
+function getSocialItem(el) {
+  const anchor = el.closest("a");
+  return isSocialItem(anchor) ? anchor : null;
+}
+function findSocialsRow(el) {
+  const item = getSocialItem(el);
+  if (!item) return null;
+  const row = item.parentElement;
+  if (!row) return null;
+  const anchors = Array.from(row.querySelectorAll("a"));
+  if (!anchors.length || !anchors.every((anchor) => isSocialItem(anchor))) return null;
+  return row;
+}
+function isSocialsRow(el) {
+  const anchors = Array.from(el.querySelectorAll("a"));
+  return anchors.length > 0 && anchors.every((anchor) => isSocialItem(anchor));
+}
+function listSocialItems(row) {
+  return Array.from(row.children).filter((child) => {
+    return child instanceof HTMLElement && isSocialItem(child);
+  });
+}
+function listSocialsRows(root = document) {
+  const rows = /* @__PURE__ */ new Set();
+  root.querySelectorAll(ICON_SELECTOR).forEach((icon) => {
+    const row = findSocialsRow(icon);
+    if (row) rows.add(row);
+  });
+  root.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`).forEach((row) => rows.add(row));
+  return Array.from(rows);
+}
+var rowTemplates = /* @__PURE__ */ new Map();
+function markSocialsRows(root = document) {
+  root.querySelectorAll(`[${SOCIALS_ITEM_ATTR}]`).forEach((item) => {
+    item.removeAttribute(SOCIALS_ITEM_ATTR);
+  });
+  listSocialsRows(root).forEach((row) => {
+    row.setAttribute(SOCIALS_ROW_ATTR, "");
+    const items = listSocialItems(row);
+    if (items[0]) rowTemplates.set(rowKeyOf(row), items[0].outerHTML);
+    items.forEach((item, index) => {
+      item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
+      const iconKey = socialIconKey(item);
+      if (iconKey) ensureLabelSlot(item, iconKey);
+    });
+  });
+}
+var SOCIALS_LABEL_ATTR = "data-ohw-social-label";
+function ensureLabelSlot(item, iconKey) {
+  if (item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)) 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") ?? "";
+  item.appendChild(label);
+}
+function socialLabelKey(iconKey) {
+  return `${iconKey}-label`;
+}
+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]);
+    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;
+  }
+}
+function socialPlatformKey(iconKey) {
+  return `${iconKey}-platform`;
+}
+function socialHrefKey(item) {
+  return item.getAttribute("data-ohw-href-key");
+}
+function socialIconKey(item) {
+  return item.querySelector(ICON_SELECTOR)?.dataset.ohwKey ?? null;
+}
+var SOCIALS_ORDER_KEY = "__ohw_socials_order";
+function fromMarkup(markup) {
+  const holder = document.createElement("div");
+  holder.innerHTML = markup;
+  return holder.firstElementChild instanceof HTMLElement ? holder.firstElementChild : null;
+}
+var rowKeys = /* @__PURE__ */ new WeakMap();
+function rowKeyOf(row) {
+  const first = listSocialItems(row)[0];
+  const derived = first ? socialIconKey(first)?.replace(/-\d+$/, "") : null;
+  if (derived) rowKeys.set(row, derived);
+  return derived ?? rowKeys.get(row) ?? "social";
+}
+function getSocialsOrderFromDom(root = document) {
+  const order = {};
+  listSocialsRows(root).forEach((row) => {
+    order[rowKeyOf(row)] = listSocialItems(row).map((item) => socialHrefKey(item)).filter((key) => Boolean(key));
+  });
+  return order;
+}
+function hasStoredValue(content, hrefKey) {
+  const iconKey = hrefKey.replace(/-href$/, "");
+  return Boolean(content[hrefKey]) || Boolean(content[iconKey]);
+}
+function parseSocialsOrder(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    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));
+  return Math.max(-1, ...used) + 1;
+}
+function insertSocialItem(row, after, content = {}) {
+  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 item = template ? template.cloneNode(true) : fromMarkup(remembered);
+  if (!item) return null;
+  item.setAttribute("data-ohw-href-key", hrefKey);
+  item.setAttribute("href", "");
+  item.removeAttribute("aria-label");
+  item.querySelectorAll("[data-ohw-hovered], [data-ohw-selected]").forEach((el) => {
+    el.removeAttribute("data-ohw-hovered");
+    el.removeAttribute("data-ohw-selected");
+  });
+  const icon = item.querySelector(ICON_SELECTOR);
+  icon?.setAttribute("data-ohw-key", iconKey);
+  item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)?.remove();
+  if (after && after.parentElement === row) after.insertAdjacentElement("afterend", item);
+  else row.appendChild(item);
+  markSocialsRows(row.ownerDocument);
+  return { item, hrefKey, iconKey, order: getSocialsOrderFromDom(row.ownerDocument) };
+}
+function duplicateSocialItem(item, content) {
+  const row = findSocialsRow(item);
+  const created = row ? insertSocialItem(row, item, content) : null;
+  if (!created) return null;
+  const sourceHref = socialHrefKey(item);
+  const sourceIcon = socialIconKey(item);
+  const link = created.item;
+  if (sourceHref) link.setAttribute("href", item.getAttribute("href") ?? "");
+  const glyph = item.querySelector(ICON_SELECTOR)?.innerHTML;
+  if (glyph) {
+    const slot = link.querySelector(ICON_SELECTOR);
+    if (slot) slot.innerHTML = glyph;
+  }
+  return {
+    ...created,
+    copiedFrom: { href: sourceHref, icon: sourceIcon }
+  };
+}
+function removeSocialItem(item, content) {
+  const row = findSocialsRow(item);
+  if (!row) return null;
+  const hrefKey = socialHrefKey(item);
+  const iconKey = socialIconKey(item);
+  const removedKeys = [hrefKey, iconKey].filter((key) => Boolean(key));
+  if (!removedKeys.length) return null;
+  const previousOrder = getSocialsOrderFromDom(row.ownerDocument);
+  const previousContent = Object.fromEntries(
+    removedKeys.filter((key) => key in content).map((key) => [key, content[key]])
+  );
+  const nextSibling = item.nextElementSibling;
+  item.remove();
+  markSocialsRows(row.ownerDocument);
+  return {
+    removedKeys,
+    previousContent,
+    order: getSocialsOrderFromDom(row.ownerDocument),
+    previousOrder,
+    undo: () => {
+      if (nextSibling) nextSibling.before(item);
+      else row.appendChild(item);
+      markSocialsRows(row.ownerDocument);
+    }
+  };
+}
+function applySocialsOrder(order, root = document) {
+  listSocialsRows(root).forEach((row) => {
+    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) row.appendChild(item);
+    });
+  });
+  markSocialsRows(root);
+}
+function reconcileSocialsFromContent(content, root = document) {
+  markSocialsRows(root);
+  const stored = parseSocialsOrder(content[SOCIALS_ORDER_KEY]);
+  if (!stored) return;
+  listSocialsRows(root).forEach((row) => {
+    const wanted = stored[rowKeyOf(row)];
+    if (!wanted) return;
+    if (!wanted.length) return;
+    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 present = listSocialItems(row);
+    const surviving = present.filter((item) => {
+      const key = socialHrefKey(item);
+      return !key || wanted.includes(key);
+    });
+    if (surviving.length) {
+      present.forEach((item) => {
+        if (!surviving.includes(item)) item.remove();
+      });
+    }
+  });
+  applySocialsOrder(stored, root);
+}
+var DROP_BAR_THICKNESS = 3;
+function buildSocialDropSlots(row) {
+  const items = listSocialItems(row);
+  if (!items.length) return [];
+  return items.concat(items[items.length - 1]).map((item, index) => {
+    const rect = item.getBoundingClientRect();
+    const left = (index === items.length ? rect.right : rect.left) - DROP_BAR_THICKNESS / 2;
+    return {
+      insertIndex: index,
+      columnIndex: -1,
+      left,
+      top: rect.top,
+      width: DROP_BAR_THICKNESS,
+      height: rect.height,
+      direction: "vertical"
+    };
+  });
+}
+function findSocialByHrefKey(hrefKey, root = document) {
+  const el = root.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`);
+  return el ? getSocialItem(el) : null;
+}
+function buildSocialDropSlotsForKey(hrefKey, root = document) {
+  const item = findSocialByHrefKey(hrefKey, root);
+  const row = item ? findSocialsRow(item) : null;
+  return row ? buildSocialDropSlots(row) : [];
+}
+function hitTestSocialDropSlot(clientX, clientY, draggedHrefKey, root = document) {
+  const distanceTo = (slot) => {
+    const dx = clientX - (slot.left + slot.width / 2);
+    const dy = clientY < slot.top ? slot.top - clientY : Math.max(0, clientY - (slot.top + slot.height));
+    return Math.hypot(dx, dy);
+  };
+  const slots = buildSocialDropSlotsForKey(draggedHrefKey, root);
+  return slots.reduce((best, slot) => {
+    return !best || distanceTo(slot) < distanceTo(best) ? slot : best;
+  }, null);
+}
+function planSocialMove(hrefKey, insertIndex, root = document) {
+  const item = findSocialByHrefKey(hrefKey, root);
+  const row = item ? findSocialsRow(item) : null;
+  if (!row) return null;
+  const order = getSocialsOrderFromDom(root);
+  const key = rowKeyOf(row);
+  const current = order[key];
+  if (!current) return null;
+  const from = current.indexOf(hrefKey);
+  if (from < 0) return null;
+  const next = current.filter((_, index) => index !== from);
+  next.splice(insertIndex > from ? insertIndex - 1 : insertIndex, 0, hrefKey);
+  return { ...order, [key]: next };
+}
+
 // src/lib/footer-items.ts
 var FOOTER_ORDER_KEY = "__ohw_footer_order";
 var MAX_FOOTER_COLUMNS = 18;
@@ -11903,7 +12259,7 @@ function isNavbarLinksContainer(el) {
 function isNavigationItem(el) {
   const anchor = el.matches("[data-ohw-href-key]") ? el : el.closest("[data-ohw-href-key]");
   if (!anchor) return false;
-  return Boolean(anchor.querySelector('[data-ohw-editable="text"]'));
+  return Boolean(anchor.querySelector('[data-ohw-editable="text"]')) || Boolean(getSocialItem(anchor));
 }
 function findFooterItemGroup(item) {
   const explicit = item.closest("[data-ohw-footer-col], [data-ohw-footer-column]");
@@ -11924,8 +12280,9 @@ function isInferredFooterGroup(el) {
   const footer = el.closest("footer");
   if (!footer || el === footer) return false;
   if (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column")) return true;
+  if (isSocialsRow(el)) return false;
   const count = Array.from(el.querySelectorAll("[data-ohw-href-key]")).filter(
-    isNavigationItem
+    (item) => isNavigationItem(item) && !getSocialItem(item)
   ).length;
   return count >= 2;
 }
@@ -11969,7 +12326,8 @@ function deleteSelectedNavFooterItem(deps) {
           if (key.endsWith("-href")) applyLinkByKey2(key, text);
           else {
             document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`).forEach((el) => {
-              el.textContent = text;
+              if (el.getAttribute("data-ohw-editable") === "icon") applyIconMarkup(el, text);
+              else el.textContent = text;
             });
           }
         }
@@ -12031,6 +12389,21 @@ function deleteSelectedNavFooterItem(deps) {
     });
     return true;
   }
+  const social = getSocialItem(selected);
+  if (social) {
+    const result = removeSocialItem(social, getEditContent());
+    if (!result) return false;
+    finishDelete({
+      toastTitle: "Social deleted",
+      removedKeys: result.removedKeys,
+      previousContent: result.previousContent,
+      orderKey: SOCIALS_ORDER_KEY,
+      orderJson: JSON.stringify(result.order),
+      previousOrderJson: JSON.stringify(result.previousOrder),
+      undoDom: result.undo
+    });
+    return true;
+  }
   if (isFooterHrefKey(hrefKey)) {
     const result = deleteFooterItem(selected);
     if (!result) return false;
@@ -12567,13 +12940,29 @@ function isNavItemPointerTarget(el) {
 function getNavigationItemAnchor(el) {
   const anchor = el.matches("[data-ohw-href-key]") ? el : el.closest("[data-ohw-href-key]");
   if (!anchor) return null;
-  if (!anchor.querySelector('[data-ohw-editable="text"]')) return null;
+  if (!anchor.querySelector('[data-ohw-editable="text"]') && !getSocialItem(anchor)) return null;
   if (!isNavItemPointerTarget(anchor)) return null;
   return anchor;
 }
 function isNavigationItem2(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function requestSocialDialog(anchor, post, content) {
+  const item = getSocialItem(anchor);
+  if (!item) return false;
+  const iconKey = item.querySelector('[data-ohw-editable="icon"]')?.dataset.ohwKey ?? "";
+  post({
+    type: "ow:social-pick",
+    hrefKey: item.getAttribute("data-ohw-href-key") ?? "",
+    iconKey,
+    url: getLinkHref4(item),
+    iconStyle: detectIconStyle(item),
+    // What was chosen last time. Guessing from the address instead reads as "Website" for anything
+    // unrecognised, and for an item with no address at all — so a deliberate choice looked lost.
+    platformId: content[socialPlatformKey(iconKey)] ?? ""
+  });
+  return true;
+}
 function listNavigationItems() {
   return Array.from(
     document.querySelectorAll("nav [data-ohw-href-key], footer [data-ohw-href-key]")
@@ -12608,7 +12997,7 @@ function getNavigationRoot(el) {
   return el.closest("nav, footer, aside");
 }
 function countFooterNavItems(el) {
-  return Array.from(el.querySelectorAll("[data-ohw-href-key]")).filter(isNavigationItem2).length;
+  return Array.from(el.querySelectorAll("[data-ohw-href-key]")).filter((item) => isNavigationItem2(item) && !getSocialItem(item)).length;
 }
 function findFooterItemGroup2(item) {
   const explicit = item.closest("[data-ohw-footer-col], [data-ohw-footer-column]");
@@ -12629,10 +13018,11 @@ function isInferredFooterGroup2(el) {
   const footer = el.closest("footer");
   if (!footer || el === footer) return false;
   if (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column")) return true;
+  if (isSocialsRow(el)) return false;
   return countFooterNavItems(el) >= 2;
 }
 function isNavigationContainer(el) {
-  return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isInferredFooterGroup2(el);
+  return el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el) || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isNavigationRoot(el) || isSocialsRow(el) || isInferredFooterGroup2(el);
 }
 function isNavbarLinksContainer2(el) {
   return el.hasAttribute("data-ohw-nav-container");
@@ -12715,6 +13105,8 @@ function resolveNavContainerSelectionTarget(target, clientX, clientY) {
   return null;
 }
 function getNavigationSelectionParent(el) {
+  const socialsRow = findSocialsRow(el);
+  if (socialsRow) return socialsRow;
   if (isNavigationItem2(el)) {
     const childrenRoot = el.closest("[data-ohw-nav-children]");
     if (childrenRoot) {
@@ -12740,6 +13132,10 @@ function getNavigationSelectionParent(el) {
 }
 function collectNavigationItemSiblingHintRects(selected) {
   if (!isNavigationItem2(selected)) return [];
+  const socialsRow = findSocialsRow(selected);
+  if (socialsRow) {
+    return listSocialItems(socialsRow).filter((item) => item !== selected).map((item) => item.getBoundingClientRect());
+  }
   const footerColumn = getFooterColumn(selected);
   if (footerColumn) {
     return listFooterLinksInColumn(footerColumn).filter((link) => link !== selected).map((link) => link.getBoundingClientRect());
@@ -13441,6 +13837,8 @@ function OhhwellsBridge() {
   const toolbarVariantRef = (0, import_react16.useRef)("none");
   toolbarVariantRef.current = toolbarVariant;
   const [selectedIsCta, setSelectedIsCta] = (0, import_react16.useState)(false);
+  const [selectedIsSocial, setSelectedIsSocial] = (0, import_react16.useState)(false);
+  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react16.useState)(false);
   const [reorderHrefKey, setReorderHrefKey] = (0, import_react16.useState)(null);
   const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react16.useState)(false);
   const [toggleState, setToggleState] = (0, import_react16.useState)(null);
@@ -13709,6 +14107,8 @@ function OhhwellsBridge() {
     selectedHrefKeyRef.current = null;
     selectedFooterColAttrRef.current = null;
     setSelectedIsCta(false);
+    setSelectedIsSocial(false);
+    setSelectedIsSocialsRow(false);
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
     setIsFooterFrameSelection(false);
@@ -13793,6 +14193,8 @@ function OhhwellsBridge() {
     selectedFooterColAttrRef.current = null;
     markSelected(navAnchor);
     setSelectedIsCta(isCtaButton(navAnchor));
+    setSelectedIsSocial(Boolean(getSocialItem(navAnchor)));
+    setSelectedIsSocialsRow(false);
     const isDropdownTrigger = !isNestedNavChild(navAnchor) && (navItemHasDropdownChildren(navAnchor) || navItemOwnsDropdownPanel(navAnchor));
     if (isNestedNavChild(navAnchor)) {
       setNavGroupForceOpen(navAnchor, true);
@@ -13916,6 +14318,27 @@ function OhhwellsBridge() {
   const handleAddChildItem = (0, import_react16.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
+    const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
+    if (socialsRow) {
+      const after = getSocialItem(selected);
+      const result2 = insertSocialItem(socialsRow, after, editContentRef.current);
+      if (!result2) return;
+      const orderJson = JSON.stringify(result2.order);
+      editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
+      postToParent2({ type: "ow:change", nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }] });
+      postToParentRef.current({
+        type: "ow:social-pick",
+        hrefKey: result2.hrefKey,
+        iconKey: result2.iconKey,
+        url: "",
+        iconStyle: detectIconStyle(result2.item),
+        platformId: "",
+        // Lets the editor undo the insert if the dialog is dismissed: an item that was never given
+        // an address should not survive a Cancel.
+        isNew: true
+      });
+      return;
+    }
     if (toolbarVariantRef.current === "select-frame" && isFooterFrameSelection) {
       if (!selected.hasAttribute("data-ohw-footer-col") && !selected.closest("[data-ohw-footer-col]")) {
       }
@@ -14028,6 +14451,13 @@ function OhhwellsBridge() {
     }
     session.activeSlot = activeSlot;
     setSiblingHintRects([]);
+    if (session.kind === "social") {
+      const slots2 = session.hrefKey ? buildSocialDropSlotsForKey(session.hrefKey) : [];
+      setFooterDropSlots(slots2);
+      const activeIdx2 = activeSlot ? slots2.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
+      setActiveFooterDropIndex(activeIdx2 >= 0 ? activeIdx2 : null);
+      return;
+    }
     if (session.kind === "link") {
       const columns = listFooterColumns();
       const slots2 = [];
@@ -14064,7 +14494,7 @@ function OhhwellsBridge() {
       if (session.wasSelected && selectedElRef.current === session.draggedEl) {
         setToolbarRect(rect);
       }
-      const initialSlot = session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : hitTestColumnDropSlot(session.lastClientX, session.lastClientY);
+      const initialSlot = session.kind === "social" && session.hrefKey ? hitTestSocialDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : hitTestColumnDropSlot(session.lastClientX, session.lastClientY);
       refreshFooterDragVisuals(session, initialSlot, session.lastClientX, session.lastClientY);
     },
     [refreshFooterDragVisuals]
@@ -14080,8 +14510,11 @@ function OhhwellsBridge() {
       const x = typeof clientX === "number" && (clientX !== 0 || clientY !== 0) ? clientX : session.lastClientX;
       const y = typeof clientY === "number" && (clientX !== 0 || clientY !== 0) ? clientY : session.lastClientY;
       let nextOrder = null;
-      const slot = session.activeSlot ?? (session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(x, y, session.hrefKey) : session.kind === "column" ? hitTestColumnDropSlot(x, y) : null);
-      if (session.kind === "link" && session.hrefKey && slot) {
+      let nextSocialsOrder = null;
+      const slot = session.activeSlot ?? (session.kind === "social" && session.hrefKey ? hitTestSocialDropSlot(x, y, session.hrefKey) : session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(x, y, session.hrefKey) : session.kind === "column" ? hitTestColumnDropSlot(x, y) : null);
+      if (session.kind === "social" && session.hrefKey && slot) {
+        nextSocialsOrder = planSocialMove(session.hrefKey, slot.insertIndex);
+      } else if (session.kind === "link" && session.hrefKey && slot) {
         nextOrder = planFooterLinkMove(session.hrefKey, slot.columnIndex, slot.insertIndex);
       } else if (session.kind === "column" && slot) {
         nextOrder = planFooterColumnMove(session.sourceColumnIndex, slot.insertIndex);
@@ -14139,6 +14572,27 @@ function OhhwellsBridge() {
         }
         deselectRef.current();
       };
+      if (nextSocialsOrder) {
+        const orderJson = JSON.stringify(nextSocialsOrder);
+        editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
+        applySocialsOrder(nextSocialsOrder);
+        postToParentRef.current({
+          type: "ow:change",
+          nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }]
+        });
+        applySelectionAfterDrop();
+        clearFooterDragVisuals();
+        const reapply = nextSocialsOrder;
+        requestAnimationFrame(() => {
+          if (editContentRef.current[SOCIALS_ORDER_KEY] === orderJson) applySocialsOrder(reapply);
+          applySelectionAfterDrop();
+          requestAnimationFrame(() => {
+            if (editContentRef.current[SOCIALS_ORDER_KEY] === orderJson) applySocialsOrder(reapply);
+            resyncSelectedNavigationItem();
+          });
+        });
+        return;
+      }
       if (nextOrder) {
         const orderJson = JSON.stringify(nextOrder);
         editContentRef.current = {
@@ -14177,7 +14631,22 @@ function OhhwellsBridge() {
   const startFooterLinkDrag = (0, import_react16.useCallback)(
     (anchor, clientX, clientY, wasSelected) => {
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
-      if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
+      if (!hrefKey) return false;
+      if (getSocialItem(anchor)) {
+        beginFooterDrag({
+          kind: "social",
+          hrefKey,
+          columnEl: null,
+          sourceColumnIndex: 0,
+          wasSelected,
+          draggedEl: anchor,
+          lastClientX: clientX,
+          lastClientY: clientY,
+          activeSlot: null
+        });
+        return true;
+      }
+      if (!isFooterHrefKey(hrefKey)) return false;
       const column = findFooterColumnForLink(anchor);
       const columns = listFooterColumns();
       beginFooterDrag({
@@ -14314,6 +14783,8 @@ function OhhwellsBridge() {
     selectedFooterColAttrRef.current = null;
     markSelected(anchor);
     setSelectedIsCta(isCtaButton(anchor));
+    setSelectedIsSocial(Boolean(getSocialItem(anchor)));
+    setSelectedIsSocialsRow(false);
     clearHrefKeyHover(anchor);
     const isDropdownTrigger = !isNestedNavChild(anchor) && (navItemHasDropdownChildren(anchor) || navItemOwnsDropdownPanel(anchor));
     if (isNestedNavChild(anchor)) {
@@ -14356,6 +14827,8 @@ function OhhwellsBridge() {
     selectedFooterColAttrRef.current = isFooterColumn ? el.getAttribute("data-ohw-footer-col") ?? String(listFooterColumns().indexOf(el)) : null;
     markSelected(el);
     setSelectedIsCta(false);
+    setSelectedIsSocial(false);
+    setSelectedIsSocialsRow(isSocialsRow(el));
     clearHrefKeyHover(el);
     setNavGroupForceOpen(null, false);
     hoveredNavContainerRef.current = null;
@@ -14403,6 +14876,9 @@ function OhhwellsBridge() {
       selectedFooterColAttrRef.current = null;
       markSelected(logoEl);
       setSelectedIsCta(false);
+      setSelectedIsSocial(false);
+      setSelectedIsSocialsRow(false);
+      setSelectedIsSocialsRow(false);
       clearHrefKeyHover(logoEl);
       hoveredNavContainerRef.current = null;
       setHoveredNavContainerRect(null);
@@ -14486,11 +14962,15 @@ function OhhwellsBridge() {
   );
   const activate = (0, import_react16.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
+    if (isIconEditable(el)) return;
+    if (el.hasAttribute("data-ohw-social-label")) return;
     clearSelectedAttr();
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
     selectedFooterColAttrRef.current = null;
     setSelectedIsCta(false);
+    setSelectedIsSocial(false);
+    setSelectedIsSocialsRow(false);
     deactivate();
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
@@ -14634,7 +15114,7 @@ function OhhwellsBridge() {
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
-            if (el.innerHTML !== val) el.innerHTML = val;
+            applyIconMarkup(el, val);
           } else if (el.innerHTML !== val) {
             el.innerHTML = val;
           }
@@ -14645,6 +15125,7 @@ function OhhwellsBridge() {
       applyLogoSizes(content);
       reconcileNavbarItemsFromContent(content);
       reconcileFooterOrderFromContent(content);
+      reconcileSocialsFromContent(content);
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
       sectionsLoadedRef.current = true;
@@ -14712,6 +15193,7 @@ function OhhwellsBridge() {
         applyLogoFromContent(content);
         reconcileNavbarItemsFromContent(content);
         reconcileFooterOrderFromContent(content);
+        reconcileSocialsFromContent(content);
       } finally {
         observer?.observe(document.body, { childList: true, subtree: true });
       }
@@ -14789,6 +15271,7 @@ function OhhwellsBridge() {
         const content = contentForNav();
         reconcileNavbarItemsFromContent(content);
         reconcileFooterOrderFromContent(content);
+        reconcileSocialsFromContent(content);
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key"))) {
             disableNativeHrefDrag(el);
@@ -15086,7 +15569,7 @@ function OhhwellsBridge() {
           });
           return;
         }
-        if (isIconEditable(editable)) {
+        if (isIconEditable(editable) && !getSocialItem(editable)) {
           e.preventDefault();
           e.stopPropagation();
           aiSectionApiRef.current?.selectFromElement(editable);
@@ -15111,6 +15594,7 @@ function OhhwellsBridge() {
           e.stopPropagation();
           if (selectedElRef.current === navAnchor) {
             if (e.detail >= 2) return;
+            if (requestSocialDialog(navAnchor, postToParentRef.current, editContentRef.current)) return;
             activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
             return;
           }
@@ -15127,6 +15611,7 @@ function OhhwellsBridge() {
         e.preventDefault();
         e.stopPropagation();
         if (selectedElRef.current === hrefAnchor) {
+          if (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, {
@@ -15165,6 +15650,13 @@ function OhhwellsBridge() {
         selectFrameRef.current(navContainerToSelect);
         return;
       }
+      const socialsRowToSelect = isSocialsRow(target) ? target : null;
+      if (socialsRowToSelect && !getSocialItem(target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectFrameRef.current(socialsRowToSelect);
+        return;
+      }
       const footerColumnToSelect = resolveFooterColumnSelectionTarget(target, e.clientX, e.clientY);
       if (footerColumnToSelect) {
         e.preventDefault();
@@ -15217,6 +15709,7 @@ 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 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;
@@ -15990,7 +16483,7 @@ function OhhwellsBridge() {
       if (footerSession) {
         e.preventDefault();
         if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
-        const slot = footerSession.kind === "link" && footerSession.hrefKey ? hitTestLinkDropSlot(e.clientX, e.clientY, footerSession.hrefKey) : hitTestColumnDropSlot(e.clientX, e.clientY);
+        const slot = footerSession.kind === "social" && footerSession.hrefKey ? hitTestSocialDropSlot(e.clientX, e.clientY, footerSession.hrefKey) : footerSession.kind === "link" && footerSession.hrefKey ? hitTestLinkDropSlot(e.clientX, e.clientY, footerSession.hrefKey) : hitTestColumnDropSlot(e.clientX, e.clientY);
         refreshFooterDragVisualsRef.current(footerSession, slot, e.clientX, e.clientY);
         return;
       }
@@ -16042,6 +16535,47 @@ function OhhwellsBridge() {
       resumeAnimTracks();
       clearImageHover();
     };
+    const handleSocialCancel = (e) => {
+      if (e.data?.type !== "ow:social-cancel") return;
+      const { hrefKey } = e.data;
+      const item = hrefKey ? findSocialByHrefKey(hrefKey) : null;
+      if (!item) return;
+      const removed = removeSocialItem(item, editContentRef.current);
+      if (!removed) return;
+      const orderJson = JSON.stringify(removed.order);
+      editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }] });
+      deselectRef.current();
+    };
+    const handleSocialUpdate = (e) => {
+      if (e.data?.type !== "ow:social-update") return;
+      const { hrefKey, iconKey, url, iconMarkup, platformId, label } = e.data;
+      const nodes = [];
+      if (hrefKey) {
+        document.querySelectorAll(`[data-ohw-href-key="${hrefKey}"]`).forEach((el) => applyLinkHref(el, url));
+        nodes.push({ key: hrefKey, text: url });
+      }
+      if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
+        document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
+          applyIconMarkup(el, iconMarkup);
+        });
+        nodes.push({ key: iconKey, text: iconMarkup });
+      }
+      if (iconKey && platformId) nodes.push({ key: socialPlatformKey(iconKey), text: platformId });
+      if (iconKey && label) {
+        const labelKey = socialLabelKey(iconKey);
+        document.querySelectorAll(`[data-ohw-key="${labelKey}"]`).forEach((el) => {
+          el.textContent = label;
+        });
+        nodes.push({ key: labelKey, text: label });
+      }
+      if (!nodes.length) return;
+      editContentRef.current = {
+        ...editContentRef.current,
+        ...Object.fromEntries(nodes.map((node) => [node.key, node.text]))
+      };
+      postToParentRef.current({ type: "ow:change", nodes });
+    };
     const handleIconMarkup = (e) => {
       if (e.data?.type !== "ow:icon-markup") return;
       const { key, markup } = e.data;
@@ -16051,7 +16585,7 @@ function OhhwellsBridge() {
       );
       if (!targets.length) return;
       targets.forEach((el) => {
-        el.innerHTML = markup;
+        applyIconMarkup(el, markup);
       });
       postToParentRef.current({ type: "ow:change", nodes: [{ key, text: markup }] });
     };
@@ -16563,7 +17097,7 @@ function OhhwellsBridge() {
       }
       if (footerDragRef.current) {
         const session = footerDragRef.current;
-        const slot = session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : hitTestColumnDropSlot(session.lastClientX, session.lastClientY);
+        const slot = session.kind === "social" && session.hrefKey ? hitTestSocialDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(session.lastClientX, session.lastClientY, session.hrefKey) : hitTestColumnDropSlot(session.lastClientX, session.lastClientY);
         refreshFooterDragVisualsRef.current(session, slot, session.lastClientX, session.lastClientY);
       }
       if (navDragRef.current) {
@@ -16910,6 +17444,8 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleCollectSection);
+    window.addEventListener("message", handleSocialCancel);
+    window.addEventListener("message", handleSocialUpdate);
     window.addEventListener("message", handleIconMarkup);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleImageUploading);
@@ -16970,6 +17506,8 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleCollectSection);
+      window.removeEventListener("message", handleSocialCancel);
+      window.removeEventListener("message", handleSocialUpdate);
       window.removeEventListener("message", handleIconMarkup);
       window.removeEventListener("message", handleImageUrl);
       window.removeEventListener("message", handleImageUploading);
@@ -17049,7 +17587,7 @@ function OhhwellsBridge() {
         clearTextSelection();
         const session = footerDragRef.current;
         if (!session) return;
-        const slot = session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(e.clientX, e.clientY, session.hrefKey) : hitTestColumnDropSlot(e.clientX, e.clientY);
+        const slot = session.kind === "social" && session.hrefKey ? hitTestSocialDropSlot(e.clientX, e.clientY, session.hrefKey) : session.kind === "link" && session.hrefKey ? hitTestLinkDropSlot(e.clientX, e.clientY, session.hrefKey) : hitTestColumnDropSlot(e.clientX, e.clientY);
         refreshFooterDragVisualsRef.current(session, slot, e.clientX, e.clientY);
         return;
       }
@@ -17290,6 +17828,10 @@ function OhhwellsBridge() {
     if (!anchor) return;
     const key = anchor.getAttribute("data-ohw-href-key");
     if (!key) return;
+    if (requestSocialDialog(anchor, postToParentRef.current, editContentRef.current)) {
+      deselect();
+      return;
+    }
     bumpLinkPopoverGrace();
     setLinkPopover({
       key,
@@ -17330,6 +17872,30 @@ function OhhwellsBridge() {
     if (!selected || !isNavigationItem2(selected)) return;
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (!hrefKey) return;
+    const social = getSocialItem(selected);
+    if (social) {
+      const result = duplicateSocialItem(social, editContentRef.current);
+      if (!result) return;
+      const orderJson = JSON.stringify(result.order);
+      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) }
+      ];
+      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 });
+      }
+      editContentRef.current = {
+        ...editContentRef.current,
+        ...Object.fromEntries(nodes.map((node) => [node.key, node.text]))
+      };
+      postToParent2({ type: "ow:change", nodes });
+      enforceLinkHrefs();
+      requestAnimationFrame(() => selectRef.current(result.item));
+      return;
+    }
     if (isNavbarHrefKey(hrefKey)) {
       const result = duplicateNavbarItem(selected);
       if (!result) return;
@@ -17648,7 +18214,7 @@ function OhhwellsBridge() {
           onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
           onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
           itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && isFooterFrameSelection && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
@@ -17659,12 +18225,12 @@ function OhhwellsBridge() {
               addItemDisabled: false,
               editLinkDisabled: false,
               moreDisabled: false,
-              duplicateDisabled: isFooterFrameSelection,
-              showEditLink: !isFooterFrameSelection && navDropdownPreviewOpen === null,
-              showAddItem: isFooterFrameSelection || !selectedIsCta && Boolean(
+              duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow,
+              showEditLink: !isFooterFrameSelection && !selectedIsSocialsRow && navDropdownPreviewOpen === null,
+              showAddItem: isFooterFrameSelection || selectedIsSocialsRow || !selectedIsCta && Boolean(
                 selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
               ),
-              showMore: !selectedIsCta || isFooterFrameSelection,
+              showMore: (!selectedIsCta || isFooterFrameSelection) && !selectedIsSocialsRow,
               dropdownOpen: navDropdownPreviewOpen,
               onDropdownOpenChange: handleNavDropdownOpenChange,
               headingVisible: footerHeadingVisible,