@ohhwells/bridge 0.1.139-next.393 → 0.1.139-next.398

package/dist/index.cjs

@@ -87,6 +87,7 @@ __export(index_exports, {
   resolveFooterCopyright: () => resolveFooterCopyright,
   serializeAiFooterState: () => serializeAiFooterState,
   stepViableSlide: () => stepViableSlide,
+  stripTextAlignCss: () => stripTextAlignCss,
   toggleVariants: () => toggleVariants,
   useOhwCarousel: () => useOhwCarousel,
   validateUrlInput: () => validateUrlInput,
@@ -1718,7 +1719,8 @@ function labelElement2(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? el.querySelector("[data-ohw-key]");
 }
 function buttonLabel(el) {
-  return (labelElement2(el)?.textContent ?? el.textContent ?? "").trim();
+  const label = labelElement2(el);
+  return (label ? label.innerHTML : el.textContent ?? "").trim();
 }
 function buttonHref(el) {
   return el.getAttribute("href") ?? "";
@@ -1857,7 +1859,7 @@ function duplicateButton(source, content) {
   stampVariantClass(copy, copyAssignment.variant);
   applyButtonStyle(copy, copyAssignment, paintedTokensOf(source) ?? tokens);
   const copyLabelEl = labelElement2(copy);
-  if (copyLabelEl) copyLabelEl.textContent = label;
+  if (copyLabelEl) copyLabelEl.innerHTML = label;
   let collection = buttonCollectionOf(source);
   const collections = readCollections(content);
   let collectionId = collection?.getAttribute(COLLECTION_ATTR) ?? "";
@@ -2183,7 +2185,7 @@ function applySnapshotContent(el, snapshot, content) {
   const label = labelElement2(el);
   if (label) {
     if (label.getAttribute("data-ohw-key") !== labelKey) label.setAttribute("data-ohw-key", labelKey);
-    if (label.textContent !== text) label.textContent = text;
+    if (label.innerHTML !== text) label.innerHTML = text;
   }
 }
 function reconcileButtonCollections(doc, content) {
@@ -4268,7 +4270,7 @@ function buildNavLink(index, href, label, template) {
   const span = document.createElement("span");
   span.setAttribute("data-ohw-editable", "text");
   span.setAttribute("data-ohw-key", `nav-${index}-label`);
-  span.textContent = label;
+  span.innerHTML = label;
   anchor.appendChild(span);
   return anchor;
 }
@@ -6266,6 +6268,26 @@ function applyTreeToState(state, payload) {
   const others = state.sections.filter((existing) => existing.id !== entry.id);
   return { ...state, v: 1, sections: [...others, entry] };
 }
+function stripTextAlignCss(html) {
+  return html.replace(/\sstyle="([^"]*)"/gi, (whole, value) => {
+    if (!/text-align\s*:/i.test(value)) return whole;
+    const kept = value.split(";").map((decl) => decl.trim()).filter((decl) => decl && !/^text-align\s*:/i.test(decl)).join("; ");
+    return kept ? ` style="${kept}"` : "";
+  });
+}
+function stripTextAlignInValue(value) {
+  if (typeof value === "string") return stripTextAlignCss(value);
+  if (Array.isArray(value)) return value.map(stripTextAlignInValue);
+  if (value && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, inner]) => [
+        key,
+        stripTextAlignInValue(inner)
+      ])
+    );
+  }
+  return value;
+}
 function foldAlignIntoTrees(state, store) {
   const byId = new Map(state.sections.map((entry) => [entry.id, entry]));
   const nextTrees = /* @__PURE__ */ new Map();
@@ -6288,6 +6310,12 @@ function foldAlignIntoTrees(state, store) {
       return stripChildAligns(rest);
     })
   } : node;
+  const stripContentAligns = (node) => ({
+    ...node,
+    ...node.slots ? { slots: stripTextAlignInValue(node.slots) } : {},
+    ...node.children ? { children: node.children.map(stripContentAligns) } : {}
+  });
+  const authoritative = (block) => stripChildAligns(stripContentAligns(block));
   const nodes = {};
   for (const [key, override] of Object.entries(store.nodes)) {
     const match = override.align !== void 0 && key.startsWith(AI_SLOT_KEY_PREFIX) ? key.match(/^ai\.(.+?)\.r(\d+)\.b(\d+)(?:\.|$)/) : null;
@@ -6299,7 +6327,7 @@ function foldAlignIntoTrees(state, store) {
       nodes[key] = override;
       continue;
     }
-    row.blocks[blockIdx] = { ...stripChildAligns(block), align: override.align };
+    row.blocks[blockIdx] = { ...authoritative(block), align: override.align };
     const rest = { ...override };
     delete rest.align;
     if (Object.keys(rest).length > 0) nodes[key] = rest;
@@ -6312,7 +6340,7 @@ function foldAlignIntoTrees(state, store) {
       continue;
     }
     for (const row of tree.rows) {
-      row.blocks = row.blocks.map((block) => ({ ...stripChildAligns(block), align: override.align }));
+      row.blocks = row.blocks.map((block) => ({ ...authoritative(block), align: override.align }));
     }
     const rest = { ...override };
     delete rest.align;
@@ -10390,7 +10418,12 @@ function AiTreeRenderer({
                       // the full row height instead of clumping at the top.
                       ...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
                     },
-                    children: renderNode(block, ctx, `r${r2}.b${b}`)
+                    children: renderNode(
+                      block,
+                      ctx,
+                      `r${r2}.b${b}`,
+                      settings.alignment === "center" ? "center" : "left"
+                    )
                   },
                   b
                 ))
@@ -30297,17 +30330,114 @@ function OhhwellsBridge() {
           value = JSON.stringify(foldedHeight.store);
         }
       }
+      const restoreNodes = e.data.restoreNodes;
+      const restored = [];
+      if (restoreNodes && typeof restoreNodes === "object") {
+        for (const [key, html] of Object.entries(restoreNodes)) {
+          if (typeof html !== "string") continue;
+          const els = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
+          if (els.length === 0) continue;
+          for (const el of Array.from(els)) el.innerHTML = html;
+          editContentRef.current = { ...editContentRef.current, [key]: html };
+          restored.push({ key, text: html });
+        }
+      }
+      const previousNodes = {};
+      const strippedNodes = [];
+      if (!restoreNodes) {
+        const aligned = parseStyleStore(value);
+        const prior = parseStyleStore(previous);
+        const keys = /* @__PURE__ */ new Set();
+        if (aligned) {
+          for (const [key, override] of Object.entries(aligned.nodes)) {
+            if (override.align === void 0) continue;
+            if (prior?.nodes[key]?.align === override.align) continue;
+            keys.add(key);
+          }
+          for (const [sectionId, override] of Object.entries(aligned.sections)) {
+            if (override.align === void 0) continue;
+            if (prior?.sections[sectionId]?.align === override.align) continue;
+            const escaped = CSS.escape(sectionId);
+            const markers = document.querySelectorAll(
+              `[data-ohw-instance="${escaped}"], [data-ohw-section="${escaped}"]`
+            );
+            for (const marker of Array.from(markers)) {
+              const editables = marker.querySelectorAll(
+                '[data-ohw-key][data-ohw-editable="text"], [data-ohw-key][data-ohw-editable="plain"]'
+              );
+              for (const el of Array.from(editables)) {
+                const key = el.getAttribute("data-ohw-key");
+                if (key) keys.add(key);
+              }
+            }
+          }
+        }
+        for (const key of keys) {
+          if (key.startsWith(AI_SLOT_KEY_PREFIX) || key.startsWith("__ohw_")) continue;
+          const els = document.querySelectorAll(`[data-ohw-key="${CSS.escape(key)}"]`);
+          if (els.length === 0) continue;
+          const before = sanitizeHtml(els[0].innerHTML);
+          const after = stripTextAlignCss(before);
+          if (after === before) continue;
+          for (const el of Array.from(els)) el.innerHTML = after;
+          previousNodes[key] = before;
+          editContentRef.current = { ...editContentRef.current, [key]: after };
+          strippedNodes.push({ key, text: after });
+        }
+      }
       stylesRef.current = value;
       applyStylesToDom(parseStyleStore(value));
-      postToParentRef.current({ type: "ow:change", nodes: [{ key: STYLE_STORE_KEY, text: value }] });
+      postToParentRef.current({
+        type: "ow:change",
+        nodes: [{ key: STYLE_STORE_KEY, text: value }, ...strippedNodes, ...restored]
+      });
       postToParentRef.current({
         type: "ow:ai-styles-applied",
         previous,
         value,
-        ...previousSections !== void 0 ? { previousSections } : {}
+        ...previousSections !== void 0 ? { previousSections } : {},
+        ...Object.keys(previousNodes).length > 0 ? { previousNodes } : {}
       });
     };
     window.addEventListener("message", handleAiSetStyles);
+    const handleAiSetButtonStyle = (e) => {
+      if (e.data?.type !== "ow:ai-set-button-style") return;
+      const nodeKey = typeof e.data.hrefKey === "string" ? e.data.hrefKey : "";
+      const keyed = nodeKey ? document.querySelector(
+        `[data-ohw-href-key="${CSS.escape(nodeKey)}"], [data-ohw-key="${CSS.escape(nodeKey)}"]`
+      ) : null;
+      const hrefKey = buttonId(keyed);
+      const el = hrefKey ? document.querySelector(`[data-ohw-href-key="${CSS.escape(hrefKey)}"]`) : null;
+      const previous = editContentRef.current[BUTTON_ASSIGNMENTS_KEY] ?? "";
+      if (!el || !hrefKey || !isCtaButton(el)) {
+        postToParentRef.current({ type: "ow:ai-button-style-applied", ok: false, previous, value: previous });
+        return;
+      }
+      const tokens = tokensFromButton(el);
+      const current = assignmentFor(el, editContentRef.current, tokens);
+      const patch = e.data.assignment;
+      const next = {
+        variant: patch?.variant ?? current.variant,
+        size: patch?.size ?? current.size
+      };
+      const value = typeof e.data.assignments === "string" ? e.data.assignments : JSON.stringify(withAssignment(editContentRef.current, hrefKey, next));
+      editContentRef.current = { ...editContentRef.current, [BUTTON_ASSIGNMENTS_KEY]: value };
+      applyButtonStyle(el, next, tokens);
+      postToParentRef.current({
+        type: "ow:change",
+        nodes: [{ key: BUTTON_ASSIGNMENTS_KEY, text: value }]
+      });
+      postToParentRef.current({
+        type: "ow:ai-button-style-applied",
+        ok: true,
+        // The resolved id, which may differ from the key the editor sent — undo must target this one.
+        hrefKey,
+        previous,
+        previousAssignment: current,
+        value
+      });
+    };
+    window.addEventListener("message", handleAiSetButtonStyle);
     const handleGetBrand = (e) => {
       if (e.data?.type !== "ow:get-brand") return;
       const template = deriveTemplateBrand();
@@ -31347,6 +31477,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiSetSections);
       window.removeEventListener("message", handleAiSetBrand);
       window.removeEventListener("message", handleAiSetStyles);
+      window.removeEventListener("message", handleAiSetButtonStyle);
       window.removeEventListener("message", handleCollectItems);
       window.removeEventListener("message", handleAiApplyItems);
       window.removeEventListener("message", handleGetBrand);
@@ -32886,6 +33017,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   resolveFooterCopyright,
   serializeAiFooterState,
   stepViableSlide,
+  stripTextAlignCss,
   toggleVariants,
   useOhwCarousel,
   validateUrlInput,