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

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
+              ]
+            }
+          )
+        ]
       }
     )
   ] });
@@ -15556,7 +15615,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"
             }