@tensor_1/react 2.26.2 → 2.26.3

package/dist/hooks/useAnchoredPosition.js

@@ -2,43 +2,174 @@
 import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { computePosition } from "../overlay-position.js";
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
-const resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+const resolveAnchor = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+let anchoringSupported;
+function supportsAnchoring() {
+  if (anchoringSupported === void 0) {
+    try {
+      const css = typeof CSS !== "undefined" ? CSS : void 0;
+      anchoringSupported = !!css && typeof css.supports === "function" && css.supports("anchor-name", "--uix-a") && css.supports("position-anchor", "--uix-a") && css.supports("top", "round(anchor(bottom) + 1px, 1px)");
+    } catch {
+      anchoringSupported = false;
+    }
+  }
+  return anchoringSupported;
+}
+let anchorCount = 0;
+const namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
+function addAnchorName(el, name) {
+  const names = namesOf(getComputedStyle(el).getPropertyValue("anchor-name"));
+  if (!names.includes(name)) names.push(name);
+  el.style.setProperty("anchor-name", names.join(", "));
+}
+function removeAnchorName(el, name) {
+  const names = namesOf(el.style.getPropertyValue("anchor-name")).filter((n) => n !== name);
+  if (names.length) el.style.setProperty("anchor-name", names.join(", "));
+  else el.style.removeProperty("anchor-name");
+}
+function translationOf(el) {
+  const t = getComputedStyle(el).transform;
+  if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
+  try {
+    const m = new DOMMatrixReadOnly(t);
+    return { x: m.m41, y: m.m42 };
+  } catch {
+    return { x: 0, y: 0 };
+  }
+}
+const signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
+const prepared = /* @__PURE__ */ new WeakSet();
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
   const opts = useRef({ placement, offset, padding });
   opts.current = { placement, offset, padding };
+  const session = useRef(false);
+  const side = useRef(null);
+  const written = useRef("");
+  const anchoring = useRef(null);
+  const anchoringFailed = useRef(false);
+  const anchorName = useRef("");
+  const release = useCallback((keepPlace) => {
+    const current = anchoring.current;
+    if (!current) return;
+    anchoring.current = null;
+    written.current = "";
+    const floating = floatingRef.current;
+    if (floating) {
+      const s = floating.style;
+      if (keepPlace && current.anchor.isConnected) {
+        const a = current.anchor.getBoundingClientRect();
+        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
+        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+      }
+      s.removeProperty("position-anchor");
+    }
+    removeAnchorName(current.anchor, current.name);
+  }, [floatingRef]);
   const reposition = useCallback(() => {
-    const anchorEl = resolve(anchor);
+    const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
     if (!anchorEl || !floating) return;
     const s = floating.style;
-    s.position = "fixed";
-    s.inset = "auto";
-    s.margin = "0";
+    if (!prepared.has(floating)) {
+      s.position = "fixed";
+      s.inset = "auto";
+      s.margin = "0";
+      prepared.add(floating);
+      written.current = "";
+    }
     const a = anchorEl.getBoundingClientRect();
+    const size = { width: floating.offsetWidth, height: floating.offsetHeight };
     const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
-      { width: floating.offsetWidth, height: floating.offsetHeight },
+      size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad }
+      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
     );
-    s.left = `${Math.round(pos.x)}px`;
-    s.top = `${Math.round(pos.y)}px`;
-    floating.dataset.placement = pos.placement;
-  }, [anchor, floatingRef]);
+    const measured = size.width > 0 || size.height > 0;
+    if (measured && session.current) side.current = pos.side;
+    if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    const writeFixed = (at) => {
+      const left2 = `${Math.round(at.x)}px`;
+      const top2 = `${Math.round(at.y)}px`;
+      const key2 = `fixed ${left2} ${top2}`;
+      if (key2 === written.current) return;
+      s.left = left2;
+      s.top = top2;
+      written.current = key2;
+    };
+    if (anchoringFailed.current || !supportsAnchoring()) {
+      writeFixed(pos);
+      return;
+    }
+    if (anchoring.current && anchoring.current.anchor !== anchorEl) release(false);
+    if (!anchoring.current) {
+      anchorName.current || (anchorName.current = `--uix-anchor-${++anchorCount}`);
+      addAnchorName(anchorEl, anchorName.current);
+      s.setProperty("position-anchor", anchorName.current);
+      anchoring.current = { anchor: anchorEl, name: anchorName.current, yEdge: "bottom", xEdge: "left", dy: 0, dx: 0, verified: false };
+      written.current = "";
+    }
+    const current = anchoring.current;
+    current.yEdge = pos.side === "bottom" ? "bottom" : "top";
+    current.xEdge = pos.side === "right" ? "right" : "left";
+    current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
+    current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const key = `anchored ${top} ${left}`;
+    if (key !== written.current) {
+      s.top = top;
+      s.left = left;
+      written.current = key;
+    }
+    if (!current.verified && measured) {
+      current.verified = true;
+      const box = floating.getBoundingClientRect();
+      const t = translationOf(floating);
+      const dxc = box.left + box.width / 2 - t.x - (pos.x + size.width / 2);
+      const dyc = box.top + box.height / 2 - t.y - (pos.y + size.height / 2);
+      if (Math.abs(dxc) > 2 || Math.abs(dyc) > 2) {
+        anchoringFailed.current = true;
+        release(false);
+        writeFixed(pos);
+      }
+    }
+  }, [anchor, floatingRef, release]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
+    session.current = true;
     reposition();
-    const onScroll = () => reposition();
+    const anchorEl = resolveAnchor(anchor);
+    const floating = floatingRef.current;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target && typeof target.contains === "function") {
+        if (floating?.contains(target)) return;
+        if (anchorEl && !target.contains(anchorEl)) return;
+      }
+      reposition();
+    };
+    const onResize = () => reposition();
     window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    window.addEventListener("resize", onScroll);
+    window.addEventListener("resize", onResize);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(() => reposition()) : null;
+    if (floating) observer?.observe(floating);
+    if (anchorEl) observer?.observe(anchorEl);
     return () => {
       window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+      session.current = false;
+      side.current = null;
+      anchoringFailed.current = false;
+      release(true);
     };
-  }, [open, reposition]);
+  }, [open, reposition, anchor, floatingRef, release]);
+  useEffect(() => () => release(false), [release]);
   return reposition;
 }
 export {
+  resolveAnchor,
   useAnchoredPosition
 };

package/dist/index.cjs

@@ -704,10 +704,15 @@ function fitsOn(side, a, f, vp, offset, padding) {
   return spaceOn(side, a, vp, offset) >= need + padding;
 }
 function computePosition(anchor, floating, viewport, options = {}) {
-  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true } = options;
+  const { placement = "bottom-start", offset = 6, padding = 8, flip = true, shift = true, stickySide } = options;
   const { side: preferred, align } = parsePlacement(placement);
   let side = preferred;
-  if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
+  const sticky = stickySide === preferred || stickySide === OPPOSITE[preferred] ? stickySide : void 0;
+  if (flip && sticky) {
+    side = sticky;
+    const opp = OPPOSITE[side];
+    if (!fitsOn(side, anchor, floating, viewport, offset, padding) && fitsOn(opp, anchor, floating, viewport, offset, padding)) side = opp;
+  } else if (flip && !fitsOn(side, anchor, floating, viewport, offset, padding)) {
     const opp = OPPOSITE[side];
     if (fitsOn(opp, anchor, floating, viewport, offset, padding) || spaceOn(opp, anchor, viewport, offset) > spaceOn(side, anchor, viewport, offset)) {
       side = opp;
@@ -743,41 +748,171 @@ function computePosition(anchor, floating, viewport, options = {}) {
 
 // src/hooks/useAnchoredPosition.ts
 var useIsomorphicLayoutEffect = typeof document !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
-var resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+var resolveAnchor = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+var anchoringSupported;
+function supportsAnchoring() {
+  if (anchoringSupported === void 0) {
+    try {
+      const css = typeof CSS !== "undefined" ? CSS : void 0;
+      anchoringSupported = !!css && typeof css.supports === "function" && css.supports("anchor-name", "--uix-a") && css.supports("position-anchor", "--uix-a") && css.supports("top", "round(anchor(bottom) + 1px, 1px)");
+    } catch {
+      anchoringSupported = false;
+    }
+  }
+  return anchoringSupported;
+}
+var anchorCount = 0;
+var namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
+function addAnchorName(el, name) {
+  const names = namesOf(getComputedStyle(el).getPropertyValue("anchor-name"));
+  if (!names.includes(name)) names.push(name);
+  el.style.setProperty("anchor-name", names.join(", "));
+}
+function removeAnchorName(el, name) {
+  const names = namesOf(el.style.getPropertyValue("anchor-name")).filter((n) => n !== name);
+  if (names.length) el.style.setProperty("anchor-name", names.join(", "));
+  else el.style.removeProperty("anchor-name");
+}
+function translationOf(el) {
+  const t = getComputedStyle(el).transform;
+  if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
+  try {
+    const m = new DOMMatrixReadOnly(t);
+    return { x: m.m41, y: m.m42 };
+  } catch {
+    return { x: 0, y: 0 };
+  }
+}
+var signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
+var prepared = /* @__PURE__ */ new WeakSet();
 function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
   const opts = (0, import_react4.useRef)({ placement, offset, padding });
   opts.current = { placement, offset, padding };
+  const session = (0, import_react4.useRef)(false);
+  const side = (0, import_react4.useRef)(null);
+  const written = (0, import_react4.useRef)("");
+  const anchoring = (0, import_react4.useRef)(null);
+  const anchoringFailed = (0, import_react4.useRef)(false);
+  const anchorName = (0, import_react4.useRef)("");
+  const release = (0, import_react4.useCallback)((keepPlace) => {
+    const current = anchoring.current;
+    if (!current) return;
+    anchoring.current = null;
+    written.current = "";
+    const floating = floatingRef.current;
+    if (floating) {
+      const s = floating.style;
+      if (keepPlace && current.anchor.isConnected) {
+        const a = current.anchor.getBoundingClientRect();
+        s.top = `${Math.round((current.yEdge === "bottom" ? a.bottom : a.top) + current.dy)}px`;
+        s.left = `${Math.round((current.xEdge === "right" ? a.right : a.left) + current.dx)}px`;
+      }
+      s.removeProperty("position-anchor");
+    }
+    removeAnchorName(current.anchor, current.name);
+  }, [floatingRef]);
   const reposition = (0, import_react4.useCallback)(() => {
-    const anchorEl = resolve(anchor);
+    const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
     if (!anchorEl || !floating) return;
     const s = floating.style;
-    s.position = "fixed";
-    s.inset = "auto";
-    s.margin = "0";
+    if (!prepared.has(floating)) {
+      s.position = "fixed";
+      s.inset = "auto";
+      s.margin = "0";
+      prepared.add(floating);
+      written.current = "";
+    }
     const a = anchorEl.getBoundingClientRect();
+    const size = { width: floating.offsetWidth, height: floating.offsetHeight };
     const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
-      { width: floating.offsetWidth, height: floating.offsetHeight },
+      size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad }
+      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
     );
-    s.left = `${Math.round(pos.x)}px`;
-    s.top = `${Math.round(pos.y)}px`;
-    floating.dataset.placement = pos.placement;
-  }, [anchor, floatingRef]);
+    const measured = size.width > 0 || size.height > 0;
+    if (measured && session.current) side.current = pos.side;
+    if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    const writeFixed = (at) => {
+      const left2 = `${Math.round(at.x)}px`;
+      const top2 = `${Math.round(at.y)}px`;
+      const key2 = `fixed ${left2} ${top2}`;
+      if (key2 === written.current) return;
+      s.left = left2;
+      s.top = top2;
+      written.current = key2;
+    };
+    if (anchoringFailed.current || !supportsAnchoring()) {
+      writeFixed(pos);
+      return;
+    }
+    if (anchoring.current && anchoring.current.anchor !== anchorEl) release(false);
+    if (!anchoring.current) {
+      anchorName.current || (anchorName.current = `--uix-anchor-${++anchorCount}`);
+      addAnchorName(anchorEl, anchorName.current);
+      s.setProperty("position-anchor", anchorName.current);
+      anchoring.current = { anchor: anchorEl, name: anchorName.current, yEdge: "bottom", xEdge: "left", dy: 0, dx: 0, verified: false };
+      written.current = "";
+    }
+    const current = anchoring.current;
+    current.yEdge = pos.side === "bottom" ? "bottom" : "top";
+    current.xEdge = pos.side === "right" ? "right" : "left";
+    current.dy = pos.y - (current.yEdge === "bottom" ? a.bottom : a.top);
+    current.dx = pos.x - (current.xEdge === "right" ? a.right : a.left);
+    const top = `round(anchor(${current.yEdge}) ${signed(current.dy)}, 1px)`;
+    const left = `round(anchor(${current.xEdge}) ${signed(current.dx)}, 1px)`;
+    const key = `anchored ${top} ${left}`;
+    if (key !== written.current) {
+      s.top = top;
+      s.left = left;
+      written.current = key;
+    }
+    if (!current.verified && measured) {
+      current.verified = true;
+      const box = floating.getBoundingClientRect();
+      const t = translationOf(floating);
+      const dxc = box.left + box.width / 2 - t.x - (pos.x + size.width / 2);
+      const dyc = box.top + box.height / 2 - t.y - (pos.y + size.height / 2);
+      if (Math.abs(dxc) > 2 || Math.abs(dyc) > 2) {
+        anchoringFailed.current = true;
+        release(false);
+        writeFixed(pos);
+      }
+    }
+  }, [anchor, floatingRef, release]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
+    session.current = true;
     reposition();
-    const onScroll = () => reposition();
+    const anchorEl = resolveAnchor(anchor);
+    const floating = floatingRef.current;
+    const onScroll = (event) => {
+      const target = event.target;
+      if (target && typeof target.contains === "function") {
+        if (floating?.contains(target)) return;
+        if (anchorEl && !target.contains(anchorEl)) return;
+      }
+      reposition();
+    };
+    const onResize = () => reposition();
     window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    window.addEventListener("resize", onScroll);
+    window.addEventListener("resize", onResize);
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(() => reposition()) : null;
+    if (floating) observer?.observe(floating);
+    if (anchorEl) observer?.observe(anchorEl);
     return () => {
       window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+      session.current = false;
+      side.current = null;
+      anchoringFailed.current = false;
+      release(true);
     };
-  }, [open, reposition]);
+  }, [open, reposition, anchor, floatingRef, release]);
+  (0, import_react4.useEffect)(() => () => release(false), [release]);
   return reposition;
 }
 
@@ -1490,17 +1625,36 @@ var helpLabelFor = (thing) => typeof thing === "string" || typeof thing === "num
 // src/components/Popover.tsx
 var import_react14 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect3 = typeof document !== "undefined" ? import_react14.useLayoutEffect : import_react14.useEffect;
+var PLACING = "data-uix-placing";
+var isPopoverOpen = (el) => {
+  try {
+    return el.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+var settle = (el) => {
+  if (!el.hasAttribute(PLACING)) return;
+  getComputedStyle(el).getPropertyValue("transform");
+  el.removeAttribute(PLACING);
+};
 function Popover({
   popover = "auto",
   anchor,
   placement = "bottom-start",
   offset = 6,
+  closeWhenAnchorHidden = false,
+  onAnchorHidden,
   className,
   children,
   ...props
 }) {
   const ref = (0, import_react14.useRef)(null);
   const [open, setOpen] = (0, import_react14.useState)(false);
+  const openRef = (0, import_react14.useRef)(false);
+  const onAnchorHiddenRef = (0, import_react14.useRef)(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
@@ -1510,14 +1664,55 @@ function Popover({
   (0, import_react14.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
+    const hold = (event) => {
+      if (event.newState !== "open") return;
+      el.setAttribute(PLACING, "");
+      window.setTimeout(() => settle(el), 150);
+    };
     const sync = () => {
-      const isOpen = el.matches(":popover-open");
-      if (isOpen) reposition();
-      setOpen(isOpen);
+      if (!isPopoverOpen(el)) {
+        el.removeAttribute(PLACING);
+        setOpen(false);
+        return;
+      }
+      reposition();
+      window.setTimeout(() => {
+        if (!isPopoverOpen(el)) return;
+        if (!openRef.current) {
+          setOpen(true);
+          return;
+        }
+        reposition();
+        settle(el);
+      }, 0);
     };
+    el.addEventListener("beforetoggle", hold);
     el.addEventListener("toggle", sync);
-    return () => el.removeEventListener("toggle", sync);
+    return () => {
+      el.removeEventListener("beforetoggle", hold);
+      el.removeEventListener("toggle", sync);
+      el.removeAttribute(PLACING);
+    };
   }, [anchor, reposition]);
+  useIsomorphicLayoutEffect3(() => {
+    openRef.current = open;
+    if (open && ref.current) settle(ref.current);
+  }, [open]);
+  (0, import_react14.useEffect)(() => {
+    const el = ref.current;
+    const anchorEl = resolveAnchor(anchor);
+    if (!closeWhenAnchorHidden || !open || !el || !anchorEl || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver((entries) => {
+      const latest = entries[entries.length - 1];
+      if (!latest || latest.isIntersecting || !isPopoverOpen(el)) return;
+      onAnchorHiddenRef.current?.();
+      const active = el.ownerDocument.activeElement;
+      if (active && el.contains(active)) active.blur();
+      el.hidePopover();
+    });
+    observer.observe(anchorEl);
+    return () => observer.disconnect();
+  }, [closeWhenAnchorHidden, open, anchor]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 
@@ -3615,7 +3810,7 @@ var VIEW_MENU_COLUMN_LABELS = {
 };
 var fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
 var columnText = (column) => column.textLabel ?? (typeof column.label === "string" ? column.label : column.id);
-var isPopoverOpen = (el) => {
+var isPopoverOpen2 = (el) => {
   try {
     return !!el?.matches(":popover-open");
   } catch {
@@ -3631,14 +3826,14 @@ function ColumnRowMenu({ label, actions, triggerRef }) {
   const enabled = () => items.current.filter((el) => !!el && !el.disabled);
   const close = (returnFocus) => {
     const el = document.getElementById(menuId);
-    if (isPopoverOpen(el)) el.hidePopover();
+    if (isPopoverOpen2(el)) el.hidePopover();
     setOpen(false);
     if (returnFocus) button.current?.focus();
   };
   (0, import_react36.useEffect)(() => {
     if (!open) return;
     const el = document.getElementById(menuId);
-    if (el && typeof el.showPopover === "function" && !isPopoverOpen(el)) {
+    if (el && typeof el.showPopover === "function" && !isPopoverOpen2(el)) {
       try {
         el.showPopover();
       } catch {
@@ -3689,7 +3884,7 @@ function ColumnRowMenu({ label, actions, triggerRef }) {
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         onPointerDown: () => {
-          wasOpenAtPress.current = isPopoverOpen(document.getElementById(menuId));
+          wasOpenAtPress.current = isPopoverOpen2(document.getElementById(menuId));
         },
         onClick: () => {
           const wasOpen = wasOpenAtPress.current;
@@ -7661,7 +7856,7 @@ function DiffViewer({
   const [internalResolutions, setInternalResolutions] = (0, import_react51.useState)({});
   const resolutions = controlledResolutions ?? internalResolutions;
   const summary = summarizeDiff(entries, resolutions);
-  const resolve2 = (path, resolution) => {
+  const resolve = (path, resolution) => {
     if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
     onResolutionChange?.(path, resolution);
   };
@@ -7708,9 +7903,9 @@ function DiffViewer({
               /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("pre", { children: renderValue(entry[version], labels.notPresent) })
             ] }, version)) }),
             /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: labels.acceptIncoming }),
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: labels.keepCurrent }),
-              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: labels.markPending })
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
             ] })
           ] }, entry.path);
         })

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { RefObject, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, AriaAttributes, HTMLAttributes, Ref, TextareaHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes, MouseEvent, DetailsHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes } from 'react';
-import { P as Placement } from './overlay-position-CEGSz6Z2.cjs';
-export { A as Align, a as PositionOptions, b as PositionResult, R as Rect, S as Side, c as Size, d as computePosition } from './overlay-position-CEGSz6Z2.cjs';
+import { P as Placement } from './overlay-position-Cjv5E7mn.cjs';
+export { A as Align, a as PositionOptions, b as PositionResult, R as Rect, S as Side, c as Size, d as computePosition } from './overlay-position-Cjv5E7mn.cjs';
 
 declare function cx(...args: (string | false | null | undefined | 0)[]): string;
 
@@ -182,10 +182,15 @@ interface UseAnchoredPositionOptions {
  * Position a floating element (a native-popover overlay) against an anchor with
  * cross-browser flip/shift — the DOM half of the overlay-position engine (UIX-FIX-02).
  *
- * Measures both elements with getBoundingClientRect, applies `position: fixed` + left/top
- * (overriding the popover's default centered `inset:0; margin:auto`), and keeps the overlay
- * glued to its anchor on scroll/resize while `open`. Returns a `reposition` fn for callers
- * that want to nudge it manually (e.g. right when a native popover's `toggle` fires).
+ * The engine decides the side, alignment and viewport clamp from getBoundingClientRect.
+ * Where the browser supports CSS anchor positioning, that result is written as an offset
+ * from the anchor (`position-anchor` + `anchor()`), so the browser keeps the overlay glued
+ * to its anchor while the page scrolls, with no frame of lag; elsewhere it is written as
+ * `position: fixed` + left/top and follows scroll/resize from JS. While `open`, the side
+ * chosen at open is kept until it no longer fits and the other side does, scrolls inside
+ * the overlay itself are ignored, and a size change of either element re-places it.
+ * Returns a `reposition` fn for callers that want to nudge it manually (e.g. right when a
+ * native popover's `toggle` fires).
  */
 declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding }: UseAnchoredPositionOptions): () => void;
 
@@ -1643,16 +1648,26 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     popover?: 'auto' | 'manual';
     /**
      * Element (or ref) to anchor against. When set, the popover is placed with
-     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen —
-     * instead of relying on CSS `anchor()`, which is Chromium-only and detaches the
-     * popover from its trigger everywhere else. The native Popover API still provides
-     * the top layer (so it escapes `overflow` clipping) and light-dismiss.
+     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen.
+     * Where the browser supports CSS anchor positioning, the placement is written as an
+     * offset from the anchor, so it stays attached while the page scrolls; elsewhere it
+     * follows scroll from JS. The native Popover API still provides the top layer (so it
+     * escapes `overflow` clipping) and light-dismiss.
      */
     anchor?: RefObject<HTMLElement | null> | HTMLElement | null;
     /** Preferred placement when `anchor` is set. Default `'bottom-start'`. */
     placement?: Placement;
     /** Gap between the trigger and the popover, in px. Default 6. */
     offset?: number;
+    /**
+     * Close the popover once its `anchor` has scrolled completely out of view (outside the
+     * viewport or a clipping ancestor), e.g. a picker opened from an editor that the user
+     * scrolls away from. Focus inside the popover is let go rather than sent back to the
+     * hidden anchor. Needs `anchor`. Default `false`.
+     */
+    closeWhenAnchorHidden?: boolean;
+    /** Called when `closeWhenAnchorHidden` is about to close the popover. */
+    onAnchorHidden?: () => void;
     children?: ReactNode;
 }
 /**
@@ -1660,7 +1675,7 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
  * things like a filter popover, menu, or rich select by putting controls inside.
  * Pass `anchor` to get collision-aware, cross-browser placement (UIX-FIX-02).
  */
-declare function Popover({ popover, anchor, placement, offset, className, children, ...props }: PopoverProps): react.JSX.Element;
+declare function Popover({ popover, anchor, placement, offset, closeWhenAnchorHidden, onAnchorHidden, className, children, ...props }: PopoverProps): react.JSX.Element;
 
 interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */

package/dist/{overlay-position-CEGSz6Z2.d.cts → overlay-position-Cjv5E7mn.d.cts}

@@ -39,6 +39,13 @@ interface PositionOptions {
     flip?: boolean;
     /** Slide along the cross axis to stay on-screen. Default true. */
     shift?: boolean;
+    /**
+     * The side the element is already on, while it stays open. It is kept unless it no longer
+     * fits AND the opposite side does, so a size change or a small scroll never flips an open
+     * overlay back and forth. Ignored when it is not on `placement`'s axis. Unset = decide from
+     * `placement` alone (an overlay that is opening).
+     */
+    stickySide?: Side;
 }
 interface PositionResult {
     /** Viewport-space left, for `position: fixed`. */

package/dist/overlay-position.d.ts

@@ -39,6 +39,13 @@ interface PositionOptions {
     flip?: boolean;
     /** Slide along the cross axis to stay on-screen. Default true. */
     shift?: boolean;
+    /**
+     * The side the element is already on, while it stays open. It is kept unless it no longer
+     * fits AND the opposite side does, so a size change or a small scroll never flips an open
+     * overlay back and forth. Ignored when it is not on `placement`'s axis. Unset = decide from
+     * `placement` alone (an overlay that is opening).
+     */
+    stickySide?: Side;
 }
 interface PositionResult {
     /** Viewport-space left, for `position: fixed`. */