@jsenv/navi 0.29.416 → 0.29.418

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";
@@ -10826,6 +10826,28 @@ const suspendScrollRecording = () => {
   };
 };
 
+// A list scrolling the document that opens on a row puts the document where
+// that row is, by measuring it (see placeWhereHeld in list.jsx). The offset kept
+// for the url is pixels of the page as it was drawn — and a list draws a window
+// of its rows and holds the room of the others with fillers of an estimated
+// height, so the same pixels now fall on other rows. Put back after the list
+// has placed itself, they would undo it, in the very picture a route transition
+// takes. So the list holds the document while it is placing itself, and the
+// url's offset is not put back meanwhile. Counted: two lists can share one
+// document.
+let documentHoldCount = 0;
+const holdDocumentScroll = () => {
+  documentHoldCount++;
+  let released = false;
+  return () => {
+    if (released) {
+      return;
+    }
+    released = true;
+    documentHoldCount--;
+  };
+};
+
 let installed = false;
 const installScrollRestoration = () => {
   if (installed) {
@@ -10860,6 +10882,9 @@ const installScrollRestoration = () => {
   if (positionOnLoad && (positionOnLoad.x || positionOnLoad.y)) {
     const stopListening = observeRouteRender(() => {
       stopListening();
+      if (documentHoldCount) {
+        return;
+      }
       scrollTo(positionOnLoad);
     });
   }
@@ -10874,6 +10899,11 @@ const restoreScrollPosition = (url) => {
   if (!position) {
     return false;
   }
+  if (documentHoldCount) {
+    // There is a place to go back to, and the list holding the document is
+    // putting it back (see holdDocumentScroll).
+    return true;
+  }
   scrollTo(position);
   return true;
 };
@@ -15246,230 +15276,814 @@ const useOpenControllerByProps = (props, name) => {
 };
 
 /**
- * Typography reset shared by the surfaces a control opens: callout, popover,
- * dialog.
+ * 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).
  *
- * A surface is painted on top of the page but lives in the DOM subtree of the
- * element it opens from, so every inherited text property of that element
- * reaches it. The ink an element chose for its own background — centered,
- * shadowed, uppercase, letter-spaced, kept on one line — arrives on paper that
- * has none of that background, and the caller discovers it as a symptom
- * (a blurred tooltip, a centered message) with nothing on screen pointing back
- * to the rule three elements up. A surface writes its own text, on its own
- * paper, in the document's terms.
+ * 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.
  *
- * Every one of them is set to its initial value rather than `revert`: only
- * `color` and `background-color` are declared by the UA on a `[popover]`/
- * `<dialog>`, so `revert` on any of these would roll back to the inherited
- * value — the very thing to stop. `text-align: initial` is `start`, which
- * still reads the surface's own `direction`, so an RTL document keeps its
- * side.
+ * 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.
  *
- * `font-family` is deliberately absent: a surface keeps the face of what
- * opened it, so a section written in a display font gets its tooltips in that
- * font. `color`, `font-size` and `font-weight` are absent too — each surface
- * answers those its own way (a popup writes in --navi-popup-color and follows
- * the size of what opened it; a callout reverts to the document's ink and
- * size).
+ * 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.
  *
- * In `@layer navi` so an app that wants one of these back says so on the
- * surface and wins, without having to out-specify anything.
+ * 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 surfaceTextCss = /* css */ `
-  @layer navi {
-    .navi_callout,
-    .navi_popover,
-    .navi_dialog {
-      font-style: initial;
-      text-align: initial;
-      text-indent: initial;
-      text-transform: initial;
-      text-shadow: none;
-      white-space: initial;
-      word-spacing: initial;
-      letter-spacing: initial;
+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;
     }
   }
-`;
-
-const CalloutContext = createContext();
-const useCalloutRequestClose = () => {
-  return useContext(CalloutContext)?.requestClose;
-};
-const useCalloutElement = () => {
-  return useContext(CalloutContext)?.element;
-};
-const renderIntoCallout = (jsx$1, calloutMessageElement, {
-  requestClose,
-  element
-}) => {
-  const calloutJsx = jsx(CalloutContext.Provider, {
-    value: {
-      requestClose,
-      element
-    },
-    children: jsx$1
+  scrollIntoViewScoped(activeElement, {
+    container: scrollContainer,
+    block: "nearest",
   });
-  render(calloutJsx, calloutMessageElement);
 };
 
-// An HTML message is rendered through preact rather than innerHTML: what a
-// message holds is then a preact tree like any other, so a callout's own JSX
-// (its context, its close button) works the same whether the message arrived
-// as markup or as elements.
-const renderHtmlIntoCallout = (html, calloutMessageElement, {
-  requestClose,
-  element
-}) => {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  renderIntoCallout(domToVNodes(template.content), calloutMessageElement, {
-    requestClose,
-    element
-  });
+// 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;
 };
 
-// Unmounts whatever preact rendered before the element is filled by hand
-// (a DOM node, an iframe); innerHTML alone would leave preact believing its
-// tree is still there.
-const clearCalloutMessage = calloutMessageElement => {
-  render(null, calloutMessageElement);
-  calloutMessageElement.innerHTML = "";
-};
-const domToVNodes = node => {
-  const vnodes = [];
-  for (const child of node.childNodes) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      vnodes.push(child.data);
-      continue;
+/**
+ * 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();
     }
-    if (child.nodeType !== Node.ELEMENT_NODE) {
-      continue;
+  };
+  const stopWatching = () => {
+    settled = true;
+    el.removeEventListener("transitionend", onTransitionEnd);
+    clearTimeout(safetyTimeoutId);
+  };
+  const finish = () => {
+    if (settled) {
+      return;
     }
-    const props = {};
-    for (const {
-      name,
-      value
-    } of child.attributes) {
-      props[name] = value;
+    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;
     }
-    vnodes.push(h(child.localName, props, ...domToVNodes(child)));
-  }
-  return vnodes;
+    stopWatching();
+  };
 };
 
-installImportMetaCssBuild(import.meta);
 /**
- * The icon a callout shows beside its message — a square in the status color
- * with the "!" glyph — drawable on its own, where the callout is not: on the
- * trigger that opens one (a picker in callout mode), so what one presses looks
- * like what it opens. The callout's own template draws from the same glyph
- * (see calloutTemplate in callout.js).
+ * 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 css$15 = /* css */`.navi_callout_status_icon {
-  --x-callout-status-icon-color: var(--navi-callout-neutral-color);
-  box-sizing: border-box;
-  aspect-ratio: 1;
-  color: #fff;
-  vertical-align: middle;
-  background-color: var(--x-callout-status-icon-color);
-  border-radius: 2px;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  width: 1em;
-  height: 1em;
-  display: inline-flex;
-
-  &[data-status="success"] {
-    --x-callout-status-icon-color: var(--navi-callout-success-color);
+const clearTextSelectionInside = (el) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return;
   }
-
-  &[data-status="info"] {
-    --x-callout-status-icon-color: var(--navi-callout-info-color);
+  const range = selection.getRangeAt(0);
+  if (!el.contains(range.commonAncestorContainer)) {
+    return;
   }
+  selection.removeAllRanges();
+};
 
-  &[data-status="warning"] {
-    --x-callout-status-icon-color: var(--navi-callout-warning-color);
-  }
+/**
+ * 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 = "";
+  });
+};
 
-  &[data-status="error"] {
-    --x-callout-status-icon-color: var(--navi-callout-error-color);
+/**
+ * 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 });
+  };
+};
 
-  &[data-shape="circle"] {
-    border-radius: 50%;
+/**
+ * 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}`;
+};
 
-  & svg {
-    width: 100%;
-    height: 100%;
-  }
-}
+/**
+ * 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";
+};
 
-.navi_icon > .navi_callout_status_icon {
-  width: 100%;
-  height: 100%;
-}
-`;
+/**
+ * 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";
 
 /**
- * The "!" on a square, viewBox and path both. The box is square and holds the
- * glyph's margin: the ink is 298 of 540 units tall (55%), centered. Drawn this
- * way rather than tight around the ink so whoever shows it can give the svg the
- * whole square — the glyph is then placed by the vector rasteriser, which has
- * no device pixel grid to miss, at any square size down to a fractional one.
+ * `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 CALLOUT_STATUS_GLYPH_VIEWBOX = "0 0 540 540";
-const CALLOUT_STATUS_GLYPH_PATH = "m232.5,121 8,196h59l8-196zm36.5,224a37,37 0 1,0 2,0z";
+const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
 
 /**
- * @type {import("ignore:preact").FunctionComponent<{
- *   status?: "info" | "warning" | "error" | "success" | "none",
- *   shape?: "square" | "circle",
- * }>}
- * @param {"info"|"warning"|"error"|"success"|"none"} [status="info"] The color
- *   — the callout's own for that status. `"none"` is the neutral one.
- * @param {"square"|"circle"} [shape="square"] Square like the callout's own
- *   icon, or a circle.
+ * `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 CalloutStatusIcon = ({
-  status = "info",
-  shape = "square"
-}) => {
-  import.meta.css = [css$15, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
-  return jsx("span", {
-    className: "navi_callout_status_icon",
-    "data-status": status === "none" ? undefined : status,
-    "data-shape": shape === "circle" ? "circle" : undefined,
-    "aria-hidden": "true",
-    children: jsx("svg", {
-      viewBox: CALLOUT_STATUS_GLYPH_VIEWBOX,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: jsx("path", {
-        fill: "currentColor",
-        d: CALLOUT_STATUS_GLYPH_PATH
-      })
-    })
-  });
+const findPopupPeer = (target, group) => {
+  if (!group || !target || typeof target.closest !== "function") {
+    return null;
+  }
+  return target.closest(`[data-navi-popup-group="${CSS.escape(group)}"]`);
 };
 
-installImportMetaCssBuild(import.meta);
-
-// Unique for the page's lifetime: a caller may write the id in a commandfor.
-let calloutCount = 0;
-
-// How far `closeByScroll: true` lets the page move under the callout before
-// dismissing it: small enough that any deliberate scroll gesture reaches it,
-// large enough to survive the pixel or two a trackpad rests on.
-const CLOSE_BY_SCROLL_DISTANCE = 10;
+/**
+ * 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));
+};
 
-const css$14 = /* css */ `
-  /* jsenv-css-opaque: same as dialog.jsx, cascade order. */
-  @layer navi {
-    .navi_callout {
-      /* A callout is parented to what it explains, so it inherits from it — and
+/**
+ * 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.
+ *
+ * A surface is painted on top of the page but lives in the DOM subtree of the
+ * element it opens from, so every inherited text property of that element
+ * reaches it. The ink an element chose for its own background — centered,
+ * shadowed, uppercase, letter-spaced, kept on one line — arrives on paper that
+ * has none of that background, and the caller discovers it as a symptom
+ * (a blurred tooltip, a centered message) with nothing on screen pointing back
+ * to the rule three elements up. A surface writes its own text, on its own
+ * paper, in the document's terms.
+ *
+ * Every one of them is set to its initial value rather than `revert`: only
+ * `color` and `background-color` are declared by the UA on a `[popover]`/
+ * `<dialog>`, so `revert` on any of these would roll back to the inherited
+ * value — the very thing to stop. `text-align: initial` is `start`, which
+ * still reads the surface's own `direction`, so an RTL document keeps its
+ * side.
+ *
+ * `font-family` is deliberately absent: a surface keeps the face of what
+ * opened it, so a section written in a display font gets its tooltips in that
+ * font. `color`, `font-size` and `font-weight` are absent too — each surface
+ * answers those its own way (a popup writes in --navi-popup-color and follows
+ * the size of what opened it; a callout reverts to the document's ink and
+ * size).
+ *
+ * In `@layer navi` so an app that wants one of these back says so on the
+ * surface and wins, without having to out-specify anything.
+ */
+const surfaceTextCss = /* css */ `
+  @layer navi {
+    .navi_callout,
+    .navi_popover,
+    .navi_dialog {
+      font-style: initial;
+      text-align: initial;
+      text-indent: initial;
+      text-transform: initial;
+      text-shadow: none;
+      white-space: initial;
+      word-spacing: initial;
+      letter-spacing: initial;
+    }
+  }
+`;
+
+const CalloutContext = createContext();
+const useCalloutRequestClose = () => {
+  return useContext(CalloutContext)?.requestClose;
+};
+const useCalloutElement = () => {
+  return useContext(CalloutContext)?.element;
+};
+const renderIntoCallout = (jsx$1, calloutMessageElement, {
+  requestClose,
+  element
+}) => {
+  const calloutJsx = jsx(CalloutContext.Provider, {
+    value: {
+      requestClose,
+      element
+    },
+    children: jsx$1
+  });
+  render(calloutJsx, calloutMessageElement);
+};
+
+// An HTML message is rendered through preact rather than innerHTML: what a
+// message holds is then a preact tree like any other, so a callout's own JSX
+// (its context, its close button) works the same whether the message arrived
+// as markup or as elements.
+const renderHtmlIntoCallout = (html, calloutMessageElement, {
+  requestClose,
+  element
+}) => {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  renderIntoCallout(domToVNodes(template.content), calloutMessageElement, {
+    requestClose,
+    element
+  });
+};
+
+// Unmounts whatever preact rendered before the element is filled by hand
+// (a DOM node, an iframe); innerHTML alone would leave preact believing its
+// tree is still there.
+const clearCalloutMessage = calloutMessageElement => {
+  render(null, calloutMessageElement);
+  calloutMessageElement.innerHTML = "";
+};
+const domToVNodes = node => {
+  const vnodes = [];
+  for (const child of node.childNodes) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      vnodes.push(child.data);
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const props = {};
+    for (const {
+      name,
+      value
+    } of child.attributes) {
+      props[name] = value;
+    }
+    vnodes.push(h(child.localName, props, ...domToVNodes(child)));
+  }
+  return vnodes;
+};
+
+installImportMetaCssBuild(import.meta);
+/**
+ * The icon a callout shows beside its message — a square in the status color
+ * with the "!" glyph — drawable on its own, where the callout is not: on the
+ * trigger that opens one (a picker in callout mode), so what one presses looks
+ * like what it opens. The callout's own template draws from the same glyph
+ * (see calloutTemplate in callout.js).
+ */
+
+const css$15 = /* css */`.navi_callout_status_icon {
+  --x-callout-status-icon-color: var(--navi-callout-neutral-color);
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  color: #fff;
+  vertical-align: middle;
+  background-color: var(--x-callout-status-icon-color);
+  border-radius: 2px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+
+  &[data-status="success"] {
+    --x-callout-status-icon-color: var(--navi-callout-success-color);
+  }
+
+  &[data-status="info"] {
+    --x-callout-status-icon-color: var(--navi-callout-info-color);
+  }
+
+  &[data-status="warning"] {
+    --x-callout-status-icon-color: var(--navi-callout-warning-color);
+  }
+
+  &[data-status="error"] {
+    --x-callout-status-icon-color: var(--navi-callout-error-color);
+  }
+
+  &[data-shape="circle"] {
+    border-radius: 50%;
+  }
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.navi_icon > .navi_callout_status_icon {
+  width: 100%;
+  height: 100%;
+}
+`;
+
+/**
+ * The "!" on a square, viewBox and path both. The box is square and holds the
+ * glyph's margin: the ink is 298 of 540 units tall (55%), centered. Drawn this
+ * way rather than tight around the ink so whoever shows it can give the svg the
+ * whole square — the glyph is then placed by the vector rasteriser, which has
+ * no device pixel grid to miss, at any square size down to a fractional one.
+ */
+const CALLOUT_STATUS_GLYPH_VIEWBOX = "0 0 540 540";
+const CALLOUT_STATUS_GLYPH_PATH = "m232.5,121 8,196h59l8-196zm36.5,224a37,37 0 1,0 2,0z";
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   status?: "info" | "warning" | "error" | "success" | "none",
+ *   shape?: "square" | "circle",
+ * }>}
+ * @param {"info"|"warning"|"error"|"success"|"none"} [status="info"] The color
+ *   — the callout's own for that status. `"none"` is the neutral one.
+ * @param {"square"|"circle"} [shape="square"] Square like the callout's own
+ *   icon, or a circle.
+ */
+const CalloutStatusIcon = ({
+  status = "info",
+  shape = "square"
+}) => {
+  import.meta.css = [css$15, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
+  return jsx("span", {
+    className: "navi_callout_status_icon",
+    "data-status": status === "none" ? undefined : status,
+    "data-shape": shape === "circle" ? "circle" : undefined,
+    "aria-hidden": "true",
+    children: jsx("svg", {
+      viewBox: CALLOUT_STATUS_GLYPH_VIEWBOX,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: jsx("path", {
+        fill: "currentColor",
+        d: CALLOUT_STATUS_GLYPH_PATH
+      })
+    })
+  });
+};
+
+installImportMetaCssBuild(import.meta);
+
+// Unique for the page's lifetime: a caller may write the id in a commandfor.
+let calloutCount = 0;
+
+// How far `closeByScroll: true` lets the page move under the callout before
+// dismissing it: small enough that any deliberate scroll gesture reaches it,
+// 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 {
+    .navi_callout {
+      /* A callout is parented to what it explains, so it inherits from it — and
        an element that suppressed text selection (a list row, a drag source)
        would make its own explanation unselectable. The message is text one
        copies. Layered: an app that has a reason to lock its own callouts down
@@ -15753,6 +16367,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 +16442,8 @@ const openCallout = (
     closeByPressOutside = status === "info",
     closeOnFocusLeave = closeByPressOutside,
     closeByScroll = false,
+    backdrop = false,
+    group,
     closeButton = true,
     openingEvent,
     reopen = "toggle",
@@ -15901,6 +16528,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 +16539,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 +16817,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 +16859,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 +16881,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 +16925,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 +18048,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 +18106,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 +18236,8 @@ const createCalloutManager = (
       icon,
       closeButton,
       closeByScroll,
+      backdrop,
+      group,
       anchorElement,
       event,
       skipFocus,
@@ -17554,6 +18255,8 @@ const createCalloutManager = (
       icon,
       closeButton,
       closeByScroll,
+      backdrop,
+      group,
       skipFocus,
       onClose,
       // Resolved as the token is added, and kept with it: a token shown later
@@ -23644,7 +24347,16 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     }
     return itemSignal;
   };
-  const upsert = (...args) => {
+  // 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) {
@@ -23708,7 +24420,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] = {
@@ -23860,6 +24592,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 = () => {
@@ -24036,6 +24771,7 @@ ${[idKey, ...uniqueKeys].join(", ")}`,
     selectAll,
     itemSignalForId,
     upsert,
+    upsertAnswer,
     drop,
 
     observeItemProperties,
@@ -24793,7 +25529,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;
@@ -25454,7 +26190,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;
             };
@@ -25635,8 +26371,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(
@@ -25678,7 +26414,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]);
             }
@@ -25709,7 +26445,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(
@@ -25848,18 +26584,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
@@ -26147,7 +26902,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];
@@ -26156,8 +26911,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) => {
@@ -26293,8 +27048,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(
@@ -26358,7 +27113,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]);
           };
 
@@ -26487,14 +27242,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;
@@ -26516,7 +27274,9 @@ const createChildIdArrayUpdater = (childStore, childIdKey, idArraySignal) => {
     }
     if (modified || currentIdArray.length !== idArray.length) {
       idArraySignal.value = idArray;
+      return true;
     }
+    return false;
   };
 };
 
@@ -26934,6 +27694,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,
@@ -27069,12 +27847,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
@@ -27088,7 +27893,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
@@ -27101,7 +27906,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.
@@ -27111,18 +27916,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
@@ -31223,13 +32031,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;
@@ -31354,7 +32155,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
@@ -31391,7 +32206,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([]);
@@ -31409,6 +32224,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,
@@ -31425,10 +32241,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
@@ -31495,6 +32312,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.
@@ -37758,834 +38602,336 @@ registerNaviCommand("--navi-nav-to", (source, event, { argument }) => {
   };
 });
 
-// Back to the screen the reader came from, with somewhere to land when there
-// is none of ours behind — a url opened cold (see navBack). The fallback is
-// the argument for the reason --navi-nav-to's destination is: it says WHAT the
-// command does when there is nothing to go back to.
-registerNaviCommand("--navi-nav-back", (source, event, { argument }) => {
-  const target = resolveExplicitTarget(source) || source;
-  return {
-    target,
-    implementation: () => navBack({ fallback: argument }),
-  };
-});
-
-registerNaviCommand(
-  "--navi-toggle",
-  (source, event, { anchor, value } = {}) => {
-    const target =
-      resolveExplicitTarget(source) || resolveClosestExpandable(source);
-    if (!target) {
-      return undefined;
-    }
-    return {
-      target,
-      implementation: () => {
-        const isExpanded = target.getAttribute("aria-expanded") === "true";
-        const customEventName = isExpanded
-          ? "navi_request_close"
-          : "navi_request_open";
-        return dispatchCustomEvent(target, customEventName, {
-          event,
-          source: resolveCommandProxySource(source),
-          anchor,
-          // Same as --navi-open below: the half of the toggle that opens says
-          // what it opens ON, and the half that closes carries it too so the
-          // popup never has to ask which half it just heard.
-          value:
-            value === undefined ? resolveCommandValue(source, event) : value,
-        });
-      },
-    };
-  },
-);
-// A popup that edits opens ON something, and the press is the only place that
-// knows which one. It says it with `value` — "what this is about", as
-// everywhere else — rather than with an argument, which says what the command
-// DOES: "open" is already a complete instruction, unlike --navi-go-to-slide.
-//   <Button value={radar.id} command="--navi-open" commandfor="radar-dialog">
-// The popup is told before it opens — see Dialog/Popover's `onOpen`.
-registerNaviCommand("--navi-open", (source, event, { anchor, value } = {}) => {
-  const target =
-    resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      // The popup reads `anchor` first and falls back to the source (see
-      // onnavi_request_open in popover.jsx): without an `anchor`, the element
-      // asking is the element opened against.
-      return dispatchCustomEvent(target, "navi_request_open", {
-        event,
-        source: resolveCommandProxySource(source),
-        anchor,
-        value: value === undefined ? resolveCommandValue(source, event) : value,
-      });
-    },
-  };
-});
-/**
- * Tells the popup a source opens that a press on it has started, ahead of the
- * release that runs the command: what the opening will read can be asked for
- * now (see open_controller.js). A press rather than a hover, because what
- * that reads is keyed by the popup — one sheet per card — and a pointer
- * crossing a list of cards has chosen none of them; on a touch screen the
- * press is the first thing the finger says anyway.
- *
- * The target is found the way --navi-open finds it, but silently: nothing
- * runs here, and a source with no target says so at the release.
- */
-const announceOpeningPress = (source, command) => {
-  if (command !== "--navi-open" && command !== "--navi-toggle") {
-    return;
-  }
-  const commandFor = source.getAttribute("commandfor");
-  const target = commandFor
-    ? document.getElementById(commandFor)
-    : resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return;
-  }
-  dispatchCustomEvent(target, "navi_open_press");
-};
-// "--navi-close:all" closes every expandable above the source, nearest first —
-// a link leaving from a badge shown over a sheet leaves both. A surface that
-// refuses (a form asking about its changes) keeps what is above it open too:
-// one cannot be out of the sheet while still in the badge.
-registerNaviCommand("--navi-close", (source, event, { argument }) => {
-  const target =
-    resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      const detail = { event, source: resolveCommandProxySource(source) };
-      if (argument === "all") {
-        return requestCloseUpward(target, detail);
-      }
-      return dispatchCustomEvent(target, "navi_request_close", detail);
-    },
-  };
-});
-const requestCloseUpward = (target, detail) => {
-  let expandable = target;
-  while (expandable) {
-    const closing = dispatchCustomEvent(
-      expandable,
-      "navi_request_close",
-      detail,
-    );
-    if (!closing) {
-      return false;
-    }
-    const parent = expandable.parentElement;
-    expandable = parent ? parent.closest("[aria-expanded]") : null;
-  }
-  return true;
-};
-registerNaviCommand("--navi-cancel", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_close", {
-        event,
-        source: resolveCommandProxySource(source),
-        isCancel: true,
-      });
-    },
-  };
-});
-// "Yes, do it" — said inside the popup of a confirm picker (see
-// picker/picker_confirm.jsx), by its own yes button or by whatever a caller put
-// there instead. Its counterpart is --navi-cancel; the difference between the
-// two is this event, since both then close the popup, and a popup that closes
-// without having said this is the answer "no".
-registerNaviCommand("--navi-confirm", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      const commandSource = resolveCommandProxySource(source);
-      dispatchCustomEvent(target, "navi_request_confirm", {
-        event,
-        source: commandSource,
-      });
-      return dispatchCustomEvent(target, "navi_request_close", {
-        event,
-        source: commandSource,
-      });
-    },
-  };
-});
-registerNaviCommand("--navi-define", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveClosestExpandable(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => executeNaviDefine(source, event, target),
-  };
-});
-// A send whose target is the popup itself: what is around the source IS the
-// popup's answer, and a picker runs its action with that answer as it closes
-// (see onRequestClose in picker_custom.jsx) — dispatching the action here too
-// would run it twice. `isSend` tells this close from a dismissal (the cross,
-// a press outside, Escape): the person pressed a choice, which a picker may
-// act on even when the choice is the one it already held.
-const executeNaviDefine = (source, event, target) => {
-  return dispatchCustomEvent(target, "navi_request_close", {
-    event,
-    source: resolveCommandProxySource(source),
-    isSend: true,
-  });
-};
-
-registerNaviCommand("--navi-scroll", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_scroll", {
-        event,
-        id: resolveCommandValue(source, event),
-      });
-    },
-  };
-});
-// The press a hand is still making, given to something that can be carried: a
-// hold opened a popup, and what the popup holds is to follow that same finger
-// without it lifting and pressing again. `event` is what the press set off (the
-// popup's open event), and the press is read from its chain. Run once the popup
-// has settled, which the caller cannot see: the carry measures its element and
-// puts a copy in the top layer, neither of which holds while a transition is
-// still moving the box (see afterPopupLift). What the carry then is — its
-// outcomes, its refusal — is the element's (see interaction_drag.js).
-registerNaviCommand("--navi-grab", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || source.closest("[data-drag-source]");
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      afterPopupLift(() => {
-        // Taken away with the popup before it settled.
-        if (!target.isConnected) {
-          return;
-        }
-        dispatchCustomEvent(target, "navi_request_grab", { event });
-      });
-      return true;
-    },
-  };
-});
-registerNaviCommand("--navi-check", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_check", {
-        event,
-      });
-    },
-  };
-});
-registerNaviCommand("--navi-uncheck", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_uncheck", {
-        event,
-      });
-    },
-  };
-});
-registerNaviCommand("--navi-select", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_select", {
-        event,
-        id: resolveCommandValue(source, event),
-      });
-    },
-  };
-});
-registerNaviCommand("--navi-unselect", (source, event) => {
-  const target =
-    resolveExplicitTarget(source) || resolveFirstParentControl(source);
-  if (!target) {
-    return undefined;
-  }
-  return {
-    target,
-    implementation: () => {
-      return dispatchCustomEvent(target, "navi_request_unselect", {
-        event,
-        id: resolveCommandValue(source, event),
-      });
-    },
-  };
-});
-
-/**
- * Runs `fn` and commits whatever it re-renders before returning, instead of
- * letting Preact batch it into the next microtask. Layout effects of what gets
- * mounted run inside the call too, exactly as they would on any other commit.
- *
- * For the caller that has to read the DOM it just asked for — measuring an
- * element whose content it mounts in the same breath — and cannot wait a tick
- * to do it, because what comes after is a browser event still in flight
- * (preventDefault, focus placement) that no longer accepts being answered late.
- *
- * `options.debounceRendering` is Preact's own hook for deciding *when* the
- * render queue drains; swapping it for "right now" for the duration of the call
- * is exactly how preact/compat implements React's flushSync. Reserve it for the
- * case above: rendering synchronously in the middle of an event gives up the
- * batching that makes several state changes one commit.
- */
-const flushSyncRendering = (fn) => {
-  const debounceRenderingPrevious = options.debounceRendering;
-  options.debounceRendering = (drainRenderQueue) => {
-    drainRenderQueue();
-  };
-  try {
-    fn();
-  } finally {
-    options.debounceRendering = debounceRenderingPrevious;
-  }
-};
-
-/**
- * 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";
-
+// Back to the screen the reader came from, with somewhere to land when there
+// is none of ours behind — a url opened cold (see navBack). The fallback is
+// the argument for the reason --navi-nav-to's destination is: it says WHAT the
+// command does when there is nothing to go back to.
+registerNaviCommand("--navi-nav-back", (source, event, { argument }) => {
+  const target = resolveExplicitTarget(source) || source;
+  return {
+    target,
+    implementation: () => navBack({ fallback: argument }),
+  };
+});
+
+registerNaviCommand(
+  "--navi-toggle",
+  (source, event, { anchor, value } = {}) => {
+    const target =
+      resolveExplicitTarget(source) || resolveClosestExpandable(source);
+    if (!target) {
+      return undefined;
+    }
+    return {
+      target,
+      implementation: () => {
+        const isExpanded = target.getAttribute("aria-expanded") === "true";
+        const customEventName = isExpanded
+          ? "navi_request_close"
+          : "navi_request_open";
+        return dispatchCustomEvent(target, customEventName, {
+          event,
+          source: resolveCommandProxySource(source),
+          anchor,
+          // Same as --navi-open below: the half of the toggle that opens says
+          // what it opens ON, and the half that closes carries it too so the
+          // popup never has to ask which half it just heard.
+          value:
+            value === undefined ? resolveCommandValue(source, event) : value,
+        });
+      },
+    };
+  },
+);
+// A popup that edits opens ON something, and the press is the only place that
+// knows which one. It says it with `value` — "what this is about", as
+// everywhere else — rather than with an argument, which says what the command
+// DOES: "open" is already a complete instruction, unlike --navi-go-to-slide.
+//   <Button value={radar.id} command="--navi-open" commandfor="radar-dialog">
+// The popup is told before it opens — see Dialog/Popover's `onOpen`.
+registerNaviCommand("--navi-open", (source, event, { anchor, value } = {}) => {
+  const target =
+    resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      // The popup reads `anchor` first and falls back to the source (see
+      // onnavi_request_open in popover.jsx): without an `anchor`, the element
+      // asking is the element opened against.
+      return dispatchCustomEvent(target, "navi_request_open", {
+        event,
+        source: resolveCommandProxySource(source),
+        anchor,
+        value: value === undefined ? resolveCommandValue(source, event) : value,
+      });
+    },
+  };
+});
 /**
- * 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.
+ * Tells the popup a source opens that a press on it has started, ahead of the
+ * release that runs the command: what the opening will read can be asked for
+ * now (see open_controller.js). A press rather than a hover, because what
+ * that reads is keyed by the popup — one sheet per card — and a pointer
+ * crossing a list of cards has chosen none of them; on a touch screen the
+ * press is the first thing the finger says anyway.
  *
- * 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.
+ * The target is found the way --navi-open finds it, but silently: nothing
+ * runs here, and a source with no target says so at the release.
  */
-const handlePressOnOutsideRegion = (
-  mouseDownEvent,
-  { popupEl, openController, pressOutside },
-) => {
-  if (mouseDownEvent.button !== 0) {
+const announceOpeningPress = (source, command) => {
+  if (command !== "--navi-open" && command !== "--navi-toggle") {
     return;
   }
-  const { target } = mouseDownEvent;
-  if (!target.hasAttribute(OUTSIDE_REGION_ATTRIBUTE)) {
+  const commandFor = source.getAttribute("commandfor");
+  const target = commandFor
+    ? document.getElementById(commandFor)
+    : resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
     return;
   }
-  if (openedDuringThisPress(openController)) {
-    // The release of the press that opened it is not somebody dismissing it
-    // (see openedDuringThisPress).
-    return;
+  dispatchCustomEvent(target, "navi_open_press");
+};
+// "--navi-close:all" closes every expandable above the source, nearest first —
+// a link leaving from a badge shown over a sheet leaves both. A surface that
+// refuses (a form asking about its changes) keeps what is above it open too:
+// one cannot be out of the sheet while still in the badge.
+registerNaviCommand("--navi-close", (source, event, { argument }) => {
+  const target =
+    resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
+    return undefined;
   }
-  // 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;
+  return {
+    target,
+    implementation: () => {
+      const detail = { event, source: resolveCommandProxySource(source) };
+      if (argument === "all") {
+        return requestCloseUpward(target, detail);
+      }
+      return dispatchCustomEvent(target, "navi_request_close", detail);
+    },
+  };
+});
+const requestCloseUpward = (target, detail) => {
+  let expandable = target;
+  while (expandable) {
+    const closing = dispatchCustomEvent(
+      expandable,
+      "navi_request_close",
+      detail,
+    );
+    if (!closing) {
+      return false;
+    }
+    const parent = expandable.parentElement;
+    expandable = parent ? parent.closest("[aria-expanded]") : null;
   }
-  if (pressOutside === "capture") {
-    mouseDownEvent.preventDefault();
-    return;
+  return true;
+};
+registerNaviCommand("--navi-cancel", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
+    return undefined;
   }
-  if (pressOutside === "close" || pressOutside === "cancel") {
-    openController.requestClose(mouseDownEvent, {
-      isCancel: pressOutside === "cancel",
-    });
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_close", {
+        event,
+        source: resolveCommandProxySource(source),
+        isCancel: true,
+      });
+    },
+  };
+});
+// "Yes, do it" — said inside the popup of a confirm picker (see
+// picker/picker_confirm.jsx), by its own yes button or by whatever a caller put
+// there instead. Its counterpart is --navi-cancel; the difference between the
+// two is this event, since both then close the popup, and a popup that closes
+// without having said this is the answer "no".
+registerNaviCommand("--navi-confirm", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      const commandSource = resolveCommandProxySource(source);
+      dispatchCustomEvent(target, "navi_request_confirm", {
+        event,
+        source: commandSource,
+      });
+      return dispatchCustomEvent(target, "navi_request_close", {
+        event,
+        source: commandSource,
+      });
+    },
+  };
+});
+registerNaviCommand("--navi-define", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveClosestExpandable(source);
+  if (!target) {
+    return undefined;
   }
+  return {
+    target,
+    implementation: () => executeNaviDefine(source, event, target),
+  };
+});
+// A send whose target is the popup itself: what is around the source IS the
+// popup's answer, and a picker runs its action with that answer as it closes
+// (see onRequestClose in picker_custom.jsx) — dispatching the action here too
+// would run it twice. `isSend` tells this close from a dismissal (the cross,
+// a press outside, Escape): the person pressed a choice, which a picker may
+// act on even when the choice is the one it already held.
+const executeNaviDefine = (source, event, target) => {
+  return dispatchCustomEvent(target, "navi_request_close", {
+    event,
+    source: resolveCommandProxySource(source),
+    isSend: true,
+  });
 };
 
+registerNaviCommand("--navi-scroll", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_scroll", {
+        event,
+        id: resolveCommandValue(source, event),
+      });
+    },
+  };
+});
+// The press a hand is still making, given to something that can be carried: a
+// hold opened a popup, and what the popup holds is to follow that same finger
+// without it lifting and pressing again. `event` is what the press set off (the
+// popup's open event), and the press is read from its chain. Run once the popup
+// has settled, which the caller cannot see: the carry measures its element and
+// puts a copy in the top layer, neither of which holds while a transition is
+// still moving the box (see afterPopupLift). What the carry then is — its
+// outcomes, its refusal — is the element's (see interaction_drag.js).
+registerNaviCommand("--navi-grab", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || source.closest("[data-drag-source]");
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      afterPopupLift(() => {
+        // Taken away with the popup before it settled.
+        if (!target.isConnected) {
+          return;
+        }
+        dispatchCustomEvent(target, "navi_request_grab", { event });
+      });
+      return true;
+    },
+  };
+});
+registerNaviCommand("--navi-check", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_check", {
+        event,
+      });
+    },
+  };
+});
+registerNaviCommand("--navi-uncheck", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_uncheck", {
+        event,
+      });
+    },
+  };
+});
+registerNaviCommand("--navi-select", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_select", {
+        event,
+        id: resolveCommandValue(source, event),
+      });
+    },
+  };
+});
+registerNaviCommand("--navi-unselect", (source, event) => {
+  const target =
+    resolveExplicitTarget(source) || resolveFirstParentControl(source);
+  if (!target) {
+    return undefined;
+  }
+  return {
+    target,
+    implementation: () => {
+      return dispatchCustomEvent(target, "navi_request_unselect", {
+        event,
+        id: resolveCommandValue(source, event),
+      });
+    },
+  };
+});
+
 /**
- * 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.
+ * Runs `fn` and commits whatever it re-renders before returning, instead of
+ * letting Preact batch it into the next microtask. Layout effects of what gets
+ * mounted run inside the call too, exactly as they would on any other commit.
  *
- * 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.
+ * For the caller that has to read the DOM it just asked for — measuring an
+ * element whose content it mounts in the same breath — and cannot wait a tick
+ * to do it, because what comes after is a browser event still in flight
+ * (preventDefault, focus placement) that no longer accepts being answered late.
  *
- * Returns a cleanup that removes the listener.
+ * `options.debounceRendering` is Preact's own hook for deciding *when* the
+ * render queue drains; swapping it for "right now" for the duration of the call
+ * is exactly how preact/compat implements React's flushSync. Reserve it for the
+ * case above: rendering synchronously in the middle of an event gives up the
+ * batching that makes several state changes one commit.
  */
-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,
-    });
+const flushSyncRendering = (fn) => {
+  const debounceRenderingPrevious = options.debounceRendering;
+  options.debounceRendering = (drainRenderQueue) => {
+    drainRenderQueue();
   };
+  try {
+    fn();
+  } finally {
+    options.debounceRendering = debounceRenderingPrevious;
+  }
 };
 
 /**
@@ -65577,6 +65923,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"`
@@ -65951,6 +66304,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
@@ -66596,13 +66950,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);
@@ -67024,6 +67386,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,
@@ -67073,6 +67439,7 @@ const Popup = props => {
     positionAreaWhenAnchorIsInvalid: positionAreaWhenAnchorIsInvalid,
     scrollCapture: scrollCapture === "popover" || scrollCapture,
     positionAreaFixed: positionAreaFixed,
+    group: group,
     className: withPropsClassName("navi_popup", className),
     expand: expand,
     expandX: expandX,
@@ -67976,13 +68343,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.
@@ -68018,7 +68390,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
@@ -68055,6 +68432,7 @@ const PickerContentInsidePopup = props => {
       backdropVariant: backdropVariant,
       backdropColor: backdropColor,
       backdropFilter: backdropFilter,
+      group: popupGroup,
       focusCapture: isPopover ? focusCapture : undefined,
       expand: isPopover ? undefined : dialogExpand,
       expandX: isPopover ? undefined : dialogExpandX,
@@ -68114,6 +68492,8 @@ const PickerCalloutPopup = ({
   icon,
   closeButton,
   closeByScroll,
+  backdrop,
+  group,
   onnavi_request_open,
   onnavi_request_close,
   onnavi_request_confirm,
@@ -68155,6 +68535,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
@@ -70321,7 +70703,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;
@@ -70720,6 +71108,7 @@ const css$x = /* css */`@layer navi {
   }
 
   & .navi_list_item_group_list {
+    --list-group-label-height: inherit;
     flex-direction: column;
     width: 100%;
     margin: 0;
@@ -70727,8 +71116,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));
     }
   }
 
@@ -70880,9 +71273,17 @@ const ListUI = props => {
   // why not an effect), and the floor of 30 is its: it protects the scrolling
   // window, not a picture nobody has seen yet.
   const {
-    initial: initialRenderBudget,
+    initial: initialRenderBudgetProp,
     after: renderBudgetAfterPaint
   } = resolveRenderBudget(renderBudgetProp);
+  // Opening on a position that says how many rows were on screen from its row
+  // on (the way back to where the list was, see reportPosition): that is what
+  // the first picture shows, whatever `initial` guessed — with the row above
+  // when it stood partly in view. The rest waits for the paint like any
+  // `initial`: a page coming back in a route transition builds it inside the
+  // update callback, and every row below the fold delays the movement.
+  const openingPosition = scrolled ?? defaultScrolled;
+  const initialRenderBudget = openingPosition && typeof openingPosition === "object" && typeof openingPosition.visibleCount === "number" ? openingPosition.visibleCount + (openingPosition.offset > 0 ? 1 : 0) : initialRenderBudgetProp;
   let renderBudget = renderBudgetAfterPaint;
   if (renderBudget < 30 && !renderBudgetSkipCheck) {
     console.warn(`List: renderBudget=${renderBudget} is too low. A renderBudget below 30 is not supported: on large screens or when the list grows, items outside the window would appear as blank space instead of rendered content. Use a value of at least 30, or omit the prop to use the default (${RENDER_BUDGET_DEFAULT}).`);
@@ -71345,11 +71746,23 @@ const useListScrollSync = ({
       horizontal
     });
   };
+
+  // How many rows the window keeps above the row the list is held at. Around it
+  // for the scrolling to come, from the first paint on; before, the window is
+  // the first picture's, and a picture of the list opening on a row shows that
+  // row and what is below it — with the one above when a remembered position
+  // says it stood partly in view.
+  const rowsAboveOpening = (openAt, windowSize) => {
+    if (renderBudget !== renderBudgetSteady) {
+      return openAt && typeof openAt === "object" && openAt.offset > 0 ? 1 : 0;
+    }
+    return Math.floor(windowSize / 2);
+  };
   const [renderWindow, setRenderWindow] = useState(() => {
     // Opening somewhere else than the beginning starts by framing there: the
     // rows the list will draw are the rows it will ask for.
     const openAt = scrolled ?? defaultScrolled;
-    const start = typeof openAt === "number" ? openAt - Math.floor(renderBudget / 2) : 0;
+    const start = typeof openAt === "number" ? openAt - rowsAboveOpening(openAt, renderBudget) : 0;
     const startClamped = start < 0 ? 0 : start;
     return {
       start: startClamped,
@@ -71422,8 +71835,12 @@ const useListScrollSync = ({
     // Held somewhere it has not reached yet: what the window frames right now
     // is not what it will frame, so nothing should be fetched for it.
     listRows.holdPending = scrolledWanted !== "start" && scrolledWanted !== undefined;
+    // Zero until the runs have rendered — they count their rows as they do,
+    // after the list — which is not a collection fitting in the window: it is
+    // one whose end is not known yet, and the window then frames the row the
+    // list opens on, already in the first commit.
     const total = listRows.totalSignal.peek();
-    if (total <= renderBudget) {
+    if (total > 0 && total <= renderBudget) {
       // The whole collection is what the list draws: wherever in it the list is
       // held, the window is already its place. Nowhere to move to means nothing
       // to wait for — a hold left standing here is a list that never asks for
@@ -71431,21 +71848,21 @@ const useListScrollSync = ({
       listRows.holdPending = false;
       return;
     }
-    const half = Math.floor(renderBudget / 2);
+    const above = rowsAboveOpening(scrolledWanted, renderBudget);
     let wantedStart = null;
     if (scrolledWanted === "end") {
       wantedStart = total - renderBudget;
     } else if (typeof scrolledWanted === "number") {
-      wantedStart = scrolledWanted - half;
+      wantedStart = scrolledWanted - above;
     } else if (scrolledWanted && scrolledWanted.id !== undefined) {
       const rowIndex = listRows.locateRow(scrolledWanted.id);
       if (rowIndex !== null) {
-        wantedStart = rowIndex - half;
+        wantedStart = rowIndex - above;
       } else if (typeof scrolledWanted.index === "number") {
         // The row has not come back yet, but where it stood is known: near
         // enough to frame, and to put the scrollbar roughly where it will end
         // up rather than at the top.
-        wantedStart = scrolledWanted.index - half;
+        wantedStart = scrolledWanted.index - above;
       }
     }
     if (wantedStart === null) {
@@ -71454,12 +71871,12 @@ const useListScrollSync = ({
       // back — the run asks for it by name (see useRequestMissing).
       return;
     }
+    if (total > 0 && wantedStart + renderBudget > total) {
+      wantedStart = total - renderBudget;
+    }
     if (wantedStart < 0) {
       wantedStart = 0;
     }
-    if (wantedStart + renderBudget > total) {
-      wantedStart = total - renderBudget;
-    }
     const {
       start,
       end
@@ -71794,8 +72211,8 @@ const useListScrollSync = ({
           end
         } = renderWindowRef.current;
         if (rowIndex < start || rowIndex >= end) {
-          const half = Math.floor((end - start) / 2);
-          const wantedStart = rowIndex - half < 0 ? 0 : rowIndex - half;
+          const above = rowsAboveOpening(scrolledWanted, end - start);
+          const wantedStart = rowIndex - above < 0 ? 0 : rowIndex - above;
           updateRenderWindow(wantedStart, wantedStart + (end - start), `opening on row ${scrolledWanted.id}`);
           return;
         }
@@ -71841,6 +72258,15 @@ const useListScrollSync = ({
     }
   };
   useLayoutEffect(placeWhereHeld);
+  // Held on a row of a list scrolling the document: where the document goes is
+  // this list's to say, measured on the row, not the url's offset in pixels
+  // (see holdDocumentScroll).
+  useLayoutEffect(() => {
+    if (!heldSomewhere || getScroller() !== document.scrollingElement) {
+      return undefined;
+    }
+    return holdDocumentScroll();
+  }, [heldSomewhere, scrollerElResolved]);
   // What to do when the list's own geometry moves under it, kept fresh for the
   // observer below (which is installed once).
   const onGeometryChangeRef = useRef(null);
@@ -71883,31 +72309,40 @@ const useListScrollSync = ({
   // Where the list was at the last thing that moved it. Kept whether anyone
   // asked for it or not: it is what a resize needs to put things back.
   const positionRef = useRef(null);
+  const captureListAnchor = countVisible => captureScrollAnchor({
+    scrollerEl: getScroller(),
+    listEl: getListEl(),
+    items: listRows.visibleItemsSignal.peek(),
+    horizontal,
+    countVisible
+  });
+  // Said from where the row lands on its own, and with `visibleCount`: the
+  // rows on screen from that one on, which is what a list given this position
+  // back draws first (see ListUI).
+  const toScrolledPosition = position => {
+    const rowEl = findRowElement(getListEl(), position.id);
+    return {
+      id: position.id,
+      index: position.index,
+      offset: position.offset - getRowScrollInset(getScroller(), rowEl, horizontal),
+      visibleCount: position.visibleCount
+    };
+  };
   const reportPosition = () => {
     if (!ref.current) {
       return;
     }
-    const position = captureScrollAnchor({
-      scrollerEl: getScroller(),
-      listEl: getListEl(),
-      items: listRows.visibleItemsSignal.peek(),
-      horizontal
-    });
+    const remember = rememberScrollRef.current;
+    const onScrolledChange = onScrolledChangeRef.current;
+    const position = captureListAnchor(remember || Boolean(onScrolledChange));
     if (!position) {
       return;
     }
     positionRef.current = position;
-    const remember = rememberScrollRef.current;
-    const onScrolledChange = onScrolledChangeRef.current;
     if (!remember && !onScrolledChange) {
       return;
     }
-    const rowEl = findRowElement(getListEl(), position.id);
-    const scrolledNow = {
-      id: position.id,
-      index: position.index,
-      offset: position.offset - getRowScrollInset(getScroller(), rowEl, horizontal)
-    };
+    const scrolledNow = toScrolledPosition(position);
     if (remember) {
       rememberScrollerPosition(listId, scrolledNow);
     }
@@ -71915,6 +72350,20 @@ const useListScrollSync = ({
       onScrolledChange(scrolledNow);
     }
   };
+  // Nothing scrolled, yet what is on screen changed: the list has just been
+  // laid out, its rows have arrived, one of them grew. A list read where it
+  // opened would otherwise come back with nothing kept — opening again as a
+  // fresh arrival does, all of its window drawn in the first commit instead of
+  // the rows that were on screen. Kept, and told to nobody: nobody scrolled.
+  const rememberPosition = () => {
+    if (!rememberScrollRef.current || !ref.current) {
+      return;
+    }
+    const position = captureListAnchor(true);
+    if (position) {
+      rememberScrollerPosition(listId, toScrolledPosition(position));
+    }
+  };
   // Leaving: with its page, or alone (see forgetScrollerUnlessPageLeft).
   useLayoutEffect(() => {
     return () => {
@@ -71940,6 +72389,7 @@ const useListScrollSync = ({
       // list which has outgrown a bounded ancestor stops holding on to the
       // page.
       resolveScroller();
+      rememberPosition();
       // Two things resize here, and they call for opposite answers. The LIST
       // growing is its own content settling: only a list holding itself
       // somewhere cares (the end it aims at has moved), and a list the user is
@@ -72632,12 +73082,15 @@ const getRowName = rowEl => rowEl.getAttribute("navi-list-item-real");
 // the list is rebuilt around it. Read off the rows' own boxes, not by
 // hit-testing the screen: a scrolling list takes its rows out of hit-testing
 // (see the navi-scrolling rule in the css above), and the scroll event is
-// precisely when this is asked.
+// precisely when this is asked. `countVisible` adds how many rows are on
+// screen from that one on: what a list coming back there has to draw before
+// anything else (see the first paint in ListUI).
 const captureScrollAnchor = ({
   scrollerEl,
   listEl,
   items,
-  horizontal
+  horizontal,
+  countVisible
 }) => {
   if (!scrollerEl || !listEl) {
     return null;
@@ -72673,6 +73126,9 @@ const captureScrollAnchor = ({
       offset
     };
     if (offset >= 0) {
+      if (countVisible) {
+        anchor.visibleCount = countRowsStartingBefore(rowEls, i, range.to, horizontal);
+      }
       return anchor;
     }
     // The row under the top of the view starts above it. Good enough to hold
@@ -72681,10 +73137,26 @@ const captureScrollAnchor = ({
     // top" reads, and can be drawn. Keep looking; this one is the fallback.
     if (!fallbackAnchor) {
       fallbackAnchor = anchor;
+      if (countVisible) {
+        anchor.visibleCount = countRowsStartingBefore(rowEls, i, range.to, horizontal);
+      }
     }
   }
   return fallbackAnchor;
 };
+// How many of the rows from `fromIndex` on start before `to` along the scroll
+// axis — the ones on screen, when `to` is where the view ends.
+const countRowsStartingBefore = (rowEls, fromIndex, to, horizontal) => {
+  let index = fromIndex;
+  while (index < rowEls.length) {
+    const rect = rowEls[index].getBoundingClientRect();
+    if ((horizontal ? rect.left : rect.top) >= to) {
+      break;
+    }
+    index++;
+  }
+  return index - fromIndex;
+};
 // The part of the list that is on screen, along the scrolling axis. Both edges
 // matter: the scroller may be larger than the list (scroller="parent") as well
 // as smaller (the list scrolls inside its own box).
@@ -75040,7 +75512,7 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   are skeletons, the others hold their room. `0` says the list is already
  *   known to be empty: the empty `fallback` shows right away rather than an
  *   empty frame.
- * @param {"start"|"end"|number|{id: string, offset?: number}} [props.defaultScrolled="start"]
+ * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, visibleCount?: number}} [props.defaultScrolled="start"]
  *   Where the list opens, after which the user owns the scroll — unless it is
  *   being come back to (see `scrollResetOnNavigation`). `"end"` is a
  *   thread read backwards — the last rows are the ones to show, and the ones
@@ -75052,8 +75524,10 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   the screen it was saved on. `offset: 0` is where a `scrollIntoView()` puts
  *   it — in front of the fixed bar the scroller gives room for, below the
  *   sticky header and the group label the row lives under — so nothing of that
- *   room has to be restated as a number by whoever asks.
- * @param {"start"|"end"|number|{id: string, offset?: number}} [props.scrolled]
+ *   room has to be restated as a number by whoever asks. The `index` and
+ *   `visibleCount` it also hands out say where to aim before the row is found,
+ *   and how many rows to draw before the first paint (see `renderBudget`).
+ * @param {"start"|"end"|number|{id: string, index?: number, offset?: number, visibleCount?: number}} [props.scrolled]
  *   The same, but held: the list goes back there every time this changes, even
  *   after the user has scrolled — the caller owns where the list is (see
  *   `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
@@ -75064,12 +75538,12 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   In every form the list holds itself there while it is still finding out
  *   how many rows there are and how tall one is, and lets go the moment the
  *   user reaches for the list.
- * @param {(scrolled: {id: string, index: number, offset: number}) => void} [props.onScrolledChange]
+ * @param {(scrolled: {id: string, index: number, offset: number, visibleCount: number}) => void} [props.onScrolledChange]
  *   Where the list is, as the user scrolls: the row at the top of the view and
  *   how far below the place a row lands on its own (see `defaultScrolled`) it
- *   starts. Keep it to come back to it
- *   later through `scrolled`/`defaultScrolled` — an index would not do, since
- *   rows get inserted while a list is being read.
+ *   starts, and how many rows are on screen from that one on. Keep it whole to
+ *   come back to it later through `scrolled`/`defaultScrolled` — an index alone
+ *   would not do, since rows get inserted while a list is being read.
  * @param {number|{initial: number, after: number}} [props.renderBudget=100]
  *   How many rows of a `<List.Items>` run are in the DOM at once: the render
  *   window, which slides as the user scrolls while fillers hold the room of
@@ -75081,11 +75555,15 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   once, with room for that lookahead — the list warns below 30, and when a
  *   budget leaves fewer than two rows beyond the screen.
  *
- *   `{ initial, after }` for a list drawn in the click that opens it (a popup):
- *   `initial` rows in the commit the browser paints first — about what a phone
- *   screen shows — and `after` from the paint on, where the floor of 30
- *   applies. The runs ask their source for `after` rows from the start, so the
- *   first picture costs no second request.
+ *   `{ initial, after }` for a list whose first picture is taken as it is
+ *   built — drawn in the click that opens a popup, or in the update callback
+ *   of a route transition bringing its page back: `initial` rows in the commit
+ *   the browser paints first — about what a phone screen shows — counted from
+ *   the row the list opens on, and `after` from the paint on, around it, where
+ *   the floor of 30 applies. Opening on a position that says how many rows were
+ *   on screen (`visibleCount`, see `onScrolledChange`) draws those first,
+ *   whatever `initial` says. The runs ask their source for `after` rows from
+ *   the start, so the first picture costs no second request.
  * @param {number} [props.virtualItemSize]
  *   The size of one row along the scroll axis, in px, when every row has the
  *   same: what the fillers are sized with and what a scroll position is