@ohhwells/bridge 0.1.51-next.119 → 0.1.51-next.120

package/README.md

@@ -344,11 +344,40 @@ import { LinkPopover } from "@ohhwells/bridge";
 The iframe bridge reports page sections on `ow:ready`:
 
 ```json
-{ "type": "ow:ready", "version": "1", "nodes": [...], "sections": [{ "id": "hero", "label": "Hero" }] }
+{ "type": "ow:ready", "version": "1", "bridgeVersion": "0.1.50", "nodes": [...], "sections": [{ "id": "hero", "label": "Hero" }] }
 ```
 
+`version` is the protocol version; `bridgeVersion` is the npm package version (inlined at build time), letting the editor detect sites running an older bridge and gate version-dependent features (e.g. AI prompting) gracefully.
+
 Templates must mark sections with `data-ohw-section` (and optional `data-ohw-section-label`).
 
+### Section-scoped content collection (AI prompt context)
+
+The editor can request a single section's editable content (edit mode only):
+
+```json
+// editor → iframe
+{ "type": "ow:collect-section", "sectionId": "hero" }
+
+// iframe → editor
+{ "type": "ow:section-nodes", "sectionId": "hero", "found": true,
+  "nodes": [{ "key": "hero-headline", "type": "text/rich", "text": "..." }],
+  "rect": { "top": 0, "left": 0, "width": 1280, "height": 720 } }
+```
+
+- `found` is `false` (with empty `nodes`, `rect: null`) when no `[data-ohw-section="<id>"]` exists on the current page.
+- `rect` is the section element's document-relative bounding box — the editor uses it to draw the in-flight overlay over just the target section.
+- The returned set contains pure section content only: structural keys (`__ohw_*`), carousel/video-setting/meta nodes, and keyless editables are never included.
+- Node `type` is normalized to the set `image | bg-image | video | link | plain | text/rich | text` (unknown template-declared types become `text`).
+
+`ow:enter-edit` (iframe → editor, sent when the user clicks into an editable) also carries the enclosing section so the editor can offer that section as the AI prompt target:
+
+```json
+{ "type": "ow:enter-edit", "key": "hero-headline", "sectionId": "hero", "sectionLabel": "Hero" }
+```
+
+`sectionId`/`sectionLabel` are `null` for editables outside any `[data-ohw-section]` (label also when `data-ohw-section-label` is absent).
+
 ### Local link-editor testing (dev fixtures)
 
 Without the canvas editor parent, add `ohw-fixtures=1` to the edit URL. This preloads Re:Bound pages and sections into the link popover:

package/dist/index.cjs

@@ -8717,10 +8717,13 @@ function getLinkHref3(el) {
   const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
   return anchor?.getAttribute("href") ?? "";
 }
-function collectEditableNodes(extraContent) {
-  const nodes = Array.from(
-    document.querySelectorAll("[data-ohw-editable]")
-  ).map((el) => {
+function collectEditableNodes(extraContent, root = document) {
+  const isScoped = root !== document;
+  const editableEls = Array.from(root.querySelectorAll("[data-ohw-editable]"));
+  if (isScoped && root instanceof HTMLElement && root.matches("[data-ohw-editable]")) {
+    editableEls.unshift(root);
+  }
+  const nodes = editableEls.map((el) => {
     if (el.dataset.ohwEditable === "image") {
       const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
       return { key: el.dataset.ohwKey ?? "", type: "image", text: img?.src ?? "" };
@@ -8742,12 +8745,16 @@ function collectEditableNodes(extraContent) {
       text: el.dataset.ohwEditable === "plain" ? el.innerText ?? "" : el.innerHTML
     };
   });
-  document.querySelectorAll("[data-ohw-href-key]").forEach((el) => {
+  const hrefEls = Array.from(root.querySelectorAll("[data-ohw-href-key]"));
+  if (isScoped && root instanceof HTMLElement && root.matches("[data-ohw-href-key]")) {
+    hrefEls.unshift(root);
+  }
+  hrefEls.forEach((el) => {
     const key = el.getAttribute("data-ohw-href-key") ?? "";
     if (!key) return;
     nodes.push({ key, type: "link", text: getLinkHref3(el) });
   });
-  if (extraContent) {
+  if (extraContent && !isScoped) {
     for (const key of [NAV_ORDER_KEY, FOOTER_ORDER_KEY, NAV_COUNT_KEY]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {
@@ -8755,30 +8762,32 @@ function collectEditableNodes(extraContent) {
       }
     }
   }
-  document.querySelectorAll('[data-ohw-editable="video"]').forEach((el) => {
-    const key = el.dataset.ohwKey ?? "";
-    const video = getVideoEl(el);
-    if (!key || !video) return;
-    nodes.push({
-      key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`,
-      type: "video-setting",
-      text: String(video.autoplay)
-    });
-    nodes.push({
-      key: `${key}${VIDEO_MUTED_SUFFIX}`,
-      type: "video-setting",
-      text: String(video.muted)
+  if (!isScoped) {
+    document.querySelectorAll('[data-ohw-editable="video"]').forEach((el) => {
+      const key = el.dataset.ohwKey ?? "";
+      const video = getVideoEl(el);
+      if (!key || !video) return;
+      nodes.push({
+        key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`,
+        type: "video-setting",
+        text: String(video.autoplay)
+      });
+      nodes.push({
+        key: `${key}${VIDEO_MUTED_SUFFIX}`,
+        type: "video-setting",
+        text: String(video.muted)
+      });
     });
-  });
-  for (const key of listCarouselKeys()) {
-    nodes.push({ key, type: "carousel", text: JSON.stringify(readCarouselValue(key)) });
+    for (const key of listCarouselKeys()) {
+      nodes.push({ key, type: "carousel", text: JSON.stringify(readCarouselValue(key)) });
+    }
   }
   const byKey = /* @__PURE__ */ new Map();
   for (const node of nodes) {
     if (!node.key) continue;
     if (!byKey.has(node.key)) byKey.set(node.key, node);
   }
-  if (extraContent) {
+  if (extraContent && !isScoped) {
     applyNavFooterDeleteOverrides(byKey, extraContent);
   }
   return Array.from(byKey.values());
@@ -9391,6 +9400,10 @@ function syncNavigationDragCursorAttrs() {
     el.setAttribute("data-ohw-can-drag", "");
   });
 }
+var AI_NODE_TYPES = /* @__PURE__ */ new Set(["image", "bg-image", "video", "link", "plain", "text/rich", "text"]);
+function normalizeAiNodeType(type) {
+  return AI_NODE_TYPES.has(type) ? type : "text";
+}
 function isMediaEditable(el) {
   const t = el.dataset.ohwEditable;
   return t === "image" || t === "bg-image" || t === "video";
@@ -11110,7 +11123,14 @@ function OhhwellsBridge() {
       setReorderDragDisabled(reorderDisabled);
     }
     setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
-    postToParent2({ type: "ow:enter-edit", key: el.dataset.ohwKey });
+    const sectionEl = el.closest("[data-ohw-section]");
+    postToParent2({
+      type: "ow:enter-edit",
+      key: el.dataset.ohwKey,
+      // Section the edited element belongs to, so the editor can scope AI prompts to it.
+      sectionId: sectionEl?.dataset.ohwSection ?? null,
+      sectionLabel: sectionEl?.dataset.ohwSectionLabel ?? null
+    });
     requestAnimationFrame(() => refreshActiveCommandsRef.current());
   }, [clearSelectedAttr, deactivate, postToParent2]);
   activateRef.current = activate;
@@ -12786,6 +12806,25 @@ function OhhwellsBridge() {
       const h = document.documentElement.scrollHeight;
       if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
+    const handleCollectSection = (e) => {
+      if (e.data?.type !== "ow:collect-section") return;
+      const sectionId = e.data.sectionId;
+      if (typeof sectionId !== "string" || !sectionId) return;
+      const sectionEl = document.querySelector(
+        `[data-ohw-section="${CSS.escape(sectionId)}"]`
+      );
+      const nodes = sectionEl ? collectEditableNodes(void 0, sectionEl).filter(
+        (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "carousel", "video-setting"].includes(n.type)
+      ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })) : [];
+      const box = sectionEl?.getBoundingClientRect();
+      const rect = box ? {
+        top: box.top + window.scrollY,
+        left: box.left + window.scrollX,
+        width: box.width,
+        height: box.height
+      } : null;
+      postToParentRef.current({ type: "ow:section-nodes", sectionId, found: !!sectionEl, nodes, rect });
+    };
     let selectionChangeRaf = null;
     const runSelectionChange = () => {
       selectionChangeRaf = null;
@@ -13006,6 +13045,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleScheduleLinked);
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
+    window.addEventListener("message", handleCollectSection);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleImageUploading);
     window.addEventListener("message", handleCarouselChange);
@@ -13056,6 +13096,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleScheduleLinked);
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
+      window.removeEventListener("message", handleCollectSection);
       window.removeEventListener("message", handleImageUrl);
       window.removeEventListener("message", handleImageUploading);
       window.removeEventListener("message", handleCarouselChange);
@@ -13268,6 +13309,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
+        bridgeVersion: "0.1.51",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections