@jsenv/navi 0.29.415 → 0.29.417

package/dist/jsenv_navi.js

@@ -3,7 +3,7 @@
  * using @jsenv/navi as intended.
  */
 import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
-import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
+import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, ELEMENT_SIZE_CHANGE, getScrollContainer, scrollIntoViewScoped, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, trapScrollInside, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { options, isValidElement, createContext, render, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
@@ -15245,6 +15245,572 @@ const useOpenControllerByProps = (props, name) => {
   return openController;
 };
 
+/**
+ * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
+ * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
+ * of which of the two owns it.
+ */
+
+
+/**
+ * Whether a visibleRectEffect delivery is one that can have taken height away
+ * from a popup, and so pushed whatever holds focus out of sight:
+ * - "resize": the window/visual viewport settled — which is also how the
+ *   on-screen keyboard arrives, overlay or not (window_size.js);
+ * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
+ * - "focusin": the focus-settled re-measure, for the room that changes with
+ *   nothing announcing it (subscribeFocusSettled in window_size.js).
+ *
+ * Everything else is a scroll of one kind or another, where nothing got
+ * smaller and scrolling the focused element back would fight the very gesture
+ * that fired it.
+ */
+const mayHaveHiddenFocus = (event) => {
+  const type = event?.type;
+  return (
+    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
+  );
+};
+
+const scrollportHeightMap = new WeakMap();
+/**
+ * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
+ * getting shorter has pushed it out.
+ *
+ * The case this exists for: a field low in the scrolling body of a popup that
+ * also has a footer (box.jsx — with a body, the body is the only thing that
+ * scrolls and the footer is a sibling sitting right under it). Focusing the
+ * field makes the browser scroll it into view, which it does against the
+ * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
+ * that height away. The body shrinks, its scrollTop does not move, so the
+ * content slides down relative to the shorter scrollport and the field ends up
+ * past its bottom edge — visually, swallowed by the footer. The browser does
+ * not redo a scroll-into-view it already answered, so this does.
+ *
+ * Only what the shrink itself hid, though: with the keyboard up the user reads
+ * the rest of the popup by scrolling the field away — to reach the submit under
+ * it, typically — and the room keeps changing while they do (a keyboard settling
+ * in two steps, a suggestion strip, a browser bar). Answering each of those by
+ * scrolling the field back takes the popup away from wherever they had just
+ * scrolled it, over and over: what they were reading cannot be reached at all
+ * without blurring the field first, and the popup reads as unscrollable. So the
+ * field is brought back only when it was in view before the room shrank, which
+ * one remembered number answers: a resize moves neither scrollTop nor the
+ * element's offset inside the scrolled content, so measuring against the height
+ * the scrollport HAD is measuring the state before the change.
+ *
+ * Scoped to the field's own scroll container (never the page): a popup traps
+ * scrolling precisely so the document underneath cannot move, and a plain
+ * scrollIntoView walks past a container whose scrollbar isn't visible — see
+ * scrollIntoViewScoped's own doc.
+ *
+ * "nearest": the smallest scroll that makes it visible, and none at all when it
+ * already is. Where it lands is the container's own business — a navi scroller
+ * keeps a band free at its edges so a field never comes back glued to one (see
+ * scroll-padding in box.jsx).
+ */
+const keepFocusedElementVisible = (popupEl) => {
+  const { activeElement } = document;
+  if (!activeElement || activeElement === popupEl) {
+    return;
+  }
+  if (!popupEl.contains(activeElement)) {
+    return;
+  }
+  const scrollContainer = getScrollContainer(activeElement);
+  if (!scrollContainer || !popupEl.contains(scrollContainer)) {
+    // What scrolls the field is outside the popup, which means the page: a
+    // popup holds it still on purpose (trapScrollInside), so there is nothing
+    // here to scroll back.
+    return;
+  }
+  const scrollportHeight = scrollContainer.clientHeight;
+  const scrollportHeightBefore = scrollportHeightMap.get(scrollContainer);
+  scrollportHeightMap.set(scrollContainer, scrollportHeight);
+  if (scrollportHeightBefore !== undefined) {
+    if (scrollportHeight >= scrollportHeightBefore) {
+      // Nothing was taken away, so nothing was hidden by this.
+      return;
+    }
+    if (
+      !isVisibleInScrollport(
+        activeElement,
+        scrollContainer,
+        scrollportHeightBefore,
+      )
+    ) {
+      return;
+    }
+  }
+  scrollIntoViewScoped(activeElement, {
+    container: scrollContainer,
+    block: "nearest",
+  });
+};
+
+// Whether any part of `el` was showing in `container` back when its scrollport
+// was `scrollportHeight` tall. Both boxes are read now: the container may have
+// moved as well as shrunk (a centered dialog re-centers itself), and the
+// difference between the two tops is what that move leaves alone.
+const isVisibleInScrollport = (el, container, scrollportHeight) => {
+  const elRect = el.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const elTop = elRect.top - containerRect.top + container.scrollTop;
+  const elBottom = elTop + elRect.height;
+  const scrollportTop = container.scrollTop;
+  const scrollportBottom = scrollportTop + scrollportHeight;
+  return elBottom > scrollportTop && elTop < scrollportBottom;
+};
+
+/**
+ * Calls `onSettled` once `el`'s current CSS transition is over — via
+ * `transitionend`, with a safety `setTimeout` fallback matching the longest
+ * `transition-duration`, in case nothing actually transitions or an event is
+ * missed.
+ *
+ * Returns a "cancel" function, so a caller whose instance has been superseded
+ * (a fresh open/close about to set its own state) can keep this stale one from
+ * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
+ * did up front is that fresh call's business, not this one's.
+ */
+const whenTransitionSettles = (el, onSettled) => {
+  let settled = false;
+  const onTransitionEnd = (transitionEvent) => {
+    if (transitionEvent.target === el) {
+      finish();
+    }
+  };
+  const stopWatching = () => {
+    settled = true;
+    el.removeEventListener("transitionend", onTransitionEnd);
+    clearTimeout(safetyTimeoutId);
+  };
+  const finish = () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+    onSettled();
+  };
+  el.addEventListener("transitionend", onTransitionEnd);
+  const durationsInSeconds = getComputedStyle(el)
+    .transitionDuration.split(",")
+    .map((value) => parseFloat(value) || 0);
+  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
+  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
+  return () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+  };
+};
+
+/**
+ * Drops the document's text selection when it lives inside `el`, leaving a
+ * selection made elsewhere on the page alone.
+ *
+ * A popup being closed takes its content with it, and a selection is a claim
+ * on content the user can still act on: kept, it would outlive the surface it
+ * was made on — painted on the box for the length of its exit transition, with
+ * the handles and the copy toolbar a phone draws from the live selection
+ * hanging over something that is going away — and reappear with the box on
+ * the next opening. Dropping the selection is the only way to remove that
+ * chrome: a `user-select: none` on the closing box hides the highlight in some
+ * browsers only, and the handles are the browser's own, drawn from the
+ * selection object rather than from any style.
+ */
+const clearTextSelectionInside = (el) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  if (!el.contains(range.commonAncestorContainer)) {
+    return;
+  }
+  selection.removeAllRanges();
+};
+
+/**
+ * Disables pointer-events on `el` until its current CSS transition settles —
+ * avoids the cursor changing/something becoming clickable while the popup is
+ * still visually moving into or out of place.
+ *
+ * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
+ * pointer-events, since a fresh call for the next open/close is about to set
+ * its own state.
+ */
+const suppressPointerEventsDuringTransition = (el) => {
+  el.style.pointerEvents = "none";
+  return whenTransitionSettles(el, () => {
+    el.style.pointerEvents = "";
+  });
+};
+
+/**
+ * Hides the backdrop, deferring until the browser's matching "click" fires
+ * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
+ * comment for why) — same capture-phase-on-document pattern as
+ * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
+ * can't safely replace: mouseup (and the click that follows it) can land an
+ * arbitrarily long time after mousedown (the user is still holding the
+ * button down), so a short timeout can fire first and hide the backdrop
+ * before its own click ever arrives. A capture-phase listener on document
+ * fires for every click regardless of what any bubble-phase handler does
+ * downstream, so no fallback timer is needed.
+ *
+ * `hide` is the caller's own way to actually hide the backdrop
+ * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
+ * for a plain div) — this helper only owns the mousedown/click timing.
+ *
+ * Returns a disarm function (or undefined if hidden immediately), so a
+ * fresh open can cancel a pending hide it's about to make redundant.
+ */
+const armPointerDownOutsideClose = (closeEvent, hide) => {
+  const mousedownEvent = findEvent(closeEvent, "mousedown");
+  if (!mousedownEvent) {
+    hide();
+    return undefined;
+  }
+  // `hide` is handed the click, for a wall with peers to re-aim it (see
+  // handWallClickToPeer).
+  const onClick = (clickEvent) => {
+    document.removeEventListener("click", onClick, { capture: true });
+    hide(clickEvent);
+  };
+  document.addEventListener("click", onClick, { capture: true });
+  return () => {
+    document.removeEventListener("click", onClick, { capture: true });
+  };
+};
+
+/**
+ * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
+ * `prefix` plus a direction word), or `null` if both axes overlap the anchor
+ * (no direction at all — that's `resolvedAnimationKind === "scaling"`
+ * territory instead, see resolveAutoAnimationKind below).
+ *
+ * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
+ * when docked) keeps the word as the compass direction the popup comes
+ * from: placed "top" (a point/corner), it slides in from the top.
+ * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
+ * direction instead, the opposite compass point: placed "top" of the
+ * anchor, it moves/grows up, away from the anchor (which sits below it).
+ *
+ * "inset-*"/"center" contribute no direction on their axis either way.
+ */
+const resolveDirectionValue = (y, x, { prefix }) => {
+  const yWord =
+    y === "top"
+      ? prefix === "expand"
+        ? "up"
+        : "top"
+      : y === "bottom"
+        ? prefix === "expand"
+          ? "down"
+          : "bottom"
+        : null;
+  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
+  if (!yWord && !xWord) {
+    return null;
+  }
+  return yWord && xWord
+    ? `${prefix}-${yWord}-${xWord}`
+    : `${prefix}-${yWord || xWord}`;
+};
+
+/**
+ * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
+ * — picked for any real anchor, or for a point/corner placed dead-center
+ * (both positionArea axes overlapping — there's no sensible direction to
+ * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
+ * for any no-anchor/docked case (Dialog always, Popover's own custom
+ * renderer when there's no real anchor), so this collapses to "scaling"
+ * there only for the dead-center case, "sliding" otherwise. The two
+ * "overlapping" booleans below describe the *positionArea* itself (a bare
+ * word vs. "inset-"/"center"), not anything about the anchor — they'd
+ * mean exactly the same thing even with no anchor at all, since it's the
+ * position strategy, not the anchor, that decides whether there's a
+ * direction to slide from.
+ */
+const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
+  const yIsOverlapping =
+    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
+  const xIsOverlapping =
+    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
+  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
+};
+
+/**
+ * A popup reads "outside" from its own border box: what a press lands on
+ * decides nothing on its own (a genuine backdrop press and a press on the
+ * popup's padding both report the popup element as their target, there being
+ * no real ::backdrop node to be one), so the rectangle is what tells them
+ * apart. That holds as long as the box and what the popup paints are the same
+ * thing — which stops being true for a popup with no surface of its own
+ * (`backgroundColor="transparent"`, no shadow, no padding): what the eye reads
+ * as backdrop is then inside the box, and a press there stays a press on the
+ * popup.
+ *
+ * `data-navi-popup-outside` is how a caller says which of its own boxes are
+ * not the surface. It is opt-in because navi cannot infer it — a background
+ * can come from anywhere — while the caller who made the popup see-through
+ * knows exactly which box is decoration and which is paper.
+ *
+ * The marker answers for the element it is on, never for its descendants: a
+ * box painted inside a marked one is still surface, so a row can be marked and
+ * its empty halves read as backdrop while presses on the controls it holds do
+ * not dismiss anything. A descendant with `pointer-events: none` never becomes
+ * a press target at all, so the marked box answers in its place — while the
+ * same declaration on the marked box itself takes it out of hit-testing and
+ * makes the marker unreachable (see warnAboutUnreachableOutsideRegions).
+ */
+const OUTSIDE_REGION_ATTRIBUTE = "data-navi-popup-outside";
+
+/**
+ * `data-navi-popup-inside` is the other direction: a box of the PAGE the
+ * caller says belongs to a popup, so a press on it is not outside that popup
+ * even though it lies beyond the border box — a card whose press is what
+ * fills the one panel of a board. Its value names the popup by `id`, the way
+ * `commandfor` does (several ids, space separated), because the exemption is
+ * one popup's: a menu open beside the board still closes on the same press.
+ *
+ * Unlike the outside marker it answers for its whole subtree: the outside
+ * marker carves free space out of a surface whose controls stay surface, this
+ * one adds a whole thing — the card, its count, its buttons — to the popup's
+ * own ground, and nothing in it is a dismissal.
+ */
+const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
+
+/**
+ * `data-navi-popup-group` names the peers of a popup: the triggers of the other
+ * popups a press goes to from this one — a menu bar, where pressing another
+ * menu while one is open switches to it, in that one press. A trigger joins by
+ * carrying the name (a Picker's `popupGroup` writes it on its own), and a popup
+ * reads it off what the press landed on.
+ *
+ * Returns the peer `target` is in, or null.
+ */
+const findPopupPeer = (target, group) => {
+  if (!group || !target || typeof target.closest !== "function") {
+    return null;
+  }
+  return target.closest(`[data-navi-popup-group="${CSS.escape(group)}"]`);
+};
+
+/**
+ * The click a wall took, handed to the peer (see findPopupPeer) it covered.
+ *
+ * A wall cannot let one press through and not another: it is what the pointer
+ * hits, and that is the whole of how it spends a press. So it goes on taking
+ * every one — the page behind stays as unhoverable and unpressable as it looks
+ * — and once the press is over, its click is re-aimed at what the wall stood
+ * over at that point, when that is a peer. The click alone, for the reason
+ * transition_press.js gives: a pointer stream made up with no pointer behind it
+ * starts gestures (a hold, a drag) that nothing ever ends, and a click is what
+ * opens a popup's trigger.
+ *
+ * Called with the click that takes the wall down after a press closed the
+ * popup (see armPointerDownOutsideClose), so the peer opens as the popup it
+ * replaces goes.
+ */
+const handWallClickToPeer = (
+  clickEvent,
+  { wallEl, popupEl, anchorEl, group },
+) => {
+  if (!clickEvent.isTrusted || clickEvent.target !== wallEl) {
+    // A click dispatched by hand is already aimed, and one that did not land
+    // on the wall (a press on the popup's own outside region) was no wall's.
+    return;
+  }
+  // The topmost element under the wall at that point: what the press would
+  // have landed on with no wall. Asked past the wall rather than after hiding
+  // it, which a fading wall may not be yet.
+  const covered = document
+    .elementsFromPoint(clickEvent.clientX, clickEvent.clientY)
+    .find((el) => el !== wallEl && !popupEl.contains(el));
+  const peer = findPopupPeer(covered, group);
+  if (!peer) {
+    return;
+  }
+  if (peer.contains(popupEl) || (anchorEl && peer.contains(anchorEl))) {
+    // The popup's own trigger — the one holding it (a picker renders its
+    // popup inside itself) or the one it opened against: the press through
+    // the wall closed the popup, and handing the trigger its click would open
+    // it again.
+    return;
+  }
+  // The page sees one click, on the peer, rather than two.
+  clickEvent.stopPropagation();
+  // A PointerEvent where the browser makes clicks of them, a MouseEvent
+  // elsewhere: the same kind, copied field by field.
+  const ClickEvent = clickEvent.constructor;
+  covered.dispatchEvent(new ClickEvent(clickEvent.type, clickEvent));
+};
+
+/**
+ * What a press landing on a region the caller declared as not-its-surface
+ * does: exactly what the same press on the backdrop would do.
+ *
+ * Lives on the popup's own content element rather than in the backdrop's
+ * handler, for both renderers: the backdrop is a sibling behind the popup
+ * (never an ancestor), so a press inside the popup's box never reaches it.
+ */
+const handlePressOnOutsideRegion = (
+  mouseDownEvent,
+  { popupEl, openController, pressOutside },
+) => {
+  if (mouseDownEvent.button !== 0) {
+    return;
+  }
+  const { target } = mouseDownEvent;
+  if (!target.hasAttribute(OUTSIDE_REGION_ATTRIBUTE)) {
+    return;
+  }
+  if (openedDuringThisPress(openController)) {
+    // The release of the press that opened it is not somebody dismissing it
+    // (see openedDuringThisPress).
+    return;
+  }
+  // A popup opens inside its opener's own subtree, so a press on a region
+  // belonging to a popup nested in this one bubbles through here too — and it
+  // is a press on what is in front, not on this popup's own decoration.
+  if (
+    target.closest(`[navi-control="dialog"], [navi-control="popover"]`) !==
+    popupEl
+  ) {
+    return;
+  }
+  if (pressOutside === "capture") {
+    mouseDownEvent.preventDefault();
+    return;
+  }
+  if (pressOutside === "close" || pressOutside === "cancel") {
+    openController.requestClose(mouseDownEvent, {
+      isCancel: pressOutside === "cancel",
+    });
+  }
+};
+
+/**
+ * Hears an outside press from the document itself, for a popup with no
+ * backdrop of its own to catch one: a modal `<dialog>` (whose native
+ * `::backdrop` dispatches nothing a handler can be put on) and any popup the
+ * caller asked to leave the page reachable (`backdrop={false}`).
+ *
+ * The press is read and never taken: no `preventDefault`, no
+ * `stopPropagation`, and the listener is on `document` rather than on
+ * anything covering the page — so what the press landed on hears it too, in
+ * the same gesture, and the popup only takes note. That is the whole point of
+ * a popup with no wall: a press outside is a press on the page, and the page
+ * answers it. The one popup where that cannot hold is the modal dialog, where
+ * the browser has already made everything behind inert before this runs.
+ *
+ * `pressEventType` says which event IS the press, and the two callers want
+ * opposite ones:
+ *
+ * - `"pointerdown"` for a popup with no wall: a page with no wall over it is
+ *   a page whose own elements arbitrate their presses, and cancelling a
+ *   `pointerdown` — what a drag source and a control keeping the focus where
+ *   it is both do — suppresses every compatibility mouse event that would have
+ *   followed it. The press happens, reaches its target, and no `mousedown` is
+ *   ever dispatched for it. Reading the pointer event is reading the press
+ *   itself, whatever anything does with it afterwards, and it is the same
+ *   event the drag and surface detectors read.
+ * - `"mousedown"` for the modal dialog, whose native `::backdrop` exists to
+ *   spend the press. The page's controls act on `mousedown`, and on a touch
+ *   screen that is not the same moment as `pointerdown`: the compatibility
+ *   mouse events are synthesized at `touchend` and hit-tested again then.
+ *   Closing on `pointerdown` takes the `::backdrop` away before that second
+ *   hit-test, so the `mousedown` lands on whatever the page holds under the
+ *   finger, and one tap both dismisses the dialog and presses the page. Read
+ *   on `mousedown`, the wall is still up when the press the page acts on is
+ *   aimed, and it catches it. Nothing behind a modal wall can cancel that
+ *   press, since nothing behind it hears the `pointerdown` at all.
+ *
+ * Capture phase, so a handler downstream that stops propagation cannot keep
+ * the popup open either — the press is still outside whatever is made of it.
+ *
+ * Returns a cleanup that removes the listener.
+ */
+const armOutsidePressClose = (
+  popupEl,
+  { openController, pressOutside, pressEventType = "pointerdown" },
+) => {
+  const onDocumentPointerDown = (pointerDownEvent) => {
+    if (pointerDownEvent.button !== 0) {
+      return;
+    }
+    if (openedDuringThisPress(openController)) {
+      // The release of the press that opened it is not somebody dismissing it
+      // (see openedDuringThisPress).
+      return;
+    }
+    // The press landed inside another popup: that is a press on what is in
+    // front, not outside. Asking the target where it lives rather than asking
+    // this popup whether it was pushed — a popup in front does not have to be
+    // one this popup knows about. In front means neither inside nor around: a
+    // popup nested in this one falls to the containment check below as the
+    // inside press it is, and one this popup opened INSIDE (a bubble rendered
+    // in a sheet's content) is around it, so what that popup holds is outside
+    // this one exactly like the rest of the page.
+    const popupUnderPointer = pointerDownEvent.target.closest?.(
+      `[navi-control="dialog"], [navi-control="popover"]`,
+    );
+    if (
+      popupUnderPointer &&
+      popupUnderPointer !== popupEl &&
+      !popupEl.contains(popupUnderPointer) &&
+      !popupUnderPointer.contains(popupEl)
+    ) {
+      return;
+    }
+    if (
+      popupEl.id &&
+      pointerDownEvent.target.closest?.(
+        `[${INSIDE_ATTRIBUTE}~="${CSS.escape(popupEl.id)}"]`,
+      )
+    ) {
+      return;
+    }
+    // Real DOM containment wins over the rectangle below — an element
+    // genuinely inside the popup (`overflow: visible`, a negative margin, an
+    // absolutely-positioned child) can be painted outside its border box, and
+    // a press there is not outside just because its coordinates are. The
+    // popup element itself is excluded (contains() answers true for it): a
+    // press on a modal dialog's native backdrop reports the dialog as its
+    // target, there being no `::backdrop` node to be one, so treating that as
+    // contained would keep the rectangle from ever running.
+    if (
+      pointerDownEvent.target !== popupEl &&
+      popupEl.contains(pointerDownEvent.target)
+    ) {
+      return;
+    }
+    const rect = popupEl.getBoundingClientRect();
+    const isOutside =
+      pointerDownEvent.clientX < rect.left ||
+      pointerDownEvent.clientX > rect.right ||
+      pointerDownEvent.clientY < rect.top ||
+      pointerDownEvent.clientY > rect.bottom;
+    if (!isOutside) {
+      return;
+    }
+    openController.requestClose(pointerDownEvent, {
+      isCancel: pressOutside === "cancel",
+    });
+  };
+  document.addEventListener(pressEventType, onDocumentPointerDown, {
+    capture: true,
+  });
+  return () => {
+    document.removeEventListener(pressEventType, onDocumentPointerDown, {
+      capture: true,
+    });
+  };
+};
+
 /**
  * Typography reset shared by the surfaces a control opens: callout, popover,
  * dialog.
@@ -15465,6 +16031,24 @@ let calloutCount = 0;
 // large enough to survive the pixel or two a trackpad rests on.
 const CLOSE_BY_SCROLL_DISTANCE = 10;
 
+// The events of a press a `backdrop` callout spends, up to its click (which
+// closes the callout and is spent there), and `pointercancel`, which says the
+// browser took the press. No touch events: they are the scroll's, and what
+// listens to them — a list learning the user took its scroll over — is
+// watching the finger, not answering the press.
+const SPENT_PRESS_EVENT_TYPES = [
+  "pointerdown",
+  "pointerup",
+  "pointercancel",
+  "mousedown",
+  "mouseup",
+  "contextmenu",
+];
+// Where a press lands on something drawn over the page rather than on the page
+// itself: a popup of navi's (either layer) or a native top-layer element.
+const LAYER_SELECTOR =
+  '[popover], dialog, [navi-control="popover"], [navi-control="dialog"]';
+
 const css$14 = /* css */ `
   /* jsenv-css-opaque: same as dialog.jsx, cascade order. */
   @layer navi {
@@ -15753,6 +16337,17 @@ const css$14 = /* css */ `
  *   the callout opened, so scrolling back cancels nothing but a round trip shorter than the
  *   distance leaves it open. Unlike an outside click it also dismisses an "error" callout: the
  *   caller asked for it explicitly.
+ * @param {boolean} [options.backdrop=false] - Spend an outside press on closing the callout,
+ *   the way a popup's wall spends it: no link followed, no control pressed, no focus moved, no
+ *   hold or drag started under it. Without it that press closes the callout and is answered by
+ *   what it landed on too. Not a wall, though: the scroll a finger starts beside the callout
+ *   still scrolls, a press on a layer drawn over the page (a sheet the callout's content
+ *   opened) is that layer's, and a press that does not close the callout (an "error" one) is
+ *   not spent either
+ * @param {string} [options.group] - With `backdrop`: the name the callout's peers carry in
+ *   `data-navi-popup-group` — the triggers of other popups, callouts or not. A press inside a
+ *   peer still closes the callout but is not spent, so the peer it landed on opens its own
+ *   popup in the same press — a menu bar, where pressing another menu switches to it
  * @param {Event} [options.openingEvent] - The gesture the callout belongs to. It names the
  *   opener — `currentTarget` while the event is still dispatching, `target` once it is over,
  *   so awaiting before opening changes nothing — and the opener is the one part of the anchor
@@ -15817,6 +16412,8 @@ const openCallout = (
     closeByPressOutside = status === "info",
     closeOnFocusLeave = closeByPressOutside,
     closeByScroll = false,
+    backdrop = false,
+    group,
     closeButton = true,
     openingEvent,
     reopen = "toggle",
@@ -15901,6 +16498,9 @@ const openCallout = (
       reason,
     });
   };
