@ohhwells/bridge 0.1.103 → 0.1.105

package/dist/index.js

@@ -515,14 +515,26 @@ function buttonSurfaceOf(el) {
 }
 function alignSubjectOf(el) {
   const button = el.closest('[data-ohw-role="button"]');
-  return button?.parentElement ?? el;
+  if (button?.parentElement) return button.parentElement;
+  let subject = el;
+  while (subject.parentElement && !subject.parentElement.hasAttribute("data-ohw-section") && /^inline/.test(getComputedStyle(subject).display)) {
+    subject = subject.parentElement;
+  }
+  const row = subject.closest("li");
+  if (row && row !== subject && /^(inline-)?flex$/.test(getComputedStyle(row).display)) {
+    return row;
+  }
+  return subject;
 }
 function applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
   clearNodeProps(document);
   loadStyleFonts(
-    store ? Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []) : []
+    store ? [
+      ...Object.values(store.nodes).flatMap((n) => n.fontFamily ? [n.fontFamily] : []),
+      ...Object.values(store.sections).flatMap((s) => s.fontFamily ? [s.fontFamily] : [])
+    ] : []
   );
   if (!store) return;
   for (const [sectionId, override] of Object.entries(store.sections)) {
@@ -542,6 +554,23 @@ function applyStylesToDom(store) {
         section.style.setProperty("background", override.sectionBackgroundColor, "important");
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
+      if (override.textColor !== void 0 || override.fontFamily !== void 0) {
+        const textEls = marker.querySelectorAll(
+          '[data-ohw-editable="text"], [data-ohw-editable="plain"], [data-ohw-field-label]'
+        );
+        for (const el of Array.from(textEls)) {
+          if (override.textColor !== void 0) {
+            saveInline(el, "color");
+            el.style.setProperty("color", override.textColor, "important");
+            el.setAttribute(NODE_WROTE_ATTR, "");
+          }
+          if (override.fontFamily !== void 0) {
+            saveInline(el, "font-family");
+            el.style.setProperty("font-family", `'${override.fontFamily}'`, "important");
+            el.setAttribute(NODE_WROTE_ATTR, "");
+          }
+        }
+      }
     }
   }
   for (const [key, override] of Object.entries(store.nodes)) {
@@ -588,6 +617,22 @@ function applyStylesToDom(store) {
       }
     }
   }
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    if (override.headingColor === void 0) continue;
+    const escaped = CSS.escape(sectionId);
+    const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
+    const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
+    for (const marker of Array.from(sections)) {
+      const headings = marker.querySelectorAll(
+        ":is(h1, h2, h3, h4, h5, h6)[data-ohw-editable], :is(h1, h2, h3, h4, h5, h6) > [data-ohw-editable]"
+      );
+      for (const el of Array.from(headings)) {
+        saveInline(el, "color");
+        el.style.setProperty("color", override.headingColor, "important");
+        el.setAttribute(NODE_WROTE_ATTR, "");
+      }
+    }
+  }
 }
 
 // src/ui/ai-tree/aiSectionsManager.tsx
@@ -10866,9 +10911,18 @@ function getNavbarDrawerContainer() {
 }
 function isNavbarListContainerVisible(el) {
   if (el.hasAttribute("hidden")) return false;
+  if (el.closest("[hidden]")) return false;
   if (el.getClientRects().length === 0) return false;
   const style = window.getComputedStyle(el);
-  return style.display !== "none" && style.visibility !== "hidden";
+  if (style.display === "none" || style.visibility === "hidden") return false;
+  let parent = el.parentElement;
+  while (parent && parent !== document.documentElement) {
+    if (parent.hasAttribute("hidden")) return false;
+    const ps = window.getComputedStyle(parent);
+    if (ps.display === "none" || ps.visibility === "hidden") return false;
+    parent = parent.parentElement;
+  }
+  return true;
 }
 function getActiveNavbarListContainer(draggedEl) {
   const desktop = getNavbarDesktopContainer();
@@ -10879,6 +10933,7 @@ function getActiveNavbarListContainer(draggedEl) {
   }
   if (desktop && isNavbarListContainerVisible(desktop)) return desktop;
   if (drawer && isNavbarListContainerVisible(drawer)) return drawer;
+  if (drawer && !drawer.closest("[hidden]")) return drawer;
   return desktop ?? drawer;
 }
 function listActiveNavbarItems(draggedEl) {
@@ -10891,6 +10946,12 @@ function listActiveNavbarItems(draggedEl) {
   return listNavbarItems();
 }
 function listNavbarItems() {
+  const active = getActiveNavbarListContainer();
+  if (active) {
+    return Array.from(active.querySelectorAll("[data-ohw-href-key]")).filter(
+      isNavbarLinkItem
+    );
+  }
   const desktop = getNavbarDesktopContainer();
   if (desktop) {
     return Array.from(desktop.querySelectorAll("[data-ohw-href-key]")).filter(isNavbarLinkItem);
@@ -10960,24 +11021,25 @@ function buildNavLink(index, href, label, template) {
   return anchor;
 }
 function insertNavLinkInContainer(container, anchor, afterHrefKey) {
+  const listParent = resolveNavbarReorderParent(container);
   if (!afterHrefKey) {
-    const cta = container.querySelector(CTA_BUTTON_SELECTOR);
-    if (cta && cta.parentElement === container) {
-      container.insertBefore(anchor, cta);
+    const cta = listParent.querySelector(CTA_BUTTON_SELECTOR);
+    if (cta && cta.parentElement === listParent) {
+      listParent.insertBefore(anchor, cta);
       return;
     }
-    container.appendChild(anchor);
+    listParent.appendChild(anchor);
     return;
   }
-  const afterEl = findCounterpartByHrefKey(afterHrefKey, container);
+  const afterEl = findCounterpartByHrefKey(afterHrefKey, listParent);
   if (afterEl) {
     const insertAfter = resolveNavRootUnit(afterEl);
-    if (insertAfter.parentElement === container || insertAfter.parentElement === afterEl.parentElement) {
+    if (insertAfter.parentElement === listParent || insertAfter.parentElement === afterEl.parentElement) {
       insertAfter.insertAdjacentElement("afterend", anchor);
       return;
     }
   }
-  container.appendChild(anchor);
+  listParent.appendChild(anchor);
 }
 function insertNavbarItemDom(index, href, label, afterAnchor) {
   const afterHrefKey = afterAnchor?.getAttribute("data-ohw-href-key") ?? null;
@@ -11033,15 +11095,25 @@ function getNavbarRootUnitsInContainer(container) {
   }
   return result;
 }
+function resolveNavbarReorderParent(container) {
+  if (getNavbarRootUnitsInContainer(container).length > 0) return container;
+  for (const child of Array.from(container.children)) {
+    if (!(child instanceof HTMLElement)) continue;
+    if (child.hasAttribute("data-ohw-nav-dropdown-template")) continue;
+    if (getNavbarRootUnitsInContainer(child).length > 0) return child;
+  }
+  return container;
+}
 function applyNavOrderToContainer(container, order) {
+  const listParent = resolveNavbarReorderParent(container);
   const desired = order.filter((key, i) => order.indexOf(key) === i);
-  const units = getNavbarRootUnitsInContainer(container);
+  const units = getNavbarRootUnitsInContainer(listParent);
   const current = units.map((u) => u.key);
   const extras = current.filter((key) => !desired.includes(key));
   const expected = [...desired.filter((key) => current.includes(key)), ...extras];
   if (navOrderKeysEqual(current, expected)) return;
   const lastUnit = units[units.length - 1]?.unit ?? null;
-  const anchor = lastUnit?.parentElement === container ? lastUnit.nextElementSibling : null;
+  const anchor = lastUnit?.parentElement === listParent ? lastUnit.nextElementSibling : null;
   const orderedUnits = [];
   const seen = /* @__PURE__ */ new Set();
   for (const hrefKey of desired) {
@@ -11056,9 +11128,9 @@ function applyNavOrderToContainer(container, order) {
   }
   for (const el of orderedUnits) {
     if (anchor) {
-      if (el.nextSibling !== anchor) container.insertBefore(el, anchor);
-    } else if (container.lastElementChild !== el) {
-      container.appendChild(el);
+      if (el.nextSibling !== anchor) listParent.insertBefore(el, anchor);
+    } else if (listParent.lastElementChild !== el) {
+      listParent.appendChild(el);
     }
   }
 }
@@ -12648,26 +12720,48 @@ function resolveFooterColumnForAdd(selected) {
   if (selected.hasAttribute("data-ohw-footer-col")) return selected;
   return selected.closest("[data-ohw-footer-col]") ?? (listFooterColumns().includes(selected) ? selected : null);
 }
-function buildFooterHeading(colIndex, text) {
-  const heading = document.createElement("p");
-  heading.setAttribute("data-ohw-editable", "text");
-  heading.setAttribute("data-ohw-key", `footer-${colIndex}-heading`);
-  heading.textContent = text;
-  heading.style.cssText = [
-    "color: var(--espresso, #3d312b)",
-    "font-size: 14px",
-    "font-weight: 800",
-    "opacity: 0.82",
-    "margin: 0 0 6px",
-    "padding: 0",
-    "line-height: 1.2"
-  ].join(";");
-  return heading;
-}
 var FOOTER_HEADING_CACHE_ATTR = "data-ohw-heading-cache";
+var FOOTER_HEADING_CLASS_CACHE_ATTR = "data-ohw-heading-class";
 function getFooterColumnHeadingEl(column) {
   return column.querySelector('[data-ohw-key^="footer-"][data-ohw-key$="-heading"]') ?? null;
 }
+function getFooterHeadingTemplate(excludeColumn) {
+  for (const col of listFooterColumns()) {
+    if (excludeColumn && col === excludeColumn) continue;
+    const heading = getFooterColumnHeadingEl(col);
+    if (heading) return heading;
+  }
+  return null;
+}
+function footerHeadingLooksLikeHtml(value) {
+  return /<[a-z][\s\S]*>/i.test(value);
+}
+function applyFooterHeadingContent(el, value) {
+  if (footerHeadingLooksLikeHtml(value)) {
+    if (el.innerHTML !== value) el.innerHTML = value;
+    return;
+  }
+  const plain = (el.textContent ?? "").trim();
+  if (plain !== value.trim() || footerHeadingLooksLikeHtml(el.innerHTML)) {
+    el.textContent = value;
+  }
+}
+function buildFooterHeading(colIndex, text, opts) {
+  const column = opts?.column ?? null;
+  const template = opts?.template ?? getFooterHeadingTemplate(column) ?? null;
+  const tagName = template?.tagName?.toLowerCase() || "p";
+  const heading = document.createElement(tagName);
+  heading.setAttribute("data-ohw-editable", "text");
+  heading.setAttribute("data-ohw-key", `footer-${colIndex}-heading`);
+  applyFooterHeadingContent(heading, text);
+  const cachedClass = column?.getAttribute(FOOTER_HEADING_CLASS_CACHE_ATTR);
+  if (template?.className) {
+    heading.className = template.className;
+  } else if (cachedClass) {
+    heading.className = cachedClass;
+  }
+  return heading;
+}
 function getFooterColumnHeadingKey(column) {
   const attr = column.getAttribute("data-ohw-footer-col");
   if (attr != null) {
@@ -12691,8 +12785,11 @@ function setFooterColumnHeadingVisible(column, visible) {
   if (!Number.isFinite(colIndex)) return null;
   const existing = getFooterColumnHeadingEl(column);
   if (!visible) {
-    const text2 = (existing?.textContent ?? "").trim() || column.getAttribute(FOOTER_HEADING_CACHE_ATTR) || DEFAULT_FOOTER_COLUMN_HEADING;
+    const text2 = (existing ? existing.innerHTML.trim() || (existing.textContent ?? "").trim() : "") || column.getAttribute(FOOTER_HEADING_CACHE_ATTR) || DEFAULT_FOOTER_COLUMN_HEADING;
     column.setAttribute(FOOTER_HEADING_CACHE_ATTR, text2);
+    if (existing?.className) {
+      column.setAttribute(FOOTER_HEADING_CLASS_CACHE_ATTR, existing.className);
+    }
     existing?.remove();
     return { headingKey, text: "", visible: false };
   }
@@ -12704,7 +12801,7 @@ function setFooterColumnHeadingVisible(column, visible) {
     };
   }
   const text = column.getAttribute(FOOTER_HEADING_CACHE_ATTR) || DEFAULT_FOOTER_COLUMN_HEADING;
-  const heading = buildFooterHeading(colIndex, text);
+  const heading = buildFooterHeading(colIndex, text, { column });
   const firstLink = listFooterLinksInColumn(column)[0];
   if (firstLink) column.insertBefore(heading, firstLink);
   else column.prepend(heading);
@@ -12728,21 +12825,24 @@ function reconcileFooterHeadingVisibility(content) {
     if (raw === "") {
       const existing2 = getFooterColumnHeadingEl(column);
       if (existing2) {
-        const cached = (existing2.textContent ?? "").trim();
+        const cached = existing2.innerHTML.trim() || (existing2.textContent ?? "").trim();
         if (cached) column.setAttribute(FOOTER_HEADING_CACHE_ATTR, cached);
+        if (existing2.className) {
+          column.setAttribute(FOOTER_HEADING_CLASS_CACHE_ATTR, existing2.className);
+        }
         existing2.remove();
       }
       continue;
     }
     const existing = getFooterColumnHeadingEl(column);
     if (existing) {
-      if (existing.textContent !== raw) existing.textContent = raw;
+      applyFooterHeadingContent(existing, raw);
       continue;
     }
     const colMatch = headingKey.match(FOOTER_HEADING_RE);
     const colIndex = colMatch ? parseInt(colMatch[1], 10) : NaN;
     if (!Number.isFinite(colIndex)) continue;
-    const heading = buildFooterHeading(colIndex, raw);
+    const heading = buildFooterHeading(colIndex, raw, { column });
     const firstLink = listFooterLinksInColumn(column)[0];
     if (firstLink) column.insertBefore(heading, firstLink);
     else column.prepend(heading);
@@ -12788,9 +12888,13 @@ function insertFooterColumnDom(colIndex, heading, items) {
     column.style.flexDirection = "column";
   }
   if (heading != null && heading !== "") {
-    column.appendChild(buildFooterHeading(colIndex, heading));
+    column.appendChild(buildFooterHeading(colIndex, heading, { column }));
   } else if (heading === "") {
     column.setAttribute(FOOTER_HEADING_CACHE_ATTR, DEFAULT_FOOTER_COLUMN_HEADING);
+    const classFromSibling = getFooterHeadingTemplate()?.className;
+    if (classFromSibling) {
+      column.setAttribute(FOOTER_HEADING_CLASS_CACHE_ATTR, classFromSibling);
+    }
   }
   let firstLink = null;
   items.forEach((item, itemIndex) => {
@@ -15640,6 +15744,66 @@ function unmountSchedulingWrapper(wrapper) {
 function schedulingSectionId(insertAfter) {
   return `scheduling-${insertAfter}`;
 }
+function duplicateSchedulingWidget(instanceId, scheduleId) {
+  const escaped = CSS.escape(instanceId);
+  const sourceEl = document.querySelector(
+    `[data-ohw-section-container="scheduling"][data-ohw-instance="${escaped}"]`
+  ) ?? document.querySelector(
+    `[data-ohw-section-container="scheduling"][data-ohw-section="${escaped}"]`
+  ) ?? document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]`);
+  if (!sourceEl) return null;
+  const sourceWrapper = sourceEl.closest('[data-ohw-section-container="scheduling"]') ?? sourceEl;
+  let insertAfter = instanceId;
+  let sectionId = schedulingSectionId(insertAfter);
+  for (let n = 0; n < 20 && document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`); n++) {
+    insertAfter = `${instanceId}--${n + 1}`;
+    sectionId = schedulingSectionId(insertAfter);
+  }
+  if (document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`)) return null;
+  const container = document.createElement("div");
+  container.dataset.ohwSectionContainer = "scheduling";
+  container.dataset.ohwSection = sectionId;
+  container.dataset.ohwInstance = sectionId;
+  sourceWrapper.insertAdjacentElement("afterend", container);
+  try {
+    const root = createRoot2(container);
+    schedulingRoots.set(container, root);
+    flushSync2(() => {
+      root.render(
+        /* @__PURE__ */ jsx33(
+          SchedulingWidget,
+          {
+            notifyOnConnect: false,
+            initialScheduleId: scheduleId ?? null,
+            insertAfter
+          }
+        )
+      );
+    });
+  } catch {
+    container.remove();
+    return null;
+  }
+  const tracker = getSectionsTracker();
+  let sections = [];
+  try {
+    sections = JSON.parse(tracker.textContent || "[]");
+  } catch {
+  }
+  const currentPath = window.location.pathname;
+  if (!sections.find(
+    (s) => s.type === "scheduling" && s.insertAfter === insertAfter && (!s.pagePath || s.pagePath === currentPath)
+  )) {
+    sections.push({
+      type: "scheduling",
+      insertAfter,
+      pagePath: currentPath,
+      ...scheduleId ? { scheduleId } : {}
+    });
+    tracker.textContent = JSON.stringify(sections);
+  }
+  return { sectionId, insertAfter };
+}
 var INSERT_BEFORE_MARKER = ":before:";
 function parseSchedulingInsertAfter(insertAfter) {
   const idx = insertAfter.indexOf(INSERT_BEFORE_MARKER);
@@ -18794,6 +18958,9 @@ function OhhwellsBridge() {
       applySocialsDisplayFromContent(content);
       applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
       if (isEditModeRef.current) requestMissingSocialIconsRef.current();
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
       sectionsLoadedRef.current = true;
@@ -18989,6 +19156,9 @@ function OhhwellsBridge() {
         applySocialsDisplayFromContent(content);
         applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
+        if (typeof content[STYLE_STORE_KEY] === "string") {
+          applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+        }
         document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
           if (!form.querySelector("[data-ohw-form-success]")) {
             reconcileFieldsFromContent(form, content);
@@ -20967,6 +21137,9 @@ function OhhwellsBridge() {
       reconcileNavbarItemsFromContent(editContentRef.current);
       reconcileFooterOrderFromContent(editContentRef.current);
       syncNavigationDragCursorAttrs();
+      if (typeof content[STYLE_STORE_KEY] === "string") {
+        applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
+      }
       enforceLinkHrefs();
       const hydrateReapExclude = /* @__PURE__ */ new Set();
       const hydratePendingUndo = pendingDeleteUndoRef.current;
@@ -21256,9 +21429,62 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:duplicate-section") return;
       const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
       if (!instanceId) return;
+      const currentPath = window.location.pathname;
+      if (instanceId.startsWith("scheduling-")) {
+        const sourceInsertAfter = instanceId.slice("scheduling-".length);
+        const tracker = getSectionsTracker();
+        let sections = [];
+        try {
+          sections = JSON.parse(tracker.textContent || "[]");
+        } catch {
+        }
+        const source = sections.find(
+          (s) => s.type === "scheduling" && s.insertAfter === sourceInsertAfter && (!s.pagePath || s.pagePath === currentPath)
+        );
+        const duplicated = duplicateSchedulingWidget(instanceId, source?.scheduleId ?? null);
+        if (!duplicated) return;
+        const currentEntries2 = getPageSectionOrderEntries(
+          editContentRef.current[SECTION_ORDER_KEY],
+          currentPath
+        );
+        const byId = new Map(currentEntries2.map((entry) => [entry.instanceId, entry]));
+        const entries2 = topLevelSections().map((el, order) => {
+          const id = instanceIdOf(el);
+          return {
+            instanceId: id,
+            type: el.getAttribute("data-ohw-section") ?? "",
+            order,
+            pagePath: currentPath,
+            ...byId.get(id)?.removed ? { removed: true } : {}
+          };
+        });
+        const orderJson2 = JSON.stringify(entries2);
+        const nodes2 = [
+          { key: "__ohw_sections", text: tracker.textContent ?? "[]" },
+          { key: SECTION_ORDER_KEY, text: orderJson2 }
+        ];
+        editContentRef.current = {
+          ...editContentRef.current,
+          ...Object.fromEntries(nodes2.map(({ key, text }) => [key, text]))
+        };
+        setAiSectionOrder(orderJson2, currentPath);
+        postToParentRef.current({ type: "ow:change", nodes: nodes2 });
+        window.dispatchEvent(new Event("resize"));
+        const duplicateHeight2 = document.body.scrollHeight;
+        if (duplicateHeight2 > 50) postToParentRef.current({ type: "ow:height", height: duplicateHeight2 });
+        const selectDuplicate = () => {
+          const clone2 = document.querySelector(
+            `[data-ohw-section-container="scheduling"][data-ohw-instance="${CSS.escape(duplicated.sectionId)}"]`
+          );
+          if (clone2) aiSectionApiRef.current?.selectFromElement(clone2);
+        };
+        selectDuplicate();
+        requestAnimationFrame(selectDuplicate);
+        return;
+      }
       const newId = newInstanceId();
-      const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname);
-      const result = duplicateSectionInstance(instanceId, newId, window.location.pathname, currentEntries);
+      const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], currentPath);
+      const result = duplicateSectionInstance(instanceId, newId, currentPath, currentEntries);
       if (!result) return;
       const { entries, keyRekeys } = result;
       const orderJson = JSON.stringify(
@@ -22194,7 +22420,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.101",
+        bridgeVersion: "0.1.104",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections