@ohhwells/bridge 0.1.42-next.89 → 0.1.42-next.91

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);
                 },
@@ -8142,6 +8160,11 @@ function getNavigationItemAnchor(el) {
 function isNavigationItem(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function listNavigationItems() {
+  return Array.from(
+    document.querySelectorAll("nav [data-ohw-href-key], footer [data-ohw-href-key]")
+  ).filter((el) => isNavigationItem(el));
+}
 function getNavigationItemReorderState(anchor) {
   if (isNavbarButton2(anchor)) return { key: null, disabled: false };
   return getReorderHandleStateFromAnchor(anchor);
@@ -8277,6 +8300,18 @@ function getNavigationSelectionParent(el) {
   }
   return null;
 }
+function collectNavigationItemSiblingHintRects(selected) {
+  if (!isNavigationItem(selected)) return [];
+  const footerColumn = getFooterColumn(selected);
+  if (footerColumn) {
+    return listFooterLinksInColumn(footerColumn).filter((link) => link !== selected).map((link) => link.getBoundingClientRect());
+  }
+  const navContainer = selected.closest("[data-ohw-nav-container], [data-ohw-nav-drawer]");
+  if (navContainer) {
+    return Array.from(navContainer.querySelectorAll("[data-ohw-href-key]")).filter((el) => isNavigationItem(el) && el !== selected).map((el) => el.getBoundingClientRect());
+  }
+  return listNavigationItems().filter((el) => el !== selected).map((el) => el.getBoundingClientRect());
+}
 function placeCaretAtPoint(el, x, y) {
   const selection = window.getSelection();
   if (!selection) return;
@@ -8476,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)(
@@ -8507,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": "",
@@ -9162,6 +9198,7 @@ function OhhwellsBridge() {
       setIsFooterFrameSelection(false);
       setToolbarVariant("link-action");
       setToolbarRect(link.getBoundingClientRect());
+      setSiblingHintRects(collectNavigationItemSiblingHintRects(link));
       return;
     }
     const colAttr = selectedFooterColAttrRef.current;
@@ -9188,6 +9225,7 @@ function OhhwellsBridge() {
     setReorderDragDisabled(disabled);
     setToolbarVariant("link-action");
     setToolbarRect(navAnchor.getBoundingClientRect());
+    setSiblingHintRects(collectNavigationItemSiblingHintRects(navAnchor));
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [markSelected]);
@@ -9553,7 +9591,7 @@ function OhhwellsBridge() {
     hoveredItemElRef.current = null;
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
-    setSiblingHintRects([]);
+    setSiblingHintRects(collectNavigationItemSiblingHintRects(anchor));
     setIsItemDragging(false);
     const { key, disabled } = getNavigationItemReorderState(anchor);
     setReorderHrefKey(key);
@@ -10225,7 +10263,7 @@ function OhhwellsBridge() {
         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());
@@ -10429,7 +10467,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());
@@ -11122,10 +11160,14 @@ function OhhwellsBridge() {
         setSiblingHintRect(siblingHintElRef.current.getBoundingClientRect());
       }
       const selected = selectedElRef.current;
-      if (selected && !footerDragRef.current && (selected.hasAttribute("data-ohw-footer-col") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected)))) {
-        setSiblingHintRects(
-          listFooterColumns().filter((column) => column !== selected).map((column) => column.getBoundingClientRect())
-        );
+      if (selected && !footerDragRef.current && !navDragRef.current) {
+        if (selected.hasAttribute("data-ohw-footer-col") || Boolean(selected.closest("footer") && isInferredFooterGroup(selected))) {
+          setSiblingHintRects(
+            listFooterColumns().filter((column) => column !== selected).map((column) => column.getBoundingClientRect())
+          );
+        } else if (isNavigationItem(selected)) {
+          setSiblingHintRects(collectNavigationItemSiblingHintRects(selected));
+        }
       }
       if (footerDragRef.current) {
         const session = footerDragRef.current;
@@ -11868,7 +11910,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,
         {
@@ -11882,6 +11923,7 @@ function OhhwellsBridge() {
           onDragHandleDragEnd: handleItemDragEnd,
           onItemPointerDown: handleItemChromePointerDown,
           onItemClick: handleItemChromeClick,
+          itemDragSurface: !isFooterFrameSelection,
           toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             ItemActionToolbar,
             {
@@ -11895,6 +11937,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,
@@ -11902,7 +11945,8 @@ function OhhwellsBridge() {
             rect: toolbarRect,
             elRef: glowElRef,
             reorderHrefKey,
-            dragDisabled: reorderDragDisabled
+            dragDisabled: reorderDragDisabled,
+            hideHandle: isItemDragging
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(