@ohhwells/bridge 0.1.92 → 0.1.94

package/dist/index.js

@@ -2188,6 +2188,22 @@ function applyAiSectionsToDom(state, options) {
   syncRemovedSections(state);
   syncTemplateHidden(state, pageSections.length > 0);
 }
+function unmountAllAiSections() {
+  for (const [, section] of mounted) {
+    section.root.unmount();
+    section.container.remove();
+  }
+  mounted.clear();
+  if (typeof document === "undefined") return;
+  for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
+    el.style.removeProperty("display");
+    el.removeAttribute(REPLACED_ATTR);
+  }
+  for (const el of document.querySelectorAll(`[${REMOVED_ATTR}]`)) {
+    el.style.removeProperty("display");
+    el.removeAttribute(REMOVED_ATTR);
+  }
+}
 
 // src/useLinkHrefGuardian.ts
 import { useLayoutEffect } from "react";
@@ -8185,17 +8201,40 @@ var REMOVED_ATTR2 = "data-ohw-section-removed";
 function isRemovedSection(el) {
   return el.hasAttribute(REMOVED_ATTR2);
 }
+function movableUnit(el) {
+  return el.closest("[data-ohw-section-container]") ?? el;
+}
+function sectionTypeOf(el) {
+  return el.getAttribute("data-ohw-section") ?? el.querySelector("[data-ohw-section]")?.getAttribute("data-ohw-section") ?? "";
+}
+function sectionElementOf(el) {
+  return el.hasAttribute("data-ohw-section") ? el : el.querySelector("[data-ohw-section]") ?? el;
+}
+function collectTopLevelUnits(predicate) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  document.querySelectorAll("[data-ohw-section]").forEach((el) => {
+    if (!predicate(el)) return;
+    const unit = movableUnit(el);
+    if (unit.parentElement?.closest("[data-ohw-section],[data-ohw-section-container]")) return;
+    if (seen.has(unit)) return;
+    seen.add(unit);
+    result.push(unit);
+  });
+  return result;
+}
 function topLevelSections() {
-  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
-  );
+  return collectTopLevelUnits((el) => !isChromeSection(el) && !isRemovedSection(movableUnit(el)));
 }
 function instanceIdOf(el) {
   return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
 }
 function findByInstanceId(instanceId) {
   const escapedId = CSS.escape(instanceId);
-  return document.querySelector(`[data-ohw-instance="${escapedId}"]`) ?? document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
+  const direct = document.querySelector(`[data-ohw-instance="${escapedId}"]`);
+  if (direct) return movableUnit(direct);
+  const bare = document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
+  return bare ? movableUnit(bare) : null;
 }
 function planSectionMove(instanceId, targetIndex, currentPath) {
   const sections = topLevelSections();
@@ -8207,7 +8246,7 @@ function planSectionMove(instanceId, targetIndex, currentPath) {
   const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
   return reordered.map((el, order) => ({
     instanceId: instanceIdOf(el),
-    type: el.getAttribute("data-ohw-section") ?? "",
+    type: sectionTypeOf(el),
     order,
     pagePath: currentPath
   }));
@@ -8262,13 +8301,11 @@ function applyPersistedOrder(entries) {
 function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
   if (!findByInstanceId(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)
-  );
+  const allSections = collectTopLevelUnits((el) => !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 });
+      byId.set(id, { instanceId: id, type: sectionTypeOf(el), order, pagePath: currentPath });
     }
   });
   const target = byId.get(instanceId);
@@ -8296,7 +8333,7 @@ function duplicateSectionInstance(instanceId, newId, currentPath, existingEntrie
     const id = instanceIdOf(el);
     return {
       instanceId: id,
-      type: el.getAttribute("data-ohw-section") ?? "",
+      type: sectionTypeOf(el),
       order,
       pagePath: currentPath,
       ...byId.get(id)?.removed ? { removed: true } : {}
@@ -8338,6 +8375,10 @@ 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") ?? "");
   });
+  document.querySelectorAll("[data-ohw-section-container]:not([data-ohw-instance])").forEach((el) => {
+    const type = sectionTypeOf(el);
+    if (type) el.setAttribute("data-ohw-instance", type);
+  });
   const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
   for (const entry of entries) {
     if (entry.instanceId === entry.type) continue;
@@ -8356,10 +8397,7 @@ function initSectionInstancesFromContent(content, currentPath) {
 
 // src/ui/ai-section/AiSectionOverlay.tsx
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-function findSectionElement(instanceId) {
-  const escaped = CSS.escape(instanceId);
-  return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
-}
+var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
   const el = findSectionElement(instanceId);
   if (!el) return null;
@@ -8399,7 +8437,7 @@ function useLiveSectionRect(sectionId) {
 }
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
-  const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
+  const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
   return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
 }
@@ -8483,18 +8521,20 @@ function AiSectionOverlay({
   selectedIdRef.current = selectedId;
   const report = useCallback2(
     (el) => {
+      const labelSrc = el ? sectionElementOf(el) : null;
       postToParent2({
         type: "ow:section-selected",
-        sectionId: el ? el.dataset.ohwInstance ?? el.dataset.ohwSection ?? null : null,
-        sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
+        sectionId: el ? instanceIdOf(el) || null : null,
+        sectionLabel: labelSrc ? labelSrc.dataset.ohwSectionLabel ?? titleCaseSectionId(labelSrc.dataset.ohwSection ?? "") : null
       });
     },
     [postToParent2]
   );
   const selectFromElement = useCallback2(
     (el, options) => {
-      const sectionEl = el?.closest("[data-ohw-section]") ?? null;
-      const id = sectionEl ? sectionEl.dataset.ohwInstance ?? sectionEl.dataset.ohwSection ?? null : null;
+      const inner = el?.closest("[data-ohw-section]") ?? null;
+      const sectionEl = inner ? movableUnit(inner) : null;
+      const id = sectionEl ? instanceIdOf(sectionEl) || null : null;
       if (id === selectedIdRef.current) return;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
@@ -8560,7 +8600,8 @@ function AiSectionOverlay({
         return;
       }
       const sec = t.closest("[data-ohw-section]");
-      setHoveredId(sec ? sec.dataset.ohwInstance ?? sec.dataset.ohwSection ?? null : null);
+      const unit = sec ? movableUnit(sec) : null;
+      setHoveredId(unit ? instanceIdOf(unit) || null : null);
     };
     const onLeave = () => setHoveredId(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -14184,8 +14225,9 @@ function useSectionDrag({
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.closest(SECTION_DRAG_EXCLUDED_SELECTOR)) return;
-      const sectionEl = target.closest("[data-ohw-section]");
-      if (!sectionEl || isChromeSection(sectionEl) || sectionEl.dataset.ohwSection === "footer") return;
+      const inner = target.closest("[data-ohw-section]");
+      if (!inner || isChromeSection(inner) || inner.dataset.ohwSection === "footer") return;
+      const sectionEl = movableUnit(inner);
       if (!topLevelSections().includes(sectionEl)) return;
       startSectionPressDrag(sectionEl, e.clientX, e.clientY, e.pointerId);
     };
@@ -15092,7 +15134,6 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   if (!mountPoint) return false;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
-  container.dataset.ohwSection = sectionId;
   container.dataset.ohwInstance = sectionId;
   if (insertBefore) {
     const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
@@ -18249,10 +18290,10 @@ function OhhwellsBridge() {
     const applyFromCache = () => {
       const content = contentCache.get(subdomain);
       if (!content) return;
-      retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
-      initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
+        retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
+        initSectionInstancesFromContent(content, window.location.pathname);
         applyBrandChrome(content);
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
@@ -18335,6 +18376,22 @@ function OhhwellsBridge() {
   useEffect13(() => {
     postToParent2({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent2]);
+  useEffect13(() => {
+    if (!subdomain || isEditMode) return;
+    const content = contentCache.get(subdomain);
+    if (!content) return;
+    unmountAllAiSections();
+    initSectionsFromContent(
+      content,
+      /*removeExisting*/
+      true,
+      pathname
+    );
+    if (typeof content[AI_SECTIONS_KEY] === "string") {
+      setAiSectionOrder(content[SECTION_ORDER_KEY], pathname);
+      applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
+    }
+  }, [pathname, subdomain, isEditMode]);
   useEffect13(() => {
     if (!isEditMode) return;
     if (linkPopoverSessionRef.current?.intent === "add-nav") return;
@@ -18343,6 +18400,10 @@ function OhhwellsBridge() {
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
+  useEffect13(() => {
+    if (!isEditMode) return;
+    initSectionInstancesFromContent(editContentRef.current, pathname);
+  }, [pathname, isEditMode]);
   useEffect13(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
@@ -21412,7 +21473,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.91",
+        bridgeVersion: "0.1.93",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections