@proveanything/smartlinks-utils-ui 0.12.15 → 0.12.16

package/dist/components/RecordsAdmin/index.d.ts

@@ -1908,8 +1908,10 @@ interface Props$9 {
     children: ReactNode;
     /** Which edge of the anchor the pill should hug. Defaults to `right`. */
     side?: 'left' | 'right';
+    /** Which vertical position of the anchor the pill should hug. Defaults to `center`. */
+    vAlign?: 'top' | 'center' | 'bottom';
 }
-declare function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children, side, }: Props$9): React$1.ReactPortal | null;
+declare function PreviewReopenPill({ anchorRef, onClick, ariaLabel, title, children, side, vAlign, }: Props$9): React$1.ReactPortal | null;
 
 declare const ScopeBreadcrumb: ({ scope }: {
     scope: ParsedRef;

package/dist/components/RecordsAdmin/index.js

@@ -8831,15 +8831,18 @@ function PreviewReopenPill({
   ariaLabel,
   title,
   children,
-  side = "right"
+  side = "right",
+  vAlign = "center"
 }) {
   const [pos, setPos] = useState(null);
   const rafRef = useRef(null);
   useLayoutEffect(() => {
     const el = anchorRef.current;
     if (typeof window === "undefined") return;
+    const TOP_INSET = 14;
+    const fallbackTop = () => vAlign === "top" ? TOP_INSET : vAlign === "bottom" ? Math.max(0, window.innerHeight - TOP_INSET) : window.innerHeight / 2;
     if (!el) {
-      setPos({ top: window.innerHeight / 2, right: 8, left: 8 });
+      setPos({ top: fallbackTop(), right: 8, left: 8 });
       return;
     }
     const measure = () => {
@@ -8847,11 +8850,11 @@ function PreviewReopenPill({
       rafRef.current = requestAnimationFrame(() => {
         const rect = el.getBoundingClientRect();
         if (rect.width === 0 && rect.height === 0) {
-          setPos({ top: window.innerHeight / 2, right: 8, left: 8 });
           return;
         }
+        const top = vAlign === "top" ? rect.top + TOP_INSET : vAlign === "bottom" ? rect.bottom - TOP_INSET : rect.top + rect.height / 2;
         setPos({
-          top: rect.top + rect.height / 2,
+          top,
           right: Math.max(0, window.innerWidth - rect.right),
           left: Math.max(0, rect.left)
         });
@@ -8869,13 +8872,14 @@ function PreviewReopenPill({
       window.removeEventListener("scroll", measure, true);
       if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
     };
-  }, [anchorRef]);
+  }, [anchorRef, vAlign]);
   if (typeof document === "undefined") return null;
   const effectivePos = pos ?? {
-    top: typeof window !== "undefined" ? window.innerHeight / 2 : 200,
+    top: typeof window !== "undefined" ? vAlign === "top" ? 14 : vAlign === "bottom" ? window.innerHeight - 14 : window.innerHeight / 2 : 200,
     right: 8,
     left: 8
   };
+  const translateY = vAlign === "center" ? "-50%" : "0";
   return createPortal(
     /* @__PURE__ */ jsx(
       "button",
@@ -8891,7 +8895,7 @@ function PreviewReopenPill({
           ...side === "right" ? { right: effectivePos.right } : { left: effectivePos.left },
           // Pull half the pill width out into the gutter so it visually
           // anchors *to* the editor edge rather than sitting inside it.
-          transform: side === "right" ? "translate(50%, -50%)" : "translate(-50%, -50%)"
+          transform: side === "right" ? `translate(50%, ${translateY})` : `translate(-50%, ${translateY})`
         },
         children
       }
@@ -11415,6 +11419,7 @@ function RecordsAdminShellInner(props) {
                   {
                     anchorRef: railReopenAnchorRef,
                     side: "left",
+                    vAlign: "top",
                     onClick: () => setRailOpen(true),
                     ariaLabel: i18n.openList,
                     title: i18n.openList,