@jsenv/navi 0.29.419 → 0.29.420

package/dist/dev/jsenv_navi.js

@@ -426,6 +426,22 @@ const whenRenderingResumes = (callback) => {
   renderingHold.waiting.push(callback);
 };
 
+// After the render the change being applied has queued, for what depends on
+// the page that change puts on screen — an offset given back to a page is
+// clamped to whatever page the document holds when it is written. Under a hold
+// that render runs when the hold is released, and this right after it.
+// Otherwise the render is Preact's own, queued in a microtask, and every
+// microtask has run by the next frame — before it paints.
+const whenPageRendered = (callback) => {
+  if (renderingHold) {
+    renderingHold.waiting.push(callback);
+    return;
+  }
+  requestAnimationFrame(() => {
+    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
@@ -800,7 +816,10 @@ const writeTarget = (element) => {
       silencedElement.id = addressTargetId;
     }
     window.history.replaceState(historyState, null, address);
-    if (entry && navigation.currentEntry) {
+    // Only a state the entry had is put back: an entry nobody wrote one on
+    // (via_history.js never does) has nothing to lose, and updateCurrentEntry
+    // cannot say "none" — `state` is a required member, and undefined throws.
+    if (entry && navigation.currentEntry && entryState !== undefined) {
       navigation.updateCurrentEntry({ state: entryState });
     }
     targetWriteInProgress = false;
@@ -3675,6 +3694,8 @@ const actionWeakMap = new WeakMap();
  *   than a first load (data_states.md). Called at the start of every run whose
  *   value is undefined; the answer replaces it as usual, and `undefined` means
  *   "nothing known". A resource `GET` uses it to draw the row its store holds.
+ *   An action declaring it is asked for it by a binding moving to new params,
+ *   rather than handed the previous params' answer (see inheritData).
  * @param {{ ms?: number, max?: number }} [rootOptions.keep] - how long an
  *   answer stays good once it has landed. Without it an answer lives exactly as
  *   long as something references it: the screen that asked goes away, and
@@ -4342,7 +4363,14 @@ const createAction = (callback, rootOptions = {}) => {
             if (rejected) {
               return failRun(rejectedValue);
             }
-            return onRunEnd();
+            // Turning the answer into a value can throw as well — a resource
+            // write answering nothing to upsert. That fails the run, as the
+            // catch below does when the callback answered synchronously.
+            try {
+              return onRunEnd();
+            } catch (e) {
+              return failRun(e);
+            }
           });
         } catch (e) {
           return failRun(e);
@@ -4385,6 +4413,7 @@ const createAction = (callback, rootOptions = {}) => {
 
       const privateProperties = {
         valueInitial,
+        provisionalValue,
 
         performRun,
         performReset,
@@ -4416,7 +4445,8 @@ const createAction = (callback, rootOptions = {}) => {
  *   This enables live updates - for example, performing an HTTP GET request every time
  *   a list of filters changes, providing real-time results without user interaction.
  * @param {boolean} options.inheritData - When false, each new target action starts fresh with no inherited state.
- *   By default (true), the proxy carries over the previous target's value and error into the new action.
+ *   By default (true), the proxy carries over the previous target's value and error into the new action —
+ *   unless the action declares a `provisionalValue`, which then says what the new one holds.
  *   This keeps the facade in sync with the latest known data: `action.dataSignal.value` only changes when a
  *   new action completes, not when it starts loading. Code that needs to distinguish loading state can still
  *   check `action.runningState`, while code that just reads `action.data` always sees the most recent
@@ -4463,8 +4493,14 @@ const createActionProxyFromSignal = (
   let currentActionPrivateProperties = getActionPrivateProperties(action);
   let actionTargetPreviousWeakRef = null;
 
+  // An action saying for itself what it holds for params it has not answered
+  // (provisionalValue: a resource GET draws the row its store holds) is not
+  // handed the previous params' answer — an answer about another row. What it
+  // does not know stays unknown: a skeleton, never a different row.
+  const inheritsAnswer =
+    inheritData && !getActionPrivateProperties(action).provisionalValue;
   const createTarget = (params) => {
-    if (inheritData) {
+    if (inheritsAnswer) {
       const previousActionTarget = actionTargetPreviousWeakRef?.deref();
       const previousTarget = previousActionTarget || action;
       return action.bindParams(params, {
@@ -4577,6 +4613,12 @@ const createActionProxyFromSignal = (
     return signalProxy;
   };
 
+  // Params bound onto this binding make the action bound to both — these over
+  // the ones it follows, as an instance's go over its action's — following the
+  // signals of both: what a control does with the action it is given, and
+  // actionRunEffect. Kept per params like the action's own bindings, since a
+  // control binds its action again at every render.
+  const bindingOnProxyWeakMap = createJsValueWeakMap();
   Object.assign(actionProxy, {
     isAction: true,
     isProxy: true,
@@ -4601,14 +4643,27 @@ const createActionProxyFromSignal = (
       });
       return currentAction;
     },
-    bindParams: () => {
-      throw new Error(
-        `bindParams() is not supported on action proxies, use the underlying action instead`,
+    bindParams: (newParamsOrSignal, options) => {
+      const existingBinding = bindingOnProxyWeakMap.get(newParamsOrSignal);
+      if (existingBinding) {
+        return existingBinding;
+      }
+      const binding = action.bindParams(
+        computed(() =>
+          mergeActionParams(
+            paramsSignal.value,
+            readParamsHandedToBind(newParamsOrSignal),
+          ),
+        ),
+        options,
       );
+      bindingOnProxyWeakMap.set(newParamsOrSignal, binding);
+      return binding;
     },
     replaceParams: null, // Will be set below
     toString: () => callSourceSignal.peek(), // peek: see the action's toString
     meta: action.meta,
+    debug: action.debug,
 
     paramsSignal: proxyParamsSignal,
     paramsSettlingSignal,
@@ -4751,6 +4806,29 @@ const generateActionCallSource = (name, params) => {
   return `${name}${argsString}`;
 };
 
+// What params handed to bindParams say at this moment, read as a binding reads
+// them (see _bindParams): a signal is its value, and so is each signal a plain
+// object holds at its first level. Read inside a computed, it follows them.
+const readParamsHandedToBind = (newParamsOrSignal) => {
+  if (isSignal(newParamsOrSignal)) {
+    return newParamsOrSignal.value;
+  }
+  if (!isPlainObject(newParamsOrSignal)) {
+    return newParamsOrSignal;
+  }
+  const params = {};
+  for (const key of Object.keys(newParamsOrSignal)) {
+    const value = newParamsOrSignal[key];
+    const valueSignal = isSignal(value)
+      ? value
+      : value
+        ? value[SYMBOL_OBJECT_SIGNAL]
+        : undefined;
+    params[key] = valueSignal ? valueSignal.value : value;
+  }
+  return params;
+};
+
 const isPlainObject = (obj) => {
   if (typeof obj !== "object" || obj === null) {
     return false;
@@ -4863,9 +4941,16 @@ const actionRunEffect = (
     }
     return params;
   });
+  // Whether the getter asks for a run is read off what it returned, never off
+  // the params of the instance it leads to: an action handed here holding
+  // params of its own (an instance, a binding) keeps them when the getter
+  // returns nothing — and nothing must still run nothing.
+  let asking = Boolean(actionParamsSignal.peek());
   const actionRunnedByThisEffect = action.bindParams(actionParamsSignal, {
     debounce,
     onChange: (actionTarget, actionTargetPrevious, { explicitRunIntent }) => {
+      const askingBefore = asking;
+      asking = Boolean(actionParamsSignal.peek());
       if (explicitRunIntent) {
         // The caller already issued an explicit run/rerun/prerun/reset/abort —
         // don't attempt to also auto-run from the params change to avoid double-runs.
@@ -4876,7 +4961,7 @@ const actionRunEffect = (
       }
       if (!actionTargetPrevious && actionTarget) {
         // first run
-        if (!actionTarget.params) {
+        if (!asking) {
           // falsy params, don't run
           return;
         }
@@ -4892,12 +4977,12 @@ const actionRunEffect = (
         actionTarget
       ) {
         // params changed
-        if (!actionTarget.params) {
+        if (!asking) {
           // falsy params, don't run
           actionTargetPrevious.abort("abortOnFalsyParams");
           return;
         }
-        if (!actionTargetPrevious.params) {
+        if (!askingBefore) {
           // coming from falsy-params state: action may already be cached, avoid unnecessary rerun
           runUnwatched(() =>
             actionTarget.run({ reason: "params restored from falsy state" }),
@@ -4909,7 +4994,7 @@ const actionRunEffect = (
     },
     ...options,
   });
-  if (actionParamsSignal.peek()) {
+  if (asking) {
     runUnwatched(() =>
       actionRunnedByThisEffect.run({ reason: "initial truthy params" }),
     );
@@ -6981,6 +7066,28 @@ let navDepthMax = 0;
 
 const getNavDepth = () => navDepth;
 
+// Where an entry's state says it stands, undefined when it says nothing.
+const readNavDepthInState = (state) => {
+  if (state && typeof state[NAV_DEPTH_STATE_KEY] === "number") {
+    return state[NAV_DEPTH_STATE_KEY];
+  }
+  return undefined;
+};
+
+// The state of the entry a document is loaded into, carrying its depth. One
+// that says a depth was written by this document (a reload in the middle of
+// the stack) and keeps it. One that says none was not: a url opened cold, the
+// first of the stack — or, rarely, an entry the browser made for a fragment,
+// reloaded, which 0 under-reports as above. Written into the entry by the
+// integrations, because a back that returns there reads where it stands from
+// the entry alone.
+const stateWithNavDepthOnLoad = (state) => {
+  if (readNavDepthInState(state) !== undefined) {
+    return state;
+  }
+  return { ...state, [NAV_DEPTH_STATE_KEY]: 0 };
+};
+
 const applyNavigationToNavDepth = (navigationType, state) => {
   if (navigationType === "push") {
     navDepth++;
@@ -6988,10 +7095,7 @@ const applyNavigationToNavDepth = (navigationType, state) => {
     navDepthMax = navDepth;
   } else if (navigationType === "replace") ; else {
     // load, reload, traverse: the entry itself says where it stands.
-    const depthInState =
-      state && typeof state[NAV_DEPTH_STATE_KEY] === "number"
-        ? state[NAV_DEPTH_STATE_KEY]
-        : undefined;
+    const depthInState = readNavDepthInState(state);
     if (depthInState !== undefined) {
       navDepth = depthInState;
       if (navDepth > navDepthMax) {
@@ -10524,6 +10628,18 @@ const preloadUrl = (url) => {
   }
 };
 
+// What a reload asks of each action bound to a route (see routeAction): the
+// action to run again, or nothing when its params ask nothing.
+const routeReloadMap = new WeakMap();
+const registerRouteReload = (route, reload) => {
+  let reloadSet = routeReloadMap.get(route);
+  if (!reloadSet) {
+    reloadSet = new Set();
+    routeReloadMap.set(route, reloadSet);
+  }
+  reloadSet.add(reload);
+};
+
 const routeStatePreloadMap = new WeakMap();
 const registerRouteStatePreload = (route, preload) => {
   let preloadSet = routeStatePreloadMap.get(route);
@@ -10613,6 +10729,7 @@ This prevents cross-test pollution and ensures clean state.`,
   const updateRoutes = (
     url,
     {
+      navigationType,
       isVisited = () => false,
       // state
     } = {},
@@ -10912,6 +11029,27 @@ This prevents cross-test pollution and ensures clean state.`,
       }
     }
 
+    // A route's actions run again when their params change (see routeAction),
+    // and a reload changes none: it asks again for the page one is on. So the
+    // actions of every matching route are handed back, to be rerun — except
+    // those whose params ask nothing.
+    if (navigationType === "reload") {
+      const reloadSet = new Set();
+      for (const route of returnValue.matchingRouteSet) {
+        const routeReloadSet = routeReloadMap.get(route);
+        if (!routeReloadSet) {
+          continue;
+        }
+        for (const reload of routeReloadSet) {
+          const actionToRerun = reload();
+          if (actionToRerun) {
+            reloadSet.add(actionToRerun);
+          }
+        }
+      }
+      returnValue.reloadSet = reloadSet;
+    }
+
     return returnValue;
   };
 
@@ -11318,11 +11456,18 @@ const installScrollRestoration = () => {
   }
 };
 
+// Where the document lands is the last arrival's to say. A return waits for its
+// page (see restoreScrollPositionOnReturn), and an arrival decided meanwhile — a
+// page that sends the reader elsewhere as it mounts — must not be scrolled to
+// where the return was going.
+let arrivalCount = 0;
+
 // Nothing to put back is not the same as putting back the top: a page arrived
 // at for the first time is startAtTop's business, and this must not step on it.
 // Whether there was anything, for a caller who has an answer of its own for the
 // page that has never been read.
 const restoreScrollPosition = (url) => {
+  arrivalCount++;
   const position = positionByUrl.get(new URL(url, window.location.href).href);
   if (!position) {
     return false;
@@ -11336,6 +11481,28 @@ const restoreScrollPosition = (url) => {
   return true;
 };
 
+// A traversal back to `url`. The offset is written once the page returned to is
+// rendered: written sooner, the document still holds the page being left and
+// clamps it to that page's height. It is read at once all the same — a page
+// left taller than the one arriving is clamped by the render itself, and that
+// clamp is a scroll recorded under the url already returned to.
+const restoreScrollPositionOnReturn = (url) => {
+  const arrival = ++arrivalCount;
+  const position = positionByUrl.get(new URL(url, window.location.href).href);
+  if (!position) {
+    return;
+  }
+  whenPageRendered(() => {
+    if (arrival !== arrivalCount) {
+      return;
+    }
+    if (documentHoldCount) {
+      return;
+    }
+    scrollTo(position);
+  });
+};
+
 // A page one arrives at for the first time starts at its top. Only a document
 // navigation does that on its own: a pushState creates its entry with whatever
 // scroll happened to be there, so without this the page opens at the offset of
@@ -11361,6 +11528,7 @@ const startAtTop = (url, { from } = {}) => {
   if (!isArrival(url, { from })) {
     return;
   }
+  arrivalCount++;
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });
 };
 const isArrival = (url, { from }) => {
@@ -11831,12 +11999,12 @@ const setupBrowserIntegrationViaHistory = ({
       isVisited,
       state,
     });
-    // Where the document lands, said by what kind of arrival this is. Both are
-    // waited for, and for the same two reasons: the page has to be there to be
-    // scrolled, and a picture taken before it would be of a page at its top
-    // (see rendering_hold.js, which is where the waiting happens). After the
-    // history has been written too, so the entry being left keeps the offset
-    // it is at.
+    // Where the document lands, said by what kind of arrival this is. Never
+    // before the picture of a transition is taken, which would be of a page
+    // at its top (see rendering_hold.js), and after the history has been
+    // written, so the entry being left keeps the offset it is at. A return
+    // also waits for the page it returns to: an offset is clamped to whatever
+    // page the document holds when it is written.
     //
     // A replace gets neither: it is the same place said differently — a param
     // settling, a state written — and moving the reader for it would throw
@@ -11847,7 +12015,7 @@ const setupBrowserIntegrationViaHistory = ({
     if (navigationType === "push") {
       whenRenderingResumes(() => startAtTop(url, { from: urlLeft }));
     } else if (navigationType === "traverse") {
-      whenRenderingResumes(() => restoreScrollPosition(url));
+      restoreScrollPositionOnReturn(url);
     }
     executeWithCleanup(
       () => allResult,
@@ -12082,11 +12250,12 @@ const setupBrowserIntegrationViaHistory = ({
   const init = () => {
     const url = window.location.href;
     const stateOnEntry = window.history.state;
-    const state = dropGeneratedIdKeys(stateOnEntry);
+    const state = stateWithNavDepthOnLoad(dropGeneratedIdKeys(stateOnEntry));
     if (state !== stateOnEntry) {
-      // The entry itself has to lose them too, not just the document state:
-      // getDocumentState() reads the entry back, and every state write copies
-      // what it finds there onto the next one.
+      // The entry itself has to carry it, not just the document state:
+      // getDocumentState() reads the entry back, every state write copies what
+      // it finds there onto the next one, and a back returning here reads its
+      // depth from it.
       writeHistoryEntry("replace", state, url);
     }
     handleRoutingTask(url, {
@@ -12256,7 +12425,6 @@ const applyRouting = (
   url,
   {
     globalAbortSignal,
-    abortSignal,
     // state
     navigationType,
     isVisited,
@@ -12268,45 +12436,36 @@ const applyRouting = (
     // likely because code does not uses routing at all
     return {};
   }
-  const {
-    loadSet,
-    reloadSet,
-    abortSignalMap,
-    routeLoadRequestedMap,
-    activeRouteSet,
-  } = updateRoutes(url, {
+  // The routes' actions follow the address by themselves (see routeAction):
+  // what a navigation leaves to the routing is a reload, the one that asks
+  // them again with the address unchanged.
+  const { reloadSet } = updateRoutes(url, {
     navigationType,
     isVisited,
     // state,
   });
-  if (
-    (!loadSet || loadSet.size === 0) &&
-    (!reloadSet || reloadSet.size === 0)
-  ) {
+  if (!reloadSet || reloadSet.size === 0) {
     return {
       allResult: undefined,
       requestedResult: undefined,
-      activeRouteSet: new Set(),
     };
   }
   const updateActionsResult = updateActions({
     globalAbortSignal,
-    abortSignal,
-    runSet: loadSet,
+    // Not the navigation's own signal: the next navigation aborts that one, and
+    // an action whose route still matches there would be left aborted — its
+    // params do not change, so nothing would run it again.
+    abortSignal: new AbortController().signal,
     rerunSet: reloadSet,
-    abortSignalMap,
     reason,
-    isReplace: navigationType === "replace",
   });
   const { allResult, runningActionSet } = updateActionsResult;
   const pendingTaskNameArray = [];
-  for (const [route, routeAction] of routeLoadRequestedMap) {
-    if (runningActionSet.has(routeAction)) {
-      pendingTaskNameArray.push(`${route.relativeUrl} -> ${routeAction.name}`);
-    }
+  for (const runningAction of runningActionSet) {
+    pendingTaskNameArray.push(runningAction.name);
   }
   routingWhile(() => allResult, pendingTaskNameArray);
-  return { ...updateActionsResult, activeRouteSet };
+  return updateActionsResult;
 };
 
 const setupBrowserIntegration =
@@ -12388,6 +12547,12 @@ const stopLoad = (reason = "stopLoad() called") => {
     browserIntegration.stop(reason);
   }
 };
+/**
+ * Asks again for the page one is on, without reloading the document: the
+ * actions of the routes matching the url run again (see routeAction), one that
+ * failed included — what a "Retry" under a page that could not load calls.
+ * The address, the history and the scroll stay as they are.
+ */
 const reload = browserIntegration.reload;
 /**
  * Go back to the screen this document came from.
@@ -12410,11 +12575,13 @@ const reload = browserIntegration.reload;
  *   way a screen closed over a url keeps what was written to the url while it
  *   was open (see useNavState's leave()).
  * @returns {Promise<boolean>|undefined}
- *   When there is something to go back to: a promise resolved once the back
- *   has landed and been applied (`true` — the document url and state say
- *   where it landed), or `false` when the traversal was preempted and landed
- *   nowhere. `undefined` otherwise — nothing happened, or the fallback took
- *   the current entry's place.
+ *   When there is something to go back to: a promise resolved with `true`
+ *   once the back has landed and been applied — the document url and state
+ *   then say where it landed. A back preempted by another navigation, which
+ *   lands nowhere, resolves `false` only under the Navigation API integration
+ *   (see USE_NAVIGATION_API, off today): the History API does not tell it
+ *   apart. `undefined` otherwise — nothing happened, or the fallback took the
+ *   current entry's place.
  */
 const navBack = browserIntegration.navBack;
 const navForward = browserIntegration.navForward;
@@ -13429,10 +13596,11 @@ const isKeyboardModality = () => keyboardNavigationUsed;
 {
   // We implement :focus and :focus-visible with enriched semantics:
   // an element is considered focused not only when it natively has focus, but also
-  // when a "focus proxy" element has focus (e.g. a read-only range input delegates
-  // focus to a sibling span) or when a controlling element has focus (e.g. a combobox
-  // input with aria-controls pointing to a listbox — the listbox should appear focused
-  // while the input is focused).
+  // when it is a control proxy whose real control has focus (the proxy is what is
+  // seen, the focus is dealt to the real control — see control_proxy.js) or when
+  // a controlling element has focus (e.g. a combobox input with aria-controls
+  // pointing to a listbox — the listbox should appear focused while the input is
+  // focused).
   //
   // We intentionally reuse the native :focus / :focus-visible names rather than
   // introducing new navi-specific pseudo-classes (e.g. :-navi-focus). This is a
@@ -13524,7 +13692,7 @@ const isKeyboardModality = () => keyboardNavigationUsed;
 
   // Returns true when el holds focus indirectly — either because a controlling
   // element (aria-controls) has focus, or because el is a proxy whose target
-  // is itself controlled by a focused element.
+  // has focus or is itself controlled by a focused element.
   const hasIndirectFocus = (el, { requireFocusVisible = false } = {}) => {
     // No ring inheritance without a keyboard: an editable target draws its own
     // ring on any focus (see isMatchingFocusVisible), but propagating that ring
@@ -22271,10 +22439,11 @@ const swipeTypeOf = (axis, pulled) => {
  * insists.
  *
  * So the interaction stays declared and says "refuse" in place of what it does.
- * The threshold is the same one — a mouse travelling, a finger holding still, the
- * first pixel inside a `data-drag-on-contact` — and at the instant the grab would
- * have been acquired there is none: nothing translates, no copy is made, no
- * release is answered. `refuse` is that instant.
+ * The threshold is the same one — a mouse travelling a few pixels, a finger
+ * holding still, or travelling those same few pixels inside a
+ * `data-drag-on-contact` — and at the instant the grab would have been
+ * acquired there is none: nothing translates, no copy is made, no release is
+ * answered. `refuse` is that instant.
  *
  * It walks no axis, so it takes none: a box that travels and a surface that pans
  * both step over an element that is refusing, and a gesture starting on a locked
@@ -25991,8 +26160,9 @@ const createResourceLifecycleManager = () => {
           }
 
           // scopedMany auto-dependency: only rerun parent singular GET on child POST,
-          // and only when the parent GET previously returned the sub-resource embedded
-          // inside its response (detected via action._resultProperties).
+          // only the GET of the owner the child was posted to, and only when that
+          // GET previously returned the sub-resource embedded inside its response
+          // (detected via action._resultProperties).
           // GET_MANY is excluded — a list of parents is not stale just because one
           // child item was added to one of them.
           scoped_many_effect: {
@@ -26013,6 +26183,15 @@ const createResourceLifecycleManager = () => {
                 if (parentResource !== resourceScope) {
                   continue;
                 }
+                if (
+                  !isOwnerReadBy(
+                    triggerResourceScope,
+                    triggeringAction,
+                    actionCandidate,
+                  )
+                ) {
+                  break scoped_many_effect;
+                }
                 // Only rerun if the last GET response included the embedded sub-resource.
                 if (
                   !getActionResultProperties(actionCandidate)?.has(propertyName)
@@ -26129,6 +26308,27 @@ const isParamSubset = (parentParams, childParams) => {
   return true;
 };
 
+// Whether a GET of the owner read the item a scoped child's action was answered
+// for. The child's value names its owner first ([ownerKey, …], see scopedMany);
+// the GET's value is the id of the item it read. The key may be a unique key
+// rather than that id: both lead to the owner's one store of children. Values
+// are read off the signals: the child's action is still completing, and its
+// `value` property is only written once that batch ends.
+const isOwnerReadBy = (childResource, childAction, ownerGetAction) => {
+  const childValue = childAction.valueSignal.peek();
+  if (!Array.isArray(childValue)) {
+    return false;
+  }
+  const [ownerKey] = childValue;
+  const ownerId = ownerGetAction.valueSignal.peek();
+  const { getChildStore } = childResource;
+  if (!getChildStore) {
+    return ownerKey === ownerId;
+  }
+  const childStore = getChildStore(ownerKey);
+  return childStore !== undefined && childStore === getChildStore(ownerId);
+};
+
 const paramScopeWeakSet = createIterableWeakSet();
 let paramScopeIdCounter = 0;
 const getParamScope = (params) => {
@@ -34729,11 +34929,13 @@ const bandTheCutMayBeRelaxedTo = (bandBefore, bandAfter, rectAfter) => {
  * where they are going, at the movement's own pace, each animation at the rate
  * that gets it there in that time.
  *
- * Where they visibly stand is computed from the clock THROUGH the easing curve,
- * never read off the pseudo-elements: getComputedStyle on them answers with the
- * un-animated value — the animated one lives on the compositor, where no
- * reading from here reaches. It is the same trap as the playbackRate setter,
- * which is why every rate below is handed over with updatePlaybackRate.
+ * Where they visibly stand is computed from the clock THROUGH the easing curve:
+ * a fraction of the way, whatever property carries it — getComputedStyle on
+ * the pseudo-elements gives the animated value of each property, with nothing
+ * saying how far along its keyframes that value is. The rates are handed over
+ * with updatePlaybackRate: in Chromium, the playbackRate setter given a
+ * negative rate puts the pictures at their start at once, and leaves them
+ * there while the clock counts down.
  */
 
 const viewTransitionAnimations = () => {
@@ -35318,11 +35520,11 @@ const css$12 = /* css */`@property --navi-route-transition-leave {
  *
  * It is a real box, and it must be: what is photographed and clipped IS its
  * rectangle. So `display: contents` cannot be used on it — an element with no
- * box is never captured, the movement plays on nothing and the browser aborts
- * the transition. Give it the layout the pages need instead — it is a `Box`,
- * so `flex`, `className`, `style` and the rest are there for that. An
- * application that already has an element holding its pages can mark that one
- * with `data-navi-route-transition-area` rather than nesting another.
+ * box is never captured, and the movement then plays on nothing (navi warns
+ * once the pictures are taken). Give it the layout the pages need instead —
+ * it is a `Box`, so `flex`, `className`, `style` and the rest are there for
+ * that. An application that already has an element holding its pages can mark
+ * that one with `data-navi-route-transition-area` rather than nesting another.
  *
  * @type {import("ignore:preact").FunctionComponent<{ children?: any, [key: string]: any }>}
  */
@@ -35383,10 +35585,14 @@ const RouteTransitionArea = ({
  *   length of the transition the root carries
  *   `data-navi-route-transition-type="<type>"` next to
  *   `data-navi-route-transition="forward"|"back"`, and the application's CSS
- *   defines the movement against the view transition pseudo-elements:
+ *   defines the movement against the view transition pseudo-elements, for
+ *   both groups: `root` when the document travels, `navi-route-transition`
+ *   when an area is marked — the root is then unnamed, and a rule written for
+ *   `(root)` alone never applies:
  *
  *     :root[data-navi-route-transition-type="spin"][data-navi-route-transition="forward"] {
- *       &::view-transition-new(root) {
+ *       &::view-transition-new(root),
+ *       &::view-transition-new(navi-route-transition) {
  *         animation-name: my-spin-in;
  *       }
  *     }
@@ -36044,7 +36250,7 @@ const beginTransition = ({
   // and the movement then plays on the document itself.
   const areaElements = document.querySelectorAll(`[${TRANSITION_AREA_ATTRIBUTE}]`);
   if (areaElements.length > 1) {
-    warnOnce("several-areas", `${areaElements.length} elements carry ${TRANSITION_AREA_ATTRIBUTE}. They all take the same view-transition-name, and a name belongs to one element at a time: the browser refuses EVERY view transition of the document while this holds. Mark the one element the pages live in.`);
+    warnOnce("several-areas", `${areaElements.length} elements carry ${TRANSITION_AREA_ATTRIBUTE}. They all take the same view-transition-name, and a name belongs to one element at a time: the browser refuses EVERY route transition while this holds. Mark the one element the pages live in.`);
   }
   const areaElement = areaElements.length > 0 ? areaElements[0] : null;
   // Everything about to be photographed goes deaf to the pointer; the controls
@@ -36788,8 +36994,9 @@ const css$11 = /* css */`.navi_route_travel {
  *   - how to go to a tab. The default REPLACES the current history entry
  *   rather than pushing one: a swipe is how one browses a page, not a place one
  *   aimed at, and three swipes back and forth must not bury the way out of the
- *   page under six entries. A tab pressed is the other case and pushes, which
- *   is what its <Link> already does.
+ *   page under six entries. A tab pressed goes the way its <Link> says —
+ *   `<Link replace>` for a row of tabs, so a press and a swipe towards the
+ *   same neighbour write the same history.
  *
  * Every other prop lands on the box itself (`id`, `data-testid`, `className`,
  * …), which is how one of these is named: a page can hold several — a row of
@@ -36804,10 +37011,11 @@ const css$11 = /* css */`.navi_route_travel {
  * gesture applies its change on release instead of dragging a picture that does
  * not exist.
  *
- * While a travel plays, the rest of the page is taken as a picture too — this
- * box asks for `view-transition-name: root` back for that time, so an
- * application that opts the document out for its own transitions gets its rule
- * back the moment the travel is over.
+ * While a travel plays, the rest of the page is NOT taken as a picture: the
+ * root's name is dropped for that time (`view-transition-name: none`), so what
+ * stands around the box — a tab row beside it — stays live and answers a press
+ * mid-travel. The application's own rule for the root applies again the moment
+ * the travel is over.
  */
 const RouteTravel = ({
   routes: routesProp,
@@ -37996,9 +38204,9 @@ const writeCover = (edge, element, size) => {
 
 /**
  * Binds an action to a route: it runs when the route matches, with the params
- * the effect reads off the address, and is aborted when the route is left.
- * Its data, its wait and its failure are read by the page through
- * `useAsyncData`.
+ * the effect reads off the address, runs again on a `reload()`, and is aborted
+ * when the route is left. Its data, its wait and its failure are read by the
+ * page through `useAsyncData`.
  *
  * A page's CODE is declared the same way — the import is one more thing the
  * address asks for, started with the data rather than after it:
@@ -38042,18 +38250,21 @@ const routeAction = (
       ? routes[0].matchingSignal
       : anyMatchingRouteSignal(routes);
   const readParams = paramsEffect || (() => true);
-  const actionBoundToRoute = actionRunEffect(
-    action,
-    () => {
-      const matching = routeMatchingSignal.value;
-      const params = readParams();
-      if (!matching) {
-        return null;
-      }
-      return params;
-    },
-    options,
-  );
+  const readParamsAsked = () => {
+    const matching = routeMatchingSignal.value;
+    const params = readParams();
+    if (!matching) {
+      return null;
+    }
+    return params;
+  };
+  const actionBoundToRoute = actionRunEffect(action, readParamsAsked, options);
+  for (const route of routes) {
+    // Asked of the route's params as they are, like the effect asks them.
+    registerRouteReload(route, () =>
+      untracked(readParamsAsked) ? actionBoundToRoute : null,
+    );
+  }
   if (prefetch) {
     for (const route of routes) {
       if (paramsEffect) {
@@ -40038,10 +40249,11 @@ const flushSyncRendering = (fn) => {
  * without the content, and the browser builds it in an idle moment after
  * load — so by the time anyone clicks, it is usually already there.
  *
- * "while-opened" is the opposite end: content that must be rebuilt from
- * scratch every time, because what it shows is read once at build time and can
- * change while the popup is closed — an uncontrolled field seeded from a
- * `defaultValue`, a form whose fresh state is its initial state.
+ * "while-opened" is the opposite end: content rebuilt from scratch every
+ * time, a form whose fresh state is its initial state. What kept content
+ * carries into the next opening is an unsent edit — an untouched field
+ * follows a new `defaultValue` on its own (see followDefaultValue in
+ * ui_state_controller.js) — and this is what throws that edit away.
  *
  * On top of whichever value is picked, intent on the anchor warms the content:
  * a pointer entering the popup's anchor, or focus landing in it, builds the
@@ -40075,9 +40287,11 @@ const flushSyncRendering = (fn) => {
  * 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.
+ * at open time. A "while-opened" popup with an `onOpen` is not warmed by the
+ * press: 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. Hover and focus warming, for the other values, builds
+ * ahead of `onOpen` all the same.
  */
 
 
@@ -50841,12 +51055,13 @@ const positionOfCurrentIndicator = (currentIndicator, vertical) => {
  *   does so by being NAMED, which is all the browser needs: any change played as
  *   a view transition animates it on the same clock as everything else in that
  *   transition. Inside a `RouteTravel` that means it follows the pages, and the
- *   thumb dragging them, without either of them being told about the other. It
- *   is named for a movement between two tabs of the row and for nothing else:
- *   when the pages move and the row is on one side only, the bar leaves or
- *   arrives with its row. For a nav made of slides (`slideContainer`) the bar
- *   is one element for the whole row, and it reads the travel the container
- *   publishes.
+ *   thumb dragging them, without either of them being told about the other.
+ *   During a route transition or a route travel it keeps the name only for a
+ *   movement between two tabs of the row: when the row is on one side only,
+ *   the bar leaves or arrives with its row. Any other view transition finds it
+ *   named, a picture of its own. For a nav made of slides (`slideContainer`)
+ *   the bar is one element for the whole row, and it reads the travel the
+ *   container publishes.
  * @param {string} [props.slideContainer] - the id of a `<SlideContainer>` these
  *   tabs are about: each one says which slide it is (`<Link slide="…">`), the
  *   container says which one is on screen, and pressing a tab travels there.
@@ -55358,7 +55573,8 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   `command` runs at once — the popup it sits in closes over the run, which
  *   goes on behind. A failure then has no popup to be read in: `resetOnError`
  *   puts the button back and the error callout is drawn on what surrounds the
- *   closed popup (see docs/popup_open.md#the-popup-owns-its-open-state).
+ *   closed popup (see
+ *   docs/popup_open.md#closing-when-a-button-also-runs-an-action).
  * @param {boolean} [actionAbortable] The person waiting may give up on this
  *   button's action: closing the popup the run holds calls it off and goes
  *   through, instead of being refused. For a run whose answer may never come —
@@ -65286,7 +65502,7 @@ const css$E = /* css */`
      the length of the movement, and the picture of the lifted node comes out
      empty (Chrome 153, reproduced in a bare page). The price is a page frozen
      and unpressable while the movement plays: under a modal wall at the
-     opening, and for a quarter of a second at the closing. */
+     opening, and for the popup's --popup-animation-duration at the closing. */
   :root[data-navi-popup-lift] {
     /* The popup's own pace, published on the root by popup_lift.js because the
        ::view-transition tree hangs off it and inherits from nowhere else. */
@@ -65630,16 +65846,21 @@ const css$E = /* css */`
  * @param {boolean|"last-resort"|"restore"} [props.autoFocus="last-resort"] -
  *   Where the keyboard goes when this dialog opens — one rung of the ladder in
  *   `docs/autofocus.md`, which is what to read for the whole of it.
- *   - `true` — the dialog element itself takes the keyboard, whatever it holds.
- *     For a dialog whose content is READ before it is filled: the focus starts
- *     at the top of the reading order and no virtual keyboard rises over it.
+ *   - `true` — the dialog element itself takes the keyboard rather than the
+ *     first focusable it holds; something inside that asks by name
+ *     (`autoFocus`) still comes first. For a dialog whose content is READ
+ *     before it is filled: the focus starts at the top of the reading
+ *     order and no virtual keyboard rises over it.
  *   - `"last-resort"` — the dialog takes the keyboard only if it holds nothing
  *     focusable of its own.
  *   - `"restore"` — the dialog stays out of the opening focus chain unless it
  *     held focus when it closed.
- *   - `false` — the dialog element itself is never where the focus lands; the
- *     opening still hands the focus to what the dialog holds. Unlike
- *     `Popover`'s `false`, it does not leave the keyboard where it was.
+ *   - `false` — the dialog says nothing, and the opening still hands out the
+ *     focus: a `<dialog>` is focusable and the first focusable of its own
+ *     subtree, so it takes the keyboard as with `true`. Where the first
+ *     focusable is skipped (a touch device, below), a last resort inside is
+ *     tried instead, and nothing there leaves the keyboard where it was.
+ *     Unlike `Popover`'s `false`, the transfer runs.
  *   Wherever the keyboard is a virtual one (a touch device), the surface is
  *   already what one arrives on: a popup is read before it is reached there, so
  *   the focus only leaves it for something that asked by name (`autoFocus` on
@@ -65673,9 +65894,9 @@ const css$E = /* css */`
  *   is "new" or "edit X" depending on the press must know which one it is
  *   before what it holds is rendered.
  * @param {(event: Event) => void} [props.onClose] - Called when the dialog
- *   actually closes — not preventable (see `open_controller.js`'s own
- *   `onRequestClose`/`onClose` distinction; `onRequestClose` is where you'd
- *   veto a close instead).
+ *   actually closes — not preventable: it is the close happening, not a
+ *   request. What refuses a close is navi's: a control inside still
+ *   running its action (see popup_busy.js for the runs that let it through).
  * @param {boolean|string|{id?: string, type?: "push"|"replace"}} [props.navState] -
  *   Keeps the open state in the history entry, so a screen left and come back
  *   to finds this popup as it was — open, and without an entrance playing: it
@@ -65701,8 +65922,9 @@ const css$E = /* css */`
  *   `"idle"` builds them in a browser idle moment after load — "always" minus
  *   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. Intent on the anchor (pointer
+ *   initial state: an edit left unsent at the close does not come back at
+ *   the next opening (an untouched field needs none of this to show a new
+ *   `defaultValue` — it follows one). 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
@@ -66391,10 +66613,10 @@ const useDialogProps = props => {
     }
 
     // Suppressed until committed below — same @starting-style-avoidance
-    // reasoning as popover.jsx's own openEffect (see its top comment), even
-    // though Dialog never needs to measure/flip anything: it still needs a
-    // genuinely rendered "closed" frame to transition from, not a jump
-    // straight from not-shown to aria-expanded="true".
+    // reasoning as popover.jsx's own openEffect (see popup_css.js's top
+    // comment), even though Dialog never needs to measure/flip anything: it
+    // still needs a genuinely rendered "closed" frame to transition from, not a
+    // jump straight from not-shown to aria-expanded="true".
     dialogEl.style.transitionProperty = "none";
     if (backdropEl) {
       disarmBackdropHideRef.current?.();
@@ -67533,10 +67755,11 @@ const css$D = /* css */`
  * @param {boolean|"last-resort"|"restore"} [props.autoFocus="last-resort"] -
  *   Where the keyboard goes when this popover opens — one rung of the ladder in
  *   `docs/autofocus.md`, which is what to read for the whole of it.
- *   - `true` — the popover element itself takes the keyboard, whatever it
- *     holds. For a popover whose content is READ before it is filled: the focus
- *     starts at the top of the reading order and no virtual keyboard rises over
- *     it.
+ *   - `true` — the popover element itself takes the keyboard rather than the
+ *     first focusable it holds; something inside that asks by name
+ *     (`autoFocus`) still comes first. For a popover whose content is READ
+ *     before it is filled: the focus starts at the top of the reading
+ *     order and no virtual keyboard rises over it.
  *   - `"last-resort"` — the popover takes the keyboard only if it holds nothing
  *     focusable of its own.
  *   - `"restore"` — the popover stays out of the opening focus chain unless it
@@ -67577,9 +67800,9 @@ const css$D = /* css */`
  *   is "new" or "edit X" depending on the press must know which one it is
  *   before what it holds is rendered.
  * @param {(event: Event) => void} [props.onClose] - Called when the popover
- *   actually closes — not preventable (see `open_controller.js`'s own
- *   `onRequestClose`/`onClose` distinction; `onRequestClose` is where you'd
- *   veto a close instead).
+ *   actually closes — not preventable: it is the close happening, not a
+ *   request. What refuses a close is navi's: a control inside still
+ *   running its action (see popup_busy.js for the runs that let it through).
  * @param {boolean|string|{id?: string, type?: "push"|"replace"}} [props.navState] -
  *   Keeps the open state in the history entry, so a screen left and come back
  *   to finds this popup as it was — open, and without an entrance playing: it
@@ -67603,8 +67826,9 @@ const css$D = /* css */`
  *   `"idle"` builds them in a browser idle moment after load — "always" minus
  *   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. Intent on the anchor (pointer
+ *   initial state: an edit left unsent at the close does not come back at
+ *   the next opening (an untouched field needs none of this to show a new
+ *   `defaultValue` — it follows one). 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
@@ -68037,7 +68261,7 @@ const usePopoverProps = props => {
     });
 
     // Suppressed until the popover is actually measured/positioned below —
-    // see this file's top comment for why @starting-style can't drive the
+    // see popup_css.js's top comment for why @starting-style can't drive the
     // opening transition (it needs the popover's actual resting position
     // already in place, which requires a layout box that only exists once
     // shown).
@@ -68385,7 +68609,7 @@ const usePopoverProps = props => {
     // frame set up above as a real rendered state (the reflow), re-enables
     // transitions, flips aria-expanded="true" (only then does the CSS
     // transition play, from that just-committed frame to the open one,
-    // with no @starting-style involved at all — see this file's top
+    // with no @starting-style involved at all — see popup_css.js's top
     // comment), suppresses pointer events until it settles, and transfers
     // focus in. Inlined rather than a standalone function since it only
     // has this one call site.
@@ -68873,8 +69097,9 @@ const css$C = /* css */`@layer navi {
  *   `"idle"` builds them in a browser idle moment after load — `"always"`
  *   minus 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.
+ *   content whose fresh state is its initial state: an edit left unsent at
+ *   the close does not come back at the next opening (an untouched field
+ *   needs none of this to show a new `defaultValue` — it follows one).
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popup = props => {
@@ -69173,8 +69398,9 @@ const PickerCustom = props => {
     open,
     defaultOpen,
     // What Escape means for this picker. "cancel" (the default) puts back the
-    // value the picker had at open and, for a dialog, goes back in history —
-    // so everything written to the url while it was open goes back too.
+    // value the picker had at open and, for a dialog with an explicit id, goes
+    // back in history — so everything written to the url while it was open
+    // goes back too (see pickerNavType below).
     // "close" makes Escape say the same thing as clicking outside: keep what
     // was chosen, close the popup.
     escapeEffect = "cancel",
@@ -69842,9 +70068,10 @@ const PickerContentInsidePopup = props => {
     // itself, and this one does not. Popover ignores it, same as Dialog ignores
     // marginWithAnchor.
     dockedOnSmallTouchScreen,
-    // Same again: the dialog takes the trigger's box as a floor (and, with
-    // dialogMaxWidth="var(--anchor-width)", as a ceiling) — what keeps a card
-    // its own width once lifted. Dialog's own `sizeFromAnchor`.
+    // Same again: the dialog takes the trigger's box as a floor (Dialog's own
+    // `sizeFromAnchor`) and, unless a dialogMaxWidth says otherwise, as a
+    // ceiling (see maxWidth below) — what keeps a card its own width once
+    // lifted.
     dialogSizeFromAnchor,
     // The caller's word on the popup's own box. Written on the popup element,
     // where Popover/Dialog map them to their own vars, rather than as vars on
@@ -79824,6 +80051,7 @@ const PickerFirstResolver = props => {
  *   dialogExpandX?: boolean,
  *   dialogExpandY?: boolean,
  *   dialogSizeFromAnchor?: boolean,
+ *   dockedOnSmallTouchScreen?: boolean | "top" | "bottom",
  *   marginWithContainer?: number | string,
  *   anchor?: import("ignore:preact").RefObject<HTMLElement> | HTMLElement,
  *   escapeEffect?: "cancel" | "close",
@@ -80202,14 +80430,23 @@ const PickerFirstResolver = props => {
  *   about it changes. `dialogMaxWidth="var(--anchor-width)"` says the same
  *   ceiling by hand: the popup props are written on the dialog element, where
  *   that variable lives.
+ * @param {boolean|"top"|"bottom"} [dockedOnSmallTouchScreen] Dialog mode,
+ *   Dialog's own: on a small touch screen the dialog becomes a sheet docked
+ *   full width to one edge — `true` or `"top"` the top edge, out of the
+ *   virtual keyboard's way; `"bottom"` the bottom one, for a sheet that is
+ *   read and tapped. Anywhere else it stays the centered box. Ignored in
+ *   popover mode.
  * @param {"cancel"|"close"} [escapeEffect="cancel"] What Escape does to an open
  *   picker. "cancel" puts back the value the picker had at open, and a dialog
- *   picker also goes back in history — so anything written to the url while it
- *   was open (a route `stateSignal`, a search param) goes back with it. "close"
- *   makes Escape say what clicking outside says: keep what was chosen, close —
- *   a last resort, see docs/popup_open.md ("Escape cancels, the other gestures
- *   keep") for why Escape should go on meaning cancel, and for what the value
- *   at open is on the picker's very first open.
+ *   picker with an explicit `id` (its opening being an entry of its own)
+ *   also goes back in history — so anything written to the url while it was
+ *   open (a route `stateSignal`, a search param) goes back with it. "close"
+ *   makes Escape say what clicking outside says: keep what was chosen,
+ *   close — a last resort, see
+ *   docs/popup_open.md#escape-cancels-the-other-gestures-keep for why Escape
+ *   should go on meaning cancel, and
+ *   docs/popup_open.md#what-cancel-actually-undoes for what a cancel puts
+ *   back.
  * @param {import("ignore:preact").RefObject<HTMLElement>|HTMLElement} [anchor] What
  *   the popup hangs off, when that is not the picker itself: a picker whose
  *   trigger is one piece of a bigger control (the chevron half of a split
@@ -80264,7 +80501,9 @@ const PickerFirstResolver = props => {
  *   positioned ancestor for `popupLayer="local"`). Caps the popup's size as
  *   well as its placement, so what an expanded dialog leaves visible around
  *   itself is set here. Defaults to `popoverSpacing` in popover mode, and to
- *   Dialog's own 3vvw in dialog mode.
+ *   Dialog's own in dialog mode: `3appw` in the top layer, `3cqw` under
+ *   `popupLayer="local"`, 0 for a dialog docked by
+ *   `dockedOnSmallTouchScreen`.
  * @param {string} [popupTestId] The `data-testid` of the popup element — the
  *   popover or dialog the children open in. A `data-testid` on the picker
  *   itself names the trigger (see docs/testid.md); this one is for a test that