+  // Asked again at each press rather than once: `update` changes both.
+  const pressOutsideCloses = () =>
+    closeByPressOutside && callout.status !== "error";
   const onRequestClose = (event) => {
     if (!callout.opened) {
       return;
@@ -15909,10 +16509,7 @@ const openCallout = (
     const clickOrSpaceOutside =
       reason === "click_outside" || reason === "space_outside";
     if (clickOrSpaceOutside) {
-      if (!closeByPressOutside) {
-        return;
-      }
-      if (callout.status === "error") {
+      if (!pressOutsideCloses()) {
         return;
       }
     } else if (reason === "focus_leave") {
@@ -16190,16 +16787,36 @@ const openCallout = (
       }
       return openerElement === target || openerElement.contains(target);
     };
+    // Whether an outside press on `target` is spent on closing the callout
+    // (`backdrop`). What is not the page behind the callout keeps its press: a
+    // layer the callout is not part of — its own page may well be a sheet, a
+    // sheet its content opened is in front of it — and a peer, which the press
+    // is meant to open.
+    const spendsPressOn = (target) => {
+      if (!backdrop || !pressOutsideCloses()) {
+        return false;
+      }
+      const layer = target.closest?.(LAYER_SELECTOR);
+      if (layer && !layer.contains(calloutElement)) {
+        return false;
+      }
+      if (findPopupPeer(target, group)) {
+        return false;
+      }
+      return true;
+    };
+    const spend = (event) => {
+      debug(event, `outside press spent on closing the callout (backdrop)`);
+      event.preventDefault();
+      event.stopPropagation();
+    };
     const handleClickOutside = (event) => {
       if (event.button !== 0) {
         // right click
         return;
       }
       const clickTarget = event.target;
-      if (
-        clickTarget === calloutElement ||
-        calloutElement.contains(clickTarget)
-      ) {
+      if (calloutElement.contains(clickTarget)) {
         return;
       }
       if (isInsideOpener(clickTarget)) {
@@ -16212,14 +16829,20 @@ const openCallout = (
         debug(event, `click on opener, let its handler decide`);
         return;
       }
+      // Read before the close, which takes the callout out of the document —
+      // and out of the layer it stands in, for spendsPressOn to find.
+      const spent = spendsPressOn(clickTarget);
       requestClose(event, "click_outside");
+      if (spent) {
+        spend(event);
+      }
     };
     const handleSpaceOutside = (event) => {
       if (event.key !== " ") {
         return;
       }
       const keyTarget = event.target;
-      if (keyTarget === calloutElement || calloutElement.contains(keyTarget)) {
+      if (calloutElement.contains(keyTarget)) {
         return;
       }
       if (isInsideOpener(keyTarget)) {
@@ -16228,7 +16851,41 @@ const openCallout = (
         debug(event, `space on opener, let its handler decide`);
         return;
       }
+      const spent = spendsPressOn(keyTarget);
       requestClose(event, "space_outside");
+      if (spent) {
+        spend(event);
+      }
+    };
+    // The press before its click: a click ends a gesture whose pointerdown
+    // already reached the page, and what acts on the press itself — a hold, a
+    // drag, the focus moving — would otherwise happen under a callout that only
+    // closes on the click. Decided at the pointerdown and kept for the whole
+    // press, wherever its later events land: a release beside the callout ends
+    // a drag started inside it, and must reach it.
+    let pressSpent = false;
+    const handlePressOutside = (event) => {
+      if (event.type === "pointerdown") {
+        const pressTarget = event.target;
+        pressSpent =
+          event.button === 0 &&
+          !calloutElement.contains(pressTarget) &&
+          !isInsideOpener(pressTarget) &&
+          spendsPressOn(pressTarget);
+      } else if (event.type === "pointercancel") {
+        // The browser took the press over — a scroll — and nothing follows it.
+        pressSpent = false;
+        return;
+      }
+      if (!pressSpent) {
+        return;
+      }
+      if (event.type === "mousedown" || event.type === "contextmenu") {
+        // What the press does on its own: the focus moving, a selection
+        // starting, the menu of a held finger.
+        event.preventDefault();
+      }
+      event.stopPropagation();
     };
 
     const registerClickOutsideListener = () => {
@@ -16238,6 +16895,16 @@ const openCallout = (
         document.removeEventListener("click", handleClickOutside, true);
         document.removeEventListener("keydown", handleSpaceOutside, true);
       });
+      if (backdrop) {
+        for (const type of SPENT_PRESS_EVENT_TYPES) {
+          document.addEventListener(type, handlePressOutside, true);
+        }
+        addTeardown(() => {
+          for (const type of SPENT_PRESS_EVENT_TYPES) {
+            document.removeEventListener(type, handlePressOutside, true);
+          }
+        });
+      }
     };
     // A callout opened during a press (mousedown or pointerdown) must wait for the
     // matching release before listening for click-outside, otherwise the same
@@ -17351,7 +18018,7 @@ const generateSvgWithoutArrow = (width, height) => {
  *
  * Usage:
  *   const myToken = createOpenToken();
- *   calloutManager.addOpenToken(myToken, { message, status, testId, closeByScroll, anchorElement, event, skipFocus, onClose });
+ *   calloutManager.addOpenToken(myToken, { message, status, testId, closeByScroll, backdrop, group, anchorElement, event, skipFocus, onClose });
  *   calloutManager.removeOpenToken(myToken, event);
  *   calloutManager.requestCloseCallout(event, debugReason); // force-close all
  *   calloutManager.callout  // current open callout or null
@@ -17409,6 +18076,8 @@ const createCalloutManager = (
       closeButton: tokenData.closeButton,
       closeByPressOutside: tokenData.status !== "error",
       closeByScroll: tokenData.closeByScroll,
+      backdrop: tokenData.backdrop,
+      group: tokenData.group,
       anchorElement,
       openingEvent: event,
       skipFocus: tokenData.skipFocus,
@@ -17537,6 +18206,8 @@ const createCalloutManager = (
       icon,
       closeButton,
       closeByScroll,
+      backdrop,
+      group,
       anchorElement,
       event,
       skipFocus,
@@ -17554,6 +18225,8 @@ const createCalloutManager = (
       icon,
       closeButton,
       closeByScroll,
+      backdrop,
+      group,
       skipFocus,
       onClose,
       // Resolved as the token is added, and kept with it: a token shown later
@@ -23629,7 +24302,31 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     }
     return result;
   };
-  const upsert = (...args) => {
+  // A computed of the row with this id, one per id: what a render reads to
+  // follow that row and no other. An upsert replaces only the items it changes
+  // (see assign below), so a row nobody wrote keeps its object, and its
+  // computed stays still while the rest of the store moves — read through
+  // `select`, a render follows the whole store. Kept as long as the store,
+  // like the rows it holds.
+  const itemSignalById = new Map();
+  const itemSignalForId = (id) => {
+    let itemSignal = itemSignalById.get(id);
+    if (!itemSignal) {
+      itemSignal = computed(() => idMapSignal.value.get(id));
+      itemSignalById.set(id, itemSignal);
+    }
+    return itemSignal;
+  };
+  // A value changes a row when it is another object — the app writing a new
+  // one says something changed, and that is taken as said. An answer says it
+  // with every object nested in its rows: JSON.parse makes them all new, the
+  // ones that did not move included, so a revalidation returning the same
+  // rows would replace every one of them for every reader. What an answer
+  // sends again equal in depth is the value already held (see upsertAnswer).
+  const valueChangedByWrite = (newValue, oldValue) => newValue !== oldValue;
+  const valueChangedByAnswer = (newValue, oldValue) =>
+    newValue !== oldValue && !compareTwoJsValues(newValue, oldValue);
+  const upsertWith = (args, valueChanged) => {
     const mutationsMap = new Map(); // Map<itemId, propertyMutations>
     const triggerPropertyMutations = () => {
       for (const itemPropertiesObserver of itemPropertiesObserverSet) {
@@ -23693,7 +24390,27 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
         const newValue = props[key];
         if (itemOwnKeys.includes(key)) {
           const oldValue = item[key];
-          if (newValue !== oldValue) {
+          const { set } = itemOwnPropertyDescriptors[key];
+          if (set) {
+            // A relation (.one(), .many() and their scoped forms in
+            // resource_graph.js): the row holds which children it points to,
+            // the children live in their own store, and whoever reads them
+            // follows them there. Its setter writes them and says whether the
+            // row points elsewhere now. Compared as a value instead, the
+            // children received are never the object the row hands out, and
+            // every write naming the relation would replace the row.
+            if (set.call(itemWithProps, newValue)) {
+              hasChanges = true;
+              propertyMutations[key] = {
+                oldValue,
+                newValue,
+                target: item,
+                newTarget: itemWithProps,
+              };
+            }
+            continue;
+          }
+          if (valueChanged(newValue, oldValue)) {
             hasChanges = true;
             itemWithProps[key] = newValue;
             propertyMutations[key] = {
@@ -23845,6 +24562,9 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     triggerPropertyMutations();
     return item;
   };
+  const upsert = (...args) => upsertWith(args, valueChangedByWrite);
+  // The same, for the result of a callback — what the server answered.
+  const upsertAnswer = (...args) => upsertWith(args, valueChangedByAnswer);
   const drop = (...args) => {
     const removedItemArray = [];
     const triggerRemovedMutations = () => {
@@ -24019,7 +24739,9 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     arraySignal,
     select,
     selectAll,
+    itemSignalForId,
     upsert,
+    upsertAnswer,
     drop,
 
     observeItemProperties,
@@ -24777,7 +25499,7 @@ const createRangeReader = (
         `${actionName} must return { items, start, count }, received ${describeResult(result)}.`,
       );
     }
-    const items = store.upsert(result.items);
+    const items = store.upsertAnswer(result.items);
     let { start, count } = result;
     if (start === undefined) {
       const startAsked = rangeParams.start;
@@ -25184,12 +25906,34 @@ const createResource = (
     idKey,
     uniqueKeys,
 
-    // Reactive reads, not hooks: they subscribe the render that calls them to
-    // the store's array signal. Nothing hook-shaped inside, so a loop or a
-    // condition is fine. `useAllByIds` skips the ids the store does not hold.
+    // Reactive reads, not hooks: nothing hook-shaped inside, so a loop or a
+    // condition is fine. Each subscribes the render that calls it to what it
+    // returns: the rows asked for, each through a computed of that row (see
+    // itemSignalForId in array_signal_store.js), or the whole store for
+    // `useArray` — a card reading its own row stays still while the page next
+    // to it loads rows of its own. `useAllByIds` skips the ids the store does
+    // not hold.
     useArray: () => store.arraySignal.value,
-    useById: (id) => store.select(idKey, id),
-    useAllByIds: (idArray) => store.selectAll(idArray),
+    useById: (id) => store.itemSignalForId(id).value,
+    useAllByIds: (idArray) => {
+      const items = [];
+      for (const idOrProps of idArray) {
+        let id = idOrProps;
+        if (isProps(idOrProps) && !Object.hasOwn(idOrProps, idKey)) {
+          // Named by a unique key: which row that is can only be read off
+          // the whole store.
+          const item = store.select(idOrProps);
+          id = item ? item[idKey] : undefined;
+        } else if (isProps(idOrProps)) {
+          id = idOrProps[idKey];
+        }
+        const item = store.itemSignalForId(id).value;
+        if (item) {
+          items.push(item);
+        }
+      }
+      return items;
+    },
 
     withParams: undefined,
     one: undefined,
@@ -25416,7 +26160,7 @@ const createResource = (
           : // GET/PUT contract (see .one() JSDoc): the parent object with the
             // relationship nested inside, or null for no relationship.
             (result) => {
-              const item = store.upsert(result);
+              const item = store.upsertAnswer(result);
               const childItem = item[propertyName];
               return childItem ? childItem[childIdKey] : undefined;
             };
@@ -25597,8 +26341,8 @@ const createResource = (
           : (childData) => {
               // an array is [property, value, props], used to rename the child id
               const childItem = Array.isArray(childData)
-                ? childStore.upsert(...childData)
-                : childStore.upsert(childData);
+                ? childStore.upsertAnswer(...childData)
+                : childStore.upsertAnswer(childData);
               return childItem[childIdKey];
             };
       const throwInvalidResult = createInvalidResultThrower(
@@ -25640,7 +26384,7 @@ const createResource = (
           ? (result) => {
               // GET_MANY contract (see .many() JSDoc): the parent object with
               // the child array nested inside; the array replaces the relationship.
-              const item = store.upsert(result);
+              const item = store.upsertAnswer(result);
               const childItemArray = item[propertyName];
               return childItemArray.map((childItem) => childItem[childIdKey]);
             }
@@ -25671,7 +26415,7 @@ const createResource = (
                 return deletedChildItemIdArray;
               }
             : (childDataArray) => {
-                const childItemArray = childStore.upsert(childDataArray);
+                const childItemArray = childStore.upsertAnswer(childDataArray);
                 return childItemArray.map((childItem) => childItem[childIdKey]);
               };
       const throwInvalidResult = createInvalidResultThrower(
@@ -25810,18 +26554,37 @@ const createResource = (
         childSetup(childItem);
       }
       const childSignal = signal(null);
+      // Returns whether the child changed — what the store asks a relation
+      // (see assign in array_signal_store.js). Assigned in place, the child
+      // tells nobody itself: a prop it receives changed is a change of the
+      // owner's row, which is how its readers see it.
       const applyProps = (props) => {
         if (!props) {
+          if (childSignal.peek() === null) {
+            return false;
+          }
           childSignal.value = null;
-          return;
+          return true;
         }
-        // Assign each prop in place. Reactive setters (from chained .one() etc.) will fire.
+        let changed = false;
+        // Assign each prop in place. Reactive setters (from chained .one()
+        // etc.) fire, and say whether their relation changed.
         for (const [key, value] of Object.entries(props)) {
-          childItem[key] = value;
+          const descriptor = Object.getOwnPropertyDescriptor(childItem, key);
+          if (descriptor && descriptor.set) {
+            if (descriptor.set.call(childItem, value)) {
+              changed = true;
+            }
+          } else if (childItem[key] !== value) {
+            childItem[key] = value;
+            changed = true;
+          }
         }
         if (childSignal.peek() !== childItem) {
           childSignal.value = childItem; // first activation: null → childItem
+          changed = true;
         }
+        return changed;
       };
       if (!ownerName) {
         // Declared on a scoped child, an owner id is only unique inside its
@@ -26109,7 +26872,7 @@ const createResource = (
           if (isMany) {
             // GET_MANY, POST_MANY, PUT_MANY etc: rest[0] is the array of items,
             // and it replaces the whole collection.
-            const itemArray = childStore.upsert(rest[0]);
+            const itemArray = childStore.upsertAnswer(rest[0]);
             const idArray = itemArray.map((childItem) => childItem[childIdKey]);
             idArraySignal.value = idArray;
             return [ownerId, idArray];
@@ -26118,8 +26881,8 @@ const createResource = (
           // GET, POST, PUT, PATCH: rest may be [props] or [oldId, props] for renames
           const childItem =
             rest.length > 1
-              ? childStore.upsert(...rest)
-              : childStore.upsert(rest[0]);
+              ? childStore.upsertAnswer(...rest)
+              : childStore.upsertAnswer(rest[0]);
           return [ownerId, childItem[childIdKey]];
         },
         valueToData: (value) => {
@@ -26255,8 +27018,8 @@ const createRestActionFactoryForRoot = (
             // An array result is [property, value, props] — used to rename the
             // idKey of an item: store.upsert("name", "currentName", { name: "newName" })
             const item = Array.isArray(result)
-              ? store.upsert(...result)
-              : store.upsert(result);
+              ? store.upsertAnswer(...result)
+              : store.upsertAnswer(result);
             return item[idKey];
           };
     const throwInvalidResult = createInvalidResultThrower(
@@ -26320,7 +27083,7 @@ const createRestActionFactoryForRoot = (
       verb === "DELETE"
         ? (idOrMutableIdArray) => store.drop(idOrMutableIdArray)
         : (dataArray) => {
-            const itemArray = store.upsert(dataArray);
+            const itemArray = store.upsertAnswer(dataArray);
             return itemArray.map((item) => item[idKey]);
           };
 
@@ -26449,14 +27212,17 @@ ${relationLabel} source location: ${declarationSite}`,
 // array of child props/ids, or anything else meaning "empty") into an array of
 // child ids, upserting each entry into the child store. The id array signal is
 // only touched when the resulting ids actually differ.
+// Returns whether the children the row points to changed — what the store asks
+// a relation (see assign in array_signal_store.js).
 const createChildIdArrayUpdater = (childStore, childIdKey, idArraySignal) => {
   return (valueArray) => {
     const currentIdArray = idArraySignal.peek();
     if (!Array.isArray(valueArray)) {
       if (currentIdArray.length > 0) {
         idArraySignal.value = [];
+        return true;
       }
-      return;
+      return false;
     }
     const idArray = [];
     let modified = false;
@@ -26478,7 +27244,9 @@ const createChildIdArrayUpdater = (childStore, childIdKey, idArraySignal) => {
     }
     if (modified || currentIdArray.length !== idArray.length) {
       idArraySignal.value = idArray;
+      return true;
     }
+    return false;
   };
 };
 
@@ -26896,6 +27664,24 @@ const TYPE_CONVERTERS = {
   },
 };
 
+/**
+ * What a component can learn about the page it is rendered in, from the route
+ * container rendering that page (see useContentKeepingLeavingPages in
+ * route.jsx). `null` outside of any route container.
+ *
+ * - `isShown()` — whether the container would still show the page. False as
+ *   soon as the address leads elsewhere: the page is about to be taken down, or
+ *   hidden until the route transition leaving it is over, and nothing it reads
+ *   is worth a render any more. False for good once it is kept while leaving: a
+ *   return to its route mounts the page anew. Asked outside any render — by a
+ *   subscription deciding whether to re-render — and it reads the routes
+ *   untracked, so asking subscribes nobody to them.
+ * - `leavingSignal` — true once the page is hidden and kept while its movement
+ *   plays: still mounted, so what it fills outside its own nodes (a slot in a
+ *   bar) steps out rather than showing with the page arriving.
+ */
+const RoutePageContext = createContext(null);
+
 const promiseStateWeakMap = new WeakMap();
 const usePromiseAsyncData = (
   promise,
@@ -27031,12 +27817,39 @@ const useActionAsyncData = (action, {
   // has already processed the settlement and the detached DOM is discarded.
   const runningState = action.runningStateSignal.peek();
   const [, setTick] = useState(0);
+  const routePage = useContext(RoutePageContext);
   useEffect(() => {
+    let stopOwingRender = null;
+    const rerender = () => {
+      // Not for a page the address has left: it is about to be taken down,
+      // or hidden until the route transition leaving it is over, and its
+      // route's action moving as that route stops matching would re-render
+      // the whole page — inside the transition's update callback, where
+      // every render delays the movement (see route_page_context.js).
+      if (routePage && !routePage.isShown()) {
+        // Owed rather than dropped: the address can come back before the
+        // container renders (a redirect straight back), and the page then
+        // stays on screen with what it read last.
+        if (!stopOwingRender) {
+          stopOwingRender = observeRouteRender(() => {
+            if (routePage.isShown()) {
+              rerender();
+            }
+          });
+        }
+        return;
+      }
+      if (stopOwingRender) {
+        stopOwingRender();
+        stopOwingRender = null;
+      }
+      setTick(n => n + 1);
+    };
     const unsubscribeFromRunningState = action.runningStateSignal.subscribe(state => {
       if (state === RUNNING) {
         dismissedActionWeakSet.delete(action);
       }
-      setTick(n => n + 1);
+      rerender();
     });
     // The data does not come from this action's runs alone: dataSignal is a
     // computed over the resource store, so an other action writing that store
@@ -27050,7 +27863,7 @@ const useActionAsyncData = (action, {
         dataNotificationIsInitial = false;
         return;
       }
-      setTick(n => n + 1);
+      rerender();
     });
     // The params say WHICH question this is, and this hook reads them: to know
     // there is nothing to ask for, and to start the run it owns. A binding
@@ -27063,7 +27876,7 @@ const useActionAsyncData = (action, {
         paramsNotificationIsInitial = false;
         return;
       }
-      setTick(n => n + 1);
+      rerender();
     });
     // A debounced binding waits before it retargets, so nothing above changes
     // while the delay runs — but what is on screen is already out of date.
@@ -27073,18 +27886,21 @@ const useActionAsyncData = (action, {
         settlingNotificationIsInitial = false;
         return;
       }
-      setTick(n => n + 1);
+      rerender();
     });
     return () => {
       unsubscribeFromRunningState();
       unsubscribeFromData();
       unsubscribeFromParams();
       unsubscribeFromParamsSettling();
+      if (stopOwingRender) {
+        stopOwingRender();
+      }
     };
     // Bound to the action, not to the mount: params given as a plain object
     // make another action instance, and the component would otherwise stay
     // subscribed to the state of the one it no longer reads.
-  }, [action]);
+  }, [action, routePage]);
 
   // The params moved and the run has not started: under a debounce the action
   // is still the previous one, COMPLETED with the previous answer. There is no
@@ -31185,13 +32001,6 @@ const keepLeavingPages = () => {
     hold.containers.clear();
   };
 };
-
-// What a page can learn about its place from the container rendering it:
-// whether it is a page kept while leaving (see keepLeavingPages). Such a page
-// is still mounted, and whatever it fills OUTSIDE its own nodes — a slot in a
-// bar, say — would otherwise go on showing with the page arriving (see
-// layout/slot.jsx).
-const RoutePageContext = createContext(null);
 const LEAVING_ATTRIBUTE = "data-navi-route-leaving";
 const css$13 = /* css */`[data-navi-route-leaving] {
   display: none !important;
@@ -31316,7 +32125,21 @@ const RouteContainer = ({
     shownBranchRef.current = activeBranch;
   }
   const branch = shownBranchRef.current || activeBranch;
-  const content = useContentKeepingLeavingPages(branch);
+  // What this container would show if it rendered now, by the same rule as
+  // the render above — asked from outside any render (see isShown below).
+  const childrenRef = useRef(null);
+  childrenRef.current = children;
+  const readShownBranchRef = useRef(null);
+  if (!readShownBranchRef.current) {
+    readShownBranchRef.current = () => {
+      if (routeRenderFrozen) {
+        return shownBranchRef.current;
+      }
+      return collectBranches(childrenRef.current).activeBranch;
+    };
+  }
+  const parentPage = useContext(RoutePageContext);
+  const content = useContentKeepingLeavingPages(branch, readShownBranchRef.current, parentPage);
 
   // The two things this component knows that nobody outside can find out: the
   // pages a named fallback is the absence of — the children it was written
@@ -31353,7 +32176,7 @@ const RouteContainer = ({
 // page being left must stay the child it was when a page is added beside it,
 // or Preact takes it down and builds it again.
 let leavingKeyCount = 0;
-const useContentKeepingLeavingPages = branch => {
+const useContentKeepingLeavingPages = (branch, readShownBranch, parentPage) => {
   const [, rerender] = useReducer(countRenders, 0);
   const shownRef = useRef(null);
   const leavingRef = useRef([]);
@@ -31371,6 +32194,7 @@ const useContentKeepingLeavingPages = branch => {
     // of reach — the page arriving could not even take the focus — for as long
     // as it is open, and one in a page kept while leaving stays open for the
     // whole movement. The page is then taken down at once, as without one.
+    shown.page.left = true;
     leavingRef.current.push({
       vnode: shown.vnode,
       page: shown.page,
@@ -31387,10 +32211,11 @@ const useContentKeepingLeavingPages = branch => {
   let vnode = null;
   if (branch) {
     if (!page) {
-      page = {
-        leavingSignal: signal(false)
-      };
+      page = createRoutePage(readShownBranch, parentPage);
     }
+    // A page carried over follows the branch it is now the page of.
+    page.branchId = branch.id;
+    page.element = element;
     vnode = h(RoutePageContext.Provider, {
       key,
       value: page
@@ -31457,6 +32282,33 @@ const useContentKeepingLeavingPages = branch => {
   return children;
 };
 const countRenders = count => count + 1;
+// The page a container renders, as RoutePageContext hands it over (see
+// route_page_context.js). Shown while the container would pick its branch, or
+// a branch rendering the same element (it is then carried over), and while the
+// page it sits in is shown itself. Never again once kept while leaving: coming
+// back to its route mounts the page anew.
+const createRoutePage = (readShownBranch, parentPage) => {
+  const page = {
+    branchId: null,
+    element: undefined,
+    left: false,
+    leavingSignal: signal(false),
+    isShown: () => {
+      if (page.left) {
+        return false;
+      }
+      if (parentPage && !parentPage.isShown()) {
+        return false;
+      }
+      const shownBranch = untracked(readShownBranch);
+      if (!shownBranch) {
+        return false;
+      }
+      return shownBranch.id === page.branchId || branchElement(shownBranch) === page.element;
+    }
+  };
+  return page;
+};
 // What Preact compares when a container changes page, below the <Route> it
 // renders either way: the element the page is rendered with — a layout, for a
 // container branch.
@@ -38052,504 +38904,6 @@ const flushSyncRendering = (fn) => {
   }
 };
 
-/**
- * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
- * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
- * of which of the two owns it.
- */
-
-
-/**
- * Whether a visibleRectEffect delivery is one that can have taken height away
- * from a popup, and so pushed whatever holds focus out of sight:
- * - "resize": the window/visual viewport settled — which is also how the
- *   on-screen keyboard arrives, overlay or not (window_size.js);
- * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
- * - "focusin": the focus-settled re-measure, for the room that changes with
- *   nothing announcing it (subscribeFocusSettled in window_size.js).
- *
- * Everything else is a scroll of one kind or another, where nothing got
- * smaller and scrolling the focused element back would fight the very gesture
- * that fired it.
- */
-const mayHaveHiddenFocus = (event) => {
-  const type = event?.type;
-  return (
-    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
-  );
-};
-
-const scrollportHeightMap = new WeakMap();
-/**
- * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
- * getting shorter has pushed it out.
- *
- * The case this exists for: a field low in the scrolling body of a popup that
- * also has a footer (box.jsx — with a body, the body is the only thing that
- * scrolls and the footer is a sibling sitting right under it). Focusing the
- * field makes the browser scroll it into view, which it does against the
- * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
- * that height away. The body shrinks, its scrollTop does not move, so the
- * content slides down relative to the shorter scrollport and the field ends up
- * past its bottom edge — visually, swallowed by the footer. The browser does
- * not redo a scroll-into-view it already answered, so this does.
- *
- * Only what the shrink itself hid, though: with the keyboard up the user reads
- * the rest of the popup by scrolling the field away — to reach the submit under
- * it, typically — and the room keeps changing while they do (a keyboard settling
- * in two steps, a suggestion strip, a browser bar). Answering each of those by
- * scrolling the field back takes the popup away from wherever they had just
- * scrolled it, over and over: what they were reading cannot be reached at all
- * without blurring the field first, and the popup reads as unscrollable. So the
- * field is brought back only when it was in view before the room shrank, which
- * one remembered number answers: a resize moves neither scrollTop nor the
- * element's offset inside the scrolled content, so measuring against the height
- * the scrollport HAD is measuring the state before the change.
- *
- * Scoped to the field's own scroll container (never the page): a popup traps
- * scrolling precisely so the document underneath cannot move, and a plain
- * scrollIntoView walks past a container whose scrollbar isn't visible — see
- * scrollIntoViewScoped's own doc.
- *
- * "nearest": the smallest scroll that makes it visible, and none at all when it
- * already is. Where it lands is the container's own business — a navi scroller
- * keeps a band free at its edges so a field never comes back glued to one (see
- * scroll-padding in box.jsx).
- */
-const keepFocusedElementVisible = (popupEl) => {
-  const { activeElement } = document;
-  if (!activeElement || activeElement === popupEl) {
-    return;
-  }
-  if (!popupEl.contains(activeElement)) {
-    return;
-  }
-  const scrollContainer = getScrollContainer(activeElement);
-  if (!scrollContainer || !popupEl.contains(scrollContainer)) {
-    // What scrolls the field is outside the popup, which means the page: a
-    // popup holds it still on purpose (trapScrollInside), so there is nothing
-    // here to scroll back.
-    return;
-  }
-  const scrollportHeight = scrollContainer.clientHeight;
-  const scrollportHeightBefore = scrollportHeightMap.get(scrollContainer);
-  scrollportHeightMap.set(scrollContainer, scrollportHeight);
-  if (scrollportHeightBefore !== undefined) {
-    if (scrollportHeight >= scrollportHeightBefore) {
-      // Nothing was taken away, so nothing was hidden by this.
-      return;
-    }
-    if (
-      !isVisibleInScrollport(
-        activeElement,
-        scrollContainer,
-        scrollportHeightBefore,
-      )
-    ) {
-      return;
-    }
-  }
-  scrollIntoViewScoped(activeElement, {
-    container: scrollContainer,
-    block: "nearest",
-  });
-};
-
-// Whether any part of `el` was showing in `container` back when its scrollport
-// was `scrollportHeight` tall. Both boxes are read now: the container may have
-// moved as well as shrunk (a centered dialog re-centers itself), and the
-// difference between the two tops is what that move leaves alone.
-const isVisibleInScrollport = (el, container, scrollportHeight) => {
-  const elRect = el.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const elTop = elRect.top - containerRect.top + container.scrollTop;
-  const elBottom = elTop + elRect.height;
-  const scrollportTop = container.scrollTop;
-  const scrollportBottom = scrollportTop + scrollportHeight;
-  return elBottom > scrollportTop && elTop < scrollportBottom;
-};
-
-/**
- * Calls `onSettled` once `el`'s current CSS transition is over — via
- * `transitionend`, with a safety `setTimeout` fallback matching the longest
- * `transition-duration`, in case nothing actually transitions or an event is
- * missed.
- *
- * Returns a "cancel" function, so a caller whose instance has been superseded
- * (a fresh open/close about to set its own state) can keep this stale one from
- * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
- * did up front is that fresh call's business, not this one's.
- */
-const whenTransitionSettles = (el, onSettled) => {
-  let settled = false;
-  const onTransitionEnd = (transitionEvent) => {
-    if (transitionEvent.target === el) {
-      finish();
-    }
-  };
-  const stopWatching = () => {
-    settled = true;
-    el.removeEventListener("transitionend", onTransitionEnd);
-    clearTimeout(safetyTimeoutId);
-  };
-  const finish = () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
-    onSettled();
-  };
-  el.addEventListener("transitionend", onTransitionEnd);
-  const durationsInSeconds = getComputedStyle(el)
-    .transitionDuration.split(",")
-    .map((value) => parseFloat(value) || 0);
-  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
-  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
-  return () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
-  };
-};
-
-/**
- * Drops the document's text selection when it lives inside `el`, leaving a
- * selection made elsewhere on the page alone.
- *
- * A popup being closed takes its content with it, and a selection is a claim
- * on content the user can still act on: kept, it would outlive the surface it
- * was made on — painted on the box for the length of its exit transition, with
- * the handles and the copy toolbar a phone draws from the live selection
- * hanging over something that is going away — and reappear with the box on
- * the next opening. Dropping the selection is the only way to remove that
- * chrome: a `user-select: none` on the closing box hides the highlight in some
- * browsers only, and the handles are the browser's own, drawn from the
- * selection object rather than from any style.
- */
-const clearTextSelectionInside = (el) => {
-  const selection = window.getSelection();
-  if (!selection || selection.rangeCount === 0) {
-    return;
-  }
-  const range = selection.getRangeAt(0);
-  if (!el.contains(range.commonAncestorContainer)) {
-    return;
-  }
-  selection.removeAllRanges();
-};
-
-/**
- * Disables pointer-events on `el` until its current CSS transition settles —
- * avoids the cursor changing/something becoming clickable while the popup is
- * still visually moving into or out of place.
- *
- * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
- * pointer-events, since a fresh call for the next open/close is about to set
- * its own state.
- */
-const suppressPointerEventsDuringTransition = (el) => {
-  el.style.pointerEvents = "none";
-  return whenTransitionSettles(el, () => {
-    el.style.pointerEvents = "";
-  });
-};
-
-/**
- * Hides the backdrop, deferring until the browser's matching "click" fires
- * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
- * comment for why) — same capture-phase-on-document pattern as
- * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
- * can't safely replace: mouseup (and the click that follows it) can land an
- * arbitrarily long time after mousedown (the user is still holding the
- * button down), so a short timeout can fire first and hide the backdrop
- * before its own click ever arrives. A capture-phase listener on document
- * fires for every click regardless of what any bubble-phase handler does
- * downstream, so no fallback timer is needed.
- *
- * `hide` is the caller's own way to actually hide the backdrop
- * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
- * for a plain div) — this helper only owns the mousedown/click timing.
- *
- * Returns a disarm function (or undefined if hidden immediately), so a
- * fresh open can cancel a pending hide it's about to make redundant.
- */
-const armPointerDownOutsideClose = (closeEvent, hide) => {
-  const mousedownEvent = findEvent(closeEvent, "mousedown");
-  if (!mousedownEvent) {
-    hide();
-    return undefined;
-  }
-  const onClick = () => {
-    document.removeEventListener("click", onClick, { capture: true });
-    hide();
-  };
-  document.addEventListener("click", onClick, { capture: true });
-  return () => {
-    document.removeEventListener("click", onClick, { capture: true });
-  };
-};
-
-/**
- * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
- * `prefix` plus a direction word), or `null` if both axes overlap the anchor
- * (no direction at all — that's `resolvedAnimationKind === "scaling"`
- * territory instead, see resolveAutoAnimationKind below).
- *
- * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
- * when docked) keeps the word as the compass direction the popup comes
- * from: placed "top" (a point/corner), it slides in from the top.
- * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
- * direction instead, the opposite compass point: placed "top" of the
- * anchor, it moves/grows up, away from the anchor (which sits below it).
- *
- * "inset-*"/"center" contribute no direction on their axis either way.
- */
-const resolveDirectionValue = (y, x, { prefix }) => {
-  const yWord =
-    y === "top"
-      ? prefix === "expand"
-        ? "up"
-        : "top"
-      : y === "bottom"
-        ? prefix === "expand"
-          ? "down"
-          : "bottom"
-        : null;
-  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
-  if (!yWord && !xWord) {
-    return null;
-  }
-  return yWord && xWord
-    ? `${prefix}-${yWord}-${xWord}`
-    : `${prefix}-${yWord || xWord}`;
-};
-
-/**
- * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
- * — picked for any real anchor, or for a point/corner placed dead-center
- * (both positionArea axes overlapping — there's no sensible direction to
- * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
- * for any no-anchor/docked case (Dialog always, Popover's own custom
- * renderer when there's no real anchor), so this collapses to "scaling"
- * there only for the dead-center case, "sliding" otherwise. The two
- * "overlapping" booleans below describe the *positionArea* itself (a bare
- * word vs. "inset-"/"center"), not anything about the anchor — they'd
- * mean exactly the same thing even with no anchor at all, since it's the
- * position strategy, not the anchor, that decides whether there's a
- * direction to slide from.
- */
-const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
-  const yIsOverlapping =
-    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
-  const xIsOverlapping =
-    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
-  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
-};
-
-/**
- * A popup reads "outside" from its own border box: what a press lands on
- * decides nothing on its own (a genuine backdrop press and a press on the
- * popup's padding both report the popup element as their target, there being
- * no real ::backdrop node to be one), so the rectangle is what tells them
- * apart. That holds as long as the box and what the popup paints are the same
- * thing — which stops being true for a popup with no surface of its own
- * (`backgroundColor="transparent"`, no shadow, no padding): what the eye reads
- * as backdrop is then inside the box, and a press there stays a press on the
- * popup.
- *
- * `data-navi-popup-outside` is how a caller says which of its own boxes are
- * not the surface. It is opt-in because navi cannot infer it — a background
- * can come from anywhere — while the caller who made the popup see-through
- * knows exactly which box is decoration and which is paper.
- *
- * The marker answers for the element it is on, never for its descendants: a
- * box painted inside a marked one is still surface, so a row can be marked and
- * its empty halves read as backdrop while presses on the controls it holds do
- * not dismiss anything. A descendant with `pointer-events: none` never becomes
- * a press target at all, so the marked box answers in its place — while the
- * same declaration on the marked box itself takes it out of hit-testing and
- * makes the marker unreachable (see warnAboutUnreachableOutsideRegions).
- */
-const OUTSIDE_REGION_ATTRIBUTE = "data-navi-popup-outside";
-
-/**
- * `data-navi-popup-inside` is the other direction: a box of the PAGE the
- * caller says belongs to a popup, so a press on it is not outside that popup
- * even though it lies beyond the border box — a card whose press is what
- * fills the one panel of a board. Its value names the popup by `id`, the way
- * `commandfor` does (several ids, space separated), because the exemption is
- * one popup's: a menu open beside the board still closes on the same press.
- *
- * Unlike the outside marker it answers for its whole subtree: the outside
- * marker carves free space out of a surface whose controls stay surface, this
- * one adds a whole thing — the card, its count, its buttons — to the popup's
- * own ground, and nothing in it is a dismissal.
- */
-const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
-
-/**
- * What a press landing on a region the caller declared as not-its-surface
- * does: exactly what the same press on the backdrop would do.
- *
- * Lives on the popup's own content element rather than in the backdrop's
- * handler, for both renderers: the backdrop is a sibling behind the popup
- * (never an ancestor), so a press inside the popup's box never reaches it.
- */
-const handlePressOnOutsideRegion = (
-  mouseDownEvent,
-  { popupEl, openController, pressOutside },
-) => {
-  if (mouseDownEvent.button !== 0) {
-    return;
-  }
-  const { target } = mouseDownEvent;
-  if (!target.hasAttribute(OUTSIDE_REGION_ATTRIBUTE)) {
-    return;
-  }
-  if (openedDuringThisPress(openController)) {
-    // The release of the press that opened it is not somebody dismissing it
-    // (see openedDuringThisPress).
-    return;
-  }
-  // A popup opens inside its opener's own subtree, so a press on a region
-  // belonging to a popup nested in this one bubbles through here too — and it
-  // is a press on what is in front, not on this popup's own decoration.
-  if (
-    target.closest(`[navi-control="dialog"], [navi-control="popover"]`) !==
-    popupEl
-  ) {
-    return;
-  }
-  if (pressOutside === "capture") {
-    mouseDownEvent.preventDefault();
-    return;
-  }
-  if (pressOutside === "close" || pressOutside === "cancel") {
-    openController.requestClose(mouseDownEvent, {
-      isCancel: pressOutside === "cancel",
-    });
-  }
-};
-
-/**
- * Hears an outside press from the document itself, for a popup with no
- * backdrop of its own to catch one: a modal `<dialog>` (whose native
- * `::backdrop` dispatches nothing a handler can be put on) and any popup the
- * caller asked to leave the page reachable (`backdrop={false}`).
- *
- * The press is read and never taken: no `preventDefault`, no
- * `stopPropagation`, and the listener is on `document` rather than on
- * anything covering the page — so what the press landed on hears it too, in
- * the same gesture, and the popup only takes note. That is the whole point of
- * a popup with no wall: a press outside is a press on the page, and the page
- * answers it. The one popup where that cannot hold is the modal dialog, where
- * the browser has already made everything behind inert before this runs.
- *
- * `pressEventType` says which event IS the press, and the two callers want
- * opposite ones:
- *
- * - `"pointerdown"` for a popup with no wall: a page with no wall over it is
- *   a page whose own elements arbitrate their presses, and cancelling a
- *   `pointerdown` — what a drag source and a control keeping the focus where
- *   it is both do — suppresses every compatibility mouse event that would have
- *   followed it. The press happens, reaches its target, and no `mousedown` is
- *   ever dispatched for it. Reading the pointer event is reading the press
- *   itself, whatever anything does with it afterwards, and it is the same
- *   event the drag and surface detectors read.
- * - `"mousedown"` for the modal dialog, whose native `::backdrop` exists to
- *   spend the press. The page's controls act on `mousedown`, and on a touch
- *   screen that is not the same moment as `pointerdown`: the compatibility
- *   mouse events are synthesized at `touchend` and hit-tested again then.
- *   Closing on `pointerdown` takes the `::backdrop` away before that second
- *   hit-test, so the `mousedown` lands on whatever the page holds under the
- *   finger, and one tap both dismisses the dialog and presses the page. Read
- *   on `mousedown`, the wall is still up when the press the page acts on is
- *   aimed, and it catches it. Nothing behind a modal wall can cancel that
- *   press, since nothing behind it hears the `pointerdown` at all.
- *
- * Capture phase, so a handler downstream that stops propagation cannot keep
- * the popup open either — the press is still outside whatever is made of it.
- *
- * Returns a cleanup that removes the listener.
- */
-const armOutsidePressClose = (
-  popupEl,
-  { openController, pressOutside, pressEventType = "pointerdown" },
-) => {
-  const onDocumentPointerDown = (pointerDownEvent) => {
-    if (pointerDownEvent.button !== 0) {
-      return;
-    }
-    if (openedDuringThisPress(openController)) {
-      // The release of the press that opened it is not somebody dismissing it
-      // (see openedDuringThisPress).
-      return;
-    }
-    // The press landed inside another popup: that is a press on what is in
-    // front, not outside. Asking the target where it lives rather than asking
-    // this popup whether it was pushed — a popup in front does not have to be
-    // one this popup knows about. In front means neither inside nor around: a
-    // popup nested in this one falls to the containment check below as the
-    // inside press it is, and one this popup opened INSIDE (a bubble rendered
-    // in a sheet's content) is around it, so what that popup holds is outside
-    // this one exactly like the rest of the page.
-    const popupUnderPointer = pointerDownEvent.target.closest?.(
-      `[navi-control="dialog"], [navi-control="popover"]`,
-    );
-    if (
-      popupUnderPointer &&
-      popupUnderPointer !== popupEl &&
-      !popupEl.contains(popupUnderPointer) &&
-      !popupUnderPointer.contains(popupEl)
-    ) {
-      return;
-    }
-    if (
-      popupEl.id &&
-      pointerDownEvent.target.closest?.(
-        `[${INSIDE_ATTRIBUTE}~="${CSS.escape(popupEl.id)}"]`,
-      )
-    ) {
-      return;
-    }
-    // Real DOM containment wins over the rectangle below — an element
-    // genuinely inside the popup (`overflow: visible`, a negative margin, an
-    // absolutely-positioned child) can be painted outside its border box, and
-    // a press there is not outside just because its coordinates are. The
-    // popup element itself is excluded (contains() answers true for it): a
-    // press on a modal dialog's native backdrop reports the dialog as its
-    // target, there being no `::backdrop` node to be one, so treating that as
-    // contained would keep the rectangle from ever running.
-    if (
-      pointerDownEvent.target !== popupEl &&
-      popupEl.contains(pointerDownEvent.target)
-    ) {
-      return;
-    }
-    const rect = popupEl.getBoundingClientRect();
-    const isOutside =
-      pointerDownEvent.clientX < rect.left ||
-      pointerDownEvent.clientX > rect.right ||
-      pointerDownEvent.clientY < rect.top ||
-      pointerDownEvent.clientY > rect.bottom;
-    if (!isOutside) {
-      return;
-    }
-    openController.requestClose(pointerDownEvent, {
-      isCancel: pressOutside === "cancel",
-    });
-  };
-  document.addEventListener(pressEventType, onDocumentPointerDown, {
-    capture: true,
-  });
-  return () => {
-    document.removeEventListener(pressEventType, onDocumentPointerDown, {
-      capture: true,
-    });
-  };
-};
-
 /**
  * When a popup builds what it holds, and when it throws it away.
  *
@@ -65539,6 +65893,13 @@ const css$D = /* css */`
  *   is a `Popover`-level answer only for `"close"`/`"cancel"`; `"capture"` has
  *   nothing left to absorb without a wall, and `"ignore"` renders no wall anyway.
  *   See docs/popup_backdrop.md.
+ * @param {string} [props.group] - The popover's peers: the triggers carrying
+ *   `data-navi-popup-group` with this name. A press on one, while the popover
+ *   is open, closes it and opens the peer's popup in that same press — a
+ *   menu bar, where pressing another menu switches to it. The wall still
+ *   takes the press (the page behind stays out of reach, hover included) and
+ *   hands its click to the peer it covered. Without a wall there is nothing
+ *   to ask: the press reaches the peer on its own.
  * @param {"close"|"cancel"|"capture"|"ignore"} [props.pressOutside="ignore"]
  *   - `"ignore"` (default): no backdrop at all, outside presses pass straight
  *   through. `"close"` closes the popover on an outside press, `"cancel"`
@@ -65913,6 +66274,7 @@ const usePopoverProps = props => {
     // which is a sibling element (see this file's top comment).
     backdropColor,
     backdropFilter,
+    group,
     scrollCapture,
     focusCapture,
     // "auto" (default) → the popover follows its content. "frozen" → measured
@@ -66558,13 +66920,21 @@ const usePopoverProps = props => {
       }
       if (backdropEl) {
         backdropEl.setAttribute("aria-expanded", "false");
-        disarmBackdropHideRef.current = armPointerDownOutsideClose(closeEvent, () => {
+        disarmBackdropHideRef.current = armPointerDownOutsideClose(closeEvent, clickEvent => {
           // Set regardless of isTopLayer — see openEffect's own identical
           // comment for why hidePopover() alone isn't reliably sufficient.
           backdropEl.setAttribute("navi-hidden", "");
           if (isTopLayer) {
             backdropEl.hidePopover();
           }
+          if (group && clickEvent) {
+            handWallClickToPeer(clickEvent, {
+              wallEl: backdropEl,
+              popupEl: popoverEl,
+              anchorEl: anchorElement,
+              group
+            });
+          }
         });
       }
       restoreFocus?.(closeEvent);
@@ -66986,6 +67356,10 @@ const Popup = props => {
     scrollCapture,
     positionAreaFixed,
     positionAreaWhenAnchorIsInvalid,
+    // A top-layer dialog's wall is its native ::backdrop, which goes with the
+    // dialog on the press that closes it: no click is left on it to hand to a
+    // peer (see handWallClickToPeer).
+    group,
     // Dialog-only, destructured out for the same reason: forwarded below only
     // in the dialog branch, so they never reach the popover element.
     dockedOnSmallTouchScreen,
@@ -67035,6 +67409,7 @@ const Popup = props => {
     positionAreaWhenAnchorIsInvalid: positionAreaWhenAnchorIsInvalid,
     scrollCapture: scrollCapture === "popover" || scrollCapture,
     positionAreaFixed: positionAreaFixed,
+    group: group,
     className: withPropsClassName("navi_popup", className),
     expand: expand,
     expandX: expandX,
@@ -67938,13 +68313,18 @@ const PickerContentInsidePopup = props => {
     calloutIcon,
     calloutCloseButton,
     calloutCloseByScroll,
+    popupGroup,
     ...rest
   } = props;
   const isPopover = mode === "popover";
   const isCallout = mode === "callout";
   return jsx(Next, {
     "aria-haspopup": isPopover ? "listbox" : "dialog",
-    "navi-popover-mode": isPopover ? popoverMode : undefined,
+    "navi-popover-mode": isPopover ? popoverMode : undefined
+    // On the trigger, whatever the mode: a peer's popup reads it off the
+    // press that lands here (see `group` in callout.js).
+    ,
+    "data-navi-popup-group": popupGroup,
     ...rest,
     // On popupProps already (see the picker's popup assembly); they mean
     // nothing to the picker element.
@@ -67980,7 +68360,12 @@ const PickerContentInsidePopup = props => {
       status: calloutStatus,
       icon: calloutIcon,
       closeButton: calloutCloseButton,
-      closeByScroll: calloutCloseByScroll,
+      closeByScroll: calloutCloseByScroll
+      // Left unsaid, the callout's own default: no backdrop. It dims
+      // nothing, so the page looks as pressable as it did before.
+      ,
+      backdrop: backdrop,
+      group: popupGroup,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -68017,6 +68402,7 @@ const PickerContentInsidePopup = props => {
       backdropVariant: backdropVariant,
       backdropColor: backdropColor,
       backdropFilter: backdropFilter,
+      group: popupGroup,
       focusCapture: isPopover ? focusCapture : undefined,
       expand: isPopover ? undefined : dialogExpand,
       expandX: isPopover ? undefined : dialogExpandX,
@@ -68076,6 +68462,8 @@ const PickerCalloutPopup = ({
   icon,
   closeButton,
   closeByScroll,
+  backdrop,
+  group,
   onnavi_request_open,
   onnavi_request_close,
   onnavi_request_confirm,
@@ -68117,6 +68505,8 @@ const PickerCalloutPopup = ({
       icon,
       closeButton,
       closeByScroll,
+      backdrop,
+      group,
       anchorElement,
       // The request, chained to the press that made it: the callout reads the
       // mousedown off it to wait for the release before listening for a click
@@ -70283,7 +70673,13 @@ const ListRowContext = createContext(null);
 // row takes its place in the collection by slot: the place is then the list's
 // to move, and the row's to follow — see list_rows.js.
 const ListSlotContext = createContext(null);
-const css$x = /* css */`@layer navi {
+const css$x = /* css */`@property --list-group-label-height {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer navi {
   .navi_list_container {
     --list-outline-width: 1px;
     --list-border-radius: 4px;
@@ -70682,6 +71078,7 @@ const css$x = /* css */`@layer navi {
   }
 
   & .navi_list_item_group_list {
+    --list-group-label-height: inherit;
     flex-direction: column;
     width: 100%;
     margin: 0;
@@ -70689,8 +71086,12 @@ const css$x = /* css */`@layer navi {
     list-style: none;
     display: flex;
 
+    & > .navi_list_item {
+      --list-group-label-height: inherit;
+    }
+
     & .navi_list_item {
-      scroll-margin-top: calc(var(--x-list-scroll-spacing-top) + var(--list-group-label-height, 0px));
+      scroll-margin-top: calc(var(--x-list-scroll-spacing-top) + var(--list-group-label-height));
     }
   }