@ohhwells/bridge 0.1.93-next.277 → 0.1.93-next.281

package/dist/index.cjs

@@ -556,7 +556,9 @@ function styleSheetCss() {
   }
   rules.push(
     `[data-ohw-style-corners="sharp"] :is(.card, [data-ohw-card], img, picture, figure, [data-ohw-editable="bg-image"]) { border-radius: 0 !important; }`,
-    `[data-ohw-style-corners="sharp"] :has(> img) { border-radius: 0 !important; }`
+    `[data-ohw-style-corners="sharp"] :has(> img) { border-radius: 0 !important; }`,
+    `[data-ohw-style-corners="rounded"] :is(.card, [data-ohw-card], img, picture, figure, [data-ohw-editable="bg-image"]) { border-radius: max(0.75rem, var(--radius, 0px)) !important; }`,
+    `[data-ohw-style-corners="rounded"] :has(> img) { border-radius: max(0.75rem, var(--radius, 0px)) !important; }`
   );
   for (const align of ["left", "center", "right"]) {
     rules.push(`[data-ohw-style-align="${align}"] { text-align: ${align} !important; }`);
@@ -651,14 +653,39 @@ 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 TEXT_ROW = /^(P|LI|H[1-6]|BLOCKQUOTE|FIGCAPTION|DT|DD)$/;
+  const parent = subject.parentElement;
+  if (parent && TEXT_ROW.test(parent.tagName) && /^(inline-)?flex$/.test(getComputedStyle(parent).display)) {
+    return parent;
+  }
+  if (parent && !parent.hasAttribute("data-ohw-section")) {
+    const pcs = getComputedStyle(parent);
+    const children = Array.from(parent.children);
+    const textRowChild = (c) => c.hasAttribute("data-ohw-editable") || (c.textContent ?? "").trim().length === 0 || c.getAttribute("aria-hidden") === "true";
+    if (/^(inline-)?flex$/.test(pcs.display) && pcs.flexDirection.startsWith("row") && children.length > 0 && children.some((c) => c.hasAttribute("data-ohw-editable")) && children.every(textRowChild)) {
+      return parent;
+    }
+  }
+  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)) {
@@ -678,6 +705,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)) {
@@ -724,6 +768,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
@@ -2826,7 +2886,12 @@ function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
   const candidates = Array.from(
     document.querySelectorAll('[data-ohw-role="button"]')
-  ).filter((el) => !el.closest(`[${CONTAINER_ATTR}]`));
+  ).filter(
+    (el) => !el.closest(`[${CONTAINER_ATTR}]`) && // Whole-card links legitimately carry the button role (serene's clickable treatment
+    // cards) but must never donate the "button look" — a real button holds at most its
+    // one editable label, a card holds a headline, copy and prices.
+    el.querySelectorAll("[data-ohw-editable]").length <= 1
+  );
   const isFilled = (el) => {
     const bg = getComputedStyle(el).backgroundColor;
     if (!bg || bg === "transparent") return false;
@@ -15298,7 +15363,9 @@ function collectEditableNodes(extraContent, root = document) {
     return {
       key: el.dataset.ohwKey ?? "",
       type: el.dataset.ohwEditable ?? "text",
-      text: el.dataset.ohwEditable === "plain" ? el.innerText ?? "" : el.innerHTML
+      // innerText does not exist on SVG elements (a circular-badge <textPath> is a legitimate
+      // plain editable) — textContent is the value there.
+      text: el.dataset.ohwEditable === "plain" ? el.innerText ?? el.textContent ?? "" : el.innerHTML
     };
   });
   const hrefEls = Array.from(root.querySelectorAll("[data-ohw-href-key]"));
@@ -18993,6 +19060,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;
@@ -19193,6 +19263,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);
@@ -19555,6 +19628,10 @@ function OhhwellsBridge() {
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
       [data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
+      /* SVG hit-tests painted glyphs only, so an editable curved-text badge answered clicks
+         on its letter strokes alone (and a spinning one barely at all). In edit mode the
+         whole box takes the click; the handler resolves it to the editable inside. */
+      svg:has([data-ohw-editable]) { pointer-events: bounding-box !important; }
     `;
     if (!existing) {
       const base = document.createElement("style");
@@ -19725,7 +19802,19 @@ function OhhwellsBridge() {
         openLogoSizePanelRef.current(logoEl);
         return;
       }
-      const editable = target.closest("[data-ohw-editable]");
+      let editable = target.closest("[data-ohw-editable]");
+      if (!editable && target instanceof SVGElement) {
+        const inner = target.closest("svg")?.querySelectorAll("[data-ohw-editable]");
+        if (inner && inner.length === 1) editable = inner[0];
+      }
+      if (editable && !(editable instanceof HTMLElement)) {
+        e.preventDefault();
+        e.stopPropagation();
+        deselectRef.current();
+        deactivateRef.current();
+        aiSectionApiRef.current?.selectFromElement(editable);
+        return;
+      }
       if (editable) {
         if (editable.dataset.ohwEditable === "link") {
           e.preventDefault();
@@ -20455,6 +20544,15 @@ function OhhwellsBridge() {
           }
           return;
         }
+        const cardHit = !isDragOver && Array.from(document.querySelectorAll(".card, [data-ohw-card]")).some((card) => {
+          if (card.contains(imgEl)) return false;
+          const r2 = card.getBoundingClientRect();
+          return x2 >= r2.left && x2 <= r2.right && y2 >= r2.top && y2 <= r2.bottom;
+        });
+        if (cardHit) {
+          dismissImageHover();
+          return;
+        }
         const topEl = document.elementFromPoint(x2, y2);
         if (topEl?.closest('[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-more-menu], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]')) {
           if (hoveredImageRef.current) {
@@ -21151,6 +21249,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;