@ohhwells/bridge 0.1.91 → 0.1.92

package/dist/index.d.cts

@@ -24,6 +24,8 @@ type AiBlockType = 'text' | 'button' | 'media' | 'media-list' | 'rating' | 'divi
 interface AiBlockNode {
     type: AiBlockType;
     span: number;
+    /** Horizontal alignment of the block's content within its column. */
+    align?: 'left' | 'center' | 'right';
     slots?: Record<string, unknown>;
     children?: AiBlockNode[];
     items?: Array<{
@@ -55,8 +57,10 @@ interface AiLayoutTree {
     scaffold: SectionScaffold;
     tag?: string;
     settings?: AiSectionSettings;
+    /** A row's `align` sets the vertical alignment of its columns; `stretch` equalises heights. */
     rows: Array<{
         blocks: AiBlockNode[];
+        align?: 'top' | 'center' | 'bottom' | 'stretch';
     }>;
 }
 /** The site brand kit the renderer styles from (editor Brand settings). */

package/dist/index.d.ts

@@ -24,6 +24,8 @@ type AiBlockType = 'text' | 'button' | 'media' | 'media-list' | 'rating' | 'divi
 interface AiBlockNode {
     type: AiBlockType;
     span: number;
+    /** Horizontal alignment of the block's content within its column. */
+    align?: 'left' | 'center' | 'right';
     slots?: Record<string, unknown>;
     children?: AiBlockNode[];
     items?: Array<{
@@ -55,8 +57,10 @@ interface AiLayoutTree {
     scaffold: SectionScaffold;
     tag?: string;
     settings?: AiSectionSettings;
+    /** A row's `align` sets the vertical alignment of its columns; `stretch` equalises heights. */
     rows: Array<{
         blocks: AiBlockNode[];
+        align?: 'top' | 'center' | 'bottom' | 'stretch';
     }>;
 }
 /** The site brand kit the renderer styles from (editor Brand settings). */

package/dist/index.js

@@ -69,6 +69,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;
@@ -112,6 +113,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) };
 }
@@ -330,6 +388,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";
@@ -356,10 +417,24 @@ 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 = ["color", "font-family", "font-size", "background"];
+var NODE_PROPS = [
+  "color",
+  "font-family",
+  "font-size",
+  "background",
+  "text-align",
+  "justify-content",
+  "align-items"
+];
+var ALIGN_JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
 function saveInline(el, prop) {
   const attr = `data-ohw-style-prev-${prop}`;
   if (el.hasAttribute(attr)) return;
@@ -403,6 +478,10 @@ 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 applyStylesToDom(store) {
   ensureStyleSheet();
   clearSectionAttrs(document);
@@ -448,6 +527,18 @@ function applyStylesToDom(store) {
         el.style.setProperty("font-size", `${override.fontSize}px`, "important");
         el.setAttribute(NODE_WROTE_ATTR, "");
       }
+      if (override.align !== void 0) {
+        const subject = alignSubjectOf(el);
+        saveInline(subject, "text-align");
+        saveInline(subject, "justify-content");
+        subject.style.setProperty("text-align", override.align, "important");
+        subject.style.setProperty(
+          "justify-content",
+          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);
         if (override.buttonBackground !== void 0) {
@@ -656,7 +747,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;
@@ -700,7 +791,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__ */ jsx(
           ButtonEl,
@@ -1033,7 +1124,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__ */ jsxs(
     "div",
     {
@@ -1752,6 +1843,19 @@ function AiTreeRenderer({
     }
   })();
   const distributed = !isOverlay && settings.textDistribution;
+  const rowAlignItems = (rowAlign) => {
+    if (rowAlign === "top") return "start";
+    if (rowAlign === "bottom") return "end";
+    if (rowAlign === "center" || rowAlign === "stretch") return rowAlign;
+    if (distributed === "space-between") return "stretch";
+    return (distributed ?? settings.verticalPosition) === "top" ? "start" : "center";
+  };
+  const cellAlignStyle = (blockAlign) => blockAlign ? {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: blockAlign === "left" ? "flex-start" : blockAlign === "right" ? "flex-end" : "center",
+    textAlign: blockAlign
+  } : {};
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -1788,7 +1892,7 @@ function AiTreeRenderer({
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
                   gap: AI_TREE_TOKENS.spacing6,
-                  alignItems: distributed === "space-between" ? "stretch" : (distributed ?? settings.verticalPosition) === "top" ? "start" : "center",
+                  alignItems: rowAlignItems(row.align),
                   marginTop: r2 > 0 ? AI_TREE_TOKENS.spacing8 : 0
                 },
                 children: (row.blocks ?? []).map((block, b) => /* @__PURE__ */ jsx(
@@ -1798,6 +1902,8 @@ function AiTreeRenderer({
                     style: {
                       gridColumn: `span ${Math.min(12, Math.max(1, block.span))}`,
                       minWidth: 0,
+                      // Horizontal placement of the block's content within its column.
+                      ...cellAlignStyle(block.align),
                       // space-between: each column becomes a flex column whose content spreads over
                       // the full row height instead of clumping at the top.
                       ...distributed === "space-between" ? { display: "flex", flexDirection: "column", justifyContent: "space-between" } : {}
@@ -20257,12 +20363,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) => {
@@ -21283,7 +21412,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.90",
+        bridgeVersion: "0.1.91",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections