@ohhwells/bridge 0.1.145 → 0.1.147

package/dist/index.d.cts

@@ -28,6 +28,14 @@ interface AiBlockNode {
     align?: 'left' | 'center' | 'right';
     slots?: Record<string, unknown>;
     children?: AiBlockNode[];
+    /** Stable id for ordered insertion. Omitted on trees saved before slots. */
+    ref?: string;
+    /** Fixed slot inside a split (`left`/`right`) or grid (`cell-N`). Omit to keep index order. */
+    slot?: string;
+    /** Unfilled fixed slots on a group. The published page draws none of these. */
+    emptySlots?: string[];
+    /** Stack wrapped around a slot that was filled a second time. */
+    promoted?: true;
     /** Shape is per-block-type, defined by the backend's `BlockDef.itemFields` (accordion's
      *  question/answer, media-strip's assetId/alt/href/linkTarget, footer link-list/hours/social-row). */
     items?: Array<Record<string, unknown>>;
@@ -461,6 +469,13 @@ interface AiSectionsState {
 }
 /** Parse a persisted value defensively — malformed state renders nothing, never throws. */
 declare function parseAiSectionsState(raw: string | null | undefined): AiSectionsState;
+/**
+ * Drop every `text-align` declaration from the inline style attributes in one content string,
+ * removing a style attribute that carried nothing else. Regex rather than DOMParser so the fold
+ * stays pure and usable outside a browser; the only authors of these attributes are the bridge's
+ * own `sanitizeHtml` and the model's alignment wraps, which both emit double-quoted attributes.
+ */
+declare function stripTextAlignCss(html: string): string;
 /**
  * Fold alignment overrides that target GENERATED sections into their trees, where alignment is
  * first-class data (block.align) that persists with the rest of the tree. A node override
@@ -859,4 +874,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { AI_DEFAULT_BRAND, AI_FOOTER_KEY, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiFooterBottomBar, type AiFooterColumn, type AiFooterLayoutTree, AiFooterRenderer, type AiFooterRendererProps, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptySection, type EmptySectionProps, FOOTER_COLUMN_BLOCKS, FOOTER_COLUMN_SPANS, FOOTER_SOCIAL_PLATFORMS, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, type SiteLegalLinks, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addFooterLinkColumn, appendFooterSocial, buildDefaultFooterTree, buildTarget, dropIndicatorVariants, ensureFooterTree, filterAvailablePages, foldAlignIntoTrees, getEditModeInitialState, insertFooterHours, isEditSessionActive, isRenderableFooterTree, isRenderableTree, isValidUrl, nextViableSlide, parseAiFooterState, parseAiSectionsState, parseTarget, removeFooterBlock, resolveFooterCopyright, serializeAiFooterState, stepViableSlide, toggleVariants, useOhwCarousel, validateUrlInput, viableSlides };
+export { AI_DEFAULT_BRAND, AI_FOOTER_KEY, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiFooterBottomBar, type AiFooterColumn, type AiFooterLayoutTree, AiFooterRenderer, type AiFooterRendererProps, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptySection, type EmptySectionProps, FOOTER_COLUMN_BLOCKS, FOOTER_COLUMN_SPANS, FOOTER_SOCIAL_PLATFORMS, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, type SiteLegalLinks, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addFooterLinkColumn, appendFooterSocial, buildDefaultFooterTree, buildTarget, dropIndicatorVariants, ensureFooterTree, filterAvailablePages, foldAlignIntoTrees, getEditModeInitialState, insertFooterHours, isEditSessionActive, isRenderableFooterTree, isRenderableTree, isValidUrl, nextViableSlide, parseAiFooterState, parseAiSectionsState, parseTarget, removeFooterBlock, resolveFooterCopyright, serializeAiFooterState, stepViableSlide, stripTextAlignCss, toggleVariants, useOhwCarousel, validateUrlInput, viableSlides };

package/dist/index.d.ts

@@ -28,6 +28,14 @@ interface AiBlockNode {
     align?: 'left' | 'center' | 'right';
     slots?: Record<string, unknown>;
     children?: AiBlockNode[];
+    /** Stable id for ordered insertion. Omitted on trees saved before slots. */
+    ref?: string;
+    /** Fixed slot inside a split (`left`/`right`) or grid (`cell-N`). Omit to keep index order. */
+    slot?: string;
+    /** Unfilled fixed slots on a group. The published page draws none of these. */
+    emptySlots?: string[];
+    /** Stack wrapped around a slot that was filled a second time. */
+    promoted?: true;
     /** Shape is per-block-type, defined by the backend's `BlockDef.itemFields` (accordion's
      *  question/answer, media-strip's assetId/alt/href/linkTarget, footer link-list/hours/social-row). */
     items?: Array<Record<string, unknown>>;
@@ -461,6 +469,13 @@ interface AiSectionsState {
 }
 /** Parse a persisted value defensively — malformed state renders nothing, never throws. */
 declare function parseAiSectionsState(raw: string | null | undefined): AiSectionsState;
+/**
+ * Drop every `text-align` declaration from the inline style attributes in one content string,
+ * removing a style attribute that carried nothing else. Regex rather than DOMParser so the fold
+ * stays pure and usable outside a browser; the only authors of these attributes are the bridge's
+ * own `sanitizeHtml` and the model's alignment wraps, which both emit double-quoted attributes.
+ */
+declare function stripTextAlignCss(html: string): string;
 /**
  * Fold alignment overrides that target GENERATED sections into their trees, where alignment is
  * first-class data (block.align) that persists with the rest of the tree. A node override
@@ -859,4 +874,4 @@ declare function useOhwCarousel(key: string, initial: CarouselSlide[]): {
     bind: Record<string, string>;
 };
 
-export { AI_DEFAULT_BRAND, AI_FOOTER_KEY, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiFooterBottomBar, type AiFooterColumn, type AiFooterLayoutTree, AiFooterRenderer, type AiFooterRendererProps, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptySection, type EmptySectionProps, FOOTER_COLUMN_BLOCKS, FOOTER_COLUMN_SPANS, FOOTER_SOCIAL_PLATFORMS, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, type SiteLegalLinks, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addFooterLinkColumn, appendFooterSocial, buildDefaultFooterTree, buildTarget, dropIndicatorVariants, ensureFooterTree, filterAvailablePages, foldAlignIntoTrees, getEditModeInitialState, insertFooterHours, isEditSessionActive, isRenderableFooterTree, isRenderableTree, isValidUrl, nextViableSlide, parseAiFooterState, parseAiSectionsState, parseTarget, removeFooterBlock, resolveFooterCopyright, serializeAiFooterState, stepViableSlide, toggleVariants, useOhwCarousel, validateUrlInput, viableSlides };
+export { AI_DEFAULT_BRAND, AI_FOOTER_KEY, AI_TREE_SCHEMA_VERSIONS, AI_TREE_TOKENS, type AiBlockNode, type AiBrandKit, type AiFooterBottomBar, type AiFooterColumn, type AiFooterLayoutTree, AiFooterRenderer, type AiFooterRendererProps, type AiLayoutTree, AiTreeRenderer, type AiTreeRendererProps, type CarouselSlide, CustomToolbar, CustomToolbarButton, CustomToolbarDivider, DragHandle, DropIndicator, type DropIndicatorProps, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptySection, type EmptySectionProps, FOOTER_COLUMN_BLOCKS, FOOTER_COLUMN_SPANS, FOOTER_SOCIAL_PLATFORMS, ItemActionToolbar, type ItemActionToolbarProps, ItemInteractionLayer, type ItemInteractionLayerProps, type ItemInteractionState, LinkEditorPanel, type LinkModalMode, type LinkModalProps, type LinkPage, LinkPopover, type LinkSection, OhhwellsBridge, SchedulingWidget, type SectionScaffold, type SiteLegalLinks, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, addFooterLinkColumn, appendFooterSocial, buildDefaultFooterTree, buildTarget, dropIndicatorVariants, ensureFooterTree, filterAvailablePages, foldAlignIntoTrees, getEditModeInitialState, insertFooterHours, isEditSessionActive, isRenderableFooterTree, isRenderableTree, isValidUrl, nextViableSlide, parseAiFooterState, parseAiSectionsState, parseTarget, removeFooterBlock, resolveFooterCopyright, serializeAiFooterState, stepViableSlide, stripTextAlignCss, toggleVariants, useOhwCarousel, validateUrlInput, viableSlides };

package/dist/index.js

@@ -6164,12 +6164,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();
@@ -6192,6 +6214,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;
@@ -6203,7 +6231,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;
@@ -6216,7 +6244,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;
@@ -9665,6 +9693,46 @@ function FooterSocialRowBlock({
     }
   );
 }
+function EmptySlotPlaceholder({ name }) {
+  return /* @__PURE__ */ 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) {
@@ -9672,9 +9740,11 @@ function renderNode(node, ctx, path, ambientAlign) {
       return /* @__PURE__ */ 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;
@@ -9772,24 +9842,38 @@ function renderNode(node, ctx, path, ambientAlign) {
         i
       ));
       if (layout === "grid") {
-        return /* @__PURE__ */ jsx(
+        const holes = ctx.keyFor ? node.emptySlots ?? [] : [];
+        return /* @__PURE__ */ jsxs(
           "div",
           {
             "data-ai-group": "grid",
             style: { display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap, alignItems: "end" },
-            children: kids
+            children: [
+              kids,
+              holes.map((name) => /* @__PURE__ */ jsx("div", { style: { gridColumn: "span 6", minWidth: 0 }, children: /* @__PURE__ */ 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__ */ jsx("div", { style: { minWidth: 0 }, children: renderNode(entry.node, ctx, `${path}.c${entry.index}`) }, name) : open.has(name) ? /* @__PURE__ */ jsx(EmptySlotPlaceholder, { name }, name) : null;
+        if (!left && !open.has("left") || !right && !open.has("right")) {
+          const only = left ?? right;
+          return only ? /* @__PURE__ */ jsx("div", { "data-ai-group": "split", style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ 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__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "div",
           {
             "data-ai-group": "split",
             style: { display: "grid", gridTemplateColumns: cols, gap, alignItems: "center" },
-            children: kids
+            children: [
+              side(left, "left"),
+              side(right, "right")
+            ]
           }
         );
       }
@@ -30066,14 +30150,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);
@@ -31418,7 +31561,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.144",
+        bridgeVersion: "0.1.146",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -32648,6 +32791,7 @@ export {
   resolveFooterCopyright,
   serializeAiFooterState,
   stepViableSlide,
+  stripTextAlignCss,
   toggleVariants,
   useOhwCarousel,
   validateUrlInput,