@ohhwells/bridge 0.1.68-next.205 → 0.1.69-next.207

package/dist/index.cjs

@@ -580,6 +580,9 @@ var AI_RESPONSIVE_CSS = [
   "@media (max-width: 640px) {",
   "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
   "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  "  [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
+  "  [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
   "  [data-ai-responsive] [data-ai-section-inner] { padding-left: 20px !important; padding-right: 20px !important; }",
   "  [data-ai-responsive] { overflow-x: hidden; }",
   "  [data-ai-responsive] img { max-width: 100%; }",
@@ -1182,7 +1185,24 @@ function CardBlock({ node, ctx, path }) {
         minWidth: 0
       },
       children: [
-        media && (horizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", padding: mediaInset }, children: media }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        media && (horizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: (
+              // An icon hugs its glyph — flex:1 gave a 48px icon half the card and pushed the
+              // text to the far side. Photos keep the half-and-half split. The inset has no
+              // inner padding (the photo split absorbed that), so the icon carries its own gap.
+              /^(lucide|simple):/.test(mediaRef) ? {
+                flexShrink: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: mediaInset,
+                [mediaPosition === "right" ? "marginLeft" : "marginRight"]: 20
+              } : { flex: 1, minWidth: 0, display: "flex", alignItems: "center", padding: mediaInset }
+            ),
+            children: media
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             style: /^(lucide|simple):/.test(mediaRef) ? { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` } : hasBg ? void 0 : { borderRadius: AI_TREE_TOKENS.radiusCard, overflow: "hidden" },
@@ -1446,6 +1466,49 @@ function renderNode(node, ctx, path) {
   switch (node.type) {
     case "text":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextBlock, { slots, ctx, path });
+    // 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.
+    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;
+      const kids = (node.children ?? []).map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: layout === "grid" ? {
+            gridColumn: `span ${typeof child.span === "number" ? Math.min(12, Math.max(1, child.span)) : 12}`,
+            minWidth: 0
+          } : { minWidth: 0 },
+          children: renderNode(child, ctx, `${path}.c${i}`)
+        },
+        i
+      ));
+      if (layout === "grid") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-ai-group": "grid",
+            style: { display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap, alignItems: "end" },
+            children: kids
+          }
+        );
+      }
+      if (layout === "split") {
+        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)(
+          "div",
+          {
+            "data-ai-group": "split",
+            style: { display: "grid", gridTemplateColumns: cols, gap, alignItems: "center" },
+            children: kids
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-group": "stack", style: { display: "flex", flexDirection: "column", gap }, children: kids });
+    }
     case "button":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots, ctx, path });
     case "button-row":
@@ -1820,7 +1883,7 @@ function applyAiSectionsToDom(state, options) {
   const templateBrand = deriveTemplateBrand();
   const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
   const pagePath = window.location.pathname;
-  const pageSections = state.sections.filter((entry) => !entry.path || entry.path === pagePath);
+  const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
   const activeIds = new Set(pageSections.map((entry) => entry.id));
   for (const [id, section] of mounted) {
     if (!activeIds.has(id)) {
@@ -7698,7 +7761,7 @@ function MediaOverlay({
             },
             children: [
               isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-              isVideo ? "Replace video" : "Replace image"
+              isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image"
             ]
           }
         )
@@ -10777,8 +10840,13 @@ var GLYPH_SELECTOR = "svg, img";
 function referenceBox(slot) {
   const row = slot.closest("[data-ohw-socials-row]") ?? slot.closest("a")?.parentElement ?? null;
   const neighbour = row ? Array.from(row.querySelectorAll('[data-ohw-editable="icon"]')).find((el) => el !== slot) : null;
-  const source = (neighbour ?? slot).querySelector(GLYPH_SELECTOR);
-  const box = source?.getBoundingClientRect() ?? null;
+  if (neighbour) {
+    const box2 = neighbour.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect();
+    if (box2?.width && box2.height) return box2;
+  }
+  const own = slot.getBoundingClientRect();
+  if (own.width && own.height) return own;
+  const box = slot.querySelector(GLYPH_SELECTOR)?.getBoundingClientRect() ?? null;
   return box?.width && box.height ? box : null;
 }
 function iconMarkupSizedFor(slot, markup) {
@@ -15603,7 +15671,7 @@ function OhhwellsBridge() {
       key: el.dataset.ohwKey ?? null,
       // Display name for the pill — the raw key prettifies into fragments ("Img"); the
       // bridge knows what the node IS, so it names it.
-      keyLabel: el.dataset.ohwEditable === "video" ? "Video" : "Image"
+      keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
     });
   }, []);
   const selectMediaElementRef = (0, import_react17.useRef)(selectMediaElement);
@@ -19200,6 +19268,8 @@ function OhhwellsBridge() {
             if (video && video.src !== val) applyVideoSrc(video, val);
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
+          } else if (el.dataset.ohwEditable === "icon") {
+            applyIconMarkup(el, val);
           } else {
             el.innerHTML = val;
           }
@@ -19408,6 +19478,7 @@ function OhhwellsBridge() {
       }
       deselectRef.current();
       deactivateRef.current();
+      clearMediaSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -20283,7 +20354,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.68",
+        bridgeVersion: "0.1.69",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections