@ohhwells/bridge 0.1.91 → 0.1.93

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" } : {}
@@ -8079,17 +8185,40 @@ var REMOVED_ATTR2 = "data-ohw-section-removed";
 function isRemovedSection(el) {
   return el.hasAttribute(REMOVED_ATTR2);
 }
+function movableUnit(el) {
+  return el.closest("[data-ohw-section-container]") ?? el;
+}
+function sectionTypeOf(el) {
+  return el.getAttribute("data-ohw-section") ?? el.querySelector("[data-ohw-section]")?.getAttribute("data-ohw-section") ?? "";
+}
+function sectionElementOf(el) {
+  return el.hasAttribute("data-ohw-section") ? el : el.querySelector("[data-ohw-section]") ?? el;
+}
+function collectTopLevelUnits(predicate) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  document.querySelectorAll("[data-ohw-section]").forEach((el) => {
+    if (!predicate(el)) return;
+    const unit = movableUnit(el);
+    if (unit.parentElement?.closest("[data-ohw-section],[data-ohw-section-container]")) return;
+    if (seen.has(unit)) return;
+    seen.add(unit);
+    result.push(unit);
+  });
+  return result;
+}
 function topLevelSections() {
-  return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
-  );
+  return collectTopLevelUnits((el) => !isChromeSection(el) && !isRemovedSection(movableUnit(el)));
 }
 function instanceIdOf(el) {
   return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
 }
 function findByInstanceId(instanceId) {
   const escapedId = CSS.escape(instanceId);
-  return document.querySelector(`[data-ohw-instance="${escapedId}"]`) ?? document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
+  const direct = document.querySelector(`[data-ohw-instance="${escapedId}"]`);
+  if (direct) return movableUnit(direct);
+  const bare = document.querySelector(`[data-ohw-section="${escapedId}"]:not([data-ohw-instance])`);
+  return bare ? movableUnit(bare) : null;
 }
 function planSectionMove(instanceId, targetIndex, currentPath) {
   const sections = topLevelSections();
@@ -8101,7 +8230,7 @@ function planSectionMove(instanceId, targetIndex, currentPath) {
   const reordered = [...others.slice(0, clamped), dragged, ...others.slice(clamped)];
   return reordered.map((el, order) => ({
     instanceId: instanceIdOf(el),
-    type: el.getAttribute("data-ohw-section") ?? "",
+    type: sectionTypeOf(el),
     order,
     pagePath: currentPath
   }));
@@ -8156,13 +8285,11 @@ function applyPersistedOrder(entries) {
 function setSectionRemoved(instanceId, currentPath, existingEntries, removed) {
   if (!findByInstanceId(instanceId)) return null;
   const byId = new Map(existingEntries.map((e) => [e.instanceId, e]));
-  const allSections = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
-  );
+  const allSections = collectTopLevelUnits((el) => !isChromeSection(el));
   allSections.forEach((el, order) => {
     const id = instanceIdOf(el);
     if (!byId.has(id)) {
-      byId.set(id, { instanceId: id, type: el.getAttribute("data-ohw-section") ?? "", order, pagePath: currentPath });
+      byId.set(id, { instanceId: id, type: sectionTypeOf(el), order, pagePath: currentPath });
     }
   });
   const target = byId.get(instanceId);
@@ -8190,7 +8317,7 @@ function duplicateSectionInstance(instanceId, newId, currentPath, existingEntrie
     const id = instanceIdOf(el);
     return {
       instanceId: id,
-      type: el.getAttribute("data-ohw-section") ?? "",
+      type: sectionTypeOf(el),
       order,
       pagePath: currentPath,
       ...byId.get(id)?.removed ? { removed: true } : {}
@@ -8232,6 +8359,10 @@ function initSectionInstancesFromContent(content, currentPath) {
   document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
     el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
   });
+  document.querySelectorAll("[data-ohw-section-container]:not([data-ohw-instance])").forEach((el) => {
+    const type = sectionTypeOf(el);
+    if (type) el.setAttribute("data-ohw-instance", type);
+  });
   const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
   for (const entry of entries) {
     if (entry.instanceId === entry.type) continue;
@@ -8250,10 +8381,7 @@ function initSectionInstancesFromContent(content, currentPath) {
 
 // src/ui/ai-section/AiSectionOverlay.tsx
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-function findSectionElement(instanceId) {
-  const escaped = CSS.escape(instanceId);
-  return document.querySelector(`[data-ohw-instance="${escaped}"]`) ?? document.querySelector(`[data-ohw-section="${escaped}"]:not([data-ohw-instance])`);
-}
+var findSectionElement = findByInstanceId;
 function readRect(instanceId) {
   const el = findSectionElement(instanceId);
   if (!el) return null;
@@ -8293,7 +8421,7 @@ function useLiveSectionRect(sectionId) {
 }
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
-  const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
+  const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
   return { isFirst: index === 0, isLast: index === topLevel.length - 1 };
 }
@@ -8377,18 +8505,20 @@ function AiSectionOverlay({
   selectedIdRef.current = selectedId;
   const report = useCallback2(
     (el) => {
+      const labelSrc = el ? sectionElementOf(el) : null;
       postToParent2({
         type: "ow:section-selected",
-        sectionId: el ? el.dataset.ohwInstance ?? el.dataset.ohwSection ?? null : null,
-        sectionLabel: el ? el.dataset.ohwSectionLabel ?? titleCaseSectionId(el.dataset.ohwSection ?? "") : null
+        sectionId: el ? instanceIdOf(el) || null : null,
+        sectionLabel: labelSrc ? labelSrc.dataset.ohwSectionLabel ?? titleCaseSectionId(labelSrc.dataset.ohwSection ?? "") : null
       });
     },
     [postToParent2]
   );
   const selectFromElement = useCallback2(
     (el, options) => {
-      const sectionEl = el?.closest("[data-ohw-section]") ?? null;
-      const id = sectionEl ? sectionEl.dataset.ohwInstance ?? sectionEl.dataset.ohwSection ?? null : null;
+      const inner = el?.closest("[data-ohw-section]") ?? null;
+      const sectionEl = inner ? movableUnit(inner) : null;
+      const id = sectionEl ? instanceIdOf(sectionEl) || null : null;
       if (id === selectedIdRef.current) return;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
@@ -8454,7 +8584,8 @@ function AiSectionOverlay({
         return;
       }
       const sec = t.closest("[data-ohw-section]");
-      setHoveredId(sec ? sec.dataset.ohwInstance ?? sec.dataset.ohwSection ?? null : null);
+      const unit = sec ? movableUnit(sec) : null;
+      setHoveredId(unit ? instanceIdOf(unit) || null : null);
     };
     const onLeave = () => setHoveredId(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -14078,8 +14209,9 @@ function useSectionDrag({
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.closest(SECTION_DRAG_EXCLUDED_SELECTOR)) return;
-      const sectionEl = target.closest("[data-ohw-section]");
-      if (!sectionEl || isChromeSection(sectionEl) || sectionEl.dataset.ohwSection === "footer") return;
+      const inner = target.closest("[data-ohw-section]");
+      if (!inner || isChromeSection(inner) || inner.dataset.ohwSection === "footer") return;
+      const sectionEl = movableUnit(inner);
       if (!topLevelSections().includes(sectionEl)) return;
       startSectionPressDrag(sectionEl, e.clientX, e.clientY, e.pointerId);
     };
@@ -14986,7 +15118,6 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   if (!mountPoint) return false;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
-  container.dataset.ohwSection = sectionId;
   container.dataset.ohwInstance = sectionId;
   if (insertBefore) {
     const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
@@ -18143,10 +18274,10 @@ function OhhwellsBridge() {
     const applyFromCache = () => {
       const content = contentCache.get(subdomain);
       if (!content) return;
-      retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
-      initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
+        retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
+        initSectionInstancesFromContent(content, window.location.pathname);
         applyBrandChrome(content);
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
@@ -18237,6 +18368,10 @@ function OhhwellsBridge() {
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
+  useEffect13(() => {
+    if (!isEditMode) return;
+    initSectionInstancesFromContent(editContentRef.current, pathname);
+  }, [pathname, isEditMode]);
   useEffect13(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
@@ -20257,12 +20392,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 +21441,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.90",
+        bridgeVersion: "0.1.92",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections