@jsenv/navi 0.29.398 → 0.29.400

package/dist/jsenv_navi.js

@@ -4,10 +4,10 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, keepTouchRefusable, isPressDrivenClick, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, isTouchDrivenEvent, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, trapScrollInside, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, keepTouchRefusable, isPressDrivenClick, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, isTouchDrivenEvent, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, trapScrollInside, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } 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 { isValidElement, createContext, render, h, toChildArray, options, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
+import { options, isValidElement, createContext, render, h, toChildArray, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, useState, useEffect, useMemo, useId } from "preact/hooks";
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
@@ -95,6 +95,29 @@ const css$17 = /* css */ `@layer navi {
 `;
 import.meta.css = [css$17, "@jsenv/navi/src/navi_z_indexes.js"];
 
+/**
+ * A navigation is ABOUT to be applied — said before its very first write.
+ *
+ * Everything else a router says arrives once the change is made: a route
+ * announces that it matches, an action that it is running. That is too late for
+ * anyone who needs the page as it stands BEFORE, and the browser's view
+ * transitions are exactly that kind of reader — the picture they keep of the
+ * page being left is taken at the next frame, and a render answering a signal
+ * written a moment ago is already in the DOM by then (see route_travel.jsx).
+ *
+ * So this is the one moment where nothing has moved yet. It is published
+ * synchronously, from the top of the navigation, and whoever listens runs
+ * before the URL, the visited set, or any route has changed.
+ *
+ * The other end is published too, and for the same kind of reader: whoever
+ * held something across the change and has nobody to hand it to gets a moment
+ * to let go of it that does not depend on guessing how long the change takes.
+ */
+
+
+const [publishBeforeRouting, observeBeforeRouting] = createPubSub();
+const [publishAfterRouting, observeAfterRouting] = createPubSub();
+
 const addIntoArray = (array, ...valuesToAdd) => {
   if (valuesToAdd.length === 1) {
     const [valueToAdd] = valuesToAdd;
@@ -298,6 +321,112 @@ const urlToScheme = (url) => {
   return scheme;
 };
 
+/**
+ * The document's rendering, held for the one frame a view transition needs.
+ *
+ * The browser does not take the picture of the page being left when a
+ * transition is ASKED for — it takes it at the next frame, just before running
+ * the update callback. Preact renders sooner than that, in a microtask: so a
+ * change nobody asked for (a tab pressed, the back button) has already reached
+ * the DOM when the picture is taken, and the picture is of the page ARRIVING.
+ * Both sides of the animation then show it, and one watches a page slide onto
+ * itself.
+ *
+ * So what Preact has queued waits until the update callback, which is the
+ * moment the API is built around — the change belongs inside it. The whole
+ * document is held: it is about to be frozen under a picture anyway.
+ *
+ * ONE hold for the whole document, whoever animates. The hold is a wrapper
+ * around Preact's `options.debounceRendering`, and two of them installed
+ * independently restore each other in the wrong order when they let go — every
+ * render queued in between is then handed to a wrapper nobody will ever
+ * release. Everything that photographs a navigation (RouteTravel's box, a
+ * route transition) must therefore hold through this module, never through a
+ * wrapper of its own.
+ */
+
+
+let renderingHold = null;
+const holdRendering = () => {
+  if (renderingHold) {
+    return renderingHold.release;
+  }
+  const debounceRenderingBefore = options.debounceRendering;
+  const hold = {
+    render: null,
+    waiting: [],
+    release: () => {
+      // Only the hold that is still standing may be given back: a holder
+      // releasing after another has taken over must not let go of what it
+      // does not hold.
+      if (renderingHold !== hold) {
+        return;
+      }
+      renderingHold = null;
+      options.debounceRendering = debounceRenderingBefore;
+      const { render, waiting } = hold;
+      hold.render = null;
+      hold.waiting = [];
+      if (render) {
+        render();
+      }
+      for (const wait of waiting) {
+        wait();
+      }
+    },
+  };
+  renderingHold = hold;
+  options.debounceRendering = (render) => {
+    hold.render = render;
+  };
+  return hold.release;
+};
+
+// Anything else that must not happen before the picture is taken, and the
+// scroll is the other one: a page one arrives at starts at its top, and the
+// document put back to its top while the page being left is still on screen is
+// a page that has ALREADY jumped when the picture is taken. Worse, the browser
+// paints what the new offset shows and nothing else, so the picture keeps only
+// the band it had already painted — the page being left is then seen in
+// fragments, whatever the movement does afterwards.
+//
+// Run at once when nobody is photographing anything, which is the common case
+// and must stay free.
+const whenRenderingResumes = (callback) => {
+  if (!renderingHold) {
+    callback();
+    return;
+  }
+  renderingHold.waiting.push(callback);
+};
+
+// The hold a navigation takes on its way in — from before its first write,
+// because by the time a route announces that it matches, Preact has already
+// been told and the render is queued; a hold taken then is a hold taken too
+// late. Kept here until whoever animates the change takes it over, or the
+// navigation turns out to be one nobody animates.
+let routingRenderingHold = null;
+const holdRenderingForRouting = () => {
+  routingRenderingHold = holdRendering();
+};
+// Nobody had a picture to take: a page held for a change it does not animate
+// is a page that stutters for nothing.
+const releaseRoutingRenderingHold = () => {
+  const release = routingRenderingHold;
+  routingRenderingHold = null;
+  if (release) {
+    release();
+  }
+};
+// An animator takes the navigation's hold as its own — taking another would be
+// taking a hold on a page that is holding still — or takes a fresh one when
+// the change it animates is not a navigation.
+const takeoverRoutingRenderingHold = () => {
+  const release = routingRenderingHold || holdRendering();
+  routingRenderingHold = null;
+  return release;
+};
+
 installImportMetaCssBuild(import.meta);
 
 const URL_TARGET_ATTRIBUTE = "data-url-target";
@@ -347,7 +476,8 @@ let urlTargetOptions = {
  *   How long, in ms, to keep waiting for a target that has not arrived, counted
  *   from the moment the document stops working.
  * @param {number} [options.maxWait=10000]
- *   Longest wait, in ms, for a document that never stops working.
+ *   Longest wait, in ms, for a document that never stops working. The element
+ *   is then answered as it stands, when it is there.
  */
 const setUrlTargetOptions = (options) => {
   urlTargetOptions = { ...urlTargetOptions, ...options };
@@ -374,6 +504,23 @@ const useUrlTargetId = () => {
 let stopWaitingForCurrentTarget = null;
 let currentTargetKey;
 
+const documentLoadIsReturn = () => {
+  const [navigationEntry] = performance.getEntriesByType("navigation");
+  if (!navigationEntry) {
+    return false;
+  }
+  return (
+    navigationEntry.type === "reload" || navigationEntry.type === "back_forward"
+  );
+};
+// The url the document is on its way back to — a back, a forward, a reload —
+// where the reader was, as opposed to a place just sent to. Said by the
+// navigation before it writes anything, and by the load for the first url.
+let returningToUrl = documentLoadIsReturn() ? window.location.href : null;
+observeBeforeRouting(({ url, navigationType }) => {
+  returningToUrl = navigationType === "traverse" ? url : null;
+});
+
 /**
  * Answers the URL's target again, as if it had just been designated.
  *
@@ -383,10 +530,10 @@ let currentTargetKey;
  */
 const rearmUrlTarget = () => {
   currentTargetKey = undefined;
-  armUrlTarget(documentUrlSignal.peek());
+  armUrlTarget(documentUrlSignal.peek(), { isReturn: false });
 };
 
-const armUrlTarget = (documentUrl) => {
+const armUrlTarget = (documentUrl, { isReturn }) => {
   const targetKey = urlToTargetKey(documentUrl);
   if (targetKey === currentTargetKey) {
     return;
@@ -397,11 +544,25 @@ const armUrlTarget = (documentUrl) => {
     stopWaitingForCurrentTarget = null;
   }
   const targetId = urlToTargetId(documentUrl);
+  // The browser leaves `:target` on the element a URL named once the URL has
+  // stopped naming it — a pushState never touches it.
+  const staleTarget = document.querySelector(":target");
+  if (staleTarget && staleTarget.id !== targetId) {
+    writeTarget(null);
+  }
   if (!targetId) {
     return;
   }
-  stopWaitingForCurrentTarget = waitForElementWithId(targetId, (element) => {
+  stopWaitingForCurrentTarget = waitForUrlTarget(targetId, (element) => {
     stopWaitingForCurrentTarget = null;
+    if (!element.matches(":target")) {
+      writeTarget(element);
+    }
+    if (isReturn) {
+      // The offset put back by scroll_restoration.js is the reader's own: the
+      // element is named by the URL, not arrived at.
+      return;
+    }
     revealUrlTarget(element);
   });
 };
@@ -418,14 +579,27 @@ const urlToTargetId = (url) => {
   return hash ? decodeURIComponent(hash.slice(1)) : "";
 };
 
-const waitForElementWithId = (id, onFound) => {
+// Calls `onSettled` with the element once it can be answered: it exists, it
+// shows something, and the document is done working. Found is not enough while
+// the document works — what sits above it may still be drawn and push it down,
+// and a page reusing a node of the page being left holds it before its own
+// data has come.
+//
+// Confirmed at the next frame, once rendering has resumed: the render the last
+// answer asked for has run by then, and a component starting its own run from
+// that render has made the document busy again.
+const waitForUrlTarget = (id, onSettled) => {
+  const { graceAfterIdle, maxWait } = urlTargetOptions;
+  let stopped = false;
+  let confirmationPending = false;
+  let frame = null;
   let mutationObserver = null;
   let stopWatchingBusy = null;
   let idleTimeout = null;
   let maxWaitTimeout = null;
-  let found = false;
 
   const stopWaiting = () => {
+    stopped = true;
     if (mutationObserver) {
       mutationObserver.disconnect();
       mutationObserver = null;
@@ -436,76 +610,214 @@ const waitForElementWithId = (id, onFound) => {
     }
     clearTimeout(idleTimeout);
     clearTimeout(maxWaitTimeout);
+    if (frame !== null) {
+      cancelAnimationFrame(frame);
+      frame = null;
+    }
   };
 
-  const checkForElement = () => {
+  const findElement = () => {
     const element = document.getElementById(id);
     if (!element) {
-      return;
+      return null;
     }
     // Rendered inside a closed tab, a folded details, a view that is not the
-    // one on screen: the element exists but would show nothing. Keep waiting —
-    // it is the same wait, for the same reason.
+    // one on screen: the element exists but would show nothing.
     if (element.checkVisibility && !element.checkVisibility()) {
-      return;
+      return null;
     }
-    found = true;
+    return element;
+  };
+  const settle = (element) => {
     stopWaiting();
-    onFound(element);
+    onSettled(element);
+  };
+  const check = () => {
+    if (confirmationPending || documentIsBusySignal.peek() || !findElement()) {
+      return;
+    }
+    confirmationPending = true;
+    whenRenderingResumes(() => {
+      if (stopped) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        confirmationPending = false;
+        if (documentIsBusySignal.peek()) {
+          return;
+        }
+        const element = findElement();
+        if (element) {
+          settle(element);
+        }
+      });
+    });
   };
 
-  checkForElement();
-  if (found) {
-    return stopWaiting;
-  }
-
-  mutationObserver = new MutationObserver(checkForElement);
+  mutationObserver = new MutationObserver(check);
+  // Every attribute, not only `id`: what shows an element that is already
+  // there — a <details> opening, a tab panel losing its display: none — is an
+  // attribute written somewhere above it, and nothing else says so.
   mutationObserver.observe(document.documentElement, {
     childList: true,
     subtree: true,
     attributes: true,
-    attributeFilter: ["id"],
   });
-  const { graceAfterIdle, maxWait } = urlTargetOptions;
   stopWatchingBusy = effect(() => {
     const documentIsBusy = documentIsBusySignal.value;
     clearTimeout(idleTimeout);
-    if (!documentIsBusy) {
-      idleTimeout = setTimeout(stopWaiting, graceAfterIdle);
+    if (documentIsBusy) {
+      return;
     }
-  });
-  maxWaitTimeout = setTimeout(stopWaiting, maxWait);
+    check();
+    // The grace is for an element that has not come; one already there and
+    // waiting for rendering to resume is not given up on.
+    idleTimeout = setTimeout(() => {
+      if (!confirmationPending) {
+        stopWaiting();
+      }
+    }, graceAfterIdle);
+  });
+  // A document that never stops working: the element as it stands, when it is
+  // there at all.
+  maxWaitTimeout = setTimeout(() => {
+    const element = findElement();
+    if (element) {
+      settle(element);
+    } else {
+      stopWaiting();
+    }
+  }, maxWait);
 
   return stopWaiting;
 };
 
 const revealUrlTarget = (element) => {
   const { block, behavior, markDuration } = urlTargetOptions;
-  // The element just entered the DOM: where it sits is only known once layout
-  // has run.
-  requestAnimationFrame(() => {
-    const prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)",
-    ).matches;
-    element.scrollIntoView({
-      block,
-      behavior: prefersReducedMotion ? "instant" : behavior,
-    });
-    // What the browser does when it handles a fragment itself: keyboard
-    // navigation resumes from the target, not from the top of the document.
-    if (elementIsFocusable(element)) {
-      element.focus({ preventScroll: true });
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)",
+  ).matches;
+  element.scrollIntoView({
+    block,
+    behavior: prefersReducedMotion ? "instant" : behavior,
+  });
+  // What the browser does when it handles a fragment itself: keyboard
+  // navigation resumes from the target, not from the top of the document.
+  if (elementIsFocusable(element)) {
+    element.focus({ preventScroll: true });
+  }
+  element.setAttribute(URL_TARGET_ATTRIBUTE, "");
+  setTimeout(() => {
+    element.removeAttribute(URL_TARGET_ATTRIBUTE);
+  }, markDuration);
+};
+
+let targetWriteInProgress = false;
+/**
+ * True while navi writes the browser's `:target`. The fragment navigation that
+ * takes is announced like any other — a popstate, a navigate event, an entry
+ * change — and names the address and the state the document is already at, so
+ * whoever routes on those events leaves it alone.
+ */
+const isTargetWriteInProgress = () => {
+  return targetWriteInProgress;
+};
+
+// `:target` onto `element`, or off whatever holds it when `element` is null.
+//
+// A replace towards the address the browser is at: the browser answers it as a
+// fragment navigation, and that is the only moment it sets `:target`. It also
+// scrolls to what the fragment designates, resets the entry's states
+// (history.state in Firefox, the Navigation API state everywhere) and fires a
+// popstate (Chrome, Safari) and a navigate event. The address, both states and
+// the scroll are put back in the same task, so nothing of it is painted; a
+// running view transition is not skipped by it (measured in Chrome, Firefox
+// and Safari).
+const writeTarget = (element) => {
+  const address = window.location.href;
+  const historyState = window.history.state;
+  const { navigation } = window;
+  const entry = navigation ? navigation.currentEntry : null;
+  const entryState = entry ? entry.getState() : undefined;
+  const putScrollBack = captureScroll(element);
+  const addressFragment = new URL(address).hash.slice(1);
+  const addressTargetId = decodeURIComponent(addressFragment);
+
+  let fragmentUrl;
+  let silencedElement = null;
+  if (element) {
+    fragmentUrl =
+      element.id === addressTargetId
+        ? address
+        : `${urlWithoutFragment(address)}#${encodeURIComponent(element.id)}`;
+  } else if (addressFragment) {
+    // The address itself, so the fragment does not change and no hashchange
+    // follows; the element it names briefly without its id, so it designates
+    // nothing.
+    fragmentUrl = address;
+    silencedElement = document.getElementById(addressTargetId);
+  } else {
+    // An empty fragment designates the top of the document; the scroll it
+    // makes is put back with the others.
+    fragmentUrl = `${address}#`;
+  }
+
+  targetWriteInProgress = true;
+  try {
+    if (silencedElement) {
+      silencedElement.removeAttribute("id");
     }
-    element.setAttribute(URL_TARGET_ATTRIBUTE, "");
-    setTimeout(() => {
-      element.removeAttribute(URL_TARGET_ATTRIBUTE);
-    }, markDuration);
+    window.location.replace(fragmentUrl);
+  } finally {
+    if (silencedElement) {
+      silencedElement.id = addressTargetId;
+    }
+    window.history.replaceState(historyState, null, address);
+    if (entry && navigation.currentEntry) {
+      navigation.updateCurrentEntry({ state: entryState });
+    }
+    targetWriteInProgress = false;
+  }
+  putScrollBack();
+};
+
+// Every box a fragment navigation towards `element` may scroll: its ancestors,
+// and the document.
+const captureScroll = (element) => {
+  const boxes = [];
+  let box = element ? element.parentElement : null;
+  while (box) {
+    boxes.push(box);
+    box = box.parentElement;
+  }
+  const { scrollingElement } = document;
+  if (!boxes.includes(scrollingElement)) {
+    boxes.push(scrollingElement);
+  }
+  const positions = boxes.map((box) => {
+    return { box, left: box.scrollLeft, top: box.scrollTop };
   });
+  return () => {
+    for (const { box, left, top } of positions) {
+      if (box.scrollLeft !== left || box.scrollTop !== top) {
+        box.scrollTo({ left, top, behavior: "instant" });
+      }
+    }
+  };
+};
+
+const urlWithoutFragment = (url) => {
+  const urlObject = new URL(url);
+  urlObject.hash = "";
+  return urlObject.href;
 };
 
 effect(() => {
   const documentUrl = documentUrlSignal.value;
-  armUrlTarget(documentUrl);
+  const isReturn = returningToUrl === documentUrl;
+  returningToUrl = null;
+  armUrlTarget(documentUrl, { isReturn });
 });
 
 /**
@@ -10103,6 +10415,26 @@ const dispatchRequestInteraction = (
   });
 };
 
+/**
+ * Whether the control `element` belongs to lets an interaction of this intent
+ * through, asked ahead of the event the gate will judge, and silently: nothing
+ * is reported, nothing runs. For what a press is about to lead to (see
+ * announceOpeningPress in commands.js) — the press itself is not that event: a
+ * drag source cancels a `pointerdown` whose click still comes and opens.
+ *
+ * @param {Element} element
+ * @param {{ intent: "read" | "write" }} options
+ * @returns {boolean}
+ */
+const allowsInteraction = (element, { intent }) => {
+  const controlHost = findControlHost(element) || element;
+  const ci = controlHost.__uiStateController__?.rules.interaction;
+  if (!ci) {
+    return true;
+  }
+  return ci.checkInteractivity({ intent });
+};
+
 const onRequestInteraction = (
   requestInteractionCustomEvent,
   { debugInteraction },
@@ -17751,6 +18083,33 @@ const syncOwnedResourceToSignals = (
 
 // Global signal registry for route template detection
 const globalSignalRegistry = new Map();
+
+// The values some states are about to hold, answered in place of what they
+// hold for the length of one readStateAsIf.
+let valuesAsIf = null;
+/**
+ * Runs `read` as if each state in `values` held the value given for it: the
+ * address a press is about to write, read before it is written. Nothing is
+ * written, so whoever watches those states hears nothing, and `read`
+ * subscribes to nothing.
+ *
+ * Only a read of the state itself is answered this way. A `computed` derived
+ * from one answers what it last computed — or, evaluated for the first time
+ * inside `read`, caches a value derived from this answer: `read` reads the
+ * states it depends on directly (a route action's params do).
+ *
+ * @param {Map<import("@preact/signals").Signal, any>} values
+ * @param {() => any} read
+ */
+const readStateAsIf = (values, read) => {
+  const previous = valuesAsIf;
+  valuesAsIf = values;
+  try {
+    return untracked(read);
+  } finally {
+    valuesAsIf = previous;
+  }
+};
 let signalIdCounter = 0;
 const generateSignalId = () => {
   const id = signalIdCounter++;
@@ -18074,6 +18433,9 @@ const stateSignal = (defaultValue, options = {}) => {
   const valueDescriptor = Object.getOwnPropertyDescriptor(signalProto, "value");
   Object.defineProperty(preactSignal, "value", {
     get() {
+      if (valuesAsIf !== null && valuesAsIf.has(preactSignal)) {
+        return valuesAsIf.get(preactSignal);
+      }
       return valueDescriptor.get.call(preactSignal);
     },
     set(newValue) {
@@ -26332,7 +26694,8 @@ const route = (
   };
   // Asks ahead of the arrival for what this route's actions ask without the
   // address — a page's code, a read without params (see routeAction). An
-  // action keyed by a param waits for the arrival: a prefetch has no address.
+  // action keyed by a param waits for the arrival: a prefetch has no address
+  // (preloadState is the one that has one).
   route.preload = () => {
     const preloadSet = routePreloadMap.get(route);
     if (!preloadSet) {
@@ -26899,6 +27262,40 @@ const preloadUrl = (url) => {
     }
   }
 };
+
+const routeStatePreloadMap = new WeakMap();
+const registerRouteStatePreload = (route, preload) => {
+  let preloadSet = routeStatePreloadMap.get(route);
+  if (!preloadSet) {
+    preloadSet = new Set();
+    routeStatePreloadMap.set(route, preloadSet);
+  }
+  preloadSet.add(preload);
+};
+/**
+ * Preloads what the routes one is on will ask for once `signal` holds
+ * `value`: the address a popup's opening is about to write (see
+ * open_controller.js), known at the press that opens it. Only the routes
+ * matching now are asked — writing a state keeps one on the same page.
+ */
+const preloadState = (signal, value) => {
+  if (!activeRouteSet) {
+    return;
+  }
+  const values = new Map([[signal, value]]);
+  for (const route of activeRouteSet) {
+    if (!route.matchingSignal.peek()) {
+      continue;
+    }
+    const preloadSet = routeStatePreloadMap.get(route);
+    if (!preloadSet) {
+      continue;
+    }
+    for (const preload of preloadSet) {
+      preload(values);
+    }
+  }
+};
 const setupRoutes = (routes) => {
   if (setupRoutesCalled) {
     throw new Error(
@@ -27473,112 +27870,6 @@ const dropGeneratedIdKeys = (state) => {
   return stateWithoutGeneratedIdKeys;
 };
 
-/**
- * The document's rendering, held for the one frame a view transition needs.
- *
- * The browser does not take the picture of the page being left when a
- * transition is ASKED for — it takes it at the next frame, just before running
- * the update callback. Preact renders sooner than that, in a microtask: so a
- * change nobody asked for (a tab pressed, the back button) has already reached
- * the DOM when the picture is taken, and the picture is of the page ARRIVING.
- * Both sides of the animation then show it, and one watches a page slide onto
- * itself.
- *
- * So what Preact has queued waits until the update callback, which is the
- * moment the API is built around — the change belongs inside it. The whole
- * document is held: it is about to be frozen under a picture anyway.
- *
- * ONE hold for the whole document, whoever animates. The hold is a wrapper
- * around Preact's `options.debounceRendering`, and two of them installed
- * independently restore each other in the wrong order when they let go — every
- * render queued in between is then handed to a wrapper nobody will ever
- * release. Everything that photographs a navigation (RouteTravel's box, a
- * route transition) must therefore hold through this module, never through a
- * wrapper of its own.
- */
-
-
-let renderingHold = null;
-const holdRendering = () => {
-  if (renderingHold) {
-    return renderingHold.release;
-  }
-  const debounceRenderingBefore = options.debounceRendering;
-  const hold = {
-    render: null,
-    waiting: [],
-    release: () => {
-      // Only the hold that is still standing may be given back: a holder
-      // releasing after another has taken over must not let go of what it
-      // does not hold.
-      if (renderingHold !== hold) {
-        return;
-      }
-      renderingHold = null;
-      options.debounceRendering = debounceRenderingBefore;
-      const { render, waiting } = hold;
-      hold.render = null;
-      hold.waiting = [];
-      if (render) {
-        render();
-      }
-      for (const wait of waiting) {
-        wait();
-      }
-    },
-  };
-  renderingHold = hold;
-  options.debounceRendering = (render) => {
-    hold.render = render;
-  };
-  return hold.release;
-};
-
-// Anything else that must not happen before the picture is taken, and the
-// scroll is the other one: a page one arrives at starts at its top, and the
-// document put back to its top while the page being left is still on screen is
-// a page that has ALREADY jumped when the picture is taken. Worse, the browser
-// paints what the new offset shows and nothing else, so the picture keeps only
-// the band it had already painted — the page being left is then seen in
-// fragments, whatever the movement does afterwards.
-//
-// Run at once when nobody is photographing anything, which is the common case
-// and must stay free.
-const whenRenderingResumes = (callback) => {
-  if (!renderingHold) {
-    callback();
-    return;
-  }
-  renderingHold.waiting.push(callback);
-};
-
-// The hold a navigation takes on its way in — from before its first write,
-// because by the time a route announces that it matches, Preact has already
-// been told and the render is queued; a hold taken then is a hold taken too
-// late. Kept here until whoever animates the change takes it over, or the
-// navigation turns out to be one nobody animates.
-let routingRenderingHold = null;
-const holdRenderingForRouting = () => {
-  routingRenderingHold = holdRendering();
-};
-// Nobody had a picture to take: a page held for a change it does not animate
-// is a page that stutters for nothing.
-const releaseRoutingRenderingHold = () => {
-  const release = routingRenderingHold;
-  routingRenderingHold = null;
-  if (release) {
-    release();
-  }
-};
-// An animator takes the navigation's hold as its own — taking another would be
-// taking a hold on a page that is holding still — or takes a fresh one when
-// the change it animates is not a navigation.
-const takeoverRoutingRenderingHold = () => {
-  const release = routingRenderingHold || holdRendering();
-  routingRenderingHold = null;
-  return release;
-};
-
 /**
  * Where a page was left, given back when one comes back to it.
  *
@@ -27779,6 +28070,11 @@ const restoreScrollPosition = (url) => {
 // So `from`, the url being left, tells an arrival from the same place said
 // differently, and only the first is moved.
 //
+// A fragment does not make it less of an arrival. The browser finds nothing to
+// scroll to after a pushState; url_target.js brings the element in once it
+// renders, from this top — and when it never comes, the page is read from its
+// top like any other.
+//
 // The document, because the document is the scrollport in the common case. An
 // app that scrolls an element of its own scrolls it itself.
 const startAtTop = (url, { from } = {}) => {
@@ -27788,14 +28084,10 @@ const startAtTop = (url, { from } = {}) => {
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
 const isArrival = (url, { from }) => {
-  const urlObject = new URL(url, window.location.href);
-  // A fragment names where to land, and the browser is the one that finds it.
-  if (urlObject.hash) {
-    return false;
-  }
   if (
     from !== undefined &&
-    new URL(from, window.location.href).pathname === urlObject.pathname
+    new URL(from, window.location.href).pathname ===
+      new URL(url, window.location.href).pathname
   ) {
     return false;
   }
@@ -27872,29 +28164,6 @@ const forgetScrollerUnlessPageLeft = (name) => {
   }
 };
 
-/**
- * A navigation is ABOUT to be applied — said before its very first write.
- *
- * Everything else a router says arrives once the change is made: a route
- * announces that it matches, an action that it is running. That is too late for
- * anyone who needs the page as it stands BEFORE, and the browser's view
- * transitions are exactly that kind of reader — the picture they keep of the
- * page being left is taken at the next frame, and a render answering a signal
- * written a moment ago is already in the DOM by then (see route_travel.jsx).
- *
- * So this is the one moment where nothing has moved yet. It is published
- * synchronously, from the top of the navigation, and whoever listens runs
- * before the URL, the visited set, or any route has changed.
- *
- * The other end is published too, and for the same kind of reader: whoever
- * held something across the change and has nobody to hand it to gets a moment
- * to let go of it that does not depend on guessing how long the change takes.
- */
-
-
-const [publishBeforeRouting, observeBeforeRouting] = createPubSub();
-const [publishAfterRouting, observeAfterRouting] = createPubSub();
-
 const getHrefTargetInfo = (href) => {
   href = String(href);
 
@@ -28402,6 +28671,11 @@ const setupBrowserIntegrationViaHistory = ({
   });
 
   window.addEventListener("popstate", (popstateEvent) => {
+    if (isTargetWriteInProgress()) {
+      // The fragment navigation navi makes to set `:target` (see
+      // url_target.js): the entry keeps its address and its state.
+      return;
+    }
     // The entry a pending replace was for is no longer the current one, and
     // the History API has no way to write it (see replaceAddressWhenSettled).
     dropPendingReplace();
@@ -28477,9 +28751,14 @@ const setupBrowserIntegrationViaHistory = ({
       // one), so whoever awaits this reads a document url and state that
       // already say where it landed.
       const landedPromise = new Promise((resolve) => {
-        window.addEventListener("popstate", () => resolve(true), {
-          once: true,
-        });
+        const onPopstate = () => {
+          if (isTargetWriteInProgress()) {
+            return;
+          }
+          window.removeEventListener("popstate", onPopstate);
+          resolve(true);
+        };
+        window.addEventListener("popstate", onPopstate);
       });
       landOnPending = landOn || null;
       window.history.back();
@@ -33300,10 +33579,15 @@ const RouteTravel = ({
     // stopping. Which end decides how it is answered, and the two are not the
     // same amount of work.
     onEdge: ({
-      sign
+      sign,
+      thrown
     }) => {
       const travel = travelRef.current;
-      if (!travel || travel.noPicture || travel.ended || travel.reverting || !CAN_KEEP_PICTURE) {
+      if (
+      // Thrown on before its end: handing over from there would mean jumping
+      // the pictures the rest of the way first (see scrubTravel below), a
+      // page seen leaping. The travel caught simply arrives.
+      thrown || !travel || travel.noPicture || travel.ended || travel.reverting || !CAN_KEEP_PICTURE) {
         return false;
       }
       // Where the page in hand is coming from, said the way the gesture says
@@ -33880,10 +34164,14 @@ const writeCover = (edge, element, size) => {
  *   the address, which is also what makes it worth fetching AHEAD of the
  *   arrival: a link to the route preruns it when the pointer or the focus
  *   reaches the link (see docs/dynamic_import.md). An action whose params
- *   come from the address is never prefetched — a prefetch has no address.
+ *   come from the address is not prefetched by a link — a link's prefetch has
+ *   no address. It is by the press that opens a popup bound to a state these
+ *   params read: that address is the current one with the state set to the
+ *   popup's value (see `prefetch` on Button).
  * @param {object} [options]
- * @param {boolean} [options.prefetch=true] - `false` keeps a param-less action
- *   from being prerun on intent, when the read is not worth a hover.
+ * @param {boolean} [options.prefetch=true] - `false` keeps the action from
+ *   being prerun ahead of what asks for it, when the read is not worth a
+ *   hover or a press that may not end in an opening.
  */
 const routeAction = (
   routeOrRoutes,
@@ -33912,27 +34200,47 @@ const routeAction = (
     },
     options,
   );
-  if (!paramsEffect && prefetch) {
+  if (prefetch) {
     for (const route of routes) {
-      registerRoutePreload(route, () => {
-        prefetchParamless(action);
-      });
+      if (paramsEffect) {
+        registerRouteStatePreload(route, (values) => {
+          prefetchAsIf(action, paramsEffect, values);
+        });
+      } else {
+        registerRoutePreload(route, () => {
+          prerunAhead(action.bindParams(true));
+        });
+      }
     }
   }
   return actionBoundToRoute;
 };
 
-// The instance the effect above runs on the match is the one bound to `true`
-// (the default params), so a prerun here is what the arrival promotes to a
-// run. A prefetch that fails is not reported: nothing on screen asked for it,
-// and the failure stays on the instance, where a run asks again — a FAILED
-// action is run, only RUNNING and COMPLETED are left alone — and the arrival
-// shows its own. It is left FAILED on purpose, not reset: the press that
-// brings the arrival also focuses the link, so a prerun can be in flight when
-// the arrival promotes it, and a reset landing after that would pull the
-// answer from under the page that is reading it.
-const prefetchParamless = (action) => {
-  const instance = action.bindParams(true);
+// The params as they will read once the states hold what they are about to
+// (see readStateAsIf), prerun only when that changes them: params the state
+// leaves alone are the ones the action already runs on — or is meant not to,
+// and a prerun would retry a FAILED one behind the screen's back.
+const prefetchAsIf = (action, paramsEffect, values) => {
+  const params = readStateAsIf(values, paramsEffect);
+  if (!params) {
+    return;
+  }
+  if (compareTwoJsValues(params, untracked(paramsEffect))) {
+    return;
+  }
+  prerunAhead(action.bindParams(params));
+};
+
+// The instance prerun is the one the arrival runs on — the one bound to the
+// params it reads (`true` for a param-less action) — so the arrival promotes
+// it to a run. A prefetch that fails is not reported: nothing on screen asked
+// for it, and the failure stays on the instance, where a run asks again — a
+// FAILED action is run, only RUNNING and COMPLETED are left alone — and the
+// arrival shows its own. It is left FAILED on purpose, not reset: a prerun is
+// often still in flight when the arrival promotes it (the press that brings
+// the arrival focuses the link, or is the one that asked), and a reset
+// landing after that would pull the answer from under the page reading it.
+const prerunAhead = (instance) => {
   let result;
   try {
     result = instance.prerun({ reason: "intent" });
@@ -34930,6 +35238,30 @@ registerNaviCommand("--navi-open", (source, event, { anchor, 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:
@@ -36383,7 +36715,7 @@ const writeOpenedInSignal = (signal, opened, event, popupValue) => {
     return;
   }
   if (opened) {
-    signal.value = popupValue === undefined ? true : popupValue;
+    signal.value = readOpenValue(popupValue);
     return;
   }
   const closedValue = readClosedValue(signalValue);
@@ -36415,6 +36747,9 @@ const readOpened = (signalValue, popupValue) => {
   }
   return signalValue === popupValue;
 };
+const readOpenValue = (popupValue) => {
+  return popupValue === undefined ? true : popupValue;
+};
 const readClosedValue = (openSignalValue) => {
   return openSignalValue === true ? false : undefined;
 };
@@ -36488,6 +36823,29 @@ const useOpenPropsEffectOnOpenController = (
           }
         }
       : null;
+  // A press that will open this popup has started (see announceOpeningPress
+  // in commands.js). What the opening writes — the popup's value, in its
+  // signal — is known before the release, so what the screen reads off it is
+  // asked for now (see preloadState).
+  useEffect(() => {
+    if (!signal) {
+      return undefined;
+    }
+    const element = openController.getElement?.();
+    if (!element) {
+      return undefined;
+    }
+    const onOpenPress = () => {
+      if (openController.opened) {
+        return;
+      }
+      preloadState(signal, readOpenValue(value));
+    };
+    element.addEventListener("navi_open_press", onOpenPress);
+    return () => {
+      element.removeEventListener("navi_open_press", onOpenPress);
+    };
+  }, [signal, value]);
   // Tracks whether the effect below has ever run before — only the very
   // first run gets the "mount already open" treatment (`open` truthy from
   // the start, or the uncontrolled, mount-only `defaultOpen`); every
@@ -37182,17 +37540,36 @@ const armOutsidePressClose = (
  * content ahead of the click that will open it. Deferring the build to the
  * opening puts its whole cost in the frame right after the click — the frame
  * where a delay is felt hardest — while the ~100-300ms between hovering a
- * trigger and pressing it are free. The warming render is asynchronous
- * (batched, not flushed): nothing here needs the content in the DOM before
- * the click, only before the open that follows it.
- *
- * "while-opened" content is never warmed. That mode promises two things
- * warming would break: the content is built at open time (so a `defaultValue`
- * read at build time is fresh, not seeded at pointer-enter time), and it is
- * only ever mounted between an open and a close — unmounting happens on close,
- * so a warmed popup that never opens would keep its content in the document
- * indefinitely. Callers lean on that guarantee (e.g. several pickers sharing
- * one set of content ids because only one content exists at a time).
+ * trigger and pressing it are free. The warming render starts at the frame
+ * after the one that follows the intent: nothing here needs the content in the
+ * DOM before the click, only before the open that follows it, and on a touch
+ * screen `pointerenter` arrives together with the `pointerdown` — a build
+ * started there would hold back the frame that shows the press. Two animation
+ * frames, never a timeout: browsers hold timers back while a finger is down,
+ * and a timeout started by the press fires at its release, on top of the click.
+ *
+ * "while-opened" content is warmed by an opening press, never by a hover or a
+ * focus. That mode promises content built fresh for the gesture that opens
+ * it, and mounted only while that gesture and its opening last: callers lean
+ * on it (several pickers sharing one set of content ids, because only one
+ * content exists at a time). A pointer crossing four triggers would build four
+ * contents; a press is the start of one opening.
+ *
+ * Only what opens the popup can say its press is one, and it says so as the
+ * press starts, with a `navi_open_press` on the popup (see
+ * announceOpeningPress in commands.js): a `--navi-open` button, a picker's
+ * trigger when a press is what opens it, an expandable's UI part. Not the
+ * anchor: it says where the popup is placed, not what opens it — a card
+ * opened by a hold is pressed all day by taps meant for what it holds.
+ *
+ * The press builds the content, and the press ending without an open throws
+ * it away — its click reaching the document with the popup still closed, no
+ * click coming after the release, the browser taking the gesture
+ * (`pointercancel`), or the next press starting, before any of its own
+ * handlers run: one press at a time holds a content. A keyboard opening builds
+ * at open time. A popup with an `onOpen` is never warmed: that callback runs
+ * before the content is built (see open_controller.js), and a content seeding
+ * itself from what it writes must be built after it.
  */
 
 
@@ -37234,26 +37611,35 @@ const usePopupContentMount = (
   { mount = MOUNT_DEFAULT, anchor },
 ) => {
   const mountedAlways = mount === "always";
-  const [contentMounted, setContentMounted] = useState(
+  const [contentMounted, setContentMountedState] = useState(
     () => mountedAlways || openController.opened,
   );
-  openController.mountContent = contentMounted
-    ? null
-    : () => {
-        const popupElement = ref?.current;
-        if (popupElement) {
-          popupsMountingContentForOpen.add(popupElement);
-        }
-        try {
-          flushSyncRendering(() => {
-            setContentMounted(true);
-          });
-        } finally {
-          if (popupElement) {
-            popupsMountingContentForOpen.delete(popupElement);
-          }
-        }
-      };
+  // What was last asked for, ahead of the render that performs it: an open
+  // landing in between (a press-warmed content given up just before the open
+  // that wanted it) must still find it has to build.
+  const contentMountedRef = useRef(contentMounted);
+  const setContentMounted = (value) => {
+    contentMountedRef.current = value;
+    setContentMountedState(value);
+  };
+  openController.mountContent = () => {
+    if (contentMountedRef.current) {
+      return;
+    }
+    const popupElement = ref?.current;
+    if (popupElement) {
+      popupsMountingContentForOpen.add(popupElement);
+    }
+    try {
+      flushSyncRendering(() => {
+        setContentMounted(true);
+      });
+    } finally {
+      if (popupElement) {
+        popupsMountingContentForOpen.delete(popupElement);
+      }
+    }
+  };
   openController.unmountContent =
     mount === "while-opened"
       ? () => {
@@ -37291,41 +37677,140 @@ const usePopupContentMount = (
       cancelIdle(idleId);
     };
   }, [mount, contentMounted]);
-  // Warm on intent (see the top comment; "while-opened" is excluded there).
-  // The anchor accepts the same shapes Popover resolves at open time — a
-  // string id, a ref, an element — but is resolved here at effect time: an id
-  // that matches nothing yet simply doesn't warm, the open still mounts the
-  // content like it always does.
+  // Warm on intent (see the top comment).
   useEffect(() => {
     if (contentMounted || !anchor || mount === "while-opened") {
       return undefined;
     }
-    const anchorElement =
-      typeof anchor === "string"
-        ? document.getElementById(anchor)
-        : // A ref is unwrapped even when it holds nothing: an expandable with
-          // no UI part hands an empty ref over, and the ref object itself is
-          // truthy — it would reach addEventListener below and throw.
-          "current" in anchor
-          ? anchor.current
-          : anchor;
+    const anchorElement = resolveAnchorElement(anchor);
     if (!anchorElement) {
       return undefined;
     }
+    let cancelWarm = null;
     const warm = () => {
-      setContentMounted(true);
+      if (cancelWarm) {
+        return;
+      }
+      cancelWarm = requestFrameAfterNext(() => {
+        setContentMounted(true);
+      });
     };
     anchorElement.addEventListener("pointerenter", warm);
     anchorElement.addEventListener("focusin", warm);
     return () => {
+      cancelWarm?.();
       anchorElement.removeEventListener("pointerenter", warm);
       anchorElement.removeEventListener("focusin", warm);
     };
   }, [contentMounted, anchor, mount]);
+  // Warm on an opening press, for "while-opened" (see the top comment).
+  // Listening for as long as the popup is there, not only while the content is
+  // unmounted: the press that throws a warmed content away can be a new
+  // opening press of this same popup, and it must warm again.
+  useEffect(() => {
+    if (mount !== "while-opened") {
+      return undefined;
+    }
+    const element = openController.getElement?.();
+    if (!element) {
+      return undefined;
+    }
+    let stopPressWarm = null;
+    const onOpeningPress = () => {
+      if (contentMountedRef.current || openController.onOpen) {
+        return;
+      }
+      const cancelBuild = requestFrameAfterNext(() => {
+        setContentMounted(true);
+      });
+      const stopWatching = watchPressEnd(() => {
+        stopPressWarm = null;
+        cancelBuild();
+        if (!openController.opened) {
+          setContentMounted(false);
+        }
+      });
+      stopPressWarm = () => {
+        cancelBuild();
+        stopWatching();
+      };
+    };
+    element.addEventListener("navi_open_press", onOpeningPress);
+    return () => {
+      stopPressWarm?.();
+      element.removeEventListener("navi_open_press", onOpeningPress);
+    };
+  }, [mount]);
 
   return contentMounted;
 };
 
+// The anchor accepts the same shapes Popover resolves at open time — a string
+// id, a ref, an element — but is resolved at effect time: an id that matches
+// nothing yet simply doesn't warm, the open still mounts the content.
+const resolveAnchorElement = (anchor) => {
+  if (typeof anchor === "string") {
+    return document.getElementById(anchor);
+  }
+  // A ref is unwrapped even when it holds nothing: an expandable with no UI
+  // part hands an empty ref over, and the ref object itself is truthy — it
+  // would reach addEventListener and throw.
+  if ("current" in anchor) {
+    return anchor.current;
+  }
+  return anchor;
+};
+
+// The next frame paints what the input just changed (the pressed trigger); the
+// callback runs at the start of the one after.
+const requestFrameAfterNext = (callback) => {
+  let frame = requestAnimationFrame(() => {
+    frame = requestAnimationFrame(callback);
+  });
+  return () => {
+    cancelAnimationFrame(frame);
+  };
+};
+
+// How long the click of a released press may take to arrive. Nothing tells a
+// page that a release brings no click — a press that became a drag has its
+// click swallowed (suppressClickAfterGesture in @jsenv/dom) — so past this the
+// press is taken to have ended without one. Longer than the 300ms a browser
+// still waits before the click of a tap on a page not sized for phones.
+const PRESS_CLICK_WAIT_MS = 500;
+
+// Installed during the press's own pointerdown: the capture listeners below
+// only hear the presses after it.
+const watchPressEnd = (onEnd) => {
+  let timeout;
+  const stop = () => {
+    clearTimeout(timeout);
+    document.removeEventListener("click", onClick);
+    document.removeEventListener("pointerup", onPointerUp, { capture: true });
+    document.removeEventListener("pointercancel", end, { capture: true });
+    document.removeEventListener("pointerdown", end, { capture: true });
+  };
+  const end = () => {
+    stop();
+    onEnd();
+  };
+  // Bubble phase, on the document: every click handler that could open the
+  // popup has run by then.
+  const onClick = (clickEvent) => {
+    if (isPressDrivenClick(clickEvent)) {
+      end();
+    }
+  };
+  const onPointerUp = () => {
+    timeout = setTimeout(end, PRESS_CLICK_WAIT_MS);
+  };
+  document.addEventListener("click", onClick);
+  document.addEventListener("pointerup", onPointerUp, { capture: true });
+  document.addEventListener("pointercancel", end, { capture: true });
+  document.addEventListener("pointerdown", end, { capture: true });
+  return stop;
+};
+
 /**
  * A variant of useLayoutEffect that accounts for ancestor <dialog>/<details>
  * or popover visibility.
@@ -38381,6 +38866,9 @@ const useUIStateController = (
         // The suggestion this control started on — what tells a field showing
         // its default from one carrying an answer (see isUIStateHeld).
         defaultValue: controlInfo.defaultValue,
+        // The default last put on screen, which lags `defaultValue` while an
+        // edit holds a newer one back (see followDefaultValue).
+        defaultValueTaken: controlInfo.defaultValue,
 
         facadeChild: null,
         // Set for the duration of one interaction by whatever wants the
@@ -38482,6 +38970,18 @@ const useUIStateController = (
             e.currentTarget || controller.ref.current,
           );
           const currentUIState = controller.uiState;
+          // What a control is STARTED on is accepted, as its own defaultValue
+          // would be: a value placed on it as it registers, or what a picker
+          // takes up from its popup while it holds nothing of its own. A
+          // rollback goes back there, and a control left on it holds no edit.
+          if (!controller.hasStateProp) {
+            if (
+              e.type === "initial_state_push" ||
+              (e.type === "facade_child_mount_sync" && !controller.holdsEdit())
+            ) {
+              controller.state = newUIState;
+            }
+          }
           const stateIsTheSame = compareTwoJsValues(newUIState, currentUIState);
           if (stateIsTheSame) {
             if (controlType === "button" || controlType === "link") {
@@ -38647,7 +39147,12 @@ const useUIStateController = (
             }
             // initial_state_push is pure initialization (equivalent to defaultValue on the
             // child itself): skip uiAction entirely so no side effects fire on mount.
-            if (e.type !== "initial_state_push") {
+            // A value the outside moved since (see outside_value_follow) is the
+            // same initialization, later.
+            if (
+              e.type !== "initial_state_push" &&
+              e.type !== "outside_value_follow"
+            ) {
               // Still fire uiAction so external listeners (e.g. signals) stay in
               // sync, but do NOT fire the command and do NOT notify the parent —
               // both would cause an infinite loop when a parent cascades state
@@ -38701,6 +39206,19 @@ const useUIStateController = (
                 stateChanged: true,
               });
             }
+            if (
+              e.type === "outside_value_follow" ||
+              (e.type === "facade_child_mount_sync" && isOutsideValueFollow(e))
+            ) {
+              // Heard the way a control mounting on that value would be:
+              // silently, nobody acted. But heard, all the way up — a picker
+              // whose popup followed tells its own group in turn — or what
+              // the groups send is not what is on screen.
+              s.parentUIStateController?.onChildUIAction(controller, e, {
+                stateChanged: true,
+                silent: true,
+              });
+            }
             return true;
           }
           s.parentUIStateController?.onChildUIAction(controller, e, {
@@ -38796,6 +39314,41 @@ const useUIStateController = (
           // pick — the signal would hand it straight back on the next render,
           // and the refused value would win over the rollback.
           writeBoundSignal(controller.state);
+          controller.followDefaultValue();
+        },
+        // Something typed, picked or toggled since the value the outside last
+        // gave or accepted.
+        holdsEdit: () => {
+          return !compareTwoJsValues(controller.uiState, controller.state);
+        },
+        // An uncontrolled control starts on its defaultValue, and a new one is
+        // what it would start on if it were mounted again — a record saved
+        // and handed back normalized, refreshed from elsewhere. It takes it
+        // while it holds no edit. An edit is never undone; the default waits
+        // for it to be accepted or rolled back.
+        followDefaultValue: () => {
+          // A bound signal carries its own default, followed through
+          // stateFromSignal; a proxy shows the control it stands for.
+          if (
+            controller.hasStateProp ||
+            controller.isProxy ||
+            controller.props.signal
+          ) {
+            return;
+          }
+          const { defaultValue } = controller;
+          if (compareTwoJsValues(defaultValue, controller.defaultValueTaken)) {
+            return;
+          }
+          if (controller.holdsEdit()) {
+            return;
+          }
+          controller.defaultValueTaken = defaultValue;
+          controller.state = defaultValue;
+          controller.setUIState(
+            defaultValue,
+            new CustomEvent("outside_value_follow", { detail: {} }),
+          );
         },
         // Read by the callout manager when it has nowhere else to point.
         getCalloutAnchorElement: (event) =>
@@ -38809,7 +39362,12 @@ const useUIStateController = (
           if (controller.hasStateProp || controller.queuedActionAllowedEvent) {
             return;
           }
+          // A picker told yes is told for what its popup shows too, the way a
+          // group tells its children. First, so that a default one of them
+          // takes on the way is part of what this control accepts below.
+          controller.facadeChild?.acknowledgeUIState();
           controller.state = controller.uiState;
+          controller.followDefaultValue();
         },
         onActionEnd: (e) => {
           acknowledgeOwnAction(controller);
@@ -38964,6 +39522,7 @@ const useUIStateController = (
             }
           }
         }
+        controller.followDefaultValue();
       }
       return liveValues();
     },
@@ -39544,7 +40103,12 @@ const useUIGroupStateController = (
           // deferred alongside a mount sync stays a real change.
           const pendingChange = pendingChangeRef.current;
           pendingChangeRef.current = {
-            e,
+            // A default followed is not replaced by a mount deferred beside
+            // it: the event is what lets the sync below read the children.
+            e:
+              pendingChange && isOutsideValueFollow(pendingChange.e)
+                ? pendingChange.e
+                : e,
             notifyExternal:
               pendingChange?.notifyExternal === true ? true : notifyExternal,
             actingChild,
@@ -39552,6 +40116,13 @@ const useUIGroupStateController = (
           return;
         }
         const { controller } = s;
+        if (isOutsideValueFollow(e)) {
+          // Not a partial reading: the child was there already and its value
+          // moved, told by the outside. The group is worth what its children
+          // show, whatever it was handed before — kept, the value it sends
+          // would be one the screen no longer shows.
+          controller.stateGivenFromAbove = false;
+        }
         // A child mounting or unmounting is not somebody answering: while the
         // children of a group are still arriving, their aggregate is a partial
         // reading, and taking it for the truth is how the value the group was
@@ -39730,6 +40301,9 @@ const useUIGroupStateController = (
         name,
         value,
         defaultValue,
+        // Same as the leaf's (see useUIStateController): the default last
+        // placed on the children, behind `defaultValue` while an edit waits.
+        defaultValueTaken: defaultValue,
         hasValueProp,
         hasDefaultValueProp,
         props,
@@ -40010,6 +40584,7 @@ const useUIGroupStateController = (
             }
           }
           onChange(e, { notifyExternal: true });
+          controller.followDefaultValue();
         },
         clearUIState: (e) => {
           const ev = new CustomEvent("propagate_down_clear_ui_state", {
@@ -40038,6 +40613,46 @@ const useUIGroupStateController = (
               c.acknowledgeUIState();
             }
           }
+          controller.followDefaultValue();
+        },
+        // A group holds no value of its own to have edited: it holds an edit
+        // when one of its children does.
+        holdsEdit: () => {
+          return childUIStateControllerArray.some(
+            (c) => shouldPropagateStateToChild(c) && c.holdsEdit(),
+          );
+        },
+        // The leaf's rule (see useUIStateController), for a group given a
+        // plain `defaultValue`: a new one is placed on the children the way
+        // the first one was as they registered, while none of them holds an
+        // edit. A signal's own default is followed by the update below.
+        followDefaultValue: () => {
+          if (controller.hasValueProp || controller.props.signal) {
+            return;
+          }
+          const { defaultValue } = controller;
+          if (compareTwoJsValues(defaultValue, controller.defaultValueTaken)) {
+            return;
+          }
+          if (controller.holdsEdit()) {
+            return;
+          }
+          controller.defaultValueTaken = defaultValue;
+          const followEvent = new CustomEvent("outside_value_follow", {
+            detail: {},
+          });
+          const placeEvent = new CustomEvent("initial_state_push", {
+            detail: {},
+          });
+          chainEvent(placeEvent, followEvent);
+          controller.setUIState(
+            defaultValue === undefined ? fallbackState : defaultValue,
+            placeEvent,
+          );
+          s.parentUIStateController?.onChildUIAction(controller, followEvent, {
+            stateChanged: true,
+            silent: true,
+          });
         },
         onActionEnd: (e) => {
           acknowledgeOwnAction(controller);
@@ -40160,6 +40775,7 @@ const useUIGroupStateController = (
         // former value back over it on the next child interaction.
         placeChildrenFrom(defaultValue);
       }
+      controller.followDefaultValue();
 
       return liveValues();
     },
@@ -40384,7 +41000,11 @@ const useUIFacadeStateController = (props, realUIStateController) => {
           if (child !== firstChildControllerRef.current) {
             return;
           }
-          if (silent && uiStateHoldsNothing(child.uiState)) {
+          if (
+            silent &&
+            !isOutsideValueFollow(e) &&
+            uiStateHoldsNothing(child.uiState)
+          ) {
             // A silent sync means the child's own structure changed (children
             // mounted/unmounted), not that the user acted. A child that ends up
             // with no value there is one that currently *cannot* express one —
@@ -40395,7 +41015,8 @@ const useUIFacadeStateController = (props, realUIStateController) => {
             // still nothing to adopt: the sync would only respell one nothing
             // as another (an array picker's [] becoming undefined, say) and
             // hand that to uiAction — an empty array picker opened its popup
-            // and told its owner the value changed.
+            // and told its owner the value changed. A default followed down to
+            // nothing is not that: the outside emptied a value the child held.
             return;
           }
           updatingRef.current = true;
@@ -40459,6 +41080,69 @@ const useUIFacadeStateController = (props, realUIStateController) => {
   return scope.controller;
 };
 
+/**
+ * What every control of a picker — the picker and the controls in its popup —
+ * has been accepted on as the popup opens. Read back by followOutsideSinceOpen
+ * when the popup is cancelled.
+ */
+const readStatesAtOpen = (pickerController) => {
+  const statesAtOpen = new Map();
+  visitControllers(pickerController, (controller) => {
+    if (Object.hasOwn(controller, "state")) {
+      statesAtOpen.set(controller, controller.state);
+    }
+  });
+  return statesAtOpen;
+};
+
+/**
+ * A cancel puts back the value the picker held at open, which takes back
+ * everything that moved since — and not only what the user moved: a record
+ * refreshed while the popup was open, a default that arrived under a field
+ * holding an edit. Those were not the user's to take back. Once the value at
+ * open is back, each control the outside moved since shows what the outside
+ * holds again, and a default left waiting on an edit is taken there.
+ *
+ * Children before the control around them: a picker given its value by its
+ * owner has the last word over the controls in its popup.
+ */
+const followOutsideSinceOpen = (pickerController, statesAtOpen) => {
+  visitControllers(
+    pickerController,
+    (controller) => {
+      if (
+        statesAtOpen.has(controller) &&
+        !compareTwoJsValues(controller.state, statesAtOpen.get(controller)) &&
+        controller.holdsEdit()
+      ) {
+        controller.setUIState(
+          controller.state,
+          new CustomEvent("outside_value_follow", { detail: {} }),
+        );
+      }
+      controller.followDefaultValue();
+    },
+    { childrenFirst: true },
+  );
+};
+
+// A picker reaches the controls of its popup through its facade child, a group
+// through the children it registered.
+const visitControllers = (controller, visit, { childrenFirst } = {}) => {
+  if (!childrenFirst) {
+    visit(controller);
+  }
+  const children = controller.facadeChild
+    ? [controller.facadeChild]
+    : controller.getChildControllers?.() || [];
+  for (const child of children) {
+    visitControllers(child, visit, { childrenFirst });
+  }
+  if (childrenFirst) {
+    visit(controller);
+  }
+};
+
 const describePicker = (props) =>
   `<Picker${props.name ? ` name="${props.name}"` : ""}${props.type ? ` type="${props.type}"` : ""}>`;
 
@@ -40523,10 +41207,18 @@ const INTERNAL_EVENT_SET = new Set([
   // no action of the control's own — but what it holds really did move, so
   // uiAction, the bound signal and the parent notification below all happen.
   "auto_fix",
+  // A control put on a value the outside moved while nobody was editing it: a
+  // new defaultValue (see followDefaultValue), or what a cancel puts back
+  // (see followOutsideSinceOpen). Initialization arriving after mount, so
+  // nothing fires, and the groups above hear it silently.
+  "outside_value_follow",
 ]);
 const isInternalEvent = (e) => {
   return INTERNAL_EVENT_SET.has(e.type);
 };
+const isOutsideValueFollow = (e) => {
+  return Boolean(findEvent(e, "outside_value_follow"));
+};
 
 /**
  * A value handed DOWN to a control by whoever owns it: a picker filling its
@@ -45965,6 +46657,35 @@ const usePreloadOnIntent = (ref, href, prefetch = true) => {
   }, [ref, href, prefetch]);
 };
 
+/**
+ * What a popup's opening will read, asked for when the press on the element
+ * whose command opens it starts (see announceOpeningPress): the popup, the
+ * value it opens on and so the address it will write are all known before
+ * the release.
+ */
+const usePreloadOpeningOnPress = (ref, command, prefetch = true) => {
+  useEffect(() => {
+    if (!prefetch || !command) {
+      return undefined;
+    }
+    const element = ref.current;
+    if (!element) {
+      return undefined;
+    }
+    const onPointerDown = (pointerdownEvent) => {
+      // A right click opens a menu, never the popup.
+      if (pointerdownEvent.button !== 0) {
+        return;
+      }
+      announceOpeningPress(element, command);
+    };
+    element.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      element.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [ref, command, prefetch]);
+};
+
 /**
  * Hook that reactively checks if a URL is visited.
  * Re-renders when the visited URL set changes.
@@ -49965,7 +50686,8 @@ const useExpandableContext = partName => {
  *   content — and rebuilds it from scratch on every expansion. Under the
  *   other three, intent on the UI part (pointer entering it, focus landing in
  *   it) builds the content ahead of the click; `"while-opened"` content is
- *   never warmed, it is built at the open.
+ *   built by a press on it only, and thrown away if that press does not
+ *   expand it.
  */
 const Expandable = props => {
   import.meta.css = [css$R, "@jsenv/navi/src/control/expandable/expandable.jsx"];
@@ -50044,8 +50766,14 @@ const Expandable = props => {
   // before the click ever fires — so what held the focus has to be remembered
   // at pointerdown time.
   const focusedAtPointerDownRef = useRef(null);
-  const onUIPointerDown = () => {
+  const onUIPointerDown = pointerdownEvent => {
     focusedAtPointerDownRef.current = document.activeElement;
+    // The start of an expansion, announced as a --navi-open button announces
+    // its own (see announceOpeningPress in commands.js) — unless aimed at a
+    // control inside the UI part, whose click does not toggle (see onUIClick).
+    if (pointerdownEvent.button === 0 && !openController.opened && !isAimedAtControlInsideUI(pointerdownEvent.target)) {
+      dispatchCustomEvent(rootRef.current, "navi_open_press");
+    }
   };
 
   // The content keeps its final size while the track animates (see the top
@@ -50343,17 +51071,18 @@ const Expandable = props => {
     if (clickEvent.defaultPrevented) {
       return;
     }
-    const {
-      target
-    } = clickEvent;
-    if (target.nodeType === 1) {
-      const interactiveElement = target.closest(UI_INTERACTIVE_SELECTOR);
-      if (interactiveElement && interactiveElement !== uiRef.current && uiRef.current.contains(interactiveElement)) {
-        return;
-      }
+    if (isAimedAtControlInsideUI(clickEvent.target)) {
+      return;
     }
     toggle(clickEvent);
   };
+  const isAimedAtControlInsideUI = target => {
+    if (target.nodeType !== 1) {
+      return false;
+    }
+    const interactiveElement = target.closest(UI_INTERACTIVE_SELECTOR);
+    return Boolean(interactiveElement) && interactiveElement !== uiRef.current && uiRef.current.contains(interactiveElement);
+  };
 
   // Space/Enter on the UI part itself (role button) — a key pressed on a
   // control inside it belongs to that control.
@@ -51277,6 +52006,9 @@ const ButtonUI = props => {
   // Nothing to prefetch on the way to another document: the routes do not
   // lead there.
   usePreloadOnIntent(ref, href, isDocument ? false : prefetch);
+  // A press the button refuses opens nothing: nothing to ask ahead for.
+  const refusesPress = basePseudoState[":read-only"] || basePseudoState[":disabled"] || loading;
+  usePreloadOpeningOnPress(ref, props.command, prefetch && !refusesPress);
   useAccentColorAttributes(ref, null, {
     elementSelector: visualSelector
   });
@@ -51768,8 +52500,11 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   pointer or the focus arrives, ahead of the press (see
  *   docs/dynamic_import.md): the route actions that ask nothing of the
  *   address — a page's code, a read without params — are prerun; one keyed by
- *   a param waits for the arrival. `false` for a destination not worth
- *   fetching on a hover.
+ *   a param waits for the arrival. With a `--navi-open`/`--navi-toggle`
+ *   command instead, the press — not the hover: what it asks is keyed by the
+ *   popup — preruns the route actions whose params the popup's opening
+ *   changes, read as if its `signal` held its `value`. `false` for a
+ *   destination not worth fetching ahead.
  * @param {boolean} [pressableDuringRouteTransition] Keep answering presses
  *   while a route transition plays: what a movement photographs goes deaf to
  *   the pointer for its whole length, and the door that opened the page — a
@@ -58649,6 +59384,52 @@ const SlideContainer = ({
         drag.areaPulled = pulled > 0 ? drag.areaBack : drag.areaOn;
         paintDrag();
       },
+      // The slide being brought in walked whole and the hand still going, or a
+      // travel caught on its way thrown on: either way the hand asks for the
+      // slide past it, and the gesture moves on to it. Nothing on screen moves
+      // for that — the slide reached becomes the one dragged, the one the hand
+      // came from stays next to it for a hand that turns around, and the slide
+      // past it is put on the other side.
+      onEdge: ({
+        axis,
+        sign
+      }) => {
+        const reached = sign > 0 ? drag.areaBack : drag.areaOn;
+        const {
+          slideElements,
+          placeOf
+        } = readMap();
+        const reachedElement = reached && slideElements.find(slideElement => readArea(slideElement) === reached);
+        if (!reachedElement) {
+          return false;
+        }
+        // The gate goToArea reads at the release, asked of the slide the hand
+        // is now in: a slide holding on to the user is not walked through.
+        const holds = reachedElement.hasAttribute(sign > 0 ? "data-prevent-nav-previous" : "data-prevent-nav-next");
+        const past = holds ? undefined : axis === "x" ? areaTowards(-sign, 0, reached) : areaTowards(0, -sign, reached);
+        if (!past) {
+          return false;
+        }
+        const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
+        const basePlace = stageRef.current?.placeByArea.get(reached) || placeOf.get(reached) || {
+          x: 0,
+          y: 0
+        };
+        drag.areaBack = sign > 0 ? past : drag.area;
+        drag.areaOn = sign > 0 ? drag.area : past;
+        drag.area = reached;
+        drag.basePlace = basePlace;
+        drag.baseOffset = {
+          x: -basePlace.x * drag.box.width,
+          y: -basePlace.y * drag.box.height
+        };
+        stageDrag(drag, readArea(currentElement));
+        return {
+          size: axis === "x" ? drag.box.width : drag.box.height,
+          travelBack: Boolean(drag.areaBack),
+          travelOn: Boolean(drag.areaOn)
+        };
+      },
       onEnd: ({
         axis,
         sign,
@@ -62537,9 +63318,11 @@ const css$E = /* css */`
  *   the cost on the critical render. `"while-opened"` throws them away once
  *   the popup has finished closing, for content whose fresh state is its
  *   initial state: an uncontrolled field seeded from a `defaultValue` that
- *   changed while the popup was closed. Whatever the value, intent on the
- *   anchor (pointer entering it, focus landing in it) builds the content
- *   ahead of the click.
+ *   changed while the popup was closed. Intent on the anchor (pointer
+ *   entering it, focus landing in it) builds the content ahead of the click;
+ *   under `"while-opened"`, only a press on what opens the popup does (a
+ *   `--navi-open` button, a picker's trigger), never with an `onOpen`, and a
+ *   press that does not open the popup throws it away.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
@@ -64217,9 +65000,11 @@ const css$D = /* css */`
  *   the cost on the critical render. `"while-opened"` throws them away once
  *   the popup has finished closing, for content whose fresh state is its
  *   initial state: an uncontrolled field seeded from a `defaultValue` that
- *   changed while the popup was closed. Whatever the value, intent on the
- *   anchor (pointer entering it, focus landing in it) builds the content
- *   ahead of the click.
+ *   changed while the popup was closed. Intent on the anchor (pointer
+ *   entering it, focus landing in it) builds the content ahead of the click;
+ *   under `"while-opened"`, only a press on what opens the popup does (a
+ *   `--navi-open` button, a picker's trigger), never with an `onOpen`, and a
+ *   press that does not open the popup throws it away.
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
@@ -65882,7 +66667,10 @@ const PickerCustom = props => {
       // a defaultValue holds nothing, so closing on it untouched IS the answer
       // ("yes, 2h15") — the same rule Form applies to an untouched field (see
       // isUIStateHeld). Read at open, before anything inside can change it.
-      const heldAtOpen = isUIStateHeld(getPickerInput(ref.current)?.__uiStateController__);
+      const pickerController = getPickerInput(ref.current)?.__uiStateController__;
+      const heldAtOpen = isUIStateHeld(pickerController);
+      // What a cancel must not take back: see followOutsideSinceOpen.
+      const statesAtOpen = pickerController ? readStatesAtOpen(pickerController) : null;
       onOpen?.(openEvent);
       return {
         onRequestClose: requestCloseEvent => {
@@ -65950,6 +66738,9 @@ const PickerCustom = props => {
             });
             chainEvent(rollbackEvent, closeEvent);
             inputEl.__uiStateController__.setUIState(valueAtOpen, rollbackEvent);
+            if (statesAtOpen) {
+              followOutsideSinceOpen(inputEl.__uiStateController__, statesAtOpen);
+            }
           } else if (!heldAtOpen) {
             // Confirmed a suggestion: nothing changed, so nothing has told the
             // control's own bound signal / uiAction that this is now the
@@ -66030,6 +66821,11 @@ const PickerCustom = props => {
       "onnavi_request_open": e => {
         dispatchCustomEvent(popupRef.current, "navi_request_open", e.detail);
       },
+      // And the press announcing that request (see announceOpeningPress in
+      // commands.js), for the popup's content to be built on it.
+      "onnavi_open_press": () => {
+        dispatchCustomEvent(popupRef.current, "navi_open_press");
+      },
       "onnavi_request_close": e => {
         const closing = dispatchCustomEvent(popupRef.current, "navi_request_close", e.detail);
         if (!closing) {
@@ -66224,6 +67020,25 @@ const PickerCustom = props => {
       // below), and the keyboard keeps its own ways in (the shortcuts above).
       const openOnList = Array.isArray(openOn) ? openOn : [openOn];
       const opensOnPress = openOnList.includes("press");
+      // A press on the trigger of a picker a press opens is announced as it
+      // starts, as a --navi-open button announces its own (see
+      // announceOpeningPress in commands.js). Only a press that can open it: a
+      // picker opened by a hold says nothing on a tap, nor does one refusing
+      // to open (read-only with openWhileReadOnly={false}, busy). The
+      // interactivity is asked alone, not the whole gate: a drag source
+      // cancels the pointerdown, and the click that opens still comes.
+      if (opensOnPress) {
+        pickerProps.onPointerDown = pointerdownEvent => {
+          props.onPointerDown?.(pointerdownEvent);
+          const pickerEl = ref.current;
+          if (pointerdownEvent.button !== 0 || openController.opened || isWithinPickerContent(pointerdownEvent.target) || !allowsInteraction(pickerEl, {
+            intent: "read"
+          })) {
+            return;
+          }
+          dispatchCustomEvent(pickerEl, "navi_open_press");
+        };
+      }
       let interactions = props.interactions;
       if (!opensOnPress) {
         interactions = {
@@ -78354,6 +79169,9 @@ const css$n = /* css */`.navi_split_button {
  *   defaultValue?: any,
  *   label?: import("ignore:preact").ComponentChildren,
  *   action?: (value: any, event: Event) => void | Promise<void>,
+ *   command?: string,
+ *   commandFor?: string,
+ *   prefetch?: boolean,
  *   onValueChange?: (value: any, event: Event) => void,
  *   chooseEffect?: "select" | "run",
  *   menuLabel?: string,
@@ -78407,6 +79225,12 @@ const css$n = /* css */`.navi_split_button {
  *   entry given. Pressed on the button it is the entry the button stands for;
  *   with `chooseEffect="run"` it is also the entry just chosen. Awaited: the
  *   whole split button is busy until it settles.
+ * @param {string} [command] What a press on the button does once its `action`
+ *   is done, as on a `<Button>` (with `commandFor`, and `command-value` when
+ *   what the command is about is not the entry the button stands for). A
+ *   split button whose button opens a popup says it here rather than from its
+ *   `action`: the press is then read as an opening before it runs, and asks
+ *   ahead for what the popup's opening reads (see `prefetch` on Button).
  * @param {"select"|"run"} [chooseEffect="select"] What choosing an entry does.
  *   "select" hands the button that entry, to be run by a press on it — for
  *   something one does again and again, where the last choice is the likely
@@ -78448,6 +79272,10 @@ const SplitButton = props => {
     defaultValue,
     label,
     action,
+    command,
+    commandFor,
+    "command-value": commandValue,
+    prefetch,
     onValueChange,
     chooseEffect = "select",
     menuLabel = naviI18n("button.more_actions"),
@@ -78541,6 +79369,10 @@ const SplitButton = props => {
         id: idResolved,
         value: valueResolved,
         action: actionResolved,
+        command: command,
+        commandFor: commandFor,
+        "command-value": commandValue,
+        prefetch: prefetch,
         ...halfProps,
         children: label === undefined ? optionShown?.label : label
       }), jsxs("div", {