@ohhwells/bridge 0.1.116 → 0.1.117

package/dist/index.cjs

@@ -8971,6 +8971,7 @@ function MediaOverlay({
   fadingOut = false,
   selected = false,
   hovered = false,
+  cueOnly = false,
   onFadeOutComplete,
   onReplace,
   onSelect,
@@ -8979,7 +8980,7 @@ function MediaOverlay({
   const { rect } = hover;
   const skeletonRef = React8.useRef(null);
   const isVideo = hover.elementType === "video";
-  const showChrome = !selected || hovered;
+  const showChrome = (!selected || hovered) && !cueOnly;
   const autoplay = hover.videoAutoplay ?? true;
   const muted = hover.videoMuted ?? true;
   const probeRef = React8.useRef(null);
@@ -9095,7 +9096,7 @@ function MediaOverlay({
           // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
           // in-document, pointer-events does it natively. The button below opts back in, so
           // Replace still works.
-          pointerEvents: hover.hasTextOverlap ? "none" : "auto",
+          pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
           boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -9126,7 +9127,7 @@ function MediaOverlay({
               ]
             }
           ),
-          replaceMode === "none" ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             Button,
             {
               "data-ohw-media-overlay": "",
@@ -9146,7 +9147,7 @@ function MediaOverlay({
                   justifyContent: "center"
                 } : null,
                 // Don't let Replace steal clicks when text (e.g. nav) sits on top of this media.
-                pointerEvents: hover.hasTextOverlap ? "none" : "auto"
+                pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto"
               },
               onMouseDown: (e) => e.preventDefault(),
               onClick: (e) => {
@@ -9176,7 +9177,8 @@ var OVERLAY_BUTTON_STYLE2 = {
 };
 function CarouselOverlay({
   hover,
-  onEdit
+  onEdit,
+  cueOnly = false
 }) {
   const { rect } = hover;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -9192,12 +9194,12 @@ function CarouselOverlay({
         width: rect.width,
         height: rect.height,
         zIndex: 2147483646,
-        pointerEvents: "auto",
+        pointerEvents: cueOnly ? "none" : "auto",
         boxShadow: "inset 0 0 0 1.5px var(--color-bridge-primary)",
         background: "color-mix(in srgb, var(--color-bridge-primary) 20%, transparent)"
       },
       onClick: () => onEdit(hover.key),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      children: cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Button,
         {
           "data-ohw-carousel-overlay": "",
@@ -9388,7 +9390,8 @@ function ReviewButton({
 }
 function AiSectionOverlay({
   postToParent: postToParent2,
-  apiRef
+  apiRef,
+  onSelectionChange
 }) {
   const [selectedId, setSelectedId] = (0, import_react8.useState)(null);
   const [reviewId, setReviewId] = (0, import_react8.useState)(null);
@@ -9397,6 +9400,9 @@ function AiSectionOverlay({
   reviewIdRef.current = reviewId;
   const selectedIdRef = (0, import_react8.useRef)(null);
   selectedIdRef.current = selectedId;
+  (0, import_react8.useEffect)(() => {
+    onSelectionChange?.(selectedId);
+  }, [selectedId, onSelectionChange]);
   const report = (0, import_react8.useCallback)(
     (el) => {
       const labelSrc = el ? sectionElementOf(el) : null;
@@ -9414,6 +9420,7 @@ function AiSectionOverlay({
       const sectionEl = inner ? movableUnit(inner) : null;
       const id = sectionEl ? instanceIdOf(sectionEl) || null : null;
       if (id === selectedIdRef.current) return;
+      selectedIdRef.current = id;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
     },
@@ -9434,9 +9441,11 @@ function AiSectionOverlay({
         return sectionEl != null;
       },
       clear: () => {
+        selectedIdRef.current = null;
         setSelectedId(null);
         report(null);
-      }
+      },
+      getSelectedId: () => selectedIdRef.current
     };
     return () => {
       apiRef.current = null;
@@ -9445,6 +9454,7 @@ function AiSectionOverlay({
   (0, import_react8.useEffect)(() => {
     const onMessage = (e) => {
       if (e.data?.type === "ow:ai-select" && e.data.sectionId === null) {
+        selectedIdRef.current = null;
         setSelectedId(null);
         return;
       }
@@ -9495,6 +9505,7 @@ function AiSectionOverlay({
       if (reviewIdRef.current) return;
       if (document.querySelector("[data-ohw-editing]")) return;
       if (selectedIdRef.current) {
+        selectedIdRef.current = null;
         setSelectedId(null);
         report(null);
       }
@@ -16503,6 +16514,19 @@ function isMediaEditable(el) {
   const t = el.dataset.ohwEditable;
   return t === "image" || t === "bg-image" || t === "video";
 }
+var FULL_BLEED_MIN_COVERAGE = 0.98;
+function fullBleedSectionIdOf(media) {
+  const section = media.closest("[data-ohw-section]");
+  if (!section) return null;
+  const s = section.getBoundingClientRect();
+  if (s.width <= 0 || s.height <= 0) return null;
+  const m = media.getBoundingClientRect();
+  const overlapX = Math.min(m.right, s.right) - Math.max(m.left, s.left);
+  const overlapY = Math.min(m.bottom, s.bottom) - Math.max(m.top, s.top);
+  if (overlapX <= 0 || overlapY <= 0) return null;
+  if (overlapX * overlapY / (s.width * s.height) < FULL_BLEED_MIN_COVERAGE) return null;
+  return instanceIdOf(movableUnit(section)) || null;
+}
 function isIconMarkupValue(value) {
   return /^\s*<(svg|img)\b/i.test(value);
 }
@@ -17676,20 +17700,38 @@ function OhhwellsBridge() {
   const hoveredImageHasTextOverlapRef = (0, import_react17.useRef)(false);
   const dragOverElRef = (0, import_react17.useRef)(null);
   const [mediaHover, setMediaHover] = (0, import_react17.useState)(null);
+  const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react17.useState)(null);
+  const selectedAiSectionIdRef = (0, import_react17.useRef)(null);
+  const handleAiSectionSelectionChange = (0, import_react17.useCallback)((id) => {
+    selectedAiSectionIdRef.current = id;
+    setSelectedAiSectionId(id);
+  }, []);
   const [selectedMedia, setSelectedMedia] = (0, import_react17.useState)(null);
   const selectedMediaElRef = (0, import_react17.useRef)(null);
+  const mediaKeyDropTokenRef = (0, import_react17.useRef)(0);
   const clearMediaSelection = (0, import_react17.useCallback)(() => {
     const prev = selectedMediaElRef.current;
     selectedMediaElRef.current = null;
     setSelectedMedia(null);
     const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
     if (sectionEl) {
-      postToParentRef.current({
-        type: "ow:section-selected",
-        sectionId: sectionEl.dataset.ohwSection ?? null,
-        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
-        key: null
-      });
+      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 }, "*");
     }
   }, []);
   const clearMediaSelectionRef = (0, import_react17.useRef)(clearMediaSelection);
@@ -20131,6 +20173,23 @@ 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 (selectedMediaElRef.current && target.closest("[data-ohw-media-overlay]") && !findClosestButtonLike(target)) {
+        const hit = findImageAtPoint(e.clientX, e.clientY, false);
+        if (hit && hit !== selectedMediaElRef.current) {
+          e.preventDefault();
+          e.stopPropagation();
+          const fullBleedSectionId = fullBleedSectionIdOf(hit);
+          if (fullBleedSectionId && fullBleedSectionId !== selectedAiSectionIdRef.current) {
+            clearMediaSelectionRef.current();
+            deselectRef.current();
+            deactivateRef.current();
+            aiSectionApiRef.current?.selectFromElement(hit);
+            return;
+          }
+          selectMediaElementRef.current(hit);
+          return;
+        }
+      }
       if (isInsideFloatingPanel(target)) return;
       if (target.closest("[data-ohw-form-toolbar]")) return;
       if (target.closest(
@@ -20312,6 +20371,14 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
+          const fullBleedSectionId = fullBleedSectionIdOf(editable);
+          if (fullBleedSectionId && fullBleedSectionId !== selectedAiSectionIdRef.current) {
+            clearMediaSelectionRef.current();
+            deselectRef.current();
+            deactivateRef.current();
+            aiSectionApiRef.current?.selectFromElement(editable);
+            return;
+          }
           if (selectedMediaElRef.current === editable) {
             postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           } else {
@@ -20766,6 +20833,7 @@ function OhhwellsBridge() {
         elementType: imgEl.dataset.ohwEditable ?? "image",
         hasTextOverlap,
         isDragOver,
+        fullBleedSectionId: fullBleedSectionIdOf(imgEl),
         ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -20938,7 +21006,13 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
       }
     };
+    const syncSelectedMediaPointerRelease = (released) => {
+      setSelectedMedia(
+        (prev) => prev && prev.hasTextOverlap !== released ? { ...prev, hasTextOverlap: released } : prev
+      );
+    };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
+      syncSelectedMediaPointerRelease(true);
       if (linkPopoverOpenRef.current) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
@@ -21133,6 +21207,7 @@ function OhhwellsBridge() {
           return;
         }
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        syncSelectedMediaPointerRelease(false);
         if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
           showImageHover(imgEl, isDragOver);
@@ -22606,7 +22681,11 @@ function OhhwellsBridge() {
       if (!key) return;
       const r2 = getVisibleRect(container);
       setCarouselHover(
-        (prev) => prev && prev.key === key && prev.rect.top === r2.top && prev.rect.left === r2.left && prev.rect.width === r2.width && prev.rect.height === r2.height ? prev : { key, rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } }
+        (prev) => prev && prev.key === key && prev.rect.top === r2.top && prev.rect.left === r2.left && prev.rect.width === r2.width && prev.rect.height === r2.height ? prev : {
+          key,
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+          fullBleedSectionId: fullBleedSectionIdOf(container)
+        }
       );
     };
     const applyToolbarPos = (rect) => {
@@ -23068,7 +23147,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.115",
+        bridgeVersion: "0.1.116",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -23535,7 +23614,14 @@ function OhhwellsBridge() {
     bridgeRoot ? (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          AiSectionOverlay,
+          {
+            postToParent: postToParent2,
+            apiRef: aiSectionApiRef,
+            onSelectionChange: handleAiSectionSelectionChange
+          }
+        ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
@@ -23568,6 +23654,7 @@ function OhhwellsBridge() {
           {
             hover: mediaHover,
             isUploading: false,
+            cueOnly: !mediaHover.isDragOver && !!mediaHover.fullBleedSectionId && mediaHover.fullBleedSectionId !== selectedAiSectionId,
             onReplace: handleMediaReplace,
             onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
@@ -23585,7 +23672,14 @@ function OhhwellsBridge() {
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          CarouselOverlay,
+          {
+            hover: carouselHover,
+            onEdit: handleEditCarousel,
+            cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
+          }
+        ),
         siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
         siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
         isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),