@ohhwells/bridge 0.1.42-next.90 → 0.1.42-next.92

package/dist/index.cjs

@@ -4360,6 +4360,12 @@ function Tooltip({ ...props }) {
 function TooltipTrigger({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
+var arrowClassBySide = {
+  top: "before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:translate-y-1/2",
+  bottom: "before:top-0 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2",
+  left: "before:right-0 before:top-1/2 before:-translate-y-1/2 before:translate-x-1/2",
+  right: "before:left-0 before:top-1/2 before:-translate-y-1/2 before:-translate-x-1/2"
+};
 function TooltipContent({
   className,
   sideOffset = 3,
@@ -4368,25 +4374,25 @@ function TooltipContent({
   hideArrow,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const resolvedSide = side ?? "bottom";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_radix_ui3.Tooltip.Content,
     {
       "data-slot": "tooltip-content",
       side,
       sideOffset,
       className: cn(
-        "z-[2147483647] inline-flex w-fit max-w-xs items-center rounded-md bg-foreground px-3 py-1.5 text-xs text-background",
+        "relative z-[2147483647] inline-flex w-fit max-w-xs items-center rounded-md bg-foreground px-3 py-1.5 text-xs text-background",
         "origin-[var(--radix-tooltip-content-transform-origin)] animate-in fade-in-0 zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
         "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        !hideArrow && 'before:pointer-events-none before:absolute before:size-2 before:rotate-45 before:bg-foreground before:content-[""]',
+        !hideArrow && arrowClassBySide[resolvedSide],
         className
       ),
       ...props,
-      children: [
-        children,
-        !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_radix_ui3.Tooltip.Arrow, { className: "z-[2147483647] size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
-      ]
+      children
     }
   ) });
 }
@@ -4577,6 +4583,7 @@ function ItemInteractionLayer({
   onDragHandleDragEnd,
   onItemPointerDown,
   onItemClick,
+  itemDragSurface = true,
   chromeGap = SELECTION_CHROME_GAP,
   className
 }) {
@@ -4585,7 +4592,7 @@ function ItemInteractionLayer({
   const isDragging = state === "dragging";
   const showToolbar = isActive && toolbar;
   const showDragHandle = (isActive || isDragging) && showHandle;
-  const itemDragEnabled = isActive && showHandle && !isDragging && !dragDisabled;
+  const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -4631,7 +4638,8 @@ function ItemInteractionLayer({
           {
             "data-ohw-drag-handle-container": "",
             className: "pointer-events-auto absolute left-0 top-1/2 z-10 -translate-x-[calc(100%+7px)] -translate-y-1/2",
-            style: isDragging ? { visibility: "hidden" } : void 0,
+            style: isDragging ? { opacity: 0 } : void 0,
+            "aria-hidden": isDragging || void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               DragHandle,
               {
@@ -4643,7 +4651,17 @@ function ItemInteractionLayer({
                     e.preventDefault();
                     return;
                   }
-                  e.dataTransfer?.setData("text/plain", dragHandleLabel);
+                  const blank = document.createElement("canvas");
+                  blank.width = 1;
+                  blank.height = 1;
+                  blank.style.cssText = "position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;pointer-events:none";
+                  document.body.appendChild(blank);
+                  try {
+                    e.dataTransfer.setDragImage(blank, 0, 0);
+                  } finally {
+                    requestAnimationFrame(() => blank.remove());
+                  }
+                  e.dataTransfer.setData("text/plain", dragHandleLabel);
                   e.dataTransfer.effectAllowed = "move";
                   onDragHandleDragStart?.(e);
                 },
@@ -8493,7 +8511,8 @@ function EditGlowChrome({
   rect,
   elRef,
   reorderHrefKey,
-  dragDisabled = false
+  dragDisabled = false,
+  hideHandle = false
 }) {
   const GAP = SELECTION_CHROME_GAP2;
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -8524,7 +8543,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -9973,6 +9992,21 @@ function OhhwellsBridge() {
         outline: none !important;
         outline-offset: 0 !important;
       }
+      /* Editor chrome owns selection \u2014 suppress native focus rings on nav/footer items. */
+      nav [data-ohw-href-key]:focus,
+      nav [data-ohw-href-key]:focus-visible,
+      nav [data-ohw-href-key]:focus-within,
+      footer [data-ohw-href-key]:focus,
+      footer [data-ohw-href-key]:focus-visible,
+      footer [data-ohw-href-key]:focus-within,
+      nav [data-ohw-href-key] [data-ohw-editable]:focus,
+      nav [data-ohw-href-key] [data-ohw-editable]:focus-visible,
+      footer [data-ohw-href-key] [data-ohw-editable]:focus,
+      footer [data-ohw-href-key] [data-ohw-editable]:focus-visible {
+        outline: none !important;
+        outline-offset: 0 !important;
+        box-shadow: none !important;
+      }
       /* Text edit wins over grab/default (must beat [data-ohw-can-drag] *). */
       [data-ohw-editing],
       [data-ohw-editing] *,
@@ -10225,8 +10259,7 @@ function OhhwellsBridge() {
         setHoveredNavContainerRect(null);
         return;
       }
-      const itemSelected = toolbarVariantRef.current === "link-action" && Boolean(selectedElRef.current && isNavigationItem(selectedElRef.current));
-      if (toolbarVariantRef.current !== "select-frame" && !itemSelected) {
+      if (toolbarVariantRef.current !== "select-frame") {
         const navContainer = target.closest("[data-ohw-nav-container]");
         if (navContainer && !getNavigationItemAnchor(target)) {
           hoveredNavContainerRef.current = navContainer;
@@ -10239,16 +10272,13 @@ function OhhwellsBridge() {
           hoveredNavContainerRef.current = null;
           setHoveredNavContainerRect(null);
         }
-      } else if (itemSelected) {
-        hoveredNavContainerRef.current = null;
-        setHoveredNavContainerRect(null);
       }
       const navAnchor = getNavigationItemAnchor(target);
       if (navAnchor) {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
         const selected2 = selectedElRef.current;
-        if (selected2 === navAnchor || selected2?.contains(navAnchor)) return;
+        if (selected2 === navAnchor) return;
         clearHrefKeyHover(navAnchor);
         hoveredItemElRef.current = navAnchor;
         setHoveredItemRect(navAnchor.getBoundingClientRect());
@@ -10258,7 +10288,7 @@ function OhhwellsBridge() {
       if (footerCol) {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        if (itemSelected || selectedElRef.current === footerCol) return;
+        if (selectedElRef.current === footerCol) return;
         hoveredItemElRef.current = footerCol;
         setHoveredItemRect(footerCol.getBoundingClientRect());
         return;
@@ -10429,8 +10459,7 @@ function OhhwellsBridge() {
       }
     };
     const probeNavigationHoverAt = (x, y) => {
-      const itemSelected = toolbarVariantRef.current === "link-action" && Boolean(selectedElRef.current && isNavigationItem(selectedElRef.current));
-      if (toolbarVariantRef.current === "select-frame" || itemSelected) {
+      if (toolbarVariantRef.current === "select-frame") {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
       }
@@ -10453,7 +10482,7 @@ function OhhwellsBridge() {
           hoveredNavContainerRef.current = null;
           setHoveredNavContainerRect(null);
           const selected = selectedElRef.current;
-          if (selected !== navItemHit && !selected?.contains(navItemHit)) {
+          if (selected !== navItemHit) {
             clearHrefKeyHover(navItemHit);
             hoveredItemElRef.current = navItemHit;
             setHoveredItemRect(navItemHit.getBoundingClientRect());
@@ -10464,7 +10493,7 @@ function OhhwellsBridge() {
           return;
         }
       }
-      if (toolbarVariantRef.current !== "select-frame" && !itemSelected) {
+      if (toolbarVariantRef.current !== "select-frame") {
         for (const container of navContainers) {
           const containerRect = container.getBoundingClientRect();
           const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
@@ -10482,23 +10511,21 @@ function OhhwellsBridge() {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
       }
-      if (!itemSelected) {
-        for (const column of footerColumns) {
-          const containerRect = column.getBoundingClientRect();
-          const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
-          if (!overContainer) continue;
-          if (isPointOverNavItem(column, x, y)) continue;
-          if (selectedElRef.current === column) {
-            if (hoveredItemElRef.current === column) {
-              hoveredItemElRef.current = null;
-              setHoveredItemRect(null);
-            }
-            return;
+      for (const column of footerColumns) {
+        const containerRect = column.getBoundingClientRect();
+        const overContainer = x >= containerRect.left && x <= containerRect.right && y >= containerRect.top && y <= containerRect.bottom;
+        if (!overContainer) continue;
+        if (isPointOverNavItem(column, x, y)) continue;
+        if (selectedElRef.current === column) {
+          if (hoveredItemElRef.current === column) {
+            hoveredItemElRef.current = null;
+            setHoveredItemRect(null);
           }
-          hoveredItemElRef.current = column;
-          setHoveredItemRect(column.getBoundingClientRect());
           return;
         }
+        hoveredItemElRef.current = column;
+        setHoveredItemRect(column.getBoundingClientRect());
+        return;
       }
       if (hoveredItemElRef.current?.hasAttribute("data-ohw-footer-col") || hoveredItemElRef.current?.hasAttribute("data-ohw-footer-column")) {
         hoveredItemElRef.current = null;
@@ -11898,7 +11925,6 @@ function OhhwellsBridge() {
       )),
       hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
       toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         ItemInteractionLayer,
         {
@@ -11912,6 +11938,7 @@ function OhhwellsBridge() {
           onDragHandleDragEnd: handleItemDragEnd,
           onItemPointerDown: handleItemChromePointerDown,
           onItemClick: handleItemChromeClick,
+          itemDragSurface: !isFooterFrameSelection,
           toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             ItemActionToolbar,
             {
@@ -11925,6 +11952,7 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
+      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
       toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           EditGlowChrome,
@@ -11932,7 +11960,8 @@ function OhhwellsBridge() {
             rect: toolbarRect,
             elRef: glowElRef,
             reorderHrefKey,
-            dragDisabled: reorderDragDisabled
+            dragDisabled: reorderDragDisabled,
+            hideHandle: isItemDragging
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(