@ohhwells/bridge 0.1.90 → 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" } : {}
@@ -8046,9 +8152,6 @@ var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
 function isChromeSection(el) {
   return el.matches("header, nav, footer, aside");
 }
-function isSchedulingSection(el) {
-  return (el.dataset.ohwSection ?? "").startsWith("scheduling-");
-}
 function titleCaseSectionId(id) {
   return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -8084,50 +8187,12 @@ function isRemovedSection(el) {
 }
 function topLevelSections() {
   return Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isSchedulingSection(el) && !isRemovedSection(el)
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el) && !isRemovedSection(el)
   );
 }
 function instanceIdOf(el) {
   return el.dataset.ohwInstance ?? el.dataset.ohwSection ?? "";
 }
-function moveableSequence() {
-  const scheduling = Array.from(
-    document.querySelectorAll('[data-ohw-section-container="scheduling"]')
-  );
-  return [...topLevelSections(), ...scheduling].sort((a, b) => {
-    const pos = a.compareDocumentPosition(b);
-    if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
-    if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
-    return 0;
-  });
-}
-function planSchedulingMoveTarget(instanceId, direction) {
-  const inner = document.querySelector(`[data-ohw-section="${CSS.escape(instanceId)}"]`);
-  const wrapper = inner?.closest('[data-ohw-section-container="scheduling"]');
-  if (!wrapper) return null;
-  const sequence = moveableSequence();
-  const index = sequence.indexOf(wrapper);
-  if (index === -1) return null;
-  const siblingIndex = direction === "up" ? index - 1 : index + 1;
-  if (siblingIndex < 0 || siblingIndex >= sequence.length) return null;
-  const others = sequence.filter((_, i) => i !== index);
-  const clamped = Math.max(0, Math.min(siblingIndex, others.length));
-  if (clamped === 0) return null;
-  const newPrev = others[clamped - 1];
-  if (newPrev.hasAttribute("data-ohw-section-container")) return null;
-  const newAnchorId = instanceIdOf(newPrev);
-  if (!newAnchorId) return null;
-  return { wrapper, others, clamped, newAnchorId };
-}
-function canMoveSchedulingSection(instanceId, direction) {
-  return planSchedulingMoveTarget(instanceId, direction) !== null;
-}
-function planSchedulingMove(instanceId, direction) {
-  const plan = planSchedulingMoveTarget(instanceId, direction);
-  if (!plan) return null;
-  plan.others[plan.clamped - 1].after(plan.wrapper);
-  return { newAnchorId: plan.newAnchorId };
-}
 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])`);
@@ -8333,12 +8398,6 @@ function useLiveSectionRect(sectionId) {
   return rect;
 }
 function computeSectionBoundaryFlags(instanceId) {
-  if (instanceId.startsWith("scheduling-")) {
-    return {
-      isFirst: !canMoveSchedulingSection(instanceId, "up"),
-      isLast: !canMoveSchedulingSection(instanceId, "down")
-    };
-  }
   const topLevel = topLevelSections();
   const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
@@ -14934,21 +14993,14 @@ function updateSectionScheduleId(insertAfter, scheduleId) {
   tracker.textContent = JSON.stringify(updated);
   return tracker.textContent ?? "[]";
 }
-function updateSchedulingInsertAfter(oldInsertAfter, newInsertAfter) {
-  const tracker = getSectionsTracker();
-  let sections = [];
-  try {
-    sections = JSON.parse(tracker.textContent || "[]");
-  } catch {
+var schedulingRoots = /* @__PURE__ */ new WeakMap();
+function unmountSchedulingWrapper(wrapper) {
+  const root = schedulingRoots.get(wrapper);
+  if (root) {
+    schedulingRoots.delete(wrapper);
+    setTimeout(() => root.unmount(), 0);
   }
-  const currentPath = window.location.pathname;
-  const updated = sections.map((s) => {
-    if (s.type !== "scheduling" || s.insertAfter !== oldInsertAfter) return s;
-    if (s.pagePath && s.pagePath !== currentPath) return s;
-    return { ...s, insertAfter: newInsertAfter };
-  });
-  tracker.textContent = JSON.stringify(updated);
-  return tracker.textContent ?? "[]";
+  wrapper.remove();
 }
 function schedulingSectionId(insertAfter) {
   return `scheduling-${insertAfter}`;
@@ -15003,12 +15055,12 @@ function retryMissingSchedulingMounts(entries, notifyOnConnect = false) {
   if (!hasMissingSchedulingWidgets(entries)) return;
   mountSchedulingEntries(entries, notifyOnConnect);
 }
-function initSectionsFromContent(content, removeExisting = false) {
+function initSectionsFromContent(content, removeExisting = false, currentPath = typeof window !== "undefined" ? window.location.pathname : "/") {
   const raw = content["__ohw_sections"];
   if (!raw) return;
   try {
     if (removeExisting) {
-      document.querySelectorAll('[data-ohw-section-container="scheduling"]').forEach((el) => el.remove());
+      document.querySelectorAll('[data-ohw-section-container="scheduling"]').forEach((el) => unmountSchedulingWrapper(el));
     }
     const inEditor = typeof window !== "undefined" && window.self !== window.top;
     if (inEditor) getSectionsTracker().textContent = raw;
@@ -15016,8 +15068,16 @@ function initSectionsFromContent(content, removeExisting = false) {
     const preExisting = pageEntries.filter((e) => !isSchedulingWidgetMissing(e));
     const notifyForEntry = inEditor ? (e) => !e.scheduleId : false;
     mountSchedulingEntries(pageEntries, notifyForEntry);
-    requestAnimationFrame(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry));
-    setTimeout(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry), 250);
+    const reapplyOrder = () => applyPersistedOrder(getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath));
+    reapplyOrder();
+    requestAnimationFrame(() => {
+      retryMissingSchedulingMounts(pageEntries, notifyForEntry);
+      reapplyOrder();
+    });
+    setTimeout(() => {
+      retryMissingSchedulingMounts(pageEntries, notifyForEntry);
+      reapplyOrder();
+    }, 250);
     for (const entry of preExisting) {
       window.postMessage({ type: "ow:schedule-config", insertAfter: entry.insertAfter, scheduleId: entry.scheduleId ?? null }, "*");
     }
@@ -15032,6 +15092,8 @@ 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}"]`);
     const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
@@ -15045,6 +15107,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
     tail.insertAdjacentElement("afterend", container);
   }
   const root = createRoot2(container);
+  schedulingRoots.set(container, root);
   flushSync2(() => {
     root.render(
       /* @__PURE__ */ jsx33(
@@ -20300,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) => {
@@ -20320,15 +20406,6 @@ function OhhwellsBridge() {
       const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
       const direction = e.data.direction === "up" || e.data.direction === "down" ? e.data.direction : null;
       if (!instanceId || !direction) return;
-      if (instanceId.startsWith("scheduling-")) {
-        const result = planSchedulingMove(instanceId, direction);
-        if (!result) return;
-        const oldInsertAfter = instanceId.slice("scheduling-".length);
-        const sectionsJson = updateSchedulingInsertAfter(oldInsertAfter, result.newAnchorId);
-        postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: sectionsJson }] });
-        window.dispatchEvent(new Event("resize"));
-        return;
-      }
       const entries = moveSectionInstance(instanceId, direction, window.location.pathname);
       if (!entries) return;
       const orderJson = JSON.stringify(entries);
@@ -20350,8 +20427,13 @@ function OhhwellsBridge() {
       if (!instanceId) return;
       if (instanceId.startsWith("scheduling-")) {
         const insertAfter = instanceId.slice("scheduling-".length);
-        const inner = document.querySelector(`[data-ohw-section="${CSS.escape(instanceId)}"]`);
-        inner?.closest('[data-ohw-section-container="scheduling"]')?.remove();
+        const el = document.querySelector(`[data-ohw-section="${CSS.escape(instanceId)}"]`);
+        const wrapper = el?.closest('[data-ohw-section-container="scheduling"]') ?? null;
+        if (wrapper) {
+          unmountSchedulingWrapper(wrapper);
+        } else {
+          el?.setAttribute("style", "display:none");
+        }
         const tracker = getSectionsTracker();
         let sections = [];
         try {
@@ -21330,7 +21412,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.89",
+        bridgeVersion: "0.1.91",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections