@jsenv/navi 0.29.44 → 0.29.46

package/dist/jsenv_navi.js

@@ -2,7 +2,8 @@
  * AI reading this file: read ../docs/AI_INSTRUCTIONS.md for context on
  * using @jsenv/navi as intended.
  */
-import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, coarsePointerSignal } from "./jsenv_navi_side_effects.js";
+import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
+export { coarsePointerSignal } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createPubSub, dispatchInternalCustomEvent, dispatchCustomEvent, getElementSignature, findEvent, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createIterableWeakSet, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, mergeTwoStyles, normalizeStyles, resolveCSSSize, hasCSSSizeUnit, resolveOklchLightness, contrastColor, closestOpenableAncestor, isAncestorOpen, observeAncestorOpenState, getAncestorOpenType, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, findBefore, findAfter, initFocusGroup, scrollIntoViewScoped, getScrollContainer, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, stringifyStyle as stringifyStyle$1 } from "@jsenv/dom";
 export { contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, batch, useSignal } from "@preact/signals";
@@ -49,17 +50,28 @@ const css$10 = /* css */`
       --navi-z-index-control-focused: 2;
 
       /* Kept stuck while something scrolls under it: a list header, the head
-         and foot of a side panel, a table's sticky cells. Above raised
-         controls — a control scrolling past must go under the header that
-         pins the column it belongs to, never over it.
-
-         "While stuck" is the whole condition, and a sticky element cannot read
-         its own stuck state in CSS: List marks its parts with a navi-stuck
-         attribute and applies this band only there (see --list-*-z-index in
-         list.jsx). A
-         sticky part at rest is a block in the flow with nothing passing under
-         it; giving it this band anyway is what slices whatever a neighbouring
-         row lets out of its box. */
+         and foot of a side panel, a table's sticky cells, the header and
+         footer of any scrolling Box. Above raised controls — a control
+         scrolling past must go under the header that pins the column it
+         belongs to, never over it.
+
+         A sticky element is a positioned one, so it already wins against
+         everything in the flow — the band is what it takes to also win against
+         what the page positioned itself, which loses to DOM order otherwise
+         (a sticky part is written before what scrolls under it). Box applies
+         it by default, isolated, and lets a call site write auto back:
+         --box-header-z-index / --box-footer-z-index.
+
+         "While stuck" is the condition the name states, and it costs something
+         to ignore: a sticky part at rest is a block in the flow with nothing
+         passing under it, and the band there is what slices whatever a
+         neighbouring row lets out of its box. CSS cannot express the
+         condition — an element cannot read its own stuck state — so it takes
+         measuring, which List does (it marks its parts with a navi-stuck
+         attribute against its own scroller and applies the band only there,
+         see --list-*-z-index in list.jsx) and Box does not: a generic
+         scrolling area does not know what it was given to scroll, and dropping
+         to auto there loses to a single position: relative. */
       --navi-z-index-sticky: 10;
 
       /* Pinned to the viewport, over the whole page: FixedBar. A decade of its
@@ -17237,15 +17249,26 @@ const isSizeSpacingKey = (key) => {
 // "vvw"/"vvh" are navi's own: the *visual* viewport, which — unlike vw/dvw —
 // shrinks when the mobile virtual keyboard opens (see layout/responsive.js), so
 // they are what a popup meant to stay clear of the keyboard should use.
-const VIEWPORT_UNIT_SIGNALS = {
-  vvw: visualViewportWidthSignal,
-  vvh: visualViewportHeightSignal,
-  vw: windowWidthSignal,
-  vh: windowHeightSignal,
-  dvw: windowWidthSignal,
-  dvh: windowHeightSignal,
-};
-const VIEWPORT_LENGTH_REGEX = /^(-?\d+(?:\.\d+)?)(vvw|vvh|dvw|dvh|vw|vh)$/;
+// "appw"/"apph" are the same thing narrowed to the app's own screen: identical
+// to vvw/vvh until the app declares --navi-app-max-width, and a share of that
+// width afterwards. A gap meant to read as "a small margin" must use these —
+// 3vvw on a 1500px window is a 45px gap around a 600px app.
+// Functions rather than the signals themselves: appw/apph are not a signal to
+// read but a value to compute (a signal, then a CSS var read back). Reading the
+// signal inside still registers the same dependency for a caller doing this
+// during a render.
+const VIEWPORT_UNIT_VALUES = {
+  appw: getAppWidth,
+  apph: getAppHeight,
+  vvw: () => visualViewportWidthSignal.value,
+  vvh: () => visualViewportHeightSignal.value,
+  vw: () => windowWidthSignal.value,
+  vh: () => windowHeightSignal.value,
+  dvw: () => windowWidthSignal.value,
+  dvh: () => windowHeightSignal.value,
+};
+const VIEWPORT_LENGTH_REGEX =
+  /^(-?\d+(?:\.\d+)?)(appw|apph|vvw|vvh|dvw|dvh|vw|vh)$/;
 const resolveViewportLength = (size) => {
   if (typeof size !== "string") {
     return null;
@@ -17255,7 +17278,7 @@ const resolveViewportLength = (size) => {
     return null;
   }
   const [, amount, unit] = match;
-  return (parseFloat(amount) / 100) * VIEWPORT_UNIT_SIGNALS[unit].value;
+  return (parseFloat(amount) / 100) * VIEWPORT_UNIT_VALUES[unit]();
 };
 
 // "3cqw"/"2cqh" — a share of the container the given element lives in, the way
@@ -19019,14 +19042,24 @@ import.meta.css = [/* css */`
 
   [data-scrollable] {
     overflow: var(--x-scrollable-overflow, auto);
+    --box-header-z-index: var(--navi-z-index-sticky);
+    --box-footer-z-index: var(--navi-z-index-sticky);
+    /* The band stays inside this box: without a stacking context here, "in
+       front of my body" would be read as "in front of everything on the page"
+       and a header would reach past a bar or a popup — which is exactly what
+       the decades in navi_z_indexes.js are there to prevent. See
+       docs/z_index.md. */
+    isolation: isolate;
 
     &[data-scrollable-overflow="scroll"] {
       --x-scrollable-overflow: scroll;
     }
 
-    /* box-shadow rather than a border: it draws the separation without taking
-       part in the layout, so a header keeps the exact height its content asks
-       for and nothing shifts by a pixel when the line appears. */
+    /* A real border and not a box-shadow: a shadow is drawn outside the box, so
+       it lands on top of whatever comes next in the painting order and loses to
+       it — a body painting its own background over the line that was meant to
+       separate them. The border belongs to the part itself and is always
+       visible; the pixel it adds shifts nothing, these parts never shrink. */
     /* The corners are the container's, not the part's: a header sitting at the
        top of a rounded box has to follow that curve or it paints square over
        it (a dark header in a rounded popup is where this shows). inherit and
@@ -19034,18 +19067,18 @@ import.meta.css = [/* css */`
     > [data-header] {
       position: sticky;
       top: 0;
-      z-index: 1;
+      z-index: var(--box-header-z-index);
+      border-bottom: 1px solid var(--navi-separator-color-default);
       border-top-left-radius: inherit;
       border-top-right-radius: inherit;
-      box-shadow: 0 1px 0 var(--navi-separator-color-default);
     }
     > [data-footer] {
       position: sticky;
       bottom: 0;
-      z-index: 1;
+      z-index: var(--box-footer-z-index);
+      border-top: 1px solid var(--navi-separator-color-default);
       border-bottom-right-radius: inherit;
       border-bottom-left-radius: inherit;
-      box-shadow: 0 -1px 0 var(--navi-separator-color-default);
     }
 
     &:has(> [data-body]) {
@@ -19059,8 +19092,11 @@ import.meta.css = [/* css */`
 
       > [data-header],
       > [data-footer] {
+        /* Nothing scrolls under them here — the body does that, next to them —
+           so they are back to being blocks in the flow, and stacking is not
+           their business anymore. */
         position: static;
-        z-index: unset;
+        z-index: auto;
         flex-shrink: 0;
       }
 
@@ -21546,6 +21582,564 @@ document.body.addEventListener(
   { capture: true },
 );
 
+const documentStateSignal = signal(null);
+const useDocumentState = () => {
+  return documentStateSignal.value;
+};
+const updateDocumentState = (value) => {
+  documentStateSignal.value = value;
+};
+
+/**
+ * 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 setupBrowserIntegrationViaHistory = ({
+  applyActions,
+  applyRouting,
+  isRouting,
+}) => {
+  const { history } = window;
+
+  let globalAbortController = new AbortController();
+  const triggerGlobalAbort = (reason) => {
+    globalAbortController.abort(reason);
+    globalAbortController = new AbortController();
+  };
+
+  const dispatchActions = (params) => {
+    const { requestedResult } = applyActions({
+      globalAbortSignal: globalAbortController.signal,
+      abortSignal: new AbortController().signal,
+      ...params,
+    });
+    return requestedResult;
+  };
+  setActionDispatcher(dispatchActions);
+
+  const getDocumentState = () => {
+    return window.history.state ? { ...window.history.state } : null;
+  };
+
+  const historyStartAtStart = getDocumentState();
+  const visitedUrlSet = historyStartAtStart
+    ? new Set(historyStartAtStart.jsenv_visited_urls || [])
+    : new Set();
+
+  // Create a signal that tracks visited URLs for reactive updates
+  // Using a counter instead of the Set directly for better performance
+  // Links will check isVisited() when this signal changes
+  const visitedUrlsSignal = signal(0);
+
+  const isVisited = (url) => {
+    url = new URL(url, window.location.href).href;
+    return visitedUrlSet.has(url);
+  };
+  const markUrlAsVisited = (url) => {
+    if (visitedUrlSet.has(url)) {
+      return;
+    }
+    visitedUrlSet.add(url);
+    visitedUrlsSignal.value++;
+  };
+
+  let abortController = null;
+  const handleRoutingTask = (url, options) => {
+    // Before anything is written: the visited set, the URL and every route are
+    // about to change, and this is the last moment the page still stands as it
+    // was. And after, whichever way the change went out — so that whoever took
+    // something at the first announcement has a definite place to give it back.
+    publishBeforeRouting({ url, ...options });
+    try {
+      return applyRoutingTask(url, options);
+    } finally {
+      publishAfterRouting({ url, ...options });
+    }
+  };
+
+  const applyRoutingTask = (url, options) => {
+    const isSameUrl = url === window.location.href;
+    const {
+      reason,
+      navigationType, // "load", "reload", "replace", "push", "traverse"
+      state,
+    } = options;
+
+    if (navigationType === "push" || navigationType === "replace") {
+      markUrlAsVisited(url);
+      // undefined → inherit current state (link click, neutral navigation)
+      // null     → explicit reset (no nav-state keys carried over)
+      // {...}    → explicit state from enter()/leave(), already built from currentState
+      // When state is given it's responsability of the caller to ensure it inherits document state (or not, you want it 99% of the time)
+      let effectiveState;
+      const sharedState = {
+        jsenv_visited_urls: Array.from(visitedUrlSet),
+      };
+      if (state === undefined) {
+        effectiveState = {
+          ...(getDocumentState() || {}),
+          ...sharedState,
+        };
+      } else if (state === null) {
+        effectiveState = sharedState;
+      } else if (state) {
+        effectiveState = {
+          ...state,
+          ...sharedState,
+        };
+      }
+      if (navigationType === "push") {
+        window.history.pushState(effectiveState, null, url);
+      } else {
+        window.history.replaceState(effectiveState, null, url);
+      }
+      updateDocumentUrl(url);
+      updateDocumentState(effectiveState);
+    } else {
+      // traverse / reload: state comes from the history entry, no push/replace needed.
+      markUrlAsVisited(url);
+      updateDocumentUrl(url);
+      updateDocumentState(state);
+    }
+
+    // Skip route matching for state-only changes: push/replace to the same URL
+    // (e.g. useNavState updating document state without changing the route).
+    // Do NOT apply for "traverse" — window.location.href is already updated by
+    // the browser before the popstate handler runs, so isSameUrl is always true
+    // for back/forward navigation regardless of whether the URL actually changed.
+    if (
+      isSameUrl &&
+      (navigationType === "push" || navigationType === "replace")
+    ) {
+      return undefined;
+    }
+
+    if (abortController) {
+      abortController.abort(`navigating to ${url}`);
+    }
+    abortController = new AbortController();
+    const abortSignal = abortController.signal;
+    const { allResult, requestedResult } = applyRouting(url, {
+      globalAbortSignal: globalAbortController.signal,
+      abortSignal,
+      reason,
+      navigationType,
+      isVisited,
+      state,
+    });
+    executeWithCleanup(
+      () => allResult,
+      () => {
+        abortController = undefined;
+      },
+    );
+    return requestedResult;
+  };
+
+  // Browser event handlers
+  window.addEventListener(
+    "click",
+    (e) => {
+      if (e.button !== 0) {
+        // Ignore non-left clicks
+        return;
+      }
+      if (e.metaKey) {
+        // Ignore clicks with meta key (e.g. open in new tab)
+        return;
+      }
+      if (e.defaultPrevented) {
+        return;
+      }
+      const linkElement = e.target.closest("a");
+      if (!linkElement) {
+        return;
+      }
+      if (linkElement.hasAttribute("data-readonly")) {
+        return;
+      }
+      const href = linkElement.href;
+      const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
+        getHrefTargetInfo(href);
+      if (isEmpty || !isSameOrigin) {
+        // Let link to other origins be handled by the browser
+        return;
+      }
+      if (isAnchor) {
+        // Fragment navigation belongs to the browser: it owns the indicated
+        // part of the document, and taking it over would cost `:target` and the
+        // focus handling that come with it.
+        if (isCurrent) {
+          // Except this one, which the browser answers with a scroll and
+          // nothing else: same pathname, same hash, so no event and no url
+          // change reaches whoever is waiting on the designated element.
+          rearmUrlTarget();
+        }
+        return;
+      }
+      // Nothing here declared a route, so there is nothing to route to: the
+      // page is a plain document and a link in it is a plain link. Taking it
+      // over anyway would push the url and then have nothing to show for it —
+      // the address bar moves and the page does not (see applyRouting's own
+      // "not called yet" branch, which is where that used to end up).
+      if (!isRouting()) {
+        return;
+      }
+      e.preventDefault();
+      handleRoutingTask(href, {
+        reason: `"click" on a[href="${href}"]`,
+        navigationType: "push",
+      });
+    },
+    { capture: true },
+  );
+
+  window.addEventListener(
+    "submit",
+    () => {
+      // Handle form submissions?
+      // Not needed yet
+    },
+    { capture: true },
+  );
+
+  window.addEventListener("popstate", (popstateEvent) => {
+    const url = window.location.href;
+    const state = popstateEvent.state;
+    handleRoutingTask(url, {
+      reason: `"popstate" event for ${url}`,
+      navigationType: "traverse",
+      state,
+    });
+  });
+
+  // A fragment navigation is left to the browser (see the click handler above):
+  // it owns the indicated part of the document, and taking it over would cost
+  // `:target` and the focus handling that come with it. The document url still
+  // has to follow it — nothing else here would notice that it moved.
+  window.addEventListener("hashchange", () => {
+    updateDocumentUrl(window.location.href);
+  });
+
+  const navTo = async (url, { replace, state } = {}) => {
+    handleRoutingTask(url, {
+      reason: `navTo called with "${url}"`,
+      navigationType: replace ? "replace" : "push",
+      state,
+    });
+  };
+
+  const stop = (reason = "stop called") => {
+    triggerGlobalAbort(reason);
+  };
+
+  const reload = () => {
+    const url = window.location.href;
+    const state = history.state;
+    handleRoutingTask(url, {
+      reason: "reload called",
+      navigationType: "reload",
+      state,
+    });
+  };
+
+  const navBack = () => {
+    window.history.back();
+  };
+
+  const navForward = () => {
+    window.history.forward();
+  };
+
+  const init = () => {
+    const url = window.location.href;
+    const state = history.state;
+    handleRoutingTask(url, {
+      reason: "routing initialization",
+      navigationType: "load",
+      state,
+    });
+  };
+
+  return {
+    integration: "browser_history_api",
+    init,
+    navTo,
+    stop,
+    reload,
+    navBack,
+    navForward,
+    getDocumentState,
+    isVisited,
+    visitedUrlsSignal,
+  };
+};
+
+let updateRoutes;
+
+const applyActions = (params) => {
+  const updateActionsResult = updateActions(params);
+  const { allResult, runningActionSet } = updateActionsResult;
+  const pendingTaskNameArray = [];
+  for (const runningAction of runningActionSet) {
+    pendingTaskNameArray.push(runningAction.name);
+  }
+  workingWhile(() => allResult, pendingTaskNameArray);
+  return updateActionsResult;
+};
+const applyRouting = (
+  url,
+  {
+    globalAbortSignal,
+    abortSignal,
+    // state
+    navigationType,
+    isVisited,
+    reason,
+  },
+) => {
+  if (!updateRoutes) {
+    // .init() not called yet
+    // likely because code does not uses routing at all
+    return {};
+  }
+  const {
+    loadSet,
+    reloadSet,
+    abortSignalMap,
+    routeLoadRequestedMap,
+    activeRouteSet,
+  } = updateRoutes(url, {
+    navigationType,
+    isVisited,
+    // state,
+  });
+  if (
+    (!loadSet || loadSet.size === 0) &&
+    (!reloadSet || reloadSet.size === 0)
+  ) {
+    return {
+      allResult: undefined,
+      requestedResult: undefined,
+      activeRouteSet: new Set(),
+    };
+  }
+  const updateActionsResult = updateActions({
+    globalAbortSignal,
+    abortSignal,
+    runSet: loadSet,
+    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}`);
+    }
+  }
+  routingWhile(() => allResult, pendingTaskNameArray);
+  return { ...updateActionsResult, activeRouteSet };
+};
+
+const browserIntegration = setupBrowserIntegrationViaHistory({
+  applyActions,
+  applyRouting,
+  // Routes are declared by the consumer and registered through
+  // setOnAllRouteReady below, so "does this document route at all?" is only
+  // answerable once that has run — hence a function, read at click time rather
+  // than a value read at setup time.
+  isRouting: () => Boolean(updateRoutes),
+});
+
+setOnAllRouteReady((v) => {
+  updateRoutes = v;
+  browserIntegration.init();
+});
+setRouteIntegration(browserIntegration);
+
+const navIntegratedVia = browserIntegration.integration;
+const navTo = (target, options) => {
+  const url = new URL(target, window.location.href).href;
+  const currentUrl = documentUrlSignal.peek();
+  if (url === currentUrl) {
+    if (options?.state === undefined) {
+      return null;
+    }
+    // State-only update on same URL: skip if state is identical to current.
+    const currentState = browserIntegration.getDocumentState();
+    if (compareTwoJsValues(options.state, currentState)) {
+      return null;
+    }
+  }
+  return browserIntegration.navTo(url, options);
+};
+const stopLoad = (reason = "stopLoad() called") => {
+  const windowIsLoading = windowIsLoadingSignal.value;
+  if (windowIsLoading) {
+    window.stop();
+  }
+  const documentIsBusy = documentIsBusySignal.value;
+  if (documentIsBusy) {
+    browserIntegration.stop(reason);
+  }
+};
+const reload = browserIntegration.reload;
+const navBack = browserIntegration.navBack;
+const navForward = browserIntegration.navForward;
+const isVisited = browserIntegration.isVisited;
+const visitedUrlsSignal = browserIntegration.visitedUrlsSignal;
+browserIntegration.handleActionTask;
+
+// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
+// the mask is derived from render order within the nearest root/async
+// boundary — stable across re-renders of the *same* mount, but not across a
+// reload (render order can differ) or even across two mounts on the same
+// page (two components hitting useId() in the same relative order get the
+// same string). Storing one of these under type: "push" bakes it into a
+// history entry: reload the page and the entry's key may now belong to a
+// completely different component (or none), silently auto-opening whatever
+// happens to render at that same position instead.
+const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
+const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
+
+const NO_OP = () => {};
+const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
+const useNavStateBasic = (
+  id,
+  { debug, type = "replace", onLeave, defaultValue } = {},
+) => {
+  // Hooks must be called unconditionally — before the !id early return.
+  const state = documentStateSignal.value;
+  // Key presence is the flag — the value may be anything, including undefined.
+  const keyInState = Boolean(id && state && Object.hasOwn(state, id));
+  const onLeaveRef = useRef(onLeave);
+  onLeaveRef.current = onLeave;
+  const prevKeyInStateRef = useRef(keyInState);
+  // enteredRef tracks whether enter() was called without a matching leave() yet.
+  // It lets the effect distinguish an external disappearance (back button → fire onLeave)
+  // from a programmatic one (leave() already set it to false before the state updates).
+  const enteredRef = useRef(false);
+  useEffect(() => {
+    const prevKeyInState = prevKeyInStateRef.current;
+    prevKeyInStateRef.current = keyInState;
+    if (prevKeyInState && !keyInState && enteredRef.current) {
+      enteredRef.current = false;
+      onLeaveRef.current?.();
+    }
+  }, [keyInState]);
+
+  if (!id) {
+    return NO_ID_GIVEN;
+  }
+
+  let effectiveType = type;
+  if (type === "push" && isLikelyPreactGeneratedId(id)) {
+    effectiveType = "replace";
+  }
+
+  const currentValue = keyInState ? state[id] : defaultValue;
+
+  if (debug) {
+    console.debug(`useNavState(${id}) current value is ${currentValue}`);
+  }
+
+  // enter(value): navigate TO this state (push or replace depending on type).
+  // Calling enter() without a value stores "on" — the mere presence of the key
+  // in the document state is enough to match; the value just allows associating
+  // extra data with the entry when needed.
+  const enter = (value = "on") => {
+    enteredRef.current = true;
+    const currentStateCopy = browserIntegration.getDocumentState() || {};
+    if (Object.hasOwn(currentStateCopy, id) && currentStateCopy[id] === value) {
+      return;
+    }
+    currentStateCopy[id] = value;
+    navTo(window.location.href, {
+      replace: effectiveType !== "push",
+      state: currentStateCopy,
+    });
+  };
+
+  // leave(): navigate AWAY FROM this state (navBack in push mode, replace in replace mode).
+  // isBack: when true (cancel close in push mode), call history.back() to restore the
+  //   pre-open state — discards any in-progress edits.
+  //   When false (confirmed close), replace the pushed entry instead: preserves the
+  //   current URL state (e.g. a new picker value) while removing the popup key.
+  const leave = ({ isBack } = {}) => {
+    enteredRef.current = false;
+    const currentStateCopy = browserIntegration.getDocumentState() || {};
+    if (!Object.hasOwn(currentStateCopy, id)) {
+      return;
+    }
+    if (effectiveType === "push" && isBack) {
+      browserIntegration.navBack();
+    } else {
+      delete currentStateCopy[id];
+      navTo(window.location.href, {
+        replace: true,
+        state: currentStateCopy,
+      });
+    }
+  };
+
+  return [currentValue, enter, leave];
+};
+
+/**
+ * Stores a named value in the browser's document state and returns it reactively.
+ * The component re-renders whenever the value changes (navigation, back/forward button).
+ *
+ * @param {string} id
+ *   Unique key used to store the value in document state. Must be stable across renders.
+ *
+ * @param {object} [options]
+ * @param {"push"|"replace"} [options.type="replace"]
+ *   Controls how enter() adds the state to browser history.
+ *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
+ *   - "replace": updates the current history entry — no extra history entry is created.
+ *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
+ *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
+ *   into a pushed history entry won't survive a reload correctly, and could
+ *   even collide with a different component's own auto-generated id. Pass a
+ *   stable, explicit id to actually get "push" behavior.
+ * @param {() => void} [options.onLeave]
+ *   Called when the state key disappears **externally** — e.g. the user presses the browser
+ *   back button. Not called when leave() is invoked programmatically.
+ * @param {*} [options.defaultValue]
+ *   Value returned when `id` is absent from document state. Defaults to `undefined`.
+ *
+ * @returns {[value, enter, leave]}
+ *   - `value`: current value from document state, or `defaultValue` when the key is absent.
+ *   - `enter(value = "on")`: navigate TO this state (stores `value` under `id`).
+ *     Calling without an argument stores `"on"` — the presence of the key is enough to match;
+ *     the value allows associating extra data when needed.
+ *   - `leave()`: navigate AWAY FROM this state (removes `id` from document state,
+ *     or goes back in history when `type` is "push").
+ */
+const useNavState = useNavStateBasic;
+
 /**
  * @param {Element} element The element asking — the command's source, and the
  *   anchor a popup opens on unless `anchor` says otherwise.
@@ -21953,15 +22547,21 @@ registerNaviCommand("--navi-send", (source, event) => {
           requester = firstButtonSubmitting;
         }
       }
-      // Read here rather than above: it depends on the requester, which is only
-      // known now — Enter in a field sends through the first submit button, and
-      // what follows the send is that button's answer.
-      const afterSend = resolveAfterSend(target, requester);
       // Nothing is committed when a constraint fails, so nothing is decided
       // and the popup must stay open — with the form still in front of the
       // user, showing what it is waiting for.
       let invalid = false;
+      // What follows the send is read at the moment it runs, never before it:
+      // it depends on the requester (Enter in a field sends through the first
+      // submit button, and what follows is that button's answer), and on
+      // anything the send itself decided — an action that learned where to go
+      // from the response writes it on the form while it runs
+      // (data-after-send), and this is what picks it up.
       const runAfterSend = () => {
+        const afterSend = resolveAfterSend(target, requester);
+        if (!afterSend) {
+          return;
+        }
         triggerNaviCommand(source, afterSend, event, { optional: true });
       };
       const {
@@ -21996,7 +22596,7 @@ registerNaviCommand("--navi-send", (source, event) => {
           requester,
         }),
       );
-      if (sent === false || invalid || !afterSend) {
+      if (sent === false || invalid) {
         return sent;
       }
       if (isRunning) {
@@ -22188,6 +22788,30 @@ registerNaviCommand("--navi-back", (source, event) => {
   };
 });
 
+// Where a press takes the user. The destination is the command's argument
+// because it says WHAT the command does — "--navi-nav-to:/games/42" — which is how
+// it can also be what follows a form submission: the form has answered its
+// question, and the answer to "what now" is a page.
+//
+// A destination fixed at the call site, so it is for a page known before the
+// send — which is what a form needs, since it must also know where to go when
+// the press had nothing to send. A destination the response decides (a
+// creation, whose id comes back with it) is the action's own business: it
+// navigates itself.
+registerNaviCommand("--navi-nav-to", (source, event, { argument }) => {
+  if (!argument) {
+    console.warn(
+      `[navi] "--navi-nav-to" needs a destination: --navi-nav-to:/the/url (relative to the current page, or absolute).`,
+    );
+    return undefined;
+  }
+  const target = resolveExplicitTarget(source) || source;
+  return {
+    target,
+    implementation: () => navTo(argument),
+  };
+});
+
 registerNaviCommand("--navi-toggle", (source, event, { anchor } = {}) => {
   const target =
     resolveExplicitTarget(source) || resolveClosestExpandable(source);
@@ -24272,6 +24896,7 @@ const useUIGroupStateController = (
       pendingChangeRef.current = null;
       const batchedEvent = new CustomEvent(
         `${controlType}_batched_ui_state_update`,
+        { detail: {} },
       );
       chainEvent(batchedEvent, pendingChange.e);
       scope._onChange(batchedEvent, {
@@ -24841,6 +25466,13 @@ const useControlProps = (props, {
         const onButtonInteractionAllowed = e => {
           triggerUIAction(e);
           const control = ref.current;
+          if (!control) {
+            // What the button just did took the button away: a command that
+            // navigates, a popup closing over it. There is no control left to
+            // ask for an action, and nothing is lost by not asking — what the
+            // press was for has already happened.
+            return;
+          }
           tryActionAfterInteractionAllowed(control, {
             event: e,
             action: boundAction,
@@ -28218,15 +28850,26 @@ const css$V = /* css */`
 
          Capping the *size* here rather than only offsetting the position is
          what makes a centered dialog follow the mobile virtual keyboard for
-         free: --navi-vvw/--navi-vvh track the visual viewport, so the browser
-         reflows the dialog itself as the keyboard opens. */
-      --x-dialog-container-spacing: 3vvw;
-
+         free: --navi-app-width/--navi-app-height track the visual viewport, so
+         the browser reflows the dialog itself as the keyboard opens.
+
+         A share of the app's own screen, not of the window (hence
+         --navi-app-width rather than 3vvw): the gap must read as a small
+         margin around the dialog, and 3% of a 1500px window is a 45px gap
+         around a 600px app. Identical to 3vvw until the app declares
+         --navi-app-max-width. */
+      --x-dialog-container-spacing: calc(0.03 * var(--navi-app-width));
+
+      /* --navi-app-width, not --navi-vvw: a top-layer dialog is calibrated on
+         the app's own screen, which is the viewport unless the app declared a
+         narrower one (see navi_css_vars.js). An app-width cap alone never
+         costs the gap below — it is subtracted from whichever of the two ends
+         up smaller. */
       --dialog-maxmax-width: calc(
-        var(--navi-vvw) - 2 * var(--x-dialog-container-spacing)
+        var(--navi-app-width) - 2 * var(--x-dialog-container-spacing)
       );
       --dialog-maxmax-height: calc(
-        var(--navi-vvh) - 2 * var(--x-dialog-container-spacing)
+        var(--navi-app-height) - 2 * var(--x-dialog-container-spacing)
       );
 
       --dialog-border-radius: var(--navi-popup-border-radius);
@@ -28558,17 +29201,19 @@ const css$V = /* css */`
  *   shown via the non-modal `.show()` instead, staying in normal document
  *   flow inside its own positioned ancestor — confined to (and clipped by)
  *   that container instead of the whole viewport.
- * @param {boolean} [props.dockedOnTouch] - Turns the dialog into a bottom sheet
- *   (docked flush to the bottom edge, full width) when the pointer is coarse,
- *   and leaves it alone otherwise. For a dialog meant to be interacted with
- *   rather than merely read: under a finger the keyboard owns the bottom of
- *   the screen and a centered box ends up both cramped and out of thumb
- *   reach, while under a mouse the centered box is already the right shape —
- *   hence a prop that only ever does something on touch. It supplies defaults
- *   for `positionArea`, `marginWithContainer`, `expandX` and `scrollCapture`,
- *   so any of them can still be pinned explicitly. Keyed off `(pointer: coarse)` (the
- *   input device, not a width breakpoint — a narrow desktop window is still a
- *   mouse) via `coarsePointerSignal`, so it re-resolves live.
+ * @param {boolean} [props.dockedOnSmallTouchScreen] - Turns the dialog into a
+ *   bottom sheet (docked flush to the bottom edge, full width) on a small touch
+ *   screen, and leaves it alone otherwise. For a dialog meant to be interacted
+ *   with rather than merely read: on a phone the keyboard owns the bottom of
+ *   the screen and a centered box ends up both cramped and out of thumb reach,
+ *   while under a mouse the centered box is already the right shape. Both
+ *   halves of the name matter (`smallTouchScreenSignal`): touch alone would
+ *   dock a big touch screen — a tablet, a kiosk panel — a whole screen away
+ *   from where the finger just tapped, and size alone would dock a narrow
+ *   desktop window, which is still a mouse. It supplies defaults for
+ *   `positionArea`, `marginWithContainer`, `expandX` and `scrollCapture`, so
+ *   any of them can still be pinned explicitly. Re-resolves live as the pointer
+ *   type or the window size changes.
  * @param {string} [props.positionArea="center"] - Where to dock the dialog
  *   within its container (the viewport for `layer="top"`, the positioned
  *   ancestor for `layer="local"`) — Dialog is never anchored to a real
@@ -28581,17 +29226,19 @@ const css$V = /* css */`
  *   `inset(top)`) for the overlapping variant.
  * @param {boolean} [props.expand] - Shorthand for both `expandX` and `expandY`.
  * @param {boolean} [props.expandX] - Stretches the dialog to the full width its
- *   container allows (`--dialog-maxmax-width`). Set by `dockedOnTouch` on a
- *   touch device.
+ *   container allows (`--dialog-maxmax-width`). Set by
+ *   `dockedOnSmallTouchScreen` on a small touch screen.
  * @param {boolean} [props.expandY] - Same, vertically
  *   (`--dialog-maxmax-height`).
- * @param {string|number} [props.marginWithContainer="3vvw"] - Minimum gap kept
+ * @param {string|number} [props.marginWithContainer="3appw"] - Minimum gap kept
  *   between the dialog and the edges of its container, whatever its
  *   `positionArea`: it both caps the dialog's own size (via
  *   `--x-dialog-container-spacing`, written from this prop) and offsets a docked
  *   one from the edge it docks to. Accepts a spacing token ("s", "m"…), a
- *   number of pixels, or a viewport length — "vvw"/"vvh" being the visual
- *   viewport, which shrinks when the mobile keyboard opens. Pass 0 for a dialog
+ *   number of pixels, or a viewport length — "appw"/"apph" being the app's own
+ *   screen (the visual viewport, or the narrower one the app declared with
+ *   --navi-app-max-width) and "vvw"/"vvh" the visual viewport itself, which
+ *   shrinks when the mobile keyboard opens. Pass 0 for a dialog
  *   meant to sit flush (a side panel).
  * @param {"close"|"cancel"|"capture"|"none"} [props.pointerInteractionOutsideEffect="close"]
  *   - `"close"` closes the dialog on an outside click. `"capture"`/`"none"`
@@ -28610,7 +29257,7 @@ const css$V = /* css */`
  *   A `layer="local"` dialog always locks its own positioned ancestor's
  *   scroll while open (its backdrop only covers the scrollport, so scrolling
  *   there would reveal uncovered content); this prop extends the lock to the
- *   whole page. Defaults to `true` for a dialog docked by `dockedOnTouch`.
+ *   whole page. Defaults to `true` for a dialog docked by `dockedOnSmallTouchScreen`.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`} [props.animation]
  *   - `true`/`"auto"` resolves to `"scaling"` for a centered `positionArea`,
  *   or a concrete `"slide-from-*"` direction otherwise. Any other explicit
@@ -28793,10 +29440,10 @@ const DialogLocal = props => {
  * contentProps]` — `backdropProps` is `null` for the via-attribute renderer
  * (its own backdrop is native, not a real element).
  */
-// What a dialog turns into under a finger. "bottom" is not a taste: it puts
-// the dialog in the zone a handheld device is actually operated from — where
-// the thumbs rest and where the virtual keyboard comes up — instead of the
-// middle of the screen, which is the farthest point from both.
+// What a dialog turns into on a small touch screen. "bottom" is not a taste:
+// it puts the dialog in the zone a phone is actually operated from — where the
+// thumbs rest and where the virtual keyboard comes up — instead of the middle
+// of the screen, which is the farthest point from both.
 // Only defaults: an explicitly passed prop still wins, so the docked shape can
 // be adjusted one axis at a time instead of being all-or-nothing.
 const DOCKED = {
@@ -28834,7 +29481,7 @@ const useDialogProps = props => {
     // .show() instead, staying in normal document flow, position: absolute
     // relative to its own positioned ancestor. See this file's top comment.
     layer = "top",
-    dockedOnTouch,
+    dockedOnSmallTouchScreen,
     // Same grammar as Popover's own positionArea — see this file's top
     // comment and popup_shared.js's parsePositionArea.
     positionArea: positionAreaProp,
@@ -28887,16 +29534,18 @@ const useDialogProps = props => {
   });
   const isModal = layer === "top";
   const ref = props.ref;
-  // Only touch changes anything: with a mouse a dialog already wants to be the
-  // centered box it is by default, so there is nothing to resolve there.
-  const isDocked = dockedOnTouch && coarsePointerSignal.value;
+  // Only a small touch screen changes anything: on a mouse — and on a touch
+  // screen too big to reach the bottom edge of — a dialog already wants to be
+  // the centered box it is by default, so there is nothing to resolve.
+  const isDocked = dockedOnSmallTouchScreen && smallTouchScreenSignal.value;
   const positionArea = positionAreaProp ?? (isDocked ? DOCKED.positionArea : "center");
   const marginWithContainer = marginWithContainerProp ?? (isDocked ? DOCKED.marginWithContainer :
-  // A share of whatever holds the dialog: the viewport for a top-layer
-  // one — where vvw is exactly "3% of the container", the container being
-  // the viewport — and the positioned ancestor for a local one, where
-  // reading 3% of the viewport gives an absurd gap inside a small box.
-  isModal ? "3vvw" : "3cqw");
+  // A share of whatever holds the dialog: the app's own screen for a
+  // top-layer one — where appw is exactly "3% of the container", the
+  // container being that screen (the viewport, unless the app declared a
+  // narrower one) — and the positioned ancestor for a local one, where
+  // reading 3% of the screen gives an absurd gap inside a small box.
+  isModal ? "3appw" : "3cqw");
   // "expand || expandX", the shorthand semantics Popup used to apply before
   // handing them over — the docked default only applies when neither was said
   const expandXUnset = expand === undefined && expandXProp === undefined;
@@ -29133,7 +29782,7 @@ const useDialogProps = props => {
         // A value only CSS could evaluate (a spacing token resolving to a var(),
         // a percentage…) — the placement below needs a real number, and letting
         // it through would put the dialog at NaN.
-        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a viewport length ("3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
+        console.warn(`Dialog: marginWithContainer="${marginWithContainer}" cannot be resolved to pixels. Use a number, a viewport length ("3appw", "3vvw", "2vvh") or a container length ("3cqw", "2cqh").`);
         marginWithContainerInPixels = 0;
       }
       // The size caps read the same gap in CSS as the placement below applies
@@ -29560,8 +30209,10 @@ const css$U = /* css */`
          rather than a value so an outer component can bridge its own prop into
          --popover-max-height without having to restate 300px (see picker). */
       --popover-max-height-default: 300px;
-      --popover-maxmax-height: calc(0.95 * var(--navi-vvh));
-      --popover-maxmax-width: calc(0.95 * var(--navi-vvw));
+      /* --navi-app-*, not --navi-vvw/vvh: the app's own screen, which is the
+         viewport unless the app declared a narrower one (navi_css_vars.js). */
+      --popover-maxmax-height: calc(0.95 * var(--navi-app-height));
+      --popover-maxmax-width: calc(0.95 * var(--navi-app-width));
 
       --popover-box-shadow: var(--navi-popup-box-shadow);
       --popover-border-radius: var(--navi-popup-border-radius);
@@ -31029,8 +31680,8 @@ const css$T = /* css */`
  * @property {"close"|"cancel"|"capture"|"none"} [pointerInteractionOutsideEffect]
  *   - What a click outside does. `"capture"`/`"none"` force an explicit answer
  *   by refusing to treat a click elsewhere as one.
- * @property {boolean} [dockedOnTouch] - `"dialog"` mode only: turn the popup
- *   into a bottom sheet under a finger.
+ * @property {boolean} [dockedOnSmallTouchScreen] - `"dialog"` mode only: turn
+ *   the popup into a bottom sheet on a small touch screen.
  * @property {(params: { message: import("ignore:preact").ComponentChildren }) => import("ignore:preact").ComponentChildren} [renderContent]
  *   - Replaces the popup body — the question and the two buttons — for every
  *   confirmation at once. The per-button `confirmPopupContent` prop is the same
@@ -31048,7 +31699,7 @@ const confirmPopupOptions = {
   animationDuration: undefined,
   positionArea: undefined,
   pointerInteractionOutsideEffect: "close",
-  dockedOnTouch: false,
+  dockedOnSmallTouchScreen: false,
   renderContent: undefined
 };
 
@@ -31130,7 +31781,7 @@ const ConfirmPopup = ({
     animationDuration,
     positionArea,
     pointerInteractionOutsideEffect,
-    dockedOnTouch,
+    dockedOnSmallTouchScreen,
     renderContent
   } = confirmPopupOptions;
 
@@ -31166,7 +31817,7 @@ const ConfirmPopup = ({
   if (mode === "dialog") {
     return jsx(Dialog, {
       className: "navi_confirm_popup",
-      dockedOnTouch: dockedOnTouch,
+      dockedOnSmallTouchScreen: dockedOnSmallTouchScreen,
       ...popupProps,
       children: body
     });
@@ -31421,6 +32072,16 @@ const debounceSignal = (
  *   The action will not fire while the user is actively changing filters; it fires once
  *   they pause for half a second.
  */
+// The run is not awaited here, and a rejection nobody waits for is an unhandled
+// one — in dev, an error overlay thrown over a page that is already saying what
+// went wrong. Nothing is lost by dropping it: the failure is held by the action
+// itself, and whoever reads it (useAsyncData, <Button action>) is what shows it.
+const runUnwatched = (result) => {
+  if (result && typeof result.catch === "function") {
+    result.catch(() => {});
+  }
+};
+
 const actionRunEffect = (
   action,
   deriveActionParamsFromSignals,
@@ -31470,7 +32131,7 @@ const actionRunEffect = (
           // falsy params, don't run
           return;
         }
-        actionTarget.run({ reason: "truthy params first run" });
+        runUnwatched(actionTarget.run({ reason: "truthy params first run" }));
         return;
       }
 
@@ -31487,16 +32148,20 @@ const actionRunEffect = (
         }
         if (!actionTargetPrevious.params) {
           // coming from falsy-params state: action may already be cached, avoid unnecessary rerun
-          actionTarget.run({ reason: "params restored from falsy state" });
+          runUnwatched(
+            actionTarget.run({ reason: "params restored from falsy state" }),
+          );
         } else {
-          actionTarget.rerun({ reason: "params modified" });
+          runUnwatched(actionTarget.rerun({ reason: "params modified" }));
         }
       }
     },
     ...options,
   });
   if (actionParamsSignal.peek()) {
-    actionRunnedByThisEffect.run({ reason: "initial truthy params" });
+    runUnwatched(
+      actionRunnedByThisEffect.run({ reason: "initial truthy params" }),
+    );
   }
   return actionRunnedByThisEffect;
 };
@@ -34620,6 +35285,24 @@ const TYPE_CONVERTERS = {
   },
 };
 
+/**
+ * A container has put its page on screen — or as much of it as it can.
+ *
+ * A route matching is a signal changing, and the page it selects reaches the
+ * DOM only once Preact has rendered — an unknown number of passes later, in an
+ * unknown number of microtasks. Anyone who needs the page as it IS rather than
+ * as it has been decided (a travel about to have its picture taken by the
+ * browser, see route_travel.jsx) waits for this instead of counting.
+ *
+ * A page waiting on data is announced too, by the boundary showing its loading
+ * state (see Loading in use_async_data.jsx): what the container could put on
+ * screen is what the browser is about to take a picture of, and a page that
+ * cannot render yet would otherwise be waited on until the transition dies of
+ * it. It lives in a module of its own for that: the async layer says it as much
+ * as the router does, and neither can import the other.
+ */
+const [publishRouteRender, observeRouteRender] = createPubSub();
+
 const promiseStateWeakMap = new WeakMap();
 const usePromiseAsyncData = (
   promise,
@@ -34674,7 +35357,8 @@ const useForceRender = () => {
 
 const useAsyncData = (promiseOrAction, {
   loading = "delegate",
-  error = "delegate"
+  error = "delegate",
+  onLoad
 } = {}) => {
   const isAction = Boolean(promiseOrAction && promiseOrAction.isAction);
   if (loading === true) {
@@ -34686,7 +35370,8 @@ const useAsyncData = (promiseOrAction, {
   if (isAction) {
     return useActionAsyncData(promiseOrAction, {
       loadingEffect: loading,
-      errorEffect: error
+      errorEffect: error,
+      onLoad
     });
   }
   return usePromiseAsyncData(promiseOrAction, {
@@ -34703,12 +35388,14 @@ const dismissedActionWeakSet = new WeakSet();
 const dismissedActionPendingPromiseWeakMap = new WeakMap();
 const useActionAsyncData = (action, {
   loadingEffect,
-  errorEffect
+  errorEffect,
+  onLoad
 }) => {
   const loadingRef = useContext(LoadingContext);
   if (!loadingRef) {
     throw new Error("Missing <Loading>");
   }
+  useOnLoad(action, onLoad);
 
   // Use peek() instead of .value to avoid subscribing this component to the signal.
   // Reading .value would make Preact re-render the component reactively when the state
@@ -34829,6 +35516,41 @@ const useActionAsyncData = (action, {
   throw pendingPromise;
 };
 
+// What a screen does with the data once, when it becomes known (see onLoad in
+// the JSDoc above). Kept apart because the two questions it answers are not the
+// ones the hook around it answers: WHEN — a layout effect, so a form taking its
+// reference in the same tick sees what was written; and HOW OFTEN — once per set
+// of params, which is the action's own answer to "is this another thing or the
+// same one again".
+const NOTHING_SEEDED = Symbol("nothing_seeded");
+const useOnLoad = (action, onLoad) => {
+  const onLoadRef = useRef(onLoad);
+  onLoadRef.current = onLoad;
+  const paramsSeededRef = useRef(NOTHING_SEEDED);
+  useLayoutEffect(() => {
+    const callback = onLoadRef.current;
+    if (!callback) {
+      return;
+    }
+    if (action.runningStateSignal.peek() !== COMPLETED) {
+      return;
+    }
+    const data = action.dataSignal.peek();
+    if (data === undefined) {
+      return;
+    }
+    const params = action.paramsSignal.peek();
+    const paramsSeeded = paramsSeededRef.current;
+    if (paramsSeeded !== NOTHING_SEEDED && compareTwoJsValues(params, paramsSeeded)) {
+      return;
+    }
+    paramsSeededRef.current = params;
+    callback(data, {
+      params
+    });
+  });
+};
+
 // ─── Loading ──────────────────────────────────────────────────────────────────
 // Wraps Suspense. Provides LoadingContext so useAction can write the suspension
 // reason. LoadingFallback reads that reason and subscribes to the action so it
@@ -34868,6 +35590,14 @@ const LoadingFallback = ({
       setTick(n => n + 1);
     });
   }, [action]);
+  // A page that suspends never gets to say it is on screen — its own effects
+  // are held with it — so this says it for it: what the document shows of the
+  // page arriving is this. Anyone waiting for the page to be there before
+  // moving (a travel about to have its picture taken, see route_travel.jsx)
+  // would otherwise wait for a render that cannot happen until the data does.
+  useLayoutEffect(() => {
+    publishRouteRender();
+  });
   if (loadingRef.current.reason !== "loading") {
     return null;
   }
@@ -36041,700 +36771,142 @@ const UITransition = ({
   alignY,
   ...props
 }) => {
-  const contentIdRef = useRef(contentId);
-  const updateContentId = () => {
-    const uiTransition = uiTransitionRef.current;
-    if (!uiTransition) {
-      return;
-    }
-    const value = contentIdRef.current;
-    uiTransition.updateContentId(value);
-  };
-  const uiTransitionContentIdContextValue = useMemo(() => {
-    const set = new Set();
-    const onSetChange = () => {
-      const value = Array.from(set).join("|");
-      contentIdRef.current = value;
-      updateContentId();
-    };
-    const update = (part, newPart) => {
-      if (!set.has(part)) {
-        if (set.size === 0) {
-          console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id set is empty`);
-          return;
-        }
-        console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id not found in set, only got [${Array.from(set).join(", ")}]`);
-        return;
-      }
-      set.delete(part);
-      set.add(newPart);
-      onSetChange();
-    };
-    const add = part => {
-      if (!part) {
-        return;
-      }
-      if (set.has(part)) {
-        return;
-      }
-      set.add(part);
-      onSetChange();
-    };
-    const remove = part => {
-      if (!part) {
-        return;
-      }
-      if (!set.has(part)) {
-        return;
-      }
-      set.delete(part);
-      onSetChange();
-    };
-    return {
-      add,
-      update,
-      remove
-    };
-  }, []);
-  const ref = useRef();
-  const uiTransitionRefDefault = useRef();
-  uiTransitionRef = uiTransitionRef || uiTransitionRefDefault;
-  useLayoutEffect(() => {
-    const uiTransition = createUITransitionController(ref.current, {
-      alignX,
-      alignY
-    });
-    uiTransitionRef.current = uiTransition;
-    return () => {
-      uiTransition.cleanup();
-    };
-  }, [disabled, alignX, alignY]);
-  return jsxs("div", {
-    ref: ref,
-    ...props,
-    className: "ui_transition",
-    "data-disabled": disabled ? "" : undefined,
-    "data-transition-type": type,
-    "data-transition-duration": duration,
-    "data-debug-detection": debugDetection ? "" : undefined,
-    "data-debug-size": debugSize ? "" : undefined,
-    "data-debug-content": debugContent ? "" : undefined,
-    children: [jsxs("div", {
-      className: "ui_transition_active_group",
-      children: [jsx("div", {
-        className: "ui_transition_target_slot",
-        "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
-        children: jsx(UITransitionContentIdContext.Provider, {
-          value: uiTransitionContentIdContextValue,
-          children: children
-        })
-      }), jsx("div", {
-        className: "ui_transition_outgoing_slot",
-        inert: true
-      })]
-    }), jsxs("div", {
-      className: "ui_transition_previous_group",
-      inert: true,
-      children: [jsx("div", {
-        className: "ui_transition_previous_target_slot"
-      }), jsx("div", {
-        className: "ui_transition_previous_outgoing_slot"
-      })]
-    })]
-  });
-};
-
-/**
- * The goal of this hook is to allow a component to set a "content key"
- * Meaning all content within the component is identified by that key
- *
- * When the key changes, UITransition will be able to detect that and consider the content
- * as changed even if the component is still the same
- *
- * This is used by <Route> to set the content key to the route path
- * When the route becomes inactive it will call useUITransitionContentId(undefined)
- * And if a sibling route becones active it will call useUITransitionContentId with its own path
- *
- */
-const useUITransitionContentId = value => {
-  const contentId = useContext(UITransitionContentIdContext);
-  const valueRef = useRef();
-  if (contentId !== undefined && valueRef.current !== value) {
-    const previousValue = valueRef.current;
-    valueRef.current = value;
-    if (previousValue === undefined) {
-      contentId.add(value);
-    } else {
-      contentId.update(previousValue, value);
-    }
-  }
-  useLayoutEffect(() => {
-    if (contentId === undefined) {
-      return null;
-    }
-    return () => {
-      contentId.remove(valueRef.current);
-    };
-  }, []);
-};
-
-const documentStateSignal = signal(null);
-const useDocumentState = () => {
-  return documentStateSignal.value;
-};
-const updateDocumentState = (value) => {
-  documentStateSignal.value = value;
-};
-
-/**
- * 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 setupBrowserIntegrationViaHistory = ({
-  applyActions,
-  applyRouting,
-  isRouting,
-}) => {
-  const { history } = window;
-
-  let globalAbortController = new AbortController();
-  const triggerGlobalAbort = (reason) => {
-    globalAbortController.abort(reason);
-    globalAbortController = new AbortController();
-  };
-
-  const dispatchActions = (params) => {
-    const { requestedResult } = applyActions({
-      globalAbortSignal: globalAbortController.signal,
-      abortSignal: new AbortController().signal,
-      ...params,
-    });
-    return requestedResult;
-  };
-  setActionDispatcher(dispatchActions);
-
-  const getDocumentState = () => {
-    return window.history.state ? { ...window.history.state } : null;
-  };
-
-  const historyStartAtStart = getDocumentState();
-  const visitedUrlSet = historyStartAtStart
-    ? new Set(historyStartAtStart.jsenv_visited_urls || [])
-    : new Set();
-
-  // Create a signal that tracks visited URLs for reactive updates
-  // Using a counter instead of the Set directly for better performance
-  // Links will check isVisited() when this signal changes
-  const visitedUrlsSignal = signal(0);
-
-  const isVisited = (url) => {
-    url = new URL(url, window.location.href).href;
-    return visitedUrlSet.has(url);
-  };
-  const markUrlAsVisited = (url) => {
-    if (visitedUrlSet.has(url)) {
-      return;
-    }
-    visitedUrlSet.add(url);
-    visitedUrlsSignal.value++;
-  };
-
-  let abortController = null;
-  const handleRoutingTask = (url, options) => {
-    // Before anything is written: the visited set, the URL and every route are
-    // about to change, and this is the last moment the page still stands as it
-    // was. And after, whichever way the change went out — so that whoever took
-    // something at the first announcement has a definite place to give it back.
-    publishBeforeRouting({ url, ...options });
-    try {
-      return applyRoutingTask(url, options);
-    } finally {
-      publishAfterRouting({ url, ...options });
-    }
-  };
-
-  const applyRoutingTask = (url, options) => {
-    const isSameUrl = url === window.location.href;
-    const {
-      reason,
-      navigationType, // "load", "reload", "replace", "push", "traverse"
-      state,
-    } = options;
-
-    if (navigationType === "push" || navigationType === "replace") {
-      markUrlAsVisited(url);
-      // undefined → inherit current state (link click, neutral navigation)
-      // null     → explicit reset (no nav-state keys carried over)
-      // {...}    → explicit state from enter()/leave(), already built from currentState
-      // When state is given it's responsability of the caller to ensure it inherits document state (or not, you want it 99% of the time)
-      let effectiveState;
-      const sharedState = {
-        jsenv_visited_urls: Array.from(visitedUrlSet),
-      };
-      if (state === undefined) {
-        effectiveState = {
-          ...(getDocumentState() || {}),
-          ...sharedState,
-        };
-      } else if (state === null) {
-        effectiveState = sharedState;
-      } else if (state) {
-        effectiveState = {
-          ...state,
-          ...sharedState,
-        };
-      }
-      if (navigationType === "push") {
-        window.history.pushState(effectiveState, null, url);
-      } else {
-        window.history.replaceState(effectiveState, null, url);
-      }
-      updateDocumentUrl(url);
-      updateDocumentState(effectiveState);
-    } else {
-      // traverse / reload: state comes from the history entry, no push/replace needed.
-      markUrlAsVisited(url);
-      updateDocumentUrl(url);
-      updateDocumentState(state);
-    }
-
-    // Skip route matching for state-only changes: push/replace to the same URL
-    // (e.g. useNavState updating document state without changing the route).
-    // Do NOT apply for "traverse" — window.location.href is already updated by
-    // the browser before the popstate handler runs, so isSameUrl is always true
-    // for back/forward navigation regardless of whether the URL actually changed.
-    if (
-      isSameUrl &&
-      (navigationType === "push" || navigationType === "replace")
-    ) {
-      return undefined;
-    }
-
-    if (abortController) {
-      abortController.abort(`navigating to ${url}`);
-    }
-    abortController = new AbortController();
-    const abortSignal = abortController.signal;
-    const { allResult, requestedResult } = applyRouting(url, {
-      globalAbortSignal: globalAbortController.signal,
-      abortSignal,
-      reason,
-      navigationType,
-      isVisited,
-      state,
-    });
-    executeWithCleanup(
-      () => allResult,
-      () => {
-        abortController = undefined;
-      },
-    );
-    return requestedResult;
-  };
-
-  // Browser event handlers
-  window.addEventListener(
-    "click",
-    (e) => {
-      if (e.button !== 0) {
-        // Ignore non-left clicks
-        return;
-      }
-      if (e.metaKey) {
-        // Ignore clicks with meta key (e.g. open in new tab)
-        return;
-      }
-      if (e.defaultPrevented) {
-        return;
-      }
-      const linkElement = e.target.closest("a");
-      if (!linkElement) {
+  const contentIdRef = useRef(contentId);
+  const updateContentId = () => {
+    const uiTransition = uiTransitionRef.current;
+    if (!uiTransition) {
+      return;
+    }
+    const value = contentIdRef.current;
+    uiTransition.updateContentId(value);
+  };
+  const uiTransitionContentIdContextValue = useMemo(() => {
+    const set = new Set();
+    const onSetChange = () => {
+      const value = Array.from(set).join("|");
+      contentIdRef.current = value;
+      updateContentId();
+    };
+    const update = (part, newPart) => {
+      if (!set.has(part)) {
+        if (set.size === 0) {
+          console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id set is empty`);
+          return;
+        }
+        console.warn(`UITransition: content id update "${part}" -> "${newPart}" ignored because content id not found in set, only got [${Array.from(set).join(", ")}]`);
         return;
       }
-      if (linkElement.hasAttribute("data-readonly")) {
+      set.delete(part);
+      set.add(newPart);
+      onSetChange();
+    };
+    const add = part => {
+      if (!part) {
         return;
       }
-      const href = linkElement.href;
-      const { isEmpty, isCurrent, isSameOrigin, isAnchor } =
-        getHrefTargetInfo(href);
-      if (isEmpty || !isSameOrigin) {
-        // Let link to other origins be handled by the browser
+      if (set.has(part)) {
         return;
       }
-      if (isAnchor) {
-        // Fragment navigation belongs to the browser: it owns the indicated
-        // part of the document, and taking it over would cost `:target` and the
-        // focus handling that come with it.
-        if (isCurrent) {
-          // Except this one, which the browser answers with a scroll and
-          // nothing else: same pathname, same hash, so no event and no url
-          // change reaches whoever is waiting on the designated element.
-          rearmUrlTarget();
-        }
+      set.add(part);
+      onSetChange();
+    };
+    const remove = part => {
+      if (!part) {
         return;
       }
-      // Nothing here declared a route, so there is nothing to route to: the
-      // page is a plain document and a link in it is a plain link. Taking it
-      // over anyway would push the url and then have nothing to show for it —
-      // the address bar moves and the page does not (see applyRouting's own
-      // "not called yet" branch, which is where that used to end up).
-      if (!isRouting()) {
+      if (!set.has(part)) {
         return;
       }
-      e.preventDefault();
-      handleRoutingTask(href, {
-        reason: `"click" on a[href="${href}"]`,
-        navigationType: "push",
-      });
-    },
-    { capture: true },
-  );
-
-  window.addEventListener(
-    "submit",
-    () => {
-      // Handle form submissions?
-      // Not needed yet
-    },
-    { capture: true },
-  );
-
-  window.addEventListener("popstate", (popstateEvent) => {
-    const url = window.location.href;
-    const state = popstateEvent.state;
-    handleRoutingTask(url, {
-      reason: `"popstate" event for ${url}`,
-      navigationType: "traverse",
-      state,
-    });
-  });
-
-  // A fragment navigation is left to the browser (see the click handler above):
-  // it owns the indicated part of the document, and taking it over would cost
-  // `:target` and the focus handling that come with it. The document url still
-  // has to follow it — nothing else here would notice that it moved.
-  window.addEventListener("hashchange", () => {
-    updateDocumentUrl(window.location.href);
-  });
-
-  const navTo = async (url, { replace, state } = {}) => {
-    handleRoutingTask(url, {
-      reason: `navTo called with "${url}"`,
-      navigationType: replace ? "replace" : "push",
-      state,
-    });
-  };
-
-  const stop = (reason = "stop called") => {
-    triggerGlobalAbort(reason);
-  };
-
-  const reload = () => {
-    const url = window.location.href;
-    const state = history.state;
-    handleRoutingTask(url, {
-      reason: "reload called",
-      navigationType: "reload",
-      state,
-    });
-  };
-
-  const navBack = () => {
-    window.history.back();
-  };
-
-  const navForward = () => {
-    window.history.forward();
-  };
-
-  const init = () => {
-    const url = window.location.href;
-    const state = history.state;
-    handleRoutingTask(url, {
-      reason: "routing initialization",
-      navigationType: "load",
-      state,
-    });
-  };
-
-  return {
-    integration: "browser_history_api",
-    init,
-    navTo,
-    stop,
-    reload,
-    navBack,
-    navForward,
-    getDocumentState,
-    isVisited,
-    visitedUrlsSignal,
-  };
-};
-
-let updateRoutes;
-
-const applyActions = (params) => {
-  const updateActionsResult = updateActions(params);
-  const { allResult, runningActionSet } = updateActionsResult;
-  const pendingTaskNameArray = [];
-  for (const runningAction of runningActionSet) {
-    pendingTaskNameArray.push(runningAction.name);
-  }
-  workingWhile(() => allResult, pendingTaskNameArray);
-  return updateActionsResult;
-};
-const applyRouting = (
-  url,
-  {
-    globalAbortSignal,
-    abortSignal,
-    // state
-    navigationType,
-    isVisited,
-    reason,
-  },
-) => {
-  if (!updateRoutes) {
-    // .init() not called yet
-    // likely because code does not uses routing at all
-    return {};
-  }
-  const {
-    loadSet,
-    reloadSet,
-    abortSignalMap,
-    routeLoadRequestedMap,
-    activeRouteSet,
-  } = updateRoutes(url, {
-    navigationType,
-    isVisited,
-    // state,
-  });
-  if (
-    (!loadSet || loadSet.size === 0) &&
-    (!reloadSet || reloadSet.size === 0)
-  ) {
+      set.delete(part);
+      onSetChange();
+    };
     return {
-      allResult: undefined,
-      requestedResult: undefined,
-      activeRouteSet: new Set(),
+      add,
+      update,
+      remove
     };
-  }
-  const updateActionsResult = updateActions({
-    globalAbortSignal,
-    abortSignal,
-    runSet: loadSet,
-    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}`);
-    }
-  }
-  routingWhile(() => allResult, pendingTaskNameArray);
-  return { ...updateActionsResult, activeRouteSet };
-};
-
-const browserIntegration = setupBrowserIntegrationViaHistory({
-  applyActions,
-  applyRouting,
-  // Routes are declared by the consumer and registered through
-  // setOnAllRouteReady below, so "does this document route at all?" is only
-  // answerable once that has run — hence a function, read at click time rather
-  // than a value read at setup time.
-  isRouting: () => Boolean(updateRoutes),
-});
-
-setOnAllRouteReady((v) => {
-  updateRoutes = v;
-  browserIntegration.init();
-});
-setRouteIntegration(browserIntegration);
-
-const navIntegratedVia = browserIntegration.integration;
-const navTo = (target, options) => {
-  const url = new URL(target, window.location.href).href;
-  const currentUrl = documentUrlSignal.peek();
-  if (url === currentUrl) {
-    if (options?.state === undefined) {
-      return null;
-    }
-    // State-only update on same URL: skip if state is identical to current.
-    const currentState = browserIntegration.getDocumentState();
-    if (compareTwoJsValues(options.state, currentState)) {
-      return null;
-    }
-  }
-  return browserIntegration.navTo(url, options);
-};
-const stopLoad = (reason = "stopLoad() called") => {
-  const windowIsLoading = windowIsLoadingSignal.value;
-  if (windowIsLoading) {
-    window.stop();
-  }
-  const documentIsBusy = documentIsBusySignal.value;
-  if (documentIsBusy) {
-    browserIntegration.stop(reason);
-  }
-};
-const reload = browserIntegration.reload;
-const navBack = browserIntegration.navBack;
-const navForward = browserIntegration.navForward;
-const isVisited = browserIntegration.isVisited;
-const visitedUrlsSignal = browserIntegration.visitedUrlsSignal;
-browserIntegration.handleActionTask;
-
-// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where
-// the mask is derived from render order within the nearest root/async
-// boundary — stable across re-renders of the *same* mount, but not across a
-// reload (render order can differ) or even across two mounts on the same
-// page (two components hitting useId() in the same relative order get the
-// same string). Storing one of these under type: "push" bakes it into a
-// history entry: reload the page and the entry's key may now belong to a
-// completely different component (or none), silently auto-opening whatever
-// happens to render at that same position instead.
-const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
-const isLikelyPreactGeneratedId = (id) => PREACT_GENERATED_ID_REGEX.test(id);
-
-const NO_OP = () => {};
-const NO_ID_GIVEN = [undefined, NO_OP, NO_OP];
-const useNavStateBasic = (
-  id,
-  { debug, type = "replace", onLeave, defaultValue } = {},
-) => {
-  // Hooks must be called unconditionally — before the !id early return.
-  const state = documentStateSignal.value;
-  // Key presence is the flag — the value may be anything, including undefined.
-  const keyInState = Boolean(id && state && Object.hasOwn(state, id));
-  const onLeaveRef = useRef(onLeave);
-  onLeaveRef.current = onLeave;
-  const prevKeyInStateRef = useRef(keyInState);
-  // enteredRef tracks whether enter() was called without a matching leave() yet.
-  // It lets the effect distinguish an external disappearance (back button → fire onLeave)
-  // from a programmatic one (leave() already set it to false before the state updates).
-  const enteredRef = useRef(false);
-  useEffect(() => {
-    const prevKeyInState = prevKeyInStateRef.current;
-    prevKeyInStateRef.current = keyInState;
-    if (prevKeyInState && !keyInState && enteredRef.current) {
-      enteredRef.current = false;
-      onLeaveRef.current?.();
-    }
-  }, [keyInState]);
-
-  if (!id) {
-    return NO_ID_GIVEN;
-  }
-
-  let effectiveType = type;
-  if (type === "push" && isLikelyPreactGeneratedId(id)) {
-    effectiveType = "replace";
-  }
-
-  const currentValue = keyInState ? state[id] : defaultValue;
-
-  if (debug) {
-    console.debug(`useNavState(${id}) current value is ${currentValue}`);
-  }
-
-  // enter(value): navigate TO this state (push or replace depending on type).
-  // Calling enter() without a value stores "on" — the mere presence of the key
-  // in the document state is enough to match; the value just allows associating
-  // extra data with the entry when needed.
-  const enter = (value = "on") => {
-    enteredRef.current = true;
-    const currentStateCopy = browserIntegration.getDocumentState() || {};
-    if (Object.hasOwn(currentStateCopy, id) && currentStateCopy[id] === value) {
-      return;
-    }
-    currentStateCopy[id] = value;
-    navTo(window.location.href, {
-      replace: effectiveType !== "push",
-      state: currentStateCopy,
+  }, []);
+  const ref = useRef();
+  const uiTransitionRefDefault = useRef();
+  uiTransitionRef = uiTransitionRef || uiTransitionRefDefault;
+  useLayoutEffect(() => {
+    const uiTransition = createUITransitionController(ref.current, {
+      alignX,
+      alignY
     });
-  };
-
-  // leave(): navigate AWAY FROM this state (navBack in push mode, replace in replace mode).
-  // isBack: when true (cancel close in push mode), call history.back() to restore the
-  //   pre-open state — discards any in-progress edits.
-  //   When false (confirmed close), replace the pushed entry instead: preserves the
-  //   current URL state (e.g. a new picker value) while removing the popup key.
-  const leave = ({ isBack } = {}) => {
-    enteredRef.current = false;
-    const currentStateCopy = browserIntegration.getDocumentState() || {};
-    if (!Object.hasOwn(currentStateCopy, id)) {
-      return;
-    }
-    if (effectiveType === "push" && isBack) {
-      browserIntegration.navBack();
-    } else {
-      delete currentStateCopy[id];
-      navTo(window.location.href, {
-        replace: true,
-        state: currentStateCopy,
-      });
-    }
-  };
-
-  return [currentValue, enter, leave];
+    uiTransitionRef.current = uiTransition;
+    return () => {
+      uiTransition.cleanup();
+    };
+  }, [disabled, alignX, alignY]);
+  return jsxs("div", {
+    ref: ref,
+    ...props,
+    className: "ui_transition",
+    "data-disabled": disabled ? "" : undefined,
+    "data-transition-type": type,
+    "data-transition-duration": duration,
+    "data-debug-detection": debugDetection ? "" : undefined,
+    "data-debug-size": debugSize ? "" : undefined,
+    "data-debug-content": debugContent ? "" : undefined,
+    children: [jsxs("div", {
+      className: "ui_transition_active_group",
+      children: [jsx("div", {
+        className: "ui_transition_target_slot",
+        "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
+        children: jsx(UITransitionContentIdContext.Provider, {
+          value: uiTransitionContentIdContextValue,
+          children: children
+        })
+      }), jsx("div", {
+        className: "ui_transition_outgoing_slot",
+        inert: true
+      })]
+    }), jsxs("div", {
+      className: "ui_transition_previous_group",
+      inert: true,
+      children: [jsx("div", {
+        className: "ui_transition_previous_target_slot"
+      }), jsx("div", {
+        className: "ui_transition_previous_outgoing_slot"
+      })]
+    })]
+  });
 };
 
 /**
- * Stores a named value in the browser's document state and returns it reactively.
- * The component re-renders whenever the value changes (navigation, back/forward button).
+ * The goal of this hook is to allow a component to set a "content key"
+ * Meaning all content within the component is identified by that key
  *
- * @param {string} id
- *   Unique key used to store the value in document state. Must be stable across renders.
+ * When the key changes, UITransition will be able to detect that and consider the content
+ * as changed even if the component is still the same
  *
- * @param {object} [options]
- * @param {"push"|"replace"} [options.type="replace"]
- *   Controls how enter() adds the state to browser history.
- *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
- *   - "replace": updates the current history entry — no extra history entry is created.
- *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
- *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
- *   into a pushed history entry won't survive a reload correctly, and could
- *   even collide with a different component's own auto-generated id. Pass a
- *   stable, explicit id to actually get "push" behavior.
- * @param {() => void} [options.onLeave]
- *   Called when the state key disappears **externally** — e.g. the user presses the browser
- *   back button. Not called when leave() is invoked programmatically.
- * @param {*} [options.defaultValue]
- *   Value returned when `id` is absent from document state. Defaults to `undefined`.
+ * This is used by <Route> to set the content key to the route path
+ * When the route becomes inactive it will call useUITransitionContentId(undefined)
+ * And if a sibling route becones active it will call useUITransitionContentId with its own path
  *
- * @returns {[value, enter, leave]}
- *   - `value`: current value from document state, or `defaultValue` when the key is absent.
- *   - `enter(value = "on")`: navigate TO this state (stores `value` under `id`).
- *     Calling without an argument stores `"on"` — the presence of the key is enough to match;
- *     the value allows associating extra data when needed.
- *   - `leave()`: navigate AWAY FROM this state (removes `id` from document state,
- *     or goes back in history when `type` is "push").
  */
-const useNavState = useNavStateBasic;
+const useUITransitionContentId = value => {
+  const contentId = useContext(UITransitionContentIdContext);
+  const valueRef = useRef();
+  if (contentId !== undefined && valueRef.current !== value) {
+    const previousValue = valueRef.current;
+    valueRef.current = value;
+    if (previousValue === undefined) {
+      contentId.add(value);
+    } else {
+      contentId.update(previousValue, value);
+    }
+  }
+  useLayoutEffect(() => {
+    if (contentId === undefined) {
+      return null;
+    }
+    return () => {
+      contentId.remove(valueRef.current);
+    };
+  }, []);
+};
 
 const NEVER_SET = {};
 const useUrlSearchParam = (paramName, defaultValue) => {
@@ -36858,7 +37030,6 @@ const Head = ({
  * ```
  */
 
-const [publishRouteRender, observeRouteRender] = createPubSub();
 
 /**
  * Keep every container showing the page it is showing, whatever the routes say.
@@ -37146,6 +37317,10 @@ installImportMetaCssBuild(import.meta);/**
 const CAN_KEEP_PICTURE = Boolean(document.startViewTransition && !document.startViewTransition.isPolyfill);
 const startViewTransition = ensureDocumentStartViewTransition();
 const TRAVEL_ATTRIBUTE = "data-navi-route-travel";
+// Which way the pages move, said on the document: the pictures of a transition
+// hang off the root, not off the box that travels, so the box's own `axis` has
+// to be lent to the document for the length of the travel.
+const TRAVEL_AXIS_ATTRIBUTE = "data-navi-route-travel-axis";
 // While a finger holds the travel: the pictures stand still and go exactly
 // where it says (see the CSS, and scrubTravel).
 const HOLD_ATTRIBUTE = "data-navi-route-travel-held";
@@ -37339,6 +37514,28 @@ const css$R = /* css */`
     }
   }
 
+  /* The same four movements, along the axis the pages are laid out on: the
+     start of a column is its top, so going forward there is the page rising and
+     the next one coming up from below. */
+  :root[${TRAVEL_AXIS_ATTRIBUTE}="y"] {
+    &[${TRAVEL_ATTRIBUTE}="forward"] {
+      &::view-transition-old(navi-route-travel) {
+        animation-name: navi-route-travel-leave-towards-top;
+      }
+      &::view-transition-new(navi-route-travel) {
+        animation-name: navi-route-travel-enter-from-bottom;
+      }
+    }
+    &[${TRAVEL_ATTRIBUTE}="back"] {
+      &::view-transition-old(navi-route-travel) {
+        animation-name: navi-route-travel-leave-towards-bottom;
+      }
+      &::view-transition-new(navi-route-travel) {
+        animation-name: navi-route-travel-enter-from-top;
+      }
+    }
+  }
+
   @keyframes navi-route-travel-leave-towards-start {
     from {
       translate: 0 0;
@@ -37371,6 +37568,38 @@ const css$R = /* css */`
       translate: 0 0;
     }
   }
+  @keyframes navi-route-travel-leave-towards-top {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: 0 -100%;
+    }
+  }
+  @keyframes navi-route-travel-enter-from-bottom {
+    from {
+      translate: 0 100%;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
+  @keyframes navi-route-travel-leave-towards-bottom {
+    from {
+      translate: 0 0;
+    }
+    to {
+      translate: 0 100%;
+    }
+  }
+  @keyframes navi-route-travel-enter-from-top {
+    from {
+      translate: 0 -100%;
+    }
+    to {
+      translate: 0 0;
+    }
+  }
 `;
 
 /**
@@ -37507,6 +37736,7 @@ const RouteTravel = ({
     // own for as long as it is the one travelling.
     nameForTravel(elementRef.current);
     document.documentElement.setAttribute(TRAVEL_ATTRIBUTE, direction);
+    document.documentElement.setAttribute(TRAVEL_AXIS_ATTRIBUTE, axis);
     if (scrub) {
       holdPictures(travel);
       document.documentElement.setAttribute(DRAGGED_ATTRIBUTE, "");
@@ -37520,14 +37750,21 @@ const RouteTravel = ({
     const releaseRendering = renderingHeldForRouting || holdRendering();
     renderingHeldForRouting = null;
     // The picture the browser is about to take must be of the page that was
-    // asked for, and a route matching is not yet a page rendered.
+    // asked for, and a route matching is not yet a page rendered. Watched from
+    // here rather than from inside the callback below: the browser calls that
+    // callback a frame later, and a navigation that has already been decided
+    // (what follows a send, a command) renders its page in between. A wait
+    // armed then waits for something that has already happened — until the
+    // browser gives up on the transition, leaving the page it was leaving on
+    // screen and an error nobody asked for.
+    const renderWait = armRouteRenderWait();
     const viewTransition = startViewTransition(async () => {
       await whilePageRenders(page, async () => {
         releaseRendering();
         if (change) {
           await change();
         }
-      });
+      }, renderWait);
       // The page arriving is in the DOM and the transition has not started
       // playing: the one moment both boxes can be known.
       holdTravelHeight(elementRef.current, heightBefore);
@@ -37552,6 +37789,7 @@ const RouteTravel = ({
     viewTransition.finished.catch(() => {
       // A transition that fails before it ever calls back leaves the page held:
       // whoever asked for the hold gives it back, here as everywhere else.
+      renderWait.stop();
       releaseRendering();
       endTravel(travel);
     });
@@ -37855,6 +38093,7 @@ const RouteTravel = ({
       // rather than pick.
       unnameAfterTravel(elementRef.current);
       document.documentElement.removeAttribute(TRAVEL_ATTRIBUTE);
+      document.documentElement.removeAttribute(TRAVEL_AXIS_ATTRIBUTE);
       document.documentElement.removeAttribute(DRAGGED_ATTRIBUTE);
       document.documentElement.removeAttribute(TURNED_ATTRIBUTE);
       releaseTravelHeight();
@@ -38417,20 +38656,30 @@ const scrubTravel = (travel, ratio) => {
 // inside the callback of a view transition: the browser has stopped rendering
 // and is waiting on this very promise to take its picture, so a wait that never
 // ends is a page frozen under a transition that never became ready.
-const whilePageRenders = async (page, change) => {
+// Listening starts before the change, or a render landing while the change is
+// being awaited is a render nobody heard. Armed apart from the wait itself
+// because the two do not always happen at the same moment: a view transition
+// calls its update callback a frame after it is started, and the render can
+// land in that gap — see beginTravel, which arms this the moment the travel is
+// decided and hands it over.
+const armRouteRenderWait = () => {
   let stopListening;
   const rendered = new Promise(resolve => {
-    // Listened for before the change, or a render landing while the change is
-    // being awaited is a render nobody heard.
     stopListening = observeRouteRender(resolve);
   });
+  return {
+    rendered,
+    stop: () => stopListening()
+  };
+};
+const whilePageRenders = async (page, change, wait = armRouteRenderWait()) => {
   try {
     await change();
     if (pageIsCurrent(page)) {
-      await rendered;
+      await wait.rendered;
     }
   } finally {
-    stopListening();
+    wait.stop();
   }
 };
 
@@ -38478,12 +38727,20 @@ const pageIsCurrent = ({
   }
   return params ? route.matchesParams(params) : true;
 };
-// Every page is read, never only up to the one that answers yes: a page that is
-// not the current one today is the one that must wake the reader tomorrow.
+// The FIRST page that answers, as with the branches of a <Route>: several
+// routes match at once — a literal one and the parameterized one it is a case of
+// ("/games/new" is also a "/games/:gameId"), a section and the page inside it —
+// and the row has to be on the page the router is showing, which is the first
+// one written that matches.
+//
+// Every page is read all the same, never only up to the one that answers yes: a
+// page that is not the current one today is the one that must wake the reader
+// tomorrow.
 const currentPageIndex = pages => {
   let currentIndex = -1;
   for (let i = 0; i < pages.length; i++) {
-    if (pageIsCurrent(pages[i])) {
+    const isCurrent = pageIsCurrent(pages[i]);
+    if (isCurrent && currentIndex === -1) {
       currentIndex = i;
     }
   }
@@ -47865,21 +48122,51 @@ const withoutEmptyFields = uiState => {
 // register themselves in their own effects, which run first — this is the
 // earliest moment the form knows what it holds. Everything after this baseline
 // is a real send moving it forward (see useFormGroup's own onnavi_action_end).
+//
+// Taken a second time at the end of the tick, because "the earliest moment" is
+// not always late enough: a field that re-renders on its own schedule rather
+// than with the form — a row whose value is computed from signals, sitting
+// behind a memo — brings its value in a render of its own, which lands after
+// these effects. A form measured before it would open already changed, and
+// would never take the reference again. Both takes are the same arrival, so the
+// second one costs a render only when it moves something.
 const useHeldUIStateAsSent = (uiStateController, pristineKey) => {
   // The render that brought a new pristineKey read `changed` against the
   // previous baseline, and nothing else is going to move: the button would stay
   // lit on a form that holds exactly what it was just given. So ask for the one
-  // render that reads the new baseline — the first one has nobody to tell,
-  // every field it is waiting for re-renders the form as it registers.
+  // render that reads the new baseline — the first take on mount has nobody to
+  // tell, every field it is waiting for re-renders the form as it registers.
   const [, rereadBaseline] = useState(0);
   const isFirstRef = useRef(true);
   useLayoutEffect(() => {
-    uiStateController.sentUIState = readHeldUIState(uiStateController);
-    if (isFirstRef.current) {
-      isFirstRef.current = false;
-      return;
-    }
-    rereadBaseline(count => count + 1);
+    const takeBaseline = () => {
+      const baselineBefore = uiStateController.sentUIState;
+      const baseline = readHeldUIState(uiStateController);
+      uiStateController.sentUIState = baseline;
+      return !compareTwoJsValues(baselineBefore, baseline);
+    };
+    const moved = takeBaseline();
+    const isFirst = isFirstRef.current;
+    isFirstRef.current = false;
+    if (moved && !isFirst) {
+      rereadBaseline(count => count + 1);
+    }
+    // A microtask, not a timeout: everything that belongs to this arrival —
+    // the renders preact still has queued, the state they push into the form —
+    // happens before the tick ends, and nothing a person does can land in
+    // between.
+    let abandoned = false;
+    queueMicrotask(() => {
+      if (abandoned) {
+        return;
+      }
+      if (takeBaseline()) {
+        rereadBaseline(count => count + 1);
+      }
+    });
+    return () => {
+      abandoned = true;
+    };
   }, [uiStateController, pristineKey]);
 };
 const useUnregisteredControlWarning = ref => {
@@ -52273,7 +52560,7 @@ const PickerContentInsidePopup = props => {
     // above: those exist because "expand" already means something on the picker
     // itself, and this one does not. Popover ignores it, same as Dialog ignores
     // marginWithAnchor.
-    dockedOnTouch,
+    dockedOnSmallTouchScreen,
     animation,
     ...rest
   } = props;
@@ -52321,7 +52608,7 @@ const PickerContentInsidePopup = props => {
       expand: isPopover ? undefined : dialogExpand,
       expandX: isPopover ? undefined : dialogExpandX,
       expandY: isPopover ? undefined : dialogExpandY,
-      dockedOnTouch: isPopover ? undefined : dockedOnTouch,
+      dockedOnSmallTouchScreen: isPopover ? undefined : dockedOnSmallTouchScreen,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -53999,7 +54286,7 @@ const css$v = /* css */`
 
   /* Same reasoning, for the corners: a dialog squares off whatever corner
      lands on its container's own (see the data-flush-* rules in dialog.jsx —
-     a bottom sheet from dockedOnTouch squares its two bottom ones). A list
+     a bottom sheet from dockedOnSmallTouchScreen squares its two bottom ones). A list
      drawn right against that corner has to square the same one, otherwise its
      own radius carves a notch out of the popup's square corner. Direct child
      only: any deeper and the list is presumably inset from the popup's edge,
@@ -70991,5 +71278,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeSpin, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, coarsePointerSignal, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, StarSvg, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeSpin, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, compareTwoJsValues, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineNaviConfirmPopupOptions, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutRequestClose, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map