@ohhwells/bridge 0.1.38-next.59 → 0.1.38-next.60

package/dist/index.cjs

@@ -5804,12 +5804,15 @@ function SectionPickerOverlay({
   );
   sectionIdsRef.current = sectionIds;
   const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
-  const applyHoverAt = (0, import_react5.useCallback)((x, y, liveRects) => {
-    const ids = sectionIdsRef.current;
-    const map = liveRects ?? readSectionRects(ids);
-    const next = hitTestSectionId(x, y, ids, map);
-    setHoveredId((prev) => prev === next ? prev : next);
-  }, []);
+  const applyHoverAt = (0, import_react5.useCallback)(
+    (x, y, liveRects) => {
+      const ids = sectionIdsRef.current;
+      const map = liveRects ?? readSectionRects(ids);
+      const next = hitTestSectionId(x, y, ids, map);
+      setHoveredId((prev) => prev === next ? prev : next);
+    },
+    []
+  );
   (0, import_react5.useEffect)(() => {
     const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
       const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
@@ -5960,8 +5963,9 @@ function SectionPickerOverlay({
             const rect = rects.get(section.id);
             if (!rect || rect.width <= 0 || rect.height <= 0) return null;
             const isSelected = selectedId === section.id;
-            const isLit = isSelected || hoveredId === section.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            const isHovered = hoveredId === section.id;
+            const isLit = isSelected || isHovered;
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
               "button",
               {
                 type: "button",
@@ -5975,15 +5979,30 @@ function SectionPickerOverlay({
                 },
                 "aria-label": `Select section ${section.label}`,
                 onClick: () => handleSelect(section),
-                children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  "span",
-                  {
-                    className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
-                    style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
-                    "aria-hidden": true,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Check, { className: "size-5" })
-                  }
-                ) : null
+                children: [
+                  isLit ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute",
+                      style: {
+                        inset: 4,
+                        borderRadius: "var(--radius, 6px)",
+                        border: "1.5px dashed var(--primary, #0885FE)",
+                        boxSizing: "border-box"
+                      },
+                      "aria-hidden": true
+                    }
+                  ) : null,
+                  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "span",
+                    {
+                      className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
+                      style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
+                      "aria-hidden": true,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.Check, { className: "size-5" })
+                    }
+                  ) : null
+                ]
               },
               section.id
             );
@@ -6192,7 +6211,7 @@ function LinkPopover({
   (0, import_react7.useEffect)(() => {
     if (!open) return;
     if (sectionPickerActive) {
-      postToParent({ type: "ow:link-modal-lock", locked: false });
+      postToParent({ type: "ui:unlock" });
       postToParent({ type: "ow:section-picker", active: true });
       document.documentElement.style.overflow = "";
       document.body.style.overflow = "";
@@ -6201,7 +6220,7 @@ function LinkPopover({
       };
     }
     postToParent({ type: "ow:section-picker", active: false });
-    postToParent({ type: "ow:link-modal-lock", locked: true });
+    postToParent({ type: "ui:lock" });
     const html = document.documentElement;
     const body = document.body;
     const prevHtmlOverflow = html.style.overflow;
@@ -6239,7 +6258,7 @@ function LinkPopover({
     document.addEventListener("wheel", preventBackgroundScroll, scrollOpts);
     document.addEventListener("touchmove", preventBackgroundScroll, scrollOpts);
     return () => {
-      postToParent({ type: "ow:link-modal-lock", locked: false });
+      postToParent({ type: "ui:unlock" });
       html.style.overflow = prevHtmlOverflow;
       body.style.overflow = prevBodyOverflow;
       html.style.overscrollBehavior = prevHtmlOverscroll;
@@ -9145,6 +9164,13 @@ function OhhwellsBridge() {
       deactivateRef.current();
     };
     window.addEventListener("message", handleDeactivate);
+    const handleUiEscape = (e) => {
+      if (e.data?.type !== "ui:escape") return;
+      if (linkPopoverOpenRef.current) {
+        setLinkPopoverRef.current(null);
+      }
+    };
+    window.addEventListener("message", handleUiEscape);
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && document.querySelector("[data-ohw-section-picker]")) return;
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
@@ -9577,6 +9603,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleClickAt);
       window.removeEventListener("message", handleHydrate);
       window.removeEventListener("message", handleDeactivate);
+      window.removeEventListener("message", handleUiEscape);
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);