@ohhwells/bridge 0.1.113-next.295 → 0.1.113-next.297

package/dist/index.cjs

@@ -778,6 +778,8 @@ function applyStylesToDom(store) {
     if (isNavbar) {
       const drawer = document.querySelector("[data-ohw-nav-drawer]");
       if (drawer && !sections.includes(drawer)) sections.push(drawer);
+      const header = document.querySelector("[data-ohw-nav-root]");
+      if (header && !sections.includes(header)) sections.push(header);
     }
     for (const marker of Array.from(sections)) {
       const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
@@ -9100,6 +9102,7 @@ function MediaOverlay({
   fadingOut = false,
   selected = false,
   hovered = false,
+  cueOnly = false,
   onFadeOutComplete,
   onReplace,
   onSelect,
@@ -9108,7 +9111,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);
@@ -9225,7 +9228,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)",
@@ -9276,7 +9279,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) => {
@@ -9306,7 +9309,8 @@ var OVERLAY_BUTTON_STYLE2 = {
 };
 function CarouselOverlay({
   hover,
-  onEdit
+  onEdit,
+  cueOnly = false
 }) {
   const { rect } = hover;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -9322,12 +9326,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": "",
@@ -9518,7 +9522,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);
@@ -9527,6 +9532,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;
@@ -16632,6 +16640,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);
 }
@@ -17842,6 +17863,12 @@ 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 clearMediaSelection = (0, import_react17.useCallback)(() => {
@@ -20481,6 +20508,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 {
@@ -20932,6 +20967,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]");
@@ -22796,7 +22832,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) => {
@@ -23725,7 +23765,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",
           {
@@ -23758,6 +23805,7 @@ function OhhwellsBridge() {
           {
             hover: mediaHover,
             isUploading: false,
+            cueOnly: !mediaHover.isDragOver && !!mediaHover.fullBleedSectionId && mediaHover.fullBleedSectionId !== selectedAiSectionId,
             onReplace: handleMediaReplace,
             onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
@@ -23775,7 +23823,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" }),