@ohhwells/bridge 0.1.71-next.216 → 0.1.71-next.218

package/dist/index.cjs

@@ -6791,6 +6791,7 @@ function ItemActionToolbar({
 var import_react7 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var PRIMARY = "var(--ohw-primary, #0885FE)";
+var CHROME_RADIUS = 6;
 var FOCUS_RING = `0 0 0 4px color-mix(in srgb, ${PRIMARY} 12%, transparent)`;
 var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)";
 var TOOLBAR_EDGE_MARGIN = 4;
@@ -6985,15 +6986,16 @@ function ItemInteractionLayer({
           "div",
           {
             "aria-hidden": true,
-            className: "absolute inset-0 rounded-lg",
-            style: getChromeStyle(state)
+            className: "absolute inset-0",
+            style: { ...getChromeStyle(state), borderRadius: CHROME_RADIUS }
           }
         ),
         itemDragEnabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
             "data-ohw-item-drag-surface": "",
-            className: "pointer-events-auto absolute inset-0 cursor-text rounded-lg",
+            className: "pointer-events-auto absolute inset-0 cursor-text",
+            style: { borderRadius: CHROME_RADIUS },
             onPointerDown: (e) => {
               if (e.button !== 0) return;
               onItemPointerDown?.(e);
@@ -7745,6 +7747,15 @@ var SKELETON_CSS = `
   animation: ohw-media-shimmer 1.4s infinite;
 }
 `;
+var REPLACE_BUTTON_INSET = 12;
+function replaceButtonMode(image, button) {
+  if (!button.fullWidth || !button.height) return "none";
+  const room = REPLACE_BUTTON_INSET * 2;
+  if (image.height < button.height + room) return "none";
+  if (image.width >= button.fullWidth + room) return "full";
+  if (image.width >= button.height + room) return "icon";
+  return "none";
+}
 function MediaOverlay({
   hover,
   isUploading,
@@ -7762,6 +7773,19 @@ function MediaOverlay({
   const showChrome = !selected || hovered;
   const autoplay = hover.videoAutoplay ?? true;
   const muted = hover.videoMuted ?? true;
+  const probeRef = React8.useRef(null);
+  const [buttonSize, setButtonSize] = React8.useState(null);
+  React8.useLayoutEffect(() => {
+    const probe = probeRef.current;
+    if (!probe) return;
+    const { width, height } = probe.getBoundingClientRect();
+    if (!width || !height) return;
+    setButtonSize(
+      (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
+    );
+  }, [isVideo]);
+  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
+  const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
     top: rect.top,
@@ -7851,7 +7875,7 @@ function MediaOverlay({
   ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
     settingsBar,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         "data-ohw-bridge": "",
@@ -7870,29 +7894,64 @@ function MediaOverlay({
           background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
         },
         onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
-        children: showChrome && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          Button,
-          {
-            "data-ohw-media-overlay": "",
-            variant: "outline",
-            size: "sm",
-            className: "gap-1.5 cursor-pointer hover:bg-background",
-            style: {
-              ...OVERLAY_BUTTON_STYLE,
-              // Don't let Replace steal clicks when text (e.g. nav) sits on top of this media.
-              pointerEvents: hover.hasTextOverlap ? "none" : "auto"
-            },
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: (e) => {
-              e.stopPropagation();
-              onReplace(hover.key);
-            },
-            children: [
-              isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-              isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image"
-            ]
-          }
-        )
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            Button,
+            {
+              ref: probeRef,
+              "aria-hidden": true,
+              tabIndex: -1,
+              variant: "outline",
+              size: "sm",
+              className: "gap-1.5",
+              style: {
+                ...OVERLAY_BUTTON_STYLE,
+                position: "fixed",
+                top: 0,
+                left: 0,
+                visibility: "hidden",
+                pointerEvents: "none"
+              },
+              children: [
+                isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
+                replaceLabel
+              ]
+            }
+          ),
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            Button,
+            {
+              "data-ohw-media-overlay": "",
+              variant: "outline",
+              size: "sm",
+              "aria-label": replaceLabel,
+              className: "gap-1.5 cursor-pointer hover:bg-background",
+              style: {
+                ...OVERLAY_BUTTON_STYLE,
+                // Icon-only is a square of the same height, so the pair can never differ vertically.
+                // `minWidth` has to go too: the button's own size carries `min-w-[64px]`, and a
+                // minimum beats a width — the square came out wider than the avatar it sat on.
+                ...replaceMode === "icon" && buttonSize ? {
+                  width: buttonSize.height,
+                  minWidth: buttonSize.height,
+                  padding: 0,
+                  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"
+              },
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: (e) => {
+                e.stopPropagation();
+                onReplace(hover.key);
+              },
+              children: [
+                isVideo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
+                replaceMode === "full" ? replaceLabel : null
+              ]
+            }
+          )
+        ]
       }
     )
   ] });
@@ -14882,9 +14941,21 @@ function getLinkHref4(el) {
   const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
   return anchor?.getAttribute("href") ?? "";
 }
+function normalizeLinkHref(value) {
+  const href = value.trim();
+  if (!href) return href;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return href;
+  if (href.startsWith("/") || href.startsWith("#") || href.startsWith("?")) return href;
+  if (!/^[^\s/]+\.[a-z]{2,}(?:[/:?#]|$)/i.test(href)) return href;
+  return `https://${href}`;
+}
+function isPageFrameSection(el) {
+  const id = el.dataset.ohwSection ?? "";
+  return el.tagName === "FOOTER" || el.tagName === "HEADER" || Boolean(el.closest("footer")) || /(^|[-_])(footer|navbar)$/i.test(id);
+}
 function applyLinkHref(el, val) {
   const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
-  if (anchor) anchor.setAttribute("href", val);
+  if (anchor) anchor.setAttribute("href", normalizeLinkHref(val));
 }
 function currentIconRef(el) {
   const uploaded = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -15014,7 +15085,7 @@ function applyLinkByKey(key, val) {
   });
   const hrefAnchors = document.querySelectorAll(`[data-ohw-href-key="${key}"]`);
   if (hrefAnchors.length > 0) {
-    setStoredLinkHref(key, val);
+    setStoredLinkHref(key, normalizeLinkHref(val));
     hrefAnchors.forEach((el) => applyLinkHref(el, val));
   }
 }
@@ -15556,7 +15627,8 @@ function EditGlowChrome({
               position: "absolute",
               inset: 0,
               border: "2px solid var(--ohw-primary, #0885FE)",
-              borderRadius: 8,
+              // Same radius as every other interaction frame — this one was drawing 8 (OHH-701/722).
+              borderRadius: CHROME_RADIUS,
               boxShadow: "0 0 0 4px color-mix(in srgb, var(--ohw-primary, #0885FE) 12%, transparent)",
               pointerEvents: "none"
             }
@@ -16300,7 +16372,8 @@ function OhhwellsBridge() {
       const el = document.querySelector(
         '[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
       );
-      const target = el && !el.closest("[data-ohw-href-key]") ? el : null;
+      const busy = el?.querySelector('[contenteditable="true"]') ?? null;
+      const target = el && !el.closest("[data-ohw-href-key]") && !busy ? el : null;
       if (!target) {
         setHoveredTextRect(null);
         return;
@@ -16311,7 +16384,10 @@ function OhhwellsBridge() {
     const observer = new MutationObserver(sync);
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-ohw-hovered"],
+      // `contenteditable` too: the box is recomputed only when one of these changes, and a click
+      // that opens an element for typing changes nothing else — so the frame measured a moment
+      // earlier, while merely hovering, stayed on screen inside the solid one (OHH-762).
+      attributeFilter: ["data-ohw-hovered", "contenteditable"],
       subtree: true
     });
     return () => observer.disconnect();
@@ -16621,6 +16697,14 @@ function OhhwellsBridge() {
     el.removeAttribute("data-ohw-hovered");
     el.setAttribute("data-ohw-selected", "");
   }, [clearSelectedAttr]);
+  const isSelectedForHover = (0, import_react17.useCallback)((el) => {
+    if (!el) return false;
+    return [selectedElRef.current, activeElRef.current].some(
+      (busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
+    );
+  }, []);
+  const isSelectedForHoverRef = (0, import_react17.useRef)(isSelectedForHover);
+  isSelectedForHoverRef.current = isSelectedForHover;
   const resolveHrefKeyElement = (0, import_react17.useCallback)((hrefKey) => {
     if (isFooterHrefKey(hrefKey)) {
       return document.querySelector(
@@ -17538,6 +17622,12 @@ function OhhwellsBridge() {
   );
   const activate = (0, import_react17.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
+    document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
+      hovered.removeAttribute("data-ohw-hovered");
+    });
+    setHoveredTextRect(null);
+    hoveredItemElRef.current = null;
+    setHoveredItemRect(null);
     if (isIconEditable(el)) {
       const social = getSocialItem(el);
       const words = social ? social.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') : null;
@@ -18776,7 +18866,7 @@ function OhhwellsBridge() {
           clearHrefKeyHover(hoverTarget);
           hoveredItemElRef.current = hoverTarget;
           setHoveredItemRect(hoverTarget.getBoundingClientRect());
-        } else if (!isInsideNavigationItem(editable) && hoverTarget !== selectedElRef.current) {
+        } else if (!isInsideNavigationItem(editable) && !isSelectedForHoverRef.current(hoverTarget)) {
           hoverTarget.setAttribute("data-ohw-hovered", "");
           if (editable.closest("footer") || editable.closest('[data-ohw-section="footer"]')) {
             hoveredNavContainerRef.current = null;
@@ -19236,7 +19326,7 @@ function OhhwellsBridge() {
               showImageHover(imgEl, isDragOver, true);
             }
             document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-            if (textEditable && !textEditable.closest("[data-ohw-href-key]")) {
+            if (textEditable && !textEditable.closest("[data-ohw-href-key]") && !isSelectedForHoverRef.current(textEditable)) {
               textEditable.setAttribute("data-ohw-hovered", "");
             }
             return;
@@ -19248,7 +19338,7 @@ function OhhwellsBridge() {
             clearImageHover();
           }
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-          if (textEditable && !textEditable.closest("[data-ohw-href-key]")) {
+          if (textEditable && !textEditable.closest("[data-ohw-href-key]") && !isSelectedForHoverRef.current(textEditable)) {
             textEditable.setAttribute("data-ohw-hovered", "");
           }
           return;
@@ -19322,7 +19412,7 @@ function OhhwellsBridge() {
               hoveredItemElRef.current = navAnchor;
               setHoveredItemRect(navAnchor.getBoundingClientRect());
             }
-          } else if (!textEl.closest("[data-ohw-href-key]")) {
+          } else if (!textEl.closest("[data-ohw-href-key]") && !isSelectedForHoverRef.current(textEl)) {
             hoveredItemElRef.current = null;
             setHoveredItemRect(null);
             textEl.setAttribute("data-ohw-hovered", "");
@@ -19418,7 +19508,7 @@ function OhhwellsBridge() {
       const ZONE = 20;
       for (let i = 0; i < sections.length; i++) {
         const a = sections[i];
-        if (a.dataset.ohwSection === "footer") continue;
+        if (isPageFrameSection(a)) continue;
         const b = sections[i + 1] ?? null;
         const boundaryY = a.getBoundingClientRect().bottom;
         if (Math.abs(y - boundaryY) <= ZONE) {
@@ -19910,9 +20000,10 @@ function OhhwellsBridge() {
     const handleAiDeleteSection = (e) => {
       if (e.data?.type !== "ow:ai-delete-section") return;
       const sectionId = typeof e.data.sectionId === "string" ? e.data.sectionId : "";
-      if (!sectionId || sectionId === "navbar" || sectionId === "footer") return;
+      if (!sectionId) return;
       const exists = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
       if (!exists) return;
+      if (isPageFrameSection(exists)) return;
       clearInteractionChrome();
       const previous = aiSectionsRef.current;
       const nextState = deleteSectionFromState(parseAiSectionsState(previous), sectionId);
@@ -20653,6 +20744,15 @@ function OhhwellsBridge() {
       if (visibleViewportRef.current) {
         applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
       }
+      handleScroll();
+      document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
+        hovered.removeAttribute("data-ohw-hovered");
+      });
+      setHoveredTextRect(null);
+      hoveredItemElRef.current = null;
+      setHoveredItemRect(null);
+      hoveredNavContainerRef.current = null;
+      setHoveredNavContainerRect(null);
     };
     window.addEventListener("resize", handleViewportResize, { passive: true });
     document.addEventListener("click", handleClick, true);
@@ -20923,7 +21023,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.71",
+        bridgeVersion: "0.1.71-next.218",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections