@ohhwells/bridge 0.1.145 → 0.1.147

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,
@@ -6258,12 +6259,34 @@ function applyTreeToState(state, payload) {
     ...selfEdit ? priorEntry?.beforeSection ? { beforeSection: priorEntry.beforeSection } : {} : insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
     ...selfEdit ? priorEntry?.replaces ? { replaces: priorEntry.replaces } : {} : payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
     tree: payload.tree,
-    media: payload.media ?? {},
+    // A column insert rebuilds the media map from the live DOM keys. The photo
+    // still points at the ref it was generated with. Keep that ref.
+    media: { ...priorEntry?.media ?? {}, ...payload.media ?? {} },
     ...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
   };
   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();
@@ -6286,6 +6309,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;
@@ -6297,7 +6326,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;
@@ -6310,7 +6339,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;
@@ -9759,6 +9788,46 @@ function FooterSocialRowBlock({
     }
   );
 }
+function EmptySlotPlaceholder({ name }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-ai-slot": name,
+      "data-ai-slot-empty": "",
+      "aria-hidden": "true",
+      style: {
+        minHeight: 88,
+        borderRadius: 12,
+        border: "1px dashed #D6D3D1",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+        color: "#A8A29E",
+        fontSize: 13,
+        lineHeight: 1.4,
+        textAlign: "center",
+        pointerEvents: "none"
+      },
+      children: "Ask AI to add something here"
+    }
+  );
+}
+function splitSides(node) {
+  const named = /* @__PURE__ */ new Map();
+  const unnamed = [];
+  (node.children ?? []).forEach((child, index) => {
+    if (child.slot === "left" || child.slot === "right") {
+      named.set(child.slot, { node: child, index });
+    } else {
+      unnamed.push({ node: child, index });
+    }
+  });
+  return {
+    left: named.get("left") ?? unnamed.shift() ?? null,
+    right: named.get("right") ?? unnamed.shift() ?? null
+  };
+}
 function renderNode(node, ctx, path, ambientAlign) {
   const slots = node.slots ?? {};
   switch (node.type) {
@@ -9766,9 +9835,11 @@ function renderNode(node, ctx, path, ambientAlign) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextBlock, { slots, ctx, path, align: node.align ?? ambientAlign });
     // Layout container: arranges child blocks, contributes no content of its own. `grid` is a
     // nested 12-column grid the children span (a collage is 3–5 media on it, bottom-aligned so
-    // mixed aspects read as a composition); `split` is exactly two children at a ratio; `stack`
-    // is a column. Children render through this same dispatcher, so edit markers, media
-    // resolution, and copy paths all work unchanged inside a group.
+    // mixed aspects read as a composition); `split` is left and right (index order when `slot`
+    // is omitted); `stack` is a column. A missing split side is a canvas placeholder only when
+    // `emptySlots` names it. A one-child split used to keep a row at span 12 (a testimonial
+    // under a heading) sits centered at half the row width. Children render through this same
+    // dispatcher, so edit markers, media resolution, and copy paths all work unchanged.
     case "group": {
       const layout = str(slots.layout);
       const gap = slots.spacing === "tight" ? AI_TREE_TOKENS.spacing3 : slots.spacing === "airy" ? AI_TREE_TOKENS.spacing8 : AI_TREE_TOKENS.spacing6;
@@ -9866,24 +9937,38 @@ function renderNode(node, ctx, path, ambientAlign) {
         i
       ));
       if (layout === "grid") {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        const holes = ctx.keyFor ? node.emptySlots ?? [] : [];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             "data-ai-group": "grid",
             style: { display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap, alignItems: "end" },
-            children: kids
+            children: [
+              kids,
+              holes.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { gridColumn: "span 6", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptySlotPlaceholder, { name }) }, name))
+            ]
           }
         );
       }
       if (layout === "split") {
+        const { left, right } = splitSides(node);
+        const open = new Set(ctx.keyFor ? node.emptySlots ?? [] : []);
+        const side = (entry, name) => entry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { minWidth: 0 }, children: renderNode(entry.node, ctx, `${path}.c${entry.index}`) }, name) : open.has(name) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptySlotPlaceholder, { name }, name) : null;
+        if (!left && !open.has("left") || !right && !open.has("right")) {
+          const only = left ?? right;
+          return only ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-group": "split", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "50%", minWidth: 0 }, children: renderNode(only.node, ctx, `${path}.c${only.index}`) }) }) : null;
+        }
         const ratio = str(slots.ratio);
         const cols = ratio === "3:5" ? "3fr 5fr" : ratio === "5:3" ? "5fr 3fr" : "1fr 1fr";
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             "data-ai-group": "split",
             style: { display: "grid", gridTemplateColumns: cols, gap, alignItems: "center" },
-            children: kids
+            children: [
+              side(left, "left"),
+              side(right, "right")
+            ]
           }
         );
       }
@@ -30154,14 +30239,73 @@ 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);
@@ -31506,7 +31650,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.144",
+        bridgeVersion: "0.1.146",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -32737,6 +32881,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   resolveFooterCopyright,
   serializeAiFooterState,
   stepViableSlide,
+  stripTextAlignCss,
   toggleVariants,
   useOhwCarousel,
   validateUrlInput,