@ohhwells/bridge 0.1.69-next.208 → 0.1.70-next.210

package/dist/index.cjs

@@ -1927,6 +1927,17 @@ function applyAiSectionsToDom(state, options) {
     });
     mounted.set(entry.id, { root, container, serialized });
   }
+  if (state.hideTemplate === true) {
+    let prev = null;
+    for (const entry of pageSections) {
+      const el = mounted.get(entry.id)?.container;
+      if (!el) continue;
+      if (prev && !(prev.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING)) {
+        prev.insertAdjacentElement("afterend", el);
+      }
+      prev = el;
+    }
+  }
   syncReplacedOriginals(state);
   syncRemovedSections(state);
   syncTemplateHidden(state, pageSections.length > 0);
@@ -10852,11 +10863,15 @@ function referenceBox(slot) {
 }
 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;
+  if (!box) {
+    glyph.style.width = "1.5em";
+    glyph.style.height = "1.5em";
+    return holder.innerHTML;
+  }
   glyph.style.width = `${Math.round(box.width)}px`;
   glyph.style.height = `${Math.round(box.height)}px`;
   return holder.innerHTML;
@@ -10900,39 +10915,58 @@ 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_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;
 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;
-  if (SOCIAL_KEY_RE.test(anchor.getAttribute("data-ohw-href-key") ?? "")) return true;
+  const hrefKey = anchor.getAttribute("data-ohw-href-key") ?? "";
+  if (SOCIAL_KEY_RE.test(hrefKey) || SOCIAL_PLATFORM_KEY_RE.test(hrefKey)) return true;
   return anchor.querySelectorAll(ICON_SELECTOR).length === 1;
 }
 function getSocialItem(el) {
   const anchor = el.closest("a");
   return isSocialItem(anchor) ? anchor : null;
 }
+function isPerItemWrapper(wrapper) {
+  if (wrapper.matches("li")) return true;
+  if (!wrapper.matches("div, span")) return false;
+  const siblings = Array.from(wrapper.parentElement?.children ?? []).filter(
+    (child) => child instanceof HTMLElement && child.querySelectorAll("a").length === 1
+  );
+  return siblings.length > 1;
+}
 function findSocialsRow(el) {
   const item = getSocialItem(el);
   if (!item) return null;
+  const marked = item.closest(`[${SOCIALS_ROW_ATTR}]`);
+  if (marked) return marked;
   const wrapper = item.parentElement;
-  const row = wrapper && wrapper.querySelectorAll("a").length === 1 && wrapper.matches("li, div, span") ? wrapper.parentElement : wrapper;
+  const row = wrapper && isPerItemWrapper(wrapper) ? wrapper.parentElement : wrapper;
   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) {
+  if (el.hasAttribute(SOCIALS_ROW_ATTR)) return true;
   const anchors = Array.from(el.querySelectorAll("a"));
   if (!anchors.length || !anchors.some((anchor) => isSocialItem(anchor))) return false;
   return findSocialsRow(anchors[0]) === el;
 }
-var MAX_SOCIAL_ITEMS_PER_ROW = 7;
+var MAX_SOCIAL_ITEMS_PER_ROW = 14;
 function canAddSocialItem(row) {
   return listSocialItems(row).length < MAX_SOCIAL_ITEMS_PER_ROW;
 }
+function canRemoveSocialItem(item) {
+  const row = findSocialsRow(item);
+  return row ? listSocialItems(row).length > 1 : false;
+}
 function listSocialItems(row) {
   return Array.from(row.children).map((child) => {
     if (!(child instanceof HTMLElement)) return null;
@@ -11026,8 +11060,10 @@ function fromMarkup(markup) {
 var rowKeys = /* @__PURE__ */ new WeakMap();
 function rowKeyOf(row) {
   const first = listSocialItems(row)[0];
-  const itemKey = first ? socialIconKey(first) ?? socialHrefKey(first)?.replace(/-href$/, "") : null;
-  const derived = itemKey?.replace(/-[^-]+$/, "") || null;
+  const itemKey = first ? socialIconKey(first)?.replace(/-icon$/, "") ?? socialHrefKey(first)?.replace(/-href$/, "") : null;
+  const withoutItem = itemKey?.replace(/-[^-]+$/, "") || null;
+  const lastSegment = itemKey?.match(/[^-]+$/)?.[0] ?? "";
+  const derived = withoutItem ? SOCIAL_PLATFORM_KEY_RE.test(lastSegment) ? `${withoutItem}-socials` : withoutItem : null;
   if (derived) rowKeys.set(row, derived);
   return derived ?? rowKeys.get(row) ?? "social";
 }
@@ -11055,7 +11091,13 @@ 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 = {}) {
+function planSocialInsert(row, content = {}) {
+  if (!canAddSocialItem(row)) return null;
+  const rowKey = rowKeyOf(row);
+  const iconKey = `${rowKey}-${nextSocialIndex(row, rowKey, content)}`;
+  return { hrefKey: `${iconKey}-href`, iconKey };
+}
+function insertSocialItem(row, after, content = {}, { placeholder = true } = {}) {
   const rowKey = rowKeyOf(row);
   const template = listSocialItems(row)[0];
   const remembered = rowTemplates.get(rowKey);
@@ -11076,16 +11118,23 @@ function insertSocialItem(row, after, content = {}) {
   });
   const icon = item.querySelector(ICON_SELECTOR);
   icon?.setAttribute("data-ohw-key", iconKey);
+  if (placeholder && icon) icon.innerHTML = PLACEHOLDER_SOCIAL_ICON;
   item.querySelector(`[${SOCIALS_LABEL_ATTR}]`)?.remove();
   const afterUnit = after ? socialRowUnit(after) : null;
   if (afterUnit && afterUnit.parentElement === row) afterUnit.insertAdjacentElement("afterend", unit);
   else row.appendChild(unit);
   markSocialsRows(row.ownerDocument);
+  if (placeholder) {
+    const label = socialLabelElement(item);
+    if (label && !label.textContent?.trim()) label.textContent = PLACEHOLDER_SOCIAL_LABEL;
+  }
+  applySocialsDisplayToRow(row, socialsDisplayFor(row, content));
   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 (row && !canAddSocialItem(row)) return null;
+  const created = row ? insertSocialItem(row, item, content, { placeholder: false }) : null;
   if (!created) return null;
   const sourceHref = socialHrefKey(item);
   const sourceIcon = socialIconKey(item);
@@ -11096,14 +11145,19 @@ function duplicateSocialItem(item, content) {
     const slot = link.querySelector(ICON_SELECTOR);
     if (slot) slot.innerHTML = glyph;
   }
+  const sourceLabel = socialLabelElement(item)?.textContent?.trim();
+  const copyLabel = socialLabelElement(link);
+  if (copyLabel && sourceLabel) copyLabel.textContent = sourceLabel;
+  if (row) applySocialsDisplayToRow(row, socialsDisplayFor(row, content));
   return {
     ...created,
     copiedFrom: { href: sourceHref, icon: sourceIcon }
   };
 }
-function removeSocialItem(item, content) {
+function removeSocialItem(item, content, { allowLast = false } = {}) {
   const row = findSocialsRow(item);
   if (!row) return null;
+  if (!allowLast && !canRemoveSocialItem(item)) return null;
   const hrefKey = socialHrefKey(item);
   const iconKey = socialIconKey(item);
   const removedKeys = [hrefKey, iconKey].filter((key) => Boolean(key));
@@ -11301,14 +11355,19 @@ function applySocialsDisplayFromContent(content, root = document) {
   });
 }
 function socialsMissingIcons(row) {
-  return listSocialItems(row).filter((item) => !item.querySelector(ICON_SELECTOR)).map((item) => ({ hrefKey: socialHrefKey(item) ?? "", url: item.getAttribute("href") ?? "" })).filter((entry) => Boolean(entry.hrefKey));
+  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));
 }
 function ensureIconSlot(item) {
   const existing = item.querySelector(ICON_SELECTOR);
   if (existing) return existing.dataset.ohwKey ?? null;
   const hrefKey = socialHrefKey(item);
   if (!hrefKey) return null;
-  const iconKey = hrefKey.replace(/-href$/, "");
+  const base = hrefKey.replace(/-href$/, "");
+  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");
@@ -14590,6 +14649,9 @@ function isMediaEditable(el) {
   const t = el.dataset.ohwEditable;
   return t === "image" || t === "bg-image" || t === "video";
 }
+function isIconMarkupValue(value) {
+  return /^\s*<(svg|img)\b/i.test(value);
+}
 function isIconEditable(el) {
   return el.dataset.ohwEditable === "icon";
 }
@@ -16441,6 +16503,7 @@ function OhhwellsBridge() {
     setNavGroupForceOpen(anchor, true);
     activateRef.current(label);
   }, []);
+  const pendingSocialAddRef = (0, import_react17.useRef)(null);
   const handleAddChildItem = (0, import_react17.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
@@ -16455,21 +16518,17 @@ function OhhwellsBridge() {
         return;
       }
       const after = getSocialItem(selected);
-      const result2 = insertSocialItem(socialsRow, after, editContentRef.current);
-      if (!result2) return;
-      const orderJson = JSON.stringify(result2.order);
-      applySocialsDisplayToRow(socialsRow, socialsDisplayFor(socialsRow, editContentRef.current));
-      editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
-      postToParent2({ type: "ow:change", nodes: [{ key: SOCIALS_ORDER_KEY, text: orderJson }] });
+      const planned = planSocialInsert(socialsRow, editContentRef.current);
+      if (!planned) return;
+      pendingSocialAddRef.current = { row: socialsRow, after, ...planned };
       postToParentRef.current({
         type: "ow:social-pick",
-        hrefKey: result2.hrefKey,
-        iconKey: result2.iconKey,
+        hrefKey: planned.hrefKey,
+        iconKey: planned.iconKey,
         url: "",
-        iconStyle: detectIconStyle(result2.item),
+        iconStyle: detectIconStyle(getSocialItem(selected) ?? socialsRow),
         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.
+        // Tells the editor this one is not on the page yet, so dismissing means "never mind".
         isNew: true
       });
       return;
@@ -17061,6 +17120,19 @@ function OhhwellsBridge() {
       row
     });
   }, []);
+  const isEditModeRef = (0, import_react17.useRef)(false);
+  const requestMissingSocialIconsRef = (0, import_react17.useRef)(() => {
+  });
+  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 });
+  }, []);
+  requestMissingSocialIconsRef.current = requestMissingSocialIcons;
+  isEditModeRef.current = isEditMode;
   const changeSocialsDisplay = (0, import_react17.useCallback)(
     (row, next) => {
       if (next.icon) {
@@ -17321,6 +17393,7 @@ function OhhwellsBridge() {
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
           } else if (el.dataset.ohwEditable === "form") {
+          } else if (isIconMarkupValue(val)) {
           } else if (el.innerHTML !== val) {
             el.innerHTML = val;
           }
@@ -17333,6 +17406,7 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(content);
       reconcileSocialsFromContent(content);
       applySocialsDisplayFromContent(content);
+      if (isEditModeRef.current) requestMissingSocialIconsRef.current();
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
       initSectionInstancesFromContent(content, window.location.pathname);
@@ -17475,11 +17549,15 @@ function OhhwellsBridge() {
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
         }
+        if (typeof content[AI_SECTIONS_KEY] === "string") {
+          applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
+        }
         if (typeof content[STYLE_STORE_KEY] === "string") {
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
         }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
+          if (key === AI_SECTIONS_KEY) continue;
           if (key === LOGO_PLACEHOLDER_KEY) continue;
           if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (key === BRAND_KIT_KEY) continue;
@@ -17501,6 +17579,7 @@ function OhhwellsBridge() {
             } else if (el.dataset.ohwEditable === "link") {
               applyLinkHref(el, val);
             } else if (el.dataset.ohwEditable === "form") {
+            } else if (isIconMarkupValue(val)) {
             } else if (el.innerHTML !== val) {
               el.innerHTML = val;
             }
@@ -17512,6 +17591,7 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
           if (!form.querySelector("[data-ohw-form-success]")) {
             reconcileFieldsFromContent(form, content);
@@ -17597,6 +17677,7 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key")) || getSocialItem(el)) {
             disableNativeHrefDrag(el);
@@ -19050,9 +19131,14 @@ function OhhwellsBridge() {
     const handleSocialCancel = (e) => {
       if (e.data?.type !== "ow:social-cancel") return;
       const { hrefKey } = e.data;
+      if (pendingSocialAddRef.current?.hrefKey === hrefKey) {
+        pendingSocialAddRef.current = null;
+        deselectRef.current();
+        return;
+      }
       const item = hrefKey ? findSocialByHrefKey(hrefKey) : null;
       if (!item) return;
-      const removed = removeSocialItem(item, editContentRef.current);
+      const removed = removeSocialItem(item, editContentRef.current, { allowLast: true });
       if (!removed) return;
       const orderJson = JSON.stringify(removed.order);
       editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
@@ -19063,11 +19149,27 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:social-update") return;
       const updates = Array.isArray(e.data.items) ? e.data.items : [e.data];
       const nodes = [];
-      for (const { hrefKey, iconKey, url, iconMarkup, platformId, label } of updates) {
+      const pending = pendingSocialAddRef.current;
+      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);
+          if (created) {
+            const orderJson = JSON.stringify(created.order);
+            editContentRef.current = { ...editContentRef.current, [SOCIALS_ORDER_KEY]: orderJson };
+            nodes.push({ key: SOCIALS_ORDER_KEY, text: orderJson });
+          }
+        }
+      }
+      for (const { hrefKey, iconKey: requestedIconKey, url, iconMarkup, platformId, label } of updates) {
         if (hrefKey) {
           document.querySelectorAll(`[data-ohw-href-key="${hrefKey}"]`).forEach((el) => applyLinkHref(el, url));
           nodes.push({ key: hrefKey, text: url });
         }
+        const slotFromItem = hrefKey ? findSocialByHrefKey(hrefKey)?.querySelector('[data-ohw-editable="icon"]') : null;
+        const requestedIsIconSlot = Boolean(requestedIconKey) && Boolean(document.querySelector(`[data-ohw-key="${requestedIconKey}"][data-ohw-editable="icon"]`));
+        const requestedIsFree = Boolean(requestedIconKey) && !document.querySelector(`[data-ohw-key="${requestedIconKey}"]`);
+        const iconKey = requestedIsIconSlot ? requestedIconKey : slotFromItem?.dataset.ohwKey ?? (requestedIsFree ? requestedIconKey : void 0);
         if (iconKey && typeof iconMarkup === "string" && iconMarkup) {
           document.querySelectorAll(`[data-ohw-key="${iconKey}"][data-ohw-editable="icon"]`).forEach((el) => {
             applyIconMarkup(el, iconMarkup);
@@ -19271,6 +19373,7 @@ function OhhwellsBridge() {
             applyLinkHref(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
+          } else if (isIconMarkupValue(val)) {
           } else {
             el.innerHTML = val;
           }
@@ -20355,7 +20458,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.69",
+        bridgeVersion: "0.1.70",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -20541,6 +20644,15 @@ function OhhwellsBridge() {
     if (!hrefKey) return;
     const social = getSocialItem(selected);
     if (social) {
+      const row = findSocialsRow(social);
+      if (row && !canAddSocialItem(row)) {
+        postToParent2({
+          type: "ow:toast",
+          title: `Maximum ${MAX_SOCIAL_ITEMS_PER_ROW} social icons`,
+          toastType: "error"
+        });
+        return;
+      }
       const result = duplicateSocialItem(social, editContentRef.current);
       if (!result) return;
       const orderJson = JSON.stringify(result.order);
@@ -20935,6 +21047,7 @@ function OhhwellsBridge() {
                       type: "button",
                       className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
                       onClick: () => {
+                        setFieldTypePickerOpen(false);
                         const form = formPickElRef.current;
                         if (!form) return;
                         postToParent2({
@@ -20968,6 +21081,7 @@ function OhhwellsBridge() {
                       "aria-pressed": formViewState === state,
                       className: "rounded-md px-2.5 py-1 text-[13px] font-semibold capitalize transition-colors " + (formViewState === state ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
                       onClick: () => {
+                        setFieldTypePickerOpen(false);
                         const form = formPickElRef.current;
                         const key = form ? formKeyOf(form) : null;
                         if (!form || !key) return;
@@ -21100,7 +21214,15 @@ function OhhwellsBridge() {
                 })(),
                 editLinkDisabled: false,
                 moreDisabled: false,
-                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow,
+                deleteDisabled: selectedElRef.current !== null && (() => {
+                  const social = getSocialItem(selectedElRef.current);
+                  return social ? !canRemoveSocialItem(social) : false;
+                })(),
+                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && (() => {
+                  const social = getSocialItem(selectedElRef.current);
+                  const row = social ? findSocialsRow(social) : null;
+                  return row ? !canAddSocialItem(row) : false;
+                })(),
                 showEditLink: !isFooterFrameSelection && !selectedIsSocialsRow && navDropdownPreviewOpen === null,
                 showAddItem: isFooterFrameSelection || selectedIsSocialsRow || !selectedIsCta && Boolean(
                   selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)