@ohhwells/bridge 0.1.139-next.388 → 0.1.139-next.390

package/dist/index.cjs

@@ -6258,7 +6258,9 @@ 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);
@@ -6600,6 +6602,21 @@ function pricingCardFeatureCount(tree, index) {
   const target = findPricingCollection(tree)?.children?.[index];
   return target ? pricingFeatureList(target).length : 0;
 }
+function prevailingFeatureIcon(features) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const row of features) {
+    const key = `${row.icon ?? ""}|${row.iconColor ?? ""}`;
+    const entry = counts.get(key) ?? { count: 0, ...row.icon ? { icon: row.icon } : {}, ...row.iconColor ? { iconColor: row.iconColor } : {} };
+    entry.count += 1;
+    counts.set(key, entry);
+  }
+  let best = null;
+  for (const entry of counts.values()) {
+    if (!best || entry.count > best.count) best = entry;
+  }
+  if (!best) return {};
+  return { ...best.icon ? { icon: best.icon } : {}, ...best.iconColor ? { iconColor: best.iconColor } : {} };
+}
 function addPricingCardFeature(tree, index, text) {
   return withPricingCollection(tree, (collection) => {
     const children = collection.children;
@@ -6608,7 +6625,7 @@ function addPricingCardFeature(tree, index, text) {
     const features = pricingFeatureList(target);
     if (features.length >= PRICING_FEATURES_MAX) return false;
     target.slots = target.slots ?? {};
-    target.slots.features = [...features, { text }];
+    target.slots.features = [...features, { text, ...prevailingFeatureIcon(features) }];
     return true;
   });
 }
@@ -9786,6 +9803,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) {
@@ -9893,24 +9950,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 canvas = Boolean(ctx.keyFor);
+        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) : canvas ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptySlotPlaceholder, { name }, name) : null;
+        if (!canvas && (!left || !right)) {
+          const only = left ?? right;
+          return only ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-group": "split", 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")
+            ]
           }
         );
       }