@ohhwells/bridge 0.1.113-next.292 → 0.1.113-next.293

package/dist/index.cjs

@@ -722,8 +722,8 @@ function applyStylesToDom(store) {
         if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
         section.setAttribute(attr, String(value).replace(":", "-"));
       }
-      const bgOverride = isDrawerMarker ? override.navbarMobileBackground ?? override.sectionBackgroundColor : override.sectionBackgroundColor;
-      const textOverride = isDrawerMarker ? override.navbarMobileTextColor ?? override.textColor : override.textColor;
+      const bgOverride = isDrawerMarker ? override.navbarMobileBackground : override.sectionBackgroundColor;
+      const textOverride = isDrawerMarker ? override.navbarMobileTextColor : override.textColor;
       const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
       const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
       if (bgValue !== void 0) {
@@ -9284,6 +9284,57 @@ function useLiveSectionRect(sectionId) {
   }, [sectionId]);
   return rect;
 }
+var NAV_TOGGLE_LABEL_RE = /^(toggle menu|open menu|close menu)$/i;
+function readNavToggleRect() {
+  const el = Array.from(document.querySelectorAll("button[aria-label]")).find(
+    (e) => NAV_TOGGLE_LABEL_RE.test(e.getAttribute("aria-label") ?? "")
+  );
+  if (!el) return null;
+  const r2 = el.getBoundingClientRect();
+  if (r2.width <= 0 || r2.height <= 0) return null;
+  return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+}
+function useLiveNavToggleHole(active) {
+  const [rect, setRect] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!active) {
+      setRect(null);
+      return;
+    }
+    const update = () => {
+      const next = readNavToggleRect();
+      setRect(
+        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+      );
+    };
+    update();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update);
+    const interval = setInterval(update, 500);
+    return () => {
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
+      clearInterval(interval);
+    };
+  }, [active]);
+  return rect;
+}
+function subtractRect(outer, hole) {
+  if (!hole) return [outer];
+  const l = Math.max(outer.left, hole.left);
+  const t = Math.max(outer.top, hole.top);
+  const r2 = Math.min(outer.left + outer.width, hole.left + hole.width);
+  const b = Math.min(outer.top + outer.height, hole.top + hole.height);
+  if (l >= r2 || t >= b) return [outer];
+  const rects = [];
+  if (t > outer.top) rects.push({ left: outer.left, top: outer.top, width: outer.width, height: t - outer.top });
+  const midHeight = b - t;
+  if (l > outer.left) rects.push({ left: outer.left, top: t, width: l - outer.left, height: midHeight });
+  if (r2 < outer.left + outer.width) rects.push({ left: r2, top: t, width: outer.left + outer.width - r2, height: midHeight });
+  if (b < outer.top + outer.height) rects.push({ left: outer.left, top: b, width: outer.width, height: outer.top + outer.height - b });
+  return rects;
+}
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
   const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
@@ -9499,6 +9550,7 @@ function AiSectionOverlay({
   const activeSelectionId = reviewId ? null : selectedId;
   const selectionRect = useLiveSectionRect(activeSelectionId);
   const reviewRect = useLiveSectionRect(reviewId);
+  const navToggleHole = useLiveNavToggleHole(Boolean(reviewId));
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
   const showSelectionBorder = Boolean(selectionRect) && !navDropdownForceOpen;
   (0, import_react8.useEffect)(() => {
@@ -9558,48 +9610,65 @@ function AiSectionOverlay({
         }
       }
     ),
-    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "div",
-      {
-        "data-ohw-ai-review": "",
-        style: {
-          position: "fixed",
-          top: reviewRect.top,
-          left: reviewRect.left,
-          width: reviewRect.width,
-          height: reviewRect.height,
-          border: `2px solid ${PRIMARY2}`,
-          borderRadius: edgeAwareRadius(reviewRect),
-          zIndex: 2147483200,
-          // The veil itself: swallows clicks so the section stays locked until decided. This
-          // stopPropagation only guards the bubble phase; the bridge's capture-phase click
-          // handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
-          // Accept/Discard resolves to the media beneath and opens the file picker.
-          background: "rgba(8, 133, 254, 0.04)",
-          pointerEvents: "auto",
-          cursor: "default"
+    reviewRect && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      subtractRect(reviewRect, navToggleHole).map((r2, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          "data-ohw-ai-review": "",
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: r2.top,
+            left: r2.left,
+            width: r2.width,
+            height: r2.height,
+            background: "rgba(8, 133, 254, 0.04)",
+            pointerEvents: "auto",
+            cursor: "default",
+            zIndex: 2147483200
+          },
+          onClick: (e) => e.stopPropagation()
         },
-        onClick: (e) => e.stopPropagation(),
-        children: !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-          "div",
-          {
-            style: {
-              position: "sticky",
-              top: 12,
-              display: "flex",
-              gap: 8,
-              justifyContent: "flex-end",
-              paddingRight: 12,
-              paddingTop: 12
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
-            ]
+        i
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: reviewRect.top,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            height: reviewRect.height,
+            border: `2px solid ${PRIMARY2}`,
+            borderRadius: edgeAwareRadius(reviewRect),
+            pointerEvents: "none",
+            zIndex: 2147483200
           }
-        )
-      }
-    )
+        }
+      ),
+      !reviewButtonsHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: reviewRect.top + 12,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            display: "flex",
+            gap: 8,
+            justifyContent: "flex-end",
+            paddingRight: 12,
+            zIndex: 2147483201
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
+          ]
+        }
+      )
+    ] })
   ] });
 }
 
@@ -11262,6 +11331,15 @@ function getNavbarDesktopContainer() {
 function getNavbarDrawerContainer() {
   return document.querySelector("[data-ohw-nav-drawer]");
 }
+function isNavDrawerOpen() {
+  return document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]') !== null;
+}
+function isPointOutsideOpenDrawer(clientX, clientY) {
+  const drawer = document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]');
+  if (!drawer) return false;
+  const r2 = drawer.getBoundingClientRect();
+  return clientX < r2.left || clientX > r2.right || clientY < r2.top || clientY > r2.bottom;
+}
 function isNavbarListContainerVisible(el) {
   if (el.hasAttribute("hidden")) return false;
   if (el.closest("[hidden]")) return false;
@@ -20462,6 +20540,19 @@ function OhhwellsBridge() {
     const handleMouseOver = (e) => {
       if (document.documentElement.hasAttribute("data-ohw-section-picking")) return;
       const target = e.target;
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(e.clientX, e.clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        return;
+      }
       if (linkPopoverOpenRef.current) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
@@ -21279,7 +21370,32 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY) || isOverEditorChrome(clientX, clientY)) {
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        dismissImageHover();
+        if (hoveredGapRef.current) {
+          hoveredGapRef.current = null;
+          setSectionGap(null);
+        }
+        if (activeStateElRef.current) {
+          activeStateElRef.current.removeAttribute("data-ohw-state-hovered");
+          activeStateElRef.current = null;
+          setToggleState(null);
+        }
+        return;
+      }
+      if (isOverEditorChrome(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
         setFormHoverRect(null);
@@ -21304,11 +21420,12 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
         dismissImageHover();
         clearImageHover();
         return;
       }
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);