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

package/dist/index.cjs

@@ -7870,6 +7870,150 @@ function parseSectionsFromHtml(html) {
   return parseSectionsFromRoot(doc);
 }
 
+// src/lib/section-instances.ts
+var SECTION_ORDER_KEY = "__ohw_section_order";
+var REMOVED_ATTR2 = "data-ohw-section-removed";
+function isRemovedSection(el) {
+  return el.hasAttribute(REMOVED_ATTR2);
+}
+function topLevelSections() {
+  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
+  );
+}
+function instanceIdOf(el) {
+  return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
+}
+function planSectionMove(instanceId, targetIndex, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const dragged = sections[index];
+  const others = sections.filter((_, i) => i !== index);
+  const clamped = Math.max(0, Math.min(targetIndex, others.length));
+  const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
+  return reordered.map((el, order) => ({
+    instanceId: instanceIdOf(el),
+    type: el.getAttribute("data-ohw-section") ?? "",
+    order,
+    pagePath: currentPath
+  }));
+}
+function moveSectionInstance(instanceId, direction, currentPath) {
+  const sections = topLevelSections();
+  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
+  if (index === -1) return null;
+  const siblingIndex = direction === "up" ? index - 1 : index + 1;
+  if (siblingIndex < 0 || siblingIndex >= sections.length) return null;
+  const entries = planSectionMove(instanceId, siblingIndex, currentPath);
+  if (!entries) return null;
+  applyPersistedOrder(entries);
+  return entries;
+}
+function syncRemovedFlags(entries) {
+  const removedIds = new Set(entries.filter((e) => e.removed).map((e) => e.instanceId));
+  document.querySelectorAll(`[${REMOVED_ATTR2}]`).forEach((el) => {
+    if (!removedIds.has(instanceIdOf(el))) {
+      el.style.removeProperty("display");
+      el.removeAttribute(REMOVED_ATTR2);
+    }
+  });
+  for (const id of removedIds) {
+    const el = document.querySelector(`[data-ohw-instance="${CSS.escape(id)}"]`);
+    if (el) {
+      el.style.display = "none";
+      el.setAttribute(REMOVED_ATTR2, "");
+    }
+  }
+}
+function applyPersistedOrder(entries) {
+  syncRemovedFlags(entries);
+  if (entries.length === 0) return;
+  const sections = topLevelSections();
+  if (sections.length === 0) return;
+  const orderIndex = new Map(entries.map((e) => [e.instanceId, e.order]));
+  const ordered = [...sections].sort((a, b) => {
+    const aOrder = orderIndex.get(instanceIdOf(a));
+    const bOrder = orderIndex.get(instanceIdOf(b));
+    if (aOrder === void 0 && bOrder === void 0) return 0;
+    if (aOrder === void 0) return 1;
+    if (bOrder === void 0) return -1;
+    return aOrder - bOrder;
+  });
+  let prev = null;
+  for (const el of ordered) {
+    if (prev) prev.after(el);
+    prev = el;
+  }
+}
+function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
+  if (!document.querySelector(`[data-ohw-instance="${CSS.escape(instanceId)}"]`)) return null;
+  const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
+  const allSections = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
+  );
+  allSections.forEach((el, order) => {
+    const id = instanceIdOf(el);
+    if (!byId.has(id)) {
+      byId.set(id, { instanceId: id, type: el.getAttribute("data-ohw-section") ?? "", order, pagePath: currentPath });
+    }
+  });
+  const target = byId.get(instanceId);
+  if (!target) return null;
+  byId.set(instanceId, { ...target, removed });
+  const entries = Array.from(byId.values());
+  applyPersistedOrder(entries);
+  return entries;
+}
+function deleteSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, true);
+}
+function restoreSectionInstance(instanceId, currentPath, existingEntries) {
+  return setSectionRemoved(instanceId, currentPath, existingEntries, false);
+}
+function newInstanceId() {
+  return typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `instance-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function getPageSectionOrderEntries(raw, currentPath) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
+  } catch {
+    return [];
+  }
+}
+function rekeySectionSubtree(root, instanceId) {
+  const suffix = `::${instanceId}`;
+  const rekey = (el, attr) => {
+    const current = el.getAttribute(attr);
+    if (current) el.setAttribute(attr, `${current}${suffix}`);
+  };
+  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
+  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
+  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
+  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
+}
+function initSectionInstancesFromContent(content, currentPath) {
+  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
+    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
+  });
+  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
+  for (const entry of entries) {
+    if (entry.instanceId === entry.type) continue;
+    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
+    const original = document.querySelector(
+      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
+    );
+    if (!original) continue;
+    const clone = original.cloneNode(true);
+    clone.setAttribute("data-ohw-instance", entry.instanceId);
+    rekeySectionSubtree(clone, entry.instanceId);
+    original.insertAdjacentElement("afterend", clone);
+  }
+  applyPersistedOrder(entries);
+}
+
 // src/ui/ai-section/AiSectionOverlay.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function findSectionElement(instanceId) {
@@ -7914,9 +8058,7 @@ function useLiveSectionRect(sectionId) {
   return rect;
 }
 function computeSectionBoundaryFlags(instanceId) {
-  const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
-  );
+  const topLevel = topLevelSections();
   const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
   return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
@@ -8033,12 +8175,15 @@ function AiSectionOverlay({
         selectFromElement(sectionEl);
         return sectionEl != null;
       },
-      clear: () => setSelectedId(null)
+      clear: () => {
+        setSelectedId(null);
+        report(null);
+      }
     };
     return () => {
       apiRef.current = null;
     };
-  }, [apiRef, selectFromElement]);
+  }, [apiRef, selectFromElement, report]);
   (0, import_react8.useEffect)(() => {
     const onMessage = (e) => {
       if (e.data?.type === "ow:ai-select" && e.data.sectionId === null) {
@@ -8213,101 +8358,6 @@ function AiSectionOverlay({
   ] });
 }
 
-// src/lib/section-instances.ts
-var SECTION_ORDER_KEY = "__ohw_section_order";
-function topLevelSections() {
-  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
-  );
-}
-function instanceIdOf(el) {
-  return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
-}
-function planSectionMove(instanceId, targetIndex, currentPath) {
-  const sections = topLevelSections();
-  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
-  if (index === -1) return null;
-  const dragged = sections[index];
-  const others = sections.filter((_, i) => i !== index);
-  const clamped = Math.max(0, Math.min(targetIndex, others.length));
-  const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
-  return reordered.map((el, order) => ({
-    instanceId: instanceIdOf(el),
-    type: el.getAttribute("data-ohw-section") ?? "",
-    order,
-    pagePath: currentPath
-  }));
-}
-function moveSectionInstance(instanceId, direction, currentPath) {
-  const sections = topLevelSections();
-  const index = sections.findIndex((el) => instanceIdOf(el) === instanceId);
-  if (index === -1) return null;
-  const siblingIndex = direction === "up" ? index - 1 : index + 1;
-  if (siblingIndex < 0 || siblingIndex >= sections.length) return null;
-  const entries = planSectionMove(instanceId, siblingIndex, currentPath);
-  if (!entries) return null;
-  applyPersistedOrder(entries);
-  return entries;
-}
-function applyPersistedOrder(entries) {
-  if (entries.length === 0) return;
-  const sections = topLevelSections();
-  if (sections.length === 0) return;
-  const orderIndex = new Map(entries.map((e) => [e.instanceId, e.order]));
-  const ordered = [...sections].sort((a, b) => {
-    const aOrder = orderIndex.get(instanceIdOf(a));
-    const bOrder = orderIndex.get(instanceIdOf(b));
-    if (aOrder === void 0 && bOrder === void 0) return 0;
-    if (aOrder === void 0) return 1;
-    if (bOrder === void 0) return -1;
-    return aOrder - bOrder;
-  });
-  let prev = null;
-  for (const el of ordered) {
-    if (prev) prev.after(el);
-    prev = el;
-  }
-}
-function getPageSectionOrderEntries(raw, currentPath) {
-  if (!raw) return [];
-  try {
-    const entries = JSON.parse(raw);
-    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
-  } catch {
-    return [];
-  }
-}
-function rekeySectionSubtree(root, instanceId) {
-  const suffix = `::${instanceId}`;
-  const rekey = (el, attr) => {
-    const current = el.getAttribute(attr);
-    if (current) el.setAttribute(attr, `${current}${suffix}`);
-  };
-  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
-  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
-  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
-  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
-}
-function initSectionInstancesFromContent(content, currentPath) {
-  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
-    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
-  });
-  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
-  for (const entry of entries) {
-    if (entry.instanceId === entry.type) continue;
-    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
-    const original = document.querySelector(
-      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
-    );
-    if (!original) continue;
-    const clone = original.cloneNode(true);
-    clone.setAttribute("data-ohw-instance", entry.instanceId);
-    rekeySectionSubtree(clone, entry.instanceId);
-    original.insertAdjacentElement("afterend", clone);
-  }
-  applyPersistedOrder(entries);
-}
-
 // src/OhhwellsBridge.tsx
 var import_react_dom4 = require("react-dom");
 var import_navigation3 = require("next/navigation");
@@ -11013,6 +11063,10 @@ function markSocialsRows(root = document) {
         item.setAttribute(SOCIALS_ITEM_ATTR, String(index));
       }
       const iconKey = socialIconKey(item) ?? socialHrefKey(item)?.replace(/-href$/, "");
+      if (iconKey && !item.querySelector(ICON_SELECTOR)) {
+        const drawn = item.querySelector("svg, img");
+        if (drawn) adoptAsIconSlot(drawn, iconKey);
+      }
       if (iconKey) ensureLabelSlot(item, iconKey);
     });
   });
@@ -11444,12 +11498,30 @@ function socialsMissingIcons(row) {
     label: (socialLabelElement(item)?.textContent ?? item.getAttribute("aria-label") ?? "").trim()
   })).filter((entry) => Boolean(entry.hrefKey));
 }
+function adoptAsIconSlot(drawn, base) {
+  const parent = drawn.parentElement;
+  if (!parent) return null;
+  const taken = drawn.ownerDocument.querySelector(`[data-ohw-key="${base}"]`);
+  const iconKey = taken ? `${base}-icon` : base;
+  const slot = drawn.ownerDocument.createElement("span");
+  slot.setAttribute("data-ohw-key", iconKey);
+  slot.setAttribute("data-ohw-editable", "icon");
+  slot.style.display = "inline-flex";
+  parent.insertBefore(slot, drawn);
+  slot.appendChild(drawn);
+  return iconKey;
+}
 function ensureIconSlot(item) {
   const existing = item.querySelector(ICON_SELECTOR);
   if (existing) return existing.dataset.ohwKey ?? null;
   const hrefKey = socialHrefKey(item);
   if (!hrefKey) return null;
   const base = hrefKey.replace(/-href$/, "");
+  const drawn = item.querySelector("svg, img");
+  if (drawn) {
+    const adopted = adoptAsIconSlot(drawn, base);
+    if (adopted) return adopted;
+  }
   const taken = document.querySelector(`[data-ohw-key="${base}"]`);
   const iconKey = taken && taken !== item ? `${base}-icon` : base;
   const slot = document.createElement("span");
@@ -16366,7 +16438,7 @@ function OhhwellsBridge() {
       const original = originalContentRef.current ?? "";
       if (html !== sanitizeHtml(original)) {
         postToParentRef.current({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }
     }
@@ -16528,7 +16600,7 @@ function OhhwellsBridge() {
       const original = originalContentRef.current ?? "";
       if (html !== sanitizeHtml(original)) {
         postToParent2({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParent2({ type: "ow:height", height: h });
       }
     }
@@ -19556,7 +19628,7 @@ function OhhwellsBridge() {
       timers.set(key, setTimeout(() => {
         timers.delete(key);
         postToParentRef.current({ type: "ow:change", nodes: [{ key, text: html }] });
-        const h = document.documentElement.scrollHeight;
+        const h = document.body.scrollHeight;
         if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
       }, 400));
     };
@@ -19624,7 +19696,7 @@ function OhhwellsBridge() {
       reconcileFooterOrderFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
       enforceLinkHrefs();
-      const hydratedHeight = document.documentElement.scrollHeight;
+      const hydratedHeight = document.body.scrollHeight;
       if (hydratedHeight > 50) postToParentRef.current({ type: "ow:height", height: hydratedHeight });
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
@@ -19706,7 +19778,7 @@ function OhhwellsBridge() {
       const nextValue = serializeAiSectionsState(nextState);
       aiSectionsRef.current = nextValue;
       applyAiSectionsToDom(nextState);
-      const newHeight = document.documentElement.scrollHeight;
+      const newHeight = document.body.scrollHeight;
       if (newHeight > 50) postToParentRef.current({ type: "ow:height", height: newHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: nextValue }] });
       const appliedEl = document.querySelector(`[data-ohw-section="${CSS.escape(payload.id)}"]`);
@@ -19728,7 +19800,7 @@ function OhhwellsBridge() {
       const nextValue = serializeAiSectionsState(nextState);
       aiSectionsRef.current = nextValue;
       applyAiSectionsToDom(nextState);
-      const newHeight = document.documentElement.scrollHeight;
+      const newHeight = document.body.scrollHeight;
       if (newHeight > 50) postToParentRef.current({ type: "ow:height", height: newHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: nextValue }] });
       postToParentRef.current({ type: "ow:ai-section-deleted", sectionId, previous, value: nextValue });
@@ -19742,7 +19814,7 @@ function OhhwellsBridge() {
       aiSectionsRef.current = value;
       applyAiSectionsToDom(parseAiSectionsState(value));
       applyStylesToDom(parseStyleStore(stylesRef.current));
-      const restoredHeight = document.documentElement.scrollHeight;
+      const restoredHeight = document.body.scrollHeight;
       if (restoredHeight > 50) postToParentRef.current({ type: "ow:height", height: restoredHeight });
       postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: value }] });
       postAiSectionsChanged();
@@ -19796,6 +19868,48 @@ function OhhwellsBridge() {
       else document.documentElement.removeAttribute("data-ohw-panel-dragging");
     };
     window.addEventListener("message", handlePanelDragging);
+    const handleDeleteSection = (e) => {
+      if (e.data?.type !== "ow:delete-section") return;
+      const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
+      if (!instanceId) return;
+      const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname);
+      const entries = deleteSectionInstance(instanceId, window.location.pathname, currentEntries);
+      if (!entries) return;
+      const orderJson = JSON.stringify(entries);
+      editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
+      aiSectionApiRef.current?.clear();
+      window.dispatchEvent(new Event("resize"));
+      const deleteHeight = document.body.scrollHeight;
+      if (deleteHeight > 50) postToParentRef.current({ type: "ow:height", height: deleteHeight });
+      const actionId = newInstanceId();
+      pendingDeleteUndoRef.current = {
+        actionId,
+        restore: () => {
+          const restoredEntries = getPageSectionOrderEntries(
+            editContentRef.current[SECTION_ORDER_KEY],
+            window.location.pathname
+          );
+          const restored = restoreSectionInstance(instanceId, window.location.pathname, restoredEntries);
+          if (!restored) return;
+          const restoredJson = JSON.stringify(restored);
+          editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: restoredJson };
+          postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: restoredJson }] });
+          window.dispatchEvent(new Event("resize"));
+          const restoreHeight = document.body.scrollHeight;
+          if (restoreHeight > 50) postToParentRef.current({ type: "ow:height", height: restoreHeight });
+        }
+      };
+      postToParentRef.current({
+        type: "ow:toast",
+        title: "Section deleted",
+        toastType: "success",
+        actionLabel: "Undo",
+        actionId,
+        duration: 6e3
+      });
+    };
+    window.addEventListener("message", handleDeleteSection);
     const handleDeactivate = (e) => {
       if (e.data?.type !== "ow:deactivate") return;
       if (document.documentElement.hasAttribute("data-ohw-panel-dragging")) return;
@@ -20131,7 +20245,7 @@ function OhhwellsBridge() {
       const updated = sections.filter((s) => !(s.type === "scheduling" && s.pagePath === currentPath));
       tracker.textContent = JSON.stringify(updated);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
-      const h = document.documentElement.scrollHeight;
+      const h = document.body.scrollHeight;
       if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
     const handleCollectSection = (e) => {
@@ -20482,6 +20596,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiSetStyles);
       window.removeEventListener("message", handleGetBrand);
       window.removeEventListener("message", handlePanelDragging);
+      window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);