@ohhwells/bridge 0.1.80-next.242 → 0.1.80-next.244

package/dist/index.cjs

@@ -143,6 +143,7 @@ function isRenderableTree(value) {
 
 // src/lib/ai-sections-store.ts
 var AI_SECTIONS_KEY = "__ohw_ai_sections";
+var AI_SLOT_KEY_PREFIX = "ai.";
 var EMPTY_AI_SECTIONS = { v: 1, sections: [] };
 function parseAiSectionsState(raw) {
   if (!raw) return EMPTY_AI_SECTIONS;
@@ -186,6 +187,63 @@ function applyTreeToState(state, payload) {
   const others = state.sections.filter((existing) => existing.id !== entry.id);
   return { ...state, v: 1, sections: [...others, entry] };
 }
+function foldAlignIntoTrees(state, store) {
+  const byId = new Map(state.sections.map((entry) => [entry.id, entry]));
+  const nextTrees = /* @__PURE__ */ new Map();
+  const treeFor = (id) => {
+    const cloned = nextTrees.get(id);
+    if (cloned) return cloned;
+    const entry = byId.get(id);
+    if (!entry) return void 0;
+    const fresh = {
+      ...entry.tree,
+      rows: entry.tree.rows.map((row) => ({ ...row, blocks: row.blocks.map((block) => ({ ...block })) }))
+    };
+    nextTrees.set(id, fresh);
+    return fresh;
+  };
+  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;
+    const tree = match ? treeFor(match[1]) : void 0;
+    const block = match && tree ? tree.rows[Number(match[2])]?.blocks[Number(match[3])] : void 0;
+    if (!block) {
+      nodes[key] = override;
+      continue;
+    }
+    block.align = override.align;
+    const rest = { ...override };
+    delete rest.align;
+    if (Object.keys(rest).length > 0) nodes[key] = rest;
+  }
+  const sections = {};
+  for (const [sectionId, override] of Object.entries(store.sections)) {
+    const tree = override.align !== void 0 ? treeFor(sectionId) : void 0;
+    if (!tree) {
+      sections[sectionId] = override;
+      continue;
+    }
+    for (const row of tree.rows) {
+      for (const block of row.blocks) block.align = override.align;
+    }
+    const rest = { ...override };
+    delete rest.align;
+    if (Object.keys(rest).length > 0) sections[sectionId] = rest;
+  }
+  if (nextTrees.size === 0) return { state, store, changed: false };
+  return {
+    state: {
+      ...state,
+      v: 1,
+      sections: state.sections.map((entry) => {
+        const tree = nextTrees.get(entry.id);
+        return tree ? { ...entry, tree } : entry;
+      })
+    },
+    store: { v: 1, sections, nodes },
+    changed: true
+  };
+}
 function removeFromState(state, id) {
   return { ...state, v: 1, sections: state.sections.filter((entry) => entry.id !== id) };
 }
@@ -378,6 +436,9 @@ function styleSheetCss() {
       `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
     );
   }
+  for (const align of ["left", "center", "right"]) {
+    rules.push(`[data-ohw-style-align="${align}"] { text-align: ${align} !important; }`);
+  }
   return rules.join("\n");
 }
 var STYLE_FONT_LINK_ID = "ohw-style-fonts";
@@ -404,7 +465,8 @@ var SECTION_ATTRS = {
   textDistribution: "data-ohw-style-distribution",
   headlineScale: "data-ohw-style-headline",
   imageAspect: "data-ohw-style-aspect",
-  spacing: "data-ohw-style-spacing"
+  spacing: "data-ohw-style-spacing",
+  align: "data-ohw-style-align"
 };
 var NODE_WROTE_ATTR = "data-ohw-style-node";
 var NODE_PROPS = [
@@ -413,7 +475,8 @@ var NODE_PROPS = [
   "font-size",
   "background",
   "text-align",
-  "justify-content"
+  "justify-content",
+  "align-items"
 ];
 var ALIGN_JUSTIFY = {
   left: "flex-start",
@@ -463,6 +526,13 @@ function clearNodeProps(root) {
 function buttonSurfaceOf(el) {
   return el.closest("a, button") ?? el;
 }
+function alignSubjectOf(el) {
+  const button = el.closest('[data-ohw-role="button"]');
+  return button?.parentElement ?? el;
+}
+function horizontalFlexProp(el) {
+  return getComputedStyle(el).flexDirection.startsWith("column") ? "align-items" : "justify-content";
+}
 function applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
@@ -509,11 +579,13 @@ function applyStylesToDom(store) {
         el.setAttribute(NODE_WROTE_ATTR, "");
       }
       if (override.align !== void 0) {
-        saveInline(el, "text-align");
-        saveInline(el, "justify-content");
-        el.style.setProperty("text-align", override.align, "important");
-        el.style.setProperty("justify-content", ALIGN_JUSTIFY[override.align] ?? "flex-start", "important");
-        el.setAttribute(NODE_WROTE_ATTR, "");
+        const subject = alignSubjectOf(el);
+        const flexProp = horizontalFlexProp(subject);
+        saveInline(subject, "text-align");
+        saveInline(subject, flexProp);
+        subject.style.setProperty("text-align", override.align, "important");
+        subject.style.setProperty(flexProp, ALIGN_JUSTIFY[override.align] ?? "flex-start", "important");
+        subject.setAttribute(NODE_WROTE_ATTR, "");
       }
       if (override.buttonBackground !== void 0 || override.buttonText !== void 0) {
         const surface = buttonSurfaceOf(el);
@@ -743,7 +815,7 @@ function TextBlock({ slots, ctx, path }) {
 }
 function SectionHeaderBlock({ node, ctx, path }) {
   const slots = node.slots ?? {};
-  const align = slots.alignment === "center" ? "center" : "left";
+  const align = node.align ?? (slots.alignment === "center" ? "center" : "left");
   const children = node.children ?? [];
   const buttonRowIdx = children.findIndex((c) => c.type === "button-row");
   const buttonRow = buttonRowIdx >= 0 ? children[buttonRowIdx] : void 0;
@@ -787,7 +859,7 @@ function SectionHeaderBlock({ node, ctx, path }) {
           display: "flex",
           gap: AI_TREE_TOKENS.spacing6,
           marginTop: AI_TREE_TOKENS.spacing8,
-          justifyContent: align === "center" ? "center" : "flex-start"
+          justifyContent: align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start"
         },
         children: (buttonRow.children ?? []).map((button, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           ButtonEl,
@@ -1120,7 +1192,7 @@ function CardBlock({ node, ctx, path }) {
       editPath: `${path}.media`
     }
   ) : null;
-  const centered = slots.alignment === "center";
+  const centered = (node.align ?? slots.alignment) === "center";
   const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -20295,12 +20367,35 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleAiSetBrand);
     const handleAiSetStyles = (e) => {
       if (e.data?.type !== "ow:ai-set-styles") return;
-      const value = typeof e.data.value === "string" ? e.data.value : "";
+      let value = typeof e.data.value === "string" ? e.data.value : "";
       const previous = stylesRef.current;
+      let previousSections;
+      const store = parseStyleStore(value);
+      if (store) {
+        const folded = foldAlignIntoTrees(parseAiSectionsState(aiSectionsRef.current), store);
+        if (folded.changed) {
+          const nextSections = serializeAiSectionsState(folded.state);
+          if (nextSections !== aiSectionsRef.current) {
+            previousSections = aiSectionsRef.current;
+            aiSectionsRef.current = nextSections;
+            applyAiSectionsToDom(folded.state);
+            postToParentRef.current({
+              type: "ow:change",
+              nodes: [{ key: AI_SECTIONS_KEY, text: nextSections }]
+            });
+          }
+          value = JSON.stringify(folded.store);
+        }
+      }
       stylesRef.current = value;
       applyStylesToDom(parseStyleStore(value));
       postToParentRef.current({ type: "ow:change", nodes: [{ key: STYLE_STORE_KEY, text: value }] });
-      postToParentRef.current({ type: "ow:ai-styles-applied", previous, value });
+      postToParentRef.current({
+        type: "ow:ai-styles-applied",
+        previous,
+        value,
+        ...previousSections !== void 0 ? { previousSections } : {}
+      });
     };
     window.addEventListener("message", handleAiSetStyles);
     const handleGetBrand = (e) => {