@ohhwells/bridge 0.1.39-next.72 → 0.1.39-next.75

package/dist/index.js

@@ -8095,6 +8095,7 @@ function OhhwellsBridge() {
   const [mediaHover, setMediaHover] = useState7(null);
   const [carouselHover, setCarouselHover] = useState7(null);
   const [uploadingRects, setUploadingRects] = useState7({});
+  const pendingUploadRectRef = useRef5(null);
   const hoveredGapRef = useRef5(null);
   const imageUnhoverTimerRef = useRef5(null);
   const imageShowTimerRef = useRef5(null);
@@ -9146,7 +9147,15 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
+          const key = editable.dataset.ohwKey ?? "";
+          const r2 = editable.getBoundingClientRect();
+          if (key && r2.width > 1 && r2.height > 1) {
+            pendingUploadRectRef.current = {
+              key,
+              rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
+            };
+          }
+          postToParentRef.current({ type: "ow:image-pick", key, elementType: editable.dataset.ohwEditable ?? "image" });
           return;
         }
         const hrefCtx = getHrefKeyFromElement(editable);
@@ -9816,6 +9825,7 @@ function OhhwellsBridge() {
           if (!entry || entry.fadingOut) return prev;
           return { ...prev, [key]: { ...entry, fadingOut: true } };
         });
+        if (pendingUploadRectRef.current?.key === key) pendingUploadRectRef.current = null;
       };
       let found = false;
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -10181,23 +10191,43 @@ function OhhwellsBridge() {
       activeStateElRef.current = null;
       setToggleState(null);
     };
+    const resolveUploadRects = (key) => {
+      const matches = Array.from(document.querySelectorAll(`[data-ohw-key="${key}"]`));
+      const rects = matches.map((el) => {
+        const r2 = el.getBoundingClientRect();
+        return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+      }).filter((r2) => r2.width > 1 && r2.height > 1);
+      if (rects.length > 0) return rects;
+      const pending = pendingUploadRectRef.current;
+      if (pending?.key === key && pending.rect.width > 1 && pending.rect.height > 1) {
+        return [pending.rect];
+      }
+      const hovered = hoveredImageRef.current;
+      if (hovered?.dataset.ohwKey === key) {
+        const r2 = hovered.getBoundingClientRect();
+        if (r2.width > 1 && r2.height > 1) {
+          return [{ top: r2.top, left: r2.left, width: r2.width, height: r2.height }];
+        }
+      }
+      return [];
+    };
     const handleImageUploading = (e) => {
-      if (e.data?.type !== "ow:image-uploading") return;
-      const { key, uploading } = e.data;
+      const type = e.data?.type;
+      if (type !== "ow:image-uploading" && type !== "ow:anim-lock") return;
+      const key = e.data.key;
+      if (!key) return;
+      const uploading = type === "ow:anim-lock" ? true : !!e.data.uploading;
       setUploadingRects((prev) => {
         if (!uploading) {
+          if (pendingUploadRectRef.current?.key === key) pendingUploadRectRef.current = null;
           if (!(key in prev)) return prev;
           const next = { ...prev };
           delete next[key];
           return next;
         }
-        const el = document.querySelector(`[data-ohw-key="${key}"]`);
-        if (!el) return prev;
-        const r2 = getVisibleRect(el);
-        return {
-          ...prev,
-          [key]: { rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } }
-        };
+        const rects = resolveUploadRects(key);
+        if (rects.length === 0) return prev;
+        return { ...prev, [key]: { rects } };
       });
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const track = el.closest("[data-ohw-hover-pause]");
@@ -10743,9 +10773,12 @@ function OhhwellsBridge() {
   );
   const handleMediaReplace = useCallback4(
     (key) => {
+      if (mediaHover?.key === key) {
+        pendingUploadRectRef.current = { key, rect: mediaHover.rect };
+      }
       postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
     },
-    [postToParent2, mediaHover?.elementType]
+    [postToParent2, mediaHover]
   );
   const handleEditCarousel = useCallback4(
     (key) => {
@@ -10789,17 +10822,19 @@ function OhhwellsBridge() {
   return bridgeRoot ? createPortal2(
     /* @__PURE__ */ jsxs14(Fragment5, { children: [
       /* @__PURE__ */ jsx25("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx25(
-        MediaOverlay,
-        {
-          hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
-          isUploading: true,
-          fadingOut,
-          onFadeOutComplete: handleMediaFadeOutComplete,
-          onReplace: handleMediaReplace
-        },
-        `uploading-${key}`
-      )),
+      Object.entries(uploadingRects).flatMap(
+        ([key, { rects, fadingOut }]) => rects.map((rect, i) => /* @__PURE__ */ jsx25(
+          MediaOverlay,
+          {
+            hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
+            isUploading: true,
+            fadingOut,
+            onFadeOutComplete: handleMediaFadeOutComplete,
+            onReplace: handleMediaReplace
+          },
+          `uploading-${key}-${i}`
+        ))
+      ),
       mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ jsx25(
         MediaOverlay,
         {