@ohhwells/bridge 0.1.144 → 0.1.146

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>>;

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>>;

package/dist/index.js

@@ -2440,6 +2440,49 @@ function socialHrefKey(item) {
 function socialIconKey(item) {
   return item.querySelector(ICON_SELECTOR)?.dataset.ohwKey ?? null;
 }
+var SOCIAL_PLATFORM_LABELS = {
+  instagram: "Instagram",
+  facebook: "Facebook",
+  x: "X",
+  twitter: "X",
+  tiktok: "TikTok",
+  youtube: "YouTube",
+  linkedin: "LinkedIn",
+  pinterest: "Pinterest",
+  whatsapp: "WhatsApp",
+  telegram: "Telegram",
+  spotify: "Spotify",
+  threads: "Threads",
+  vimeo: "Vimeo",
+  discord: "Discord",
+  medium: "Medium",
+  website: "Website"
+};
+function socialPlatformLabel(item, content) {
+  const iconKey = socialIconKey(item);
+  const chosen = iconKey ? (content[socialPlatformKey(iconKey)] ?? "").trim().toLowerCase() : "";
+  if (chosen) return SOCIAL_PLATFORM_LABELS[chosen] ?? chosen.charAt(0).toUpperCase() + chosen.slice(1);
+  const label = socialLabelElement(item);
+  const words = label && !label.hasAttribute(SOCIALS_EMPTY_LABEL_ATTR) ? (label.textContent ?? "").replace(/\s+/g, " ").trim() : "";
+  if (words) return words;
+  const link = item.matches("a") ? item : item.querySelector("a");
+  const aria = (link?.getAttribute("aria-label") ?? item.getAttribute("aria-label") ?? "").trim();
+  if (aria) return aria;
+  const href = (link?.getAttribute("href") ?? "").trim();
+  if (/^https?:\/\//i.test(href)) {
+    let host = "";
+    try {
+      host = new URL(href).hostname.replace(/^www\./i, "").toLowerCase();
+    } catch {
+      host = "";
+    }
+    if (host.includes("x.com") || host.includes("twitter.com")) return "X";
+    for (const [id, name] of Object.entries(SOCIAL_PLATFORM_LABELS)) {
+      if (host.includes(id)) return name;
+    }
+  }
+  return "Social";
+}
 var SOCIALS_ORDER_KEY = "__ohw_socials_order";
 function fromMarkup(markup) {
   const holder = document.createElement("div");
@@ -6121,7 +6164,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);
@@ -9622,6 +9667,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) {
@@ -9629,9 +9714,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;
@@ -9729,24 +9816,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")
+            ]
           }
         );
       }
@@ -25087,36 +25188,72 @@ function OhhwellsBridge() {
   const [selectedMedia, setSelectedMedia] = useState18(null);
   const selectedMediaElRef = useRef14(null);
   const mediaKeyDropTokenRef = useRef14(0);
+  const selectedIconElRef = useRef14(null);
+  const selectedSocialElRef = useRef14(null);
+  const queueSectionKeyDrop = useCallback12((prev) => {
+    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
+    if (!sectionEl) return;
+    const sectionInstanceId = instanceIdOf(movableUnit(sectionEl)) || null;
+    if (!sectionInstanceId) return;
+    const token = ++mediaKeyDropTokenRef.current;
+    const onQueueDrained = (e) => {
+      if (e.source !== window || e.data?.type !== "ow:media-key-drop" || e.data.token !== token) return;
+      window.removeEventListener("message", onQueueDrained);
+      if (aiSectionApiRef.current?.getSelectedId() !== sectionInstanceId) return;
+      if (selectedMediaElRef.current || selectedIconElRef.current || selectedSocialElRef.current) return;
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
+        key: null
+      });
+    };
+    window.addEventListener("message", onQueueDrained);
+    window.postMessage({ type: "ow:media-key-drop", token }, "*");
+  }, []);
   const clearMediaSelection = useCallback12(() => {
     const prev = selectedMediaElRef.current;
     selectedMediaElRef.current = null;
     setSelectedMedia(null);
-    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
-    if (sectionEl) {
-      const sectionInstanceId = instanceIdOf(movableUnit(sectionEl)) || null;
-      if (!sectionInstanceId) return;
-      const token = ++mediaKeyDropTokenRef.current;
-      const onQueueDrained = (e) => {
-        if (e.source !== window || e.data?.type !== "ow:media-key-drop" || e.data.token !== token) return;
-        window.removeEventListener("message", onQueueDrained);
-        if (aiSectionApiRef.current?.getSelectedId() !== sectionInstanceId) return;
-        if (selectedMediaElRef.current) return;
-        postToParentRef.current({
-          type: "ow:section-selected",
-          sectionId: sectionEl.dataset.ohwSection ?? null,
-          sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
-          key: null
-        });
-      };
-      window.addEventListener("message", onQueueDrained);
-      window.postMessage({ type: "ow:media-key-drop", token }, "*");
-    }
-  }, []);
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
   const clearMediaSelectionRef = useRef14(clearMediaSelection);
   clearMediaSelectionRef.current = clearMediaSelection;
+  const clearIconSelection = useCallback12(() => {
+    const prev = selectedIconElRef.current;
+    if (!prev) return;
+    selectedIconElRef.current = null;
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
+  const clearIconSelectionRef = useRef14(clearIconSelection);
+  clearIconSelectionRef.current = clearIconSelection;
+  const clearSocialSelection = useCallback12(() => {
+    const prev = selectedSocialElRef.current;
+    if (!prev) return;
+    selectedSocialElRef.current = null;
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
+  const clearSocialSelectionRef = useRef14(clearSocialSelection);
+  clearSocialSelectionRef.current = clearSocialSelection;
+  const selectIconElement = useCallback12((el) => {
+    if (selectedMediaElRef.current) clearMediaSelectionRef.current();
+    selectedIconElRef.current = el;
+    const sectionEl = el.closest("[data-ohw-section]");
+    aiSectionApiRef.current?.selectFromElement(el, { report: false });
+    postToParentRef.current({
+      type: "ow:section-selected",
+      sectionId: sectionEl?.dataset.ohwSection ?? null,
+      sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+      key: el.dataset.ohwKey ?? null,
+      keyLabel: "Icon"
+    });
+  }, []);
+  const selectIconElementRef = useRef14(selectIconElement);
+  selectIconElementRef.current = selectIconElement;
   const selectMediaElement = useCallback12((el) => {
     const r2 = el.getBoundingClientRect();
     const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
+    selectedIconElRef.current = null;
     selectedMediaElRef.current = el;
     setSelectedMedia({
       key: el.dataset.ohwKey ?? "",
@@ -25770,6 +25907,7 @@ function OhhwellsBridge() {
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
     selectedFooterColAttrRef.current = null;
+    clearSocialSelectionRef.current();
     setSelectedIsCta(false);
     setSelectedIsSocial(false);
     setSelectedIsSocialsRow(false);
@@ -26671,7 +26809,22 @@ function OhhwellsBridge() {
   const select = useCallback12((anchor) => {
     if (!isNavigationItem2(anchor)) return;
     if (activeElRef.current) deactivate();
-    aiSectionApiRef.current?.selectFromElement(anchor);
+    clearSocialSelectionRef.current();
+    const socialItem = getSocialItem(anchor);
+    if (socialItem) {
+      selectedSocialElRef.current = socialItem;
+      const sectionEl = socialItem.closest("[data-ohw-section]");
+      aiSectionApiRef.current?.selectFromElement(anchor, { report: false });
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl?.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+        key: socialIconKey(socialItem) ?? socialItem.getAttribute("data-ohw-href-key"),
+        keyLabel: socialPlatformLabel(socialItem, editContentRef.current)
+      });
+    } else {
+      aiSectionApiRef.current?.selectFromElement(anchor);
+    }
     selectedElRef.current = anchor;
     selectedHrefKeyRef.current = anchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
@@ -27809,8 +27962,11 @@ function OhhwellsBridge() {
         display: none !important;
       }
       /* Body text (no item-action toolbar) \u2014 first click enters text edit \u2192 I-beam.
-         Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win. */
-      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not(:is([data-ohw-href-key] *)) {
+         Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win.
+         Icons are excluded too: a glyph is replaced by a click, never typed into (OHH-623),
+         so it takes the picker's pointer below, not an I-beam \u2014 this blanket !important used
+         to beat the stylesheet's own non-!important icon rule (OHH-718). */
+      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not([data-ohw-editable="icon"]):not(:is([data-ohw-href-key] *)) {
         cursor: text !important;
       }
       /* Select-first items: default arrow; grab only when drag-start is allowed (data-ohw-can-drag). */
@@ -27831,6 +27987,7 @@ function OhhwellsBridge() {
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
+      [data-ohw-editable="icon"], [data-ohw-editable="icon"] * { cursor: pointer !important; }
       /* A text/plain editable nested inside a media editable (e.g. a placeholder's fallback
          label inside its bg-image box) is its own click target, not the media picker \u2014 the
          blanket media cursor rule above would otherwise show pointer where a click actually
@@ -27982,6 +28139,9 @@ function OhhwellsBridge() {
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
+      if (selectedIconElRef.current && !selectedIconElRef.current.contains(target)) {
+        clearIconSelectionRef.current();
+      }
       if (selectedMediaElRef.current && target.closest("[data-ohw-media-overlay]") && !findClosestButtonLike(target)) {
         const hit = findImageAtPoint(e.clientX, e.clientY, false);
         if (hit && hit !== selectedMediaElRef.current) {
@@ -28159,7 +28319,7 @@ function OhhwellsBridge() {
         if (isIconEditable(editable) && !getSocialItem(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          aiSectionApiRef.current?.selectFromElement(editable);
+          selectIconElementRef.current(editable);
           const aiIcon = editable.hasAttribute("data-ai-icon");
           const featureIcon = aiIcon && /\.features\.\d+\.icon$/.test(editable.dataset.ohwKey ?? "");
           postToParentRef.current({
@@ -29783,6 +29943,7 @@ function OhhwellsBridge() {
       deactivateRef.current();
       deselectRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
@@ -30200,6 +30361,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -30289,6 +30451,10 @@ function OhhwellsBridge() {
         clearMediaSelectionRef.current();
         return;
       }
+      if (e.key === "Escape" && selectedIconElRef.current) {
+        clearIconSelectionRef.current();
+        return;
+      }
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
         e.preventDefault();
         selectAllTextInEditable(activeElRef.current);
@@ -31310,7 +31476,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.143",
+        bridgeVersion: "0.1.145",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections