@jsenv/navi 0.29.65 → 0.29.67

package/dist/jsenv_navi.js

@@ -38,7 +38,7 @@ installImportMetaCssBuild(import.meta);/**
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$11 = /* css */`
+const css$12 = /* css */`
   @layer navi {
     :root {
       /* A control that overlaps its neighbours (the members of a Group share
@@ -90,7 +90,7 @@ const css$11 = /* css */`
     }
   }
 `;
-import.meta.css = [css$11, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$12, "@jsenv/navi/src/navi_z_indexes.js"];
 
 const addIntoArray = (array, ...valuesToAdd) => {
   if (valuesToAdd.length === 1) {
@@ -359,7 +359,7 @@ installImportMetaCssBuild(import.meta);/**
  * the very first render and the browser does everything on its own.
  */
 const URL_TARGET_ATTRIBUTE = "data-url-target";
-const css$10 = /* css */`
+const css$11 = /* css */`
   @layer navi {
     [${URL_TARGET_ATTRIBUTE}] {
       animation: navi_url_target var(--navi-url-target-duration, 2000ms)
@@ -377,7 +377,7 @@ const css$10 = /* css */`
     }
   }
 `;
-import.meta.css = [css$10, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$11, "@jsenv/navi/src/nav/url_target/url_target.js"];
 let urlTargetOptions = {
   block: "center",
   behavior: "smooth",
@@ -7753,7 +7753,7 @@ installImportMetaCssBuild(import.meta);/**
  * - Arrow automatically shows when pointing at a valid anchor element
  * - Centers in viewport when no anchor element provided or anchor is too big
  */
-const css$$ = /* css */`
+const css$10 = /* css */`
   @layer navi {
     .navi_callout {
       /* A callout is parented to what it explains, so it inherits from it — and
@@ -7996,7 +7996,7 @@ const openCallout = (message, {
   skipFocus = false,
   debug = () => {}
 } = {}) => {
-  import.meta.css = [css$$, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$10, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -20118,7 +20118,7 @@ const setupNetworkMonitoring = () => {
 };
 setupNetworkMonitoring();
 
-installImportMetaCssBuild(import.meta);const css$_ = /* css */`
+installImportMetaCssBuild(import.meta);const css$$ = /* css */`
   .navi_loading_indicator_fluid_container {
     position: relative;
     display: flex;
@@ -20150,7 +20150,7 @@ const LoadingIndicatorFluid = ({
   visuallyHidden,
   ...rest
 }) => {
-  import.meta.css = [css$_, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
+  import.meta.css = [css$$, "@jsenv/navi/src/graphic/loading/loading_indicator_fluid.jsx"];
   const ref = useRef(null);
   // The container dimensions can be deduced from the ref itself as the indicator is absolute inset 0
   const [containerWidth, setContainerWidth] = useState(0);
@@ -20355,7 +20355,7 @@ const LoadingRectangleSvg = ({
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$Z = /* css */`
+installImportMetaCssBuild(import.meta);const css$_ = /* css */`
   .navi_loading_outline_wrapper {
     position: absolute;
     /* Controls place the outline slightly outside their box, right on top of
@@ -20392,7 +20392,7 @@ installImportMetaCssBuild(import.meta);const css$Z = /* css */`
   }
 `;
 const LoadingOutline = props => {
-  import.meta.css = [css$Z, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
+  import.meta.css = [css$_, "@jsenv/navi/src/graphic/loading/loading_outline.jsx"];
   if (props.containerRef) {
     const container = props.containerRef.current;
     if (!container) {
@@ -20682,7 +20682,7 @@ const selectByTextStrings = (element, range, startText, endText) => {
 };
 
 installImportMetaCssBuild(import.meta);// https://jsfiddle.net/v5xzJ/4/
-const css$Y = /* css */`
+const css$Z = /* css */`
   @layer navi {
     .navi_text {
       &[data-skeleton] {
@@ -21188,7 +21188,7 @@ const TextShrinkWrap = props => {
   });
 };
 const TextUI = props => {
-  import.meta.css = [css$Y, "@jsenv/navi/src/text/text.jsx"];
+  import.meta.css = [css$Z, "@jsenv/navi/src/text/text.jsx"];
   let {
     ref,
     spacing,
@@ -27266,7 +27266,7 @@ const getAssociatedLabels = element => {
   return Array.from(element.labels);
 };
 
-installImportMetaCssBuild(import.meta);const css$X = /* css */`
+installImportMetaCssBuild(import.meta);const css$Y = /* css */`
   @layer navi {
     .navi_button {
       --button-border-radius: var(--navi-control-border-radius);
@@ -27697,7 +27697,7 @@ installImportMetaCssBuild(import.meta);const css$X = /* css */`
   }
 `;
 const ButtonUI = props => {
-  import.meta.css = [css$X, "@jsenv/navi/src/control/input/button_ui.jsx"];
+  import.meta.css = [css$Y, "@jsenv/navi/src/control/input/button_ui.jsx"];
   const {
     ref,
     // href/link
@@ -29551,7 +29551,7 @@ installImportMetaCssBuild(import.meta);/**
  * reaches the real container.
  */
 let openLocalDialogCount = 0;
-const css$W = /* css */`
+const css$X = /* css */`
   @layer navi {
     .navi_dialog {
       /* Min gap between the dialog and the edges of its container. Written
@@ -30074,7 +30074,7 @@ const css$W = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Dialog = props => {
-  import.meta.css = [css$W, "@jsenv/navi/src/layout/dialog.jsx"];
+  import.meta.css = [css$X, "@jsenv/navi/src/layout/dialog.jsx"];
   if (props.openController) {
     return jsx(ControlledDialog, {
       ...props
@@ -31030,7 +31030,7 @@ installImportMetaCssBuild(import.meta);/**
  * and applied.
  */
 let openLocalPopoverCount = 0;
-const css$V = /* css */`
+const css$W = /* css */`
   @layer navi {
     .navi_popover {
       /* soft: user-configurable preferred max-height. Kept as a *default*
@@ -31467,7 +31467,7 @@ const css$V = /* css */`
  * @param {import("ignore:preact").ComponentChildren} props.children
  */
 const Popover = props => {
-  import.meta.css = [css$V, "@jsenv/navi/src/layout/popover.jsx"];
+  import.meta.css = [css$W, "@jsenv/navi/src/layout/popover.jsx"];
   if (props.openController) {
     return jsx(ControlledPopover, {
       ...props
@@ -32486,7 +32486,7 @@ installImportMetaCssBuild(import.meta);/**
  * event, and a caller replacing the body entirely then has one protocol to
  * follow — `--navi-confirm` for yes, anything that closes for no.
  */
-const css$U = /* css */`
+const css$V = /* css */`
   /* The width lives on the body rather than on the popup, so that custom
      content (which replaces this body entirely) sizes itself instead of
      inheriting a ceiling meant for a sentence-long question. */
@@ -32623,7 +32623,7 @@ const ConfirmPopup = ({
   onAnswer,
   onClosed
 }) => {
-  import.meta.css = [css$U, "@jsenv/navi/src/action/confirm_popup.jsx"];
+  import.meta.css = [css$V, "@jsenv/navi/src/action/confirm_popup.jsx"];
   const {
     mode,
     confirmLabel,
@@ -32707,7 +32707,7 @@ const defaultBody = (message, {
   });
 };
 
-installImportMetaCssBuild(import.meta);const css$T = /* css */`
+installImportMetaCssBuild(import.meta);const css$U = /* css */`
   .action_error {
     margin-top: 0;
     margin-bottom: 20px;
@@ -32732,7 +32732,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$T, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$U, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -36806,7 +36806,7 @@ const ensureDocumentStartViewTransition = () => {
     startViewTransitionPolyfill.isPolyfill = true;
     document.startViewTransition = startViewTransitionPolyfill;
   }
-  return startViewTransition$1;
+  return startViewTransition$2;
 };
 
 // A transition a finger is holding still (see route_travel.jsx): it has to be
@@ -36828,7 +36828,7 @@ const holdViewTransition = (release) => {
   };
 };
 
-const startViewTransition$1 = (updateCallback) => {
+const startViewTransition$2 = (updateCallback) => {
   if (releaseHeldViewTransition) {
     const release = releaseHeldViewTransition;
     releaseHeldViewTransition = null;
@@ -38316,6 +38316,1119 @@ const RouteUI = ({
   return element;
 };
 
+/**
+ * The document's rendering, held for the one frame a view transition needs.
+ *
+ * The browser does not take the picture of the page being left when a
+ * transition is ASKED for — it takes it at the next frame, just before running
+ * the update callback. Preact renders sooner than that, in a microtask: so a
+ * change nobody asked for (a tab pressed, the back button) has already reached
+ * the DOM when the picture is taken, and the picture is of the page ARRIVING.
+ * Both sides of the animation then show it, and one watches a page slide onto
+ * itself.
+ *
+ * So what Preact has queued waits until the update callback, which is the
+ * moment the API is built around — the change belongs inside it. The whole
+ * document is held: it is about to be frozen under a picture anyway.
+ *
+ * ONE hold for the whole document, whoever animates. The hold is a wrapper
+ * around Preact's `options.debounceRendering`, and two of them installed
+ * independently restore each other in the wrong order when they let go — every
+ * render queued in between is then handed to a wrapper nobody will ever
+ * release. Everything that photographs a navigation (RouteTravel's box, a
+ * route transition) must therefore hold through this module, never through a
+ * wrapper of its own.
+ */
+
+
+let renderingHold = null;
+const holdRendering = () => {
+  if (renderingHold) {
+    return renderingHold.release;
+  }
+  const debounceRenderingBefore = options.debounceRendering;
+  const hold = {
+    render: null,
+    release: () => {
+      // Only the hold that is still standing may be given back: a holder
+      // releasing after another has taken over must not let go of what it
+      // does not hold.
+      if (renderingHold !== hold) {
+        return;
+      }
+      renderingHold = null;
+      options.debounceRendering = debounceRenderingBefore;
+      const { render } = hold;
+      hold.render = null;
+      if (render) {
+        render();
+      }
+    },
+  };
+  renderingHold = hold;
+  options.debounceRendering = (render) => {
+    hold.render = render;
+  };
+  return hold.release;
+};
+
+// The hold a navigation takes on its way in — from before its first write,
+// because by the time a route announces that it matches, Preact has already
+// been told and the render is queued; a hold taken then is a hold taken too
+// late. Kept here until whoever animates the change takes it over, or the
+// navigation turns out to be one nobody animates.
+let routingRenderingHold = null;
+const holdRenderingForRouting = () => {
+  routingRenderingHold = holdRendering();
+};
+// Nobody had a picture to take: a page held for a change it does not animate
+// is a page that stutters for nothing.
+const releaseRoutingRenderingHold = () => {
+  const release = routingRenderingHold;
+  routingRenderingHold = null;
+  if (release) {
+    release();
+  }
+};
+// An animator takes the navigation's hold as its own — taking another would be
+// taking a hold on a page that is holding still — or takes a fresh one when
+// the change it animates is not a navigation.
+const takeoverRoutingRenderingHold = () => {
+  const release = routingRenderingHold || holdRendering();
+  routingRenderingHold = null;
+  return release;
+};
+
+/**
+ * The window two pages are seen through while one replaces the other, measured
+ * once and published for the length of the movement.
+ *
+ * Both ways of moving from one route to another need the same six numbers, so
+ * they are written under the same names and read by the same CSS formulas —
+ * `route_travel.jsx` for a row a finger pushes, `route_transition.jsx` for a
+ * relation between two pages. Only one of them ever plays at a time (there is
+ * one view transition per document), which is what lets them share the names.
+ *
+ * What the numbers are for:
+ *
+ * - **the box the movement happens in**, in the WINDOW's coordinates. The
+ *   pictures of a transition are drawn in the top layer, above everything, so
+ *   no overflow of the document reaches them: where to cut them can only be
+ *   said from outside the document, and this is where that outside is known.
+ * - **the height it is held at**, the taller of the two states. Left to the
+ *   browser the window's height animates from one to the other, and a window
+ *   that changes size under the pictures cuts the page being left from the
+ *   bottom, progressively. It does end up at the arriving height, and that is
+ *   right; what must not happen is the user watching it get there.
+ * - **where the page being left WAS**, which is not where the window stands:
+ *   the two states are at the same place in the layout without being at the
+ *   same place in the window — one page is scrolled and the other is not.
+ *   Drawn at the window's own corner, the page being left would be seen
+ *   jumping to its top before it begins to leave.
+ *
+ * Only the measuring needs JS, and only for the one moment both states exist:
+ * the page arriving is in the DOM and the transition has not started playing.
+ * Everything DERIVED from these numbers — the band a fixed bar covers, how far
+ * a page travels — is derived in CSS, so the application's own numbers (the
+ * room its bars give back, see layout/safe_area.js) take part in it.
+ */
+
+const WINDOW_TOP_PROPERTY = "--navi-transition-window-top";
+const WINDOW_LEFT_PROPERTY = "--navi-transition-window-left";
+const WINDOW_WIDTH_PROPERTY = "--navi-transition-window-width";
+const WINDOW_HEIGHT_PROPERTY = "--navi-transition-window-height";
+const WINDOW_OLD_TOP_PROPERTY = "--navi-transition-window-old-top";
+const WINDOW_OLD_LEFT_PROPERTY = "--navi-transition-window-old-left";
+const WINDOW_PROPERTIES = [
+  WINDOW_TOP_PROPERTY,
+  WINDOW_LEFT_PROPERTY,
+  WINDOW_WIDTH_PROPERTY,
+  WINDOW_HEIGHT_PROPERTY,
+  WINDOW_OLD_TOP_PROPERTY,
+  WINDOW_OLD_LEFT_PROPERTY,
+];
+
+// Whose numbers are currently published. The window belongs to the movement
+// that measured it, and only that one may take it down: a movement ending
+// after another has replaced it must not wipe numbers the new one is standing
+// on.
+let windowOwner = null;
+
+const holdTransitionWindow = (owner, element, rectBefore) => {
+  const rectAfter = element.getBoundingClientRect();
+  // It cannot be measured from one side alone: a page arriving shorter than
+  // the one it replaces would cut the one leaving, a page arriving taller
+  // would be cut itself.
+  const height =
+    rectBefore.height > rectAfter.height ? rectBefore.height : rectAfter.height;
+  windowOwner = owner;
+  const { style } = document.documentElement;
+  style.setProperty(WINDOW_TOP_PROPERTY, `${rectAfter.top}px`);
+  style.setProperty(WINDOW_LEFT_PROPERTY, `${rectAfter.left}px`);
+  style.setProperty(WINDOW_WIDTH_PROPERTY, `${rectAfter.width}px`);
+  style.setProperty(WINDOW_HEIGHT_PROPERTY, `${height}px`);
+  style.setProperty(WINDOW_OLD_TOP_PROPERTY, `${rectBefore.top}px`);
+  style.setProperty(WINDOW_OLD_LEFT_PROPERTY, `${rectBefore.left}px`);
+};
+
+// The live layout takes the box back. A discontinuity by construction — the
+// window stands at the held height, the box is at its own — and an invisible
+// one: the page arriving is fully in place, and the strip below it that the
+// window still covers shows the page leaving only while it is still on screen.
+const releaseTransitionWindow = (owner) => {
+  if (owner !== windowOwner) {
+    return;
+  }
+  windowOwner = null;
+  const { style } = document.documentElement;
+  for (const property of WINDOW_PROPERTIES) {
+    style.removeProperty(property);
+  }
+};
+
+installImportMetaCssBuild(import.meta);/**
+ * How two routes move against each other, said one relation at a time —
+ * without putting them in a row, and without a box in the tree.
+ *
+ * A page one goes INTO (a game, a profile, a place) is entered from wherever
+ * one opened it, and left back out the same way. That is a fact about a PAIR
+ * of pages, and only about the pairs it is written for:
+ *
+ *   defineRouteTransition(MY_GAMES_PAGE, GAME_PAGE, "slide-x");
+ *   defineRouteTransition(RADAR_PAGE, GAME_PAGE, "slide-x");
+ *
+ * Going from the first page to the second plays forward, the reverse plays
+ * back, and two pages never written in the same relation play nothing between
+ * each other — two tabs of a bottom bar are side by side, neither is before
+ * the other, and being animated by the same mechanism does not order them.
+ * This is what tells this apart from <RouteTravel>: a travel box is a ROW — a
+ * total order, plus a drag gesture that walks it — while this declares
+ * individual relations and nothing else.
+ *
+ * A relation is reciprocal by DEFAULT, not by decree: the way back is the same
+ * movement run the other way, because that is what lets a user build a map of
+ * the app — but a relation written for the exact way travelled wins over being
+ * the reverse of another, so B → A can be given a movement of its own, or
+ * silenced with "none", by writing it (see findRelation).
+ *
+ * The relation says WHEN something plays and which way; the transition says
+ * WHAT plays — a movement navi ships, or a name the application defines in its
+ * own CSS (see the JSDoc below). Said without one, the relation plays the
+ * browser's cross-fade.
+ *
+ * There is no box in the tree: by default what animates is the document itself
+ * (its `root` view transition group), which is right for pages that ARE the
+ * whole viewport. An application whose pages live between fixed bars marks the
+ * region they live in with `data-navi-route-transition-area` — one attribute
+ * on an element it already has — and the movement then plays on that region's
+ * own pictures, clipped at its bounds, while the bars simply never move (see
+ * TRANSITION_AREA_ATTRIBUTE for why the root pictures cannot do this job).
+ *
+ * The URL leads and the picture follows, as everywhere in navi: the change is
+ * a navigation somebody else started (a <Link>, the back button), this only
+ * watches it land and photographs the page being left in time (see
+ * rendering_hold.js for how the picture is kept honest). A browser without
+ * view transitions navigates without the movement.
+ *
+ * However many relations are defined, there is ONE watcher: every definition
+ * lands in a shared registry, and the watcher is rebuilt over the whole of it
+ * — a navigation is a single fact about the document, and the first relation
+ * that speaks about it answers for it.
+ */
+const startViewTransition$1 = ensureDocumentStartViewTransition();
+const TRANSITION_ATTRIBUTE = "data-navi-route-transition";
+const TRANSITION_TYPE_ATTRIBUTE = "data-navi-route-transition-type";
+const TRANSITION_DURATION_PROPERTY = "--navi-route-transition-duration";
+// What the movement is played on. The root snapshot spans the viewport, and
+// the regions of elements captured on their own (a named bar) are BLANK in it
+// — a page sliding vertically then drags a blank band across the screen where
+// the top bar was. An application with fixed bars therefore marks the region
+// its pages live in with this attribute: the marked element is captured on its
+// own, the movement plays on ITS pictures, clipped at its bounds, and the bars
+// simply never move. Without the mark the document itself travels, which is
+// right for a page that IS the whole viewport.
+const TRANSITION_AREA_ATTRIBUTE = "data-navi-route-transition-area";
+const TRANSITION_TARGET_ATTRIBUTE = "data-navi-route-transition-target";
+const AREA_NAME = "navi-route-transition";
+// route_travel.jsx wears this on the root for the length of one of its
+// travels (its TRAVEL_ATTRIBUTE — a comment there mirrors this one). Read by
+// name rather than imported: importing route_travel.jsx would pull the whole
+// travel machinery into an application that only defines transitions.
+const ROUTE_TRAVEL_ATTRIBUTE = "data-navi-route-travel";
+
+// The same movements, written once and played on either target: the document,
+// or the marked area. The guard keeps the two exclusive — with an area marked,
+// the root pictures must NOT move (they carry the whole viewport, blank bands
+// included).
+
+const css$T = /* css */`
+  /* The marked region is a picture of its own during every view transition of
+     the document — which is what keeps it out of the root snapshot, where its
+     place would otherwise be blank. */
+  [data-navi-route-transition-area] {
+    view-transition-name: navi-route-transition;
+  }
+
+  /* Only while a transition of OURS is playing: everything below changes how
+     the document animates, and the document belongs to the application the
+     rest of the time. */
+  :root[data-navi-route-transition] {
+    /* With an area marked, the page AROUND it is not taken as a picture — so
+       exactly one of the two names below exists at a time, and the movements
+       can be written once for both. It is also what a fixed bar wants: a
+       captured element is not painted where it stands and cannot be pointed
+       at either, so a bar photographed with the document is dead for the
+       length of every transition. Left live, it answers as it always did, and
+       nothing shows through where the pages are — the two pictures cover the
+       area's rectangle between them at every moment. Anything around that must
+       ANIMATE rather than stand still gets a view-transition-name of its own,
+       and the browser moves it on the same clock. */
+    &[data-navi-route-transition-target="area"] {
+      view-transition-name: none;
+    }
+
+    &::view-transition-old(root),
+    &::view-transition-new(root),
+    &::view-transition-old(navi-route-transition),
+    &::view-transition-new(navi-route-transition) {
+      /* Written on the direction alone, so a relation with no type — the
+         browser's cross-fade — answers to it like every other. */
+      animation-duration: var(--navi-route-transition-duration, 300ms);
+    }
+
+    /* The window the pages are seen through, when it is an area. Nothing here
+       names \`root\`: the root picture IS the window when the whole document
+       travels, already the size of the screen and already cut by it. */
+    &::view-transition-group(navi-route-transition),
+    &::view-transition-image-pair(navi-route-transition) {
+      /* The pages are cut at the edge of the area they move in. Said HERE and
+         nowhere else: these pictures are drawn in the top layer, so no
+         overflow on any element of the document can reach them. */
+      overflow: clip;
+    }
+    &::view-transition-group(navi-route-transition) {
+      /* Held still for the whole transition, at the taller of the two states,
+         and standing where the area stands (see transition_window.js). Held by
+         dropping the group's animation rather than by winning against it with
+         !important — which also drops its position animation, fine for an area
+         that stays in the same place from one page to the next. */
+      height: var(--navi-transition-window-height);
+      animation-name: none;
+
+      /* Cut at the safe area, on top of being cut at the area's own box. The
+         pictures are drawn in the top layer, so they cover a fixed bar as
+         easily as anything else — and the area runs UNDER the bars by design:
+         that is what a fixed bar is for, and what the room it gives back is
+         for. An area taller than the screen therefore ends below the bottom
+         bar, and a scrolled one starts above the top bar, so the movement
+         would be watched painting over them for its whole length.
+
+         The band left free is the app's own safe area (see
+         layout/safe_area.js) — every kind of furniture at once, not the bars
+         alone, and read rather than asked for, so one that grows, shrinks or
+         unmounts mid-transition is followed without anything being told. What
+         the window cannot know is only where it itself stands, and that is the
+         measured half. */
+      --navi-route-transition-clip-top: max(
+        0px,
+        var(--navi-safe-area-inset-top) - var(--navi-transition-window-top)
+      );
+      --navi-route-transition-clip-left: max(
+        0px,
+        var(--navi-safe-area-inset-left) - var(--navi-transition-window-left)
+      );
+      --navi-route-transition-clip-bottom: max(
+        0px,
+        var(--navi-transition-window-top) +
+          var(--navi-transition-window-height) +
+          var(--navi-safe-area-inset-bottom) - 100dvh
+      );
+      --navi-route-transition-clip-right: max(
+        0px,
+        var(--navi-transition-window-left) +
+          var(--navi-transition-window-width) +
+          var(--navi-safe-area-inset-right) - 100dvw
+      );
+      clip-path: inset(
+        var(--navi-route-transition-clip-top)
+          var(--navi-route-transition-clip-right)
+          var(--navi-route-transition-clip-bottom)
+          var(--navi-route-transition-clip-left)
+      );
+
+      /* How far a page travels: the WINDOW it is seen through, not its own
+         size. A page is as tall as its content — several screens of it — and a
+         movement measured on the picture would send it thousands of pixels
+         away, off screen for most of the transition and flying past at the
+         end. What one page crossing another means is one window's worth of
+         movement, whatever the pages are made of. Inherited by the pictures,
+         which is where it is used (see the keyframes). */
+      --navi-route-transition-travel-x: calc(
+        var(--navi-transition-window-width) - var(
+            --navi-route-transition-clip-left
+          ) - var(--navi-route-transition-clip-right)
+      );
+      --navi-route-transition-travel-y: calc(
+        var(--navi-transition-window-height) - var(
+            --navi-route-transition-clip-top
+          ) - var(--navi-route-transition-clip-bottom)
+      );
+    }
+    &::view-transition-old(navi-route-transition) {
+      /* Where the area WAS on screen, which is not where the window stands
+         (see transition_window.js). Offset here rather than by \`translate\`,
+         which the movement itself uses. */
+      top: calc(
+        var(--navi-transition-window-old-top) - var(
+            --navi-transition-window-top
+          )
+      );
+      left: calc(
+        var(--navi-transition-window-old-left) - var(
+            --navi-transition-window-left
+          )
+      );
+    }
+
+    /* ------------------------------------------------------------------
+       The movements. One of \`root\` and \`navi-route-transition\` exists at a
+       time (see the opt-out above), so each is written for both.
+       ------------------------------------------------------------------ */
+    &[data-navi-route-transition-type="slide-x"],
+    &[data-navi-route-transition-type="slide-y"],
+    &[data-navi-route-transition-type="cover-x"],
+    &[data-navi-route-transition-type="cover-y"] {
+      &::view-transition-old(root),
+      &::view-transition-new(root),
+      &::view-transition-old(navi-route-transition),
+      &::view-transition-new(navi-route-transition) {
+        width: auto;
+        /* Each picture at the size it was taken at: a page is not resized by
+           the page it crosses. The picture is as wide as the box the browser
+           gives it — the arriving one's — so a page leaving a narrower box (a
+           scrollbar appeared, a side panel closed) would be seen zooming over
+           the length of the movement. Left to the untyped cross-fade, where
+           scaling one picture into the other is the whole idea. */
+        height: auto;
+        object-fit: none;
+        object-position: top left;
+        /* The default cross-fade, dropped: two pages sliding past each other
+           are two solid things, and seeing through one to the other says they
+           are the same page changing its mind. */
+        mix-blend-mode: normal;
+        animation-timing-function: ease;
+        animation-fill-mode: both;
+      }
+    }
+
+    &[data-navi-route-transition-type="slide-x"] {
+      &[data-navi-route-transition="forward"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-leave-towards-start;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-end;
+        }
+      }
+      &[data-navi-route-transition="back"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-leave-towards-end;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-start;
+        }
+      }
+    }
+
+    /* The same four movements, along the other axis: the start of a column is
+       its top, so going forward there is the page rising and the next one
+       coming up from below. */
+    &[data-navi-route-transition-type="slide-y"] {
+      &[data-navi-route-transition="forward"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-leave-towards-top;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-bottom;
+        }
+      }
+      &[data-navi-route-transition="back"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-leave-towards-bottom;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-top;
+        }
+      }
+    }
+
+    /* One page over the other, the way a sheet covers a desk: the page
+       arriving slides in ON TOP of one that does not move, and going back it
+       slides off, uncovering it. The still page is animated all the same — to
+       a keyframe that goes nowhere — because left to the browser it would
+       fade. */
+    &[data-navi-route-transition-type="cover-x"] {
+      &[data-navi-route-transition="forward"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-still;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-end;
+        }
+      }
+      &[data-navi-route-transition="back"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          /* The page leaving is the cover: it must slide off ABOVE the one it
+             uncovers, against the browser's default of drawing the new page on
+             top. */
+          z-index: 1;
+          animation-name: navi-route-transition-leave-towards-end;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-still;
+        }
+      }
+    }
+    &[data-navi-route-transition-type="cover-y"] {
+      &[data-navi-route-transition="forward"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-still;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-enter-from-bottom;
+        }
+      }
+      &[data-navi-route-transition="back"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          z-index: 1;
+          animation-name: navi-route-transition-leave-towards-bottom;
+        }
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-still;
+        }
+      }
+    }
+
+    /* Going deeper is coming closer: the page arriving lands from slightly too
+       big, and going back it is the page leaving that grows away. The other
+       side keeps the browser's own fade under it. */
+    &[data-navi-route-transition-type="zoom"] {
+      &::view-transition-old(root),
+      &::view-transition-new(root),
+      &::view-transition-old(navi-route-transition),
+      &::view-transition-new(navi-route-transition) {
+        animation-fill-mode: both;
+      }
+      &[data-navi-route-transition="forward"] {
+        &::view-transition-new(root),
+        &::view-transition-new(navi-route-transition) {
+          animation-name: navi-route-transition-zoom-in;
+        }
+      }
+      &[data-navi-route-transition="back"] {
+        &::view-transition-old(root),
+        &::view-transition-old(navi-route-transition) {
+          animation-name: navi-route-transition-zoom-out;
+        }
+      }
+    }
+  }
+
+  /* One window's worth of movement. The fallback is the picture's own size,
+     which is what the window is when the whole document travels: the root
+     picture IS the viewport. */
+  @keyframes navi-route-transition-leave-towards-start {
+    to {
+      translate: calc(-1 * var(--navi-route-transition-travel-x, 100%)) 0;
+    }
+  }
+  @keyframes navi-route-transition-enter-from-end {
+    from {
+      translate: var(--navi-route-transition-travel-x, 100%) 0;
+    }
+  }
+  @keyframes navi-route-transition-leave-towards-end {
+    to {
+      translate: var(--navi-route-transition-travel-x, 100%) 0;
+    }
+  }
+  @keyframes navi-route-transition-enter-from-start {
+    from {
+      translate: calc(-1 * var(--navi-route-transition-travel-x, 100%)) 0;
+    }
+  }
+  @keyframes navi-route-transition-leave-towards-top {
+    to {
+      translate: 0 calc(-1 * var(--navi-route-transition-travel-y, 100%));
+    }
+  }
+  @keyframes navi-route-transition-enter-from-bottom {
+    from {
+      translate: 0 var(--navi-route-transition-travel-y, 100%);
+    }
+  }
+  @keyframes navi-route-transition-leave-towards-bottom {
+    to {
+      translate: 0 var(--navi-route-transition-travel-y, 100%);
+    }
+  }
+  @keyframes navi-route-transition-enter-from-top {
+    from {
+      translate: 0 calc(-1 * var(--navi-route-transition-travel-y, 100%));
+    }
+  }
+  @keyframes navi-route-transition-zoom-in {
+    from {
+      opacity: 0;
+      scale: 1.1;
+    }
+  }
+  @keyframes navi-route-transition-zoom-out {
+    to {
+      opacity: 0;
+      scale: 1.1;
+    }
+  }
+  /* Standing still, said as an animation: naming it replaces the browser's own
+     fade on that side, which is the whole point. */
+  @keyframes navi-route-transition-still {
+    to {
+      translate: 0 0;
+    }
+  }
+`;
+
+/**
+ * The region the pages live in — where the movements play.
+ *
+ * Wrap the `<Route>` tree with it in an application that has fixed furniture
+ * (a top bar, a tab bar): the movements then play on THIS element's pictures,
+ * clipped at its bounds, and the bars never move. Without it the document
+ * itself travels, which is right only when the pages are the whole viewport —
+ * with bars around, the moving root picture drags a blank band across the
+ * screen where they stand.
+ *
+ * It is a real box, and it must be: what is photographed and clipped IS its
+ * rectangle. So `display: contents` cannot be used on it — an element with no
+ * box is never captured, the movement plays on nothing and the browser aborts
+ * the transition. Give it the layout the pages need instead — it is a `Box`,
+ * so `flex`, `className`, `style` and the rest are there for that. An
+ * application that already has an element holding its pages can mark that one
+ * with `data-navi-route-transition-area` rather than nesting another.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{ children?: any, [key: string]: any }>}
+ */
+const RouteTransitionArea = ({
+  children,
+  ...rest
+}) => {
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  const props = {
+    ...rest,
+    [TRANSITION_AREA_ATTRIBUTE]: ""
+  };
+  return jsx(Box, {
+    ...props,
+    children: children
+  });
+};
+
+/**
+ * Declare how a pair of routes moves against each other.
+ *
+ * @param {object} from - a route, or `{ route, params }` when the page is a
+ *   param of a route rather than a route of its own.
+ * @param {object} to - same forms. Going from `from` to `to` plays forward,
+ *   the reverse plays back — unless the reverse is written as a relation of
+ *   its own, which then owns that way (a movement of its own, or `"none"` for
+ *   a plain cut). A change between two pages no relation was written for plays
+ *   nothing.
+ * @param {string|{type?: string, duration?: number|string}} [transition] -
+ *   what plays: a type name, or `{ type, duration }` to also say how long
+ *   (`--navi-route-transition-duration` says it for everyone otherwise).
+ *   Omitted, the browser's own cross-fade. Shipped with navi:
+ *   - `"slide-x"`, `"slide-y"`: the two pages slide past each other, forward
+ *     towards the start of the axis;
+ *   - `"cover-x"`, `"cover-y"`: the page arriving slides in OVER one that does
+ *     not move, and slides off it on the way back;
+ *   - `"zoom"`: the deeper page is the closer one — it lands from slightly too
+ *     big, and grows away when left;
+ *   - `"none"`: nothing, said out loud — written on one way of a pair, it cuts
+ *     where the reverse of the other way (or the default) would have played;
+ *   - `"cross-fade"`: the omitted case, nameable — so one way of a pair can
+ *     fade while the other way moves.
+ *   Every type plays on the document, or on the element marked
+ *   `data-navi-route-transition-area` when the application has one (see the
+ *   top of this file). Any other name belongs to the application: for the
+ *   length of the transition the root carries
+ *   `data-navi-route-transition-type="<type>"` next to
+ *   `data-navi-route-transition="forward"|"back"`, and the application's CSS
+ *   defines the movement against the view transition pseudo-elements:
+ *
+ *     :root[data-navi-route-transition-type="spin"][data-navi-route-transition="forward"] {
+ *       &::view-transition-new(root) {
+ *         animation-name: my-spin-in;
+ *       }
+ *     }
+ * @returns {() => void} remove this relation.
+ */
+const defineRouteTransition = (from, to, transition) => {
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  const {
+    type,
+    duration
+  } = normalizeTransition(transition);
+  const relation = {
+    from: normalizePage$1(from),
+    to: normalizePage$1(to),
+    type,
+    duration
+  };
+  relations.push(relation);
+  rebuildWatcher();
+  updateRoutingObservers();
+  return () => {
+    const index = relations.indexOf(relation);
+    if (index > -1) {
+      relations.splice(index, 1);
+      rebuildWatcher();
+      updateRoutingObservers();
+    }
+  };
+};
+
+/**
+ * What plays on a navigation no relation was written for: every route change
+ * then plays this transition, and the written relations keep their own.
+ *
+ * A default has no direction — nothing says which of two arbitrary pages is
+ * "before" the other — so give it a movement that does not need one:
+ * `"cross-fade"`, or a custom type whose CSS is keyed on the type alone.
+ *
+ * @param {string|{type?: string, duration?: number|string}} transition - same
+ *   forms as defineRouteTransition's. `"none"` (or removing the default) puts
+ *   the silence back.
+ * @returns {() => void} remove this default.
+ */
+const defineRouteDefaultTransition = transition => {
+  import.meta.css = [css$T, "@jsenv/navi/src/nav/route_transition.jsx"];
+  const value = normalizeTransition(transition);
+  defaultTransition = value;
+  updateRoutingObservers();
+  return () => {
+    if (defaultTransition === value) {
+      defaultTransition = null;
+      updateRoutingObservers();
+    }
+  };
+};
+
+// "cross-fade" is a name for what plays when nothing is asked for — the
+// browser's own animation — so it normalizes to asking for nothing. Having the
+// name lets one way of a pair say it out loud while the other way slides.
+const normalizeTransition = transition => {
+  const {
+    type,
+    duration
+  } = typeof transition === "string" ? {
+    type: transition
+  } : transition || {};
+  return {
+    type: type === "cross-fade" ? undefined : type,
+    duration
+  };
+};
+
+// Every relation defined, and the single watcher standing over all of them.
+const relations = [];
+let watcher = null;
+const rebuildWatcher = () => {
+  if (watcher) {
+    watcher.stop();
+    watcher = null;
+  }
+  if (relations.length === 0) {
+    return;
+  }
+  // Every page any relation mentions, each once: the position of the current
+  // page in this list is what turns "some signal moved" into "the document
+  // went from page A to page B".
+  const pages = [];
+  for (const {
+    from,
+    to
+  } of relations) {
+    if (pageIndexOf$1(pages, from) === -1) {
+      pages.push(from);
+    }
+    if (pageIndexOf$1(pages, to) === -1) {
+      pages.push(to);
+    }
+  }
+  const currentIndexSignal = computed(() => currentPageIndex$1(pages));
+  let currentIndex;
+  let firstReading = true;
+  const onMove = index => {
+    const fromIndex = currentIndex;
+    currentIndex = index;
+    if (firstReading) {
+      // Where the document already is — nothing changed, there is nothing to
+      // animate. Also the first reading after a definition landed mid-life:
+      // the watcher is standing again on whatever page is current.
+      firstReading = false;
+      return;
+    }
+    if (index === -1 || fromIndex === -1 || fromIndex === index) {
+      return;
+    }
+    const found = findRelation(pages[fromIndex], pages[index]);
+    if (!found) {
+      // No relation says anything about these two: they are side by side, and
+      // silence is the fact — not a missing case.
+      return;
+    }
+    const {
+      direction,
+      relation
+    } = found;
+    if (relation.type === "none") {
+      // Silence said out loud: this way of the pair was written to play
+      // nothing, where the reverse of the other way — or the default — would
+      // have played.
+      navigationAnimated = true;
+      return;
+    }
+    beginTransition({
+      page: pages[index],
+      direction,
+      type: relation.type,
+      duration: relation.duration
+    });
+  };
+  // `subscribe` rather than `effect`: it hands the value to a callback that is
+  // not being tracked, and starting a view transition releases holds that make
+  // the very signals this is watched through move again.
+  const unsubscribe = currentIndexSignal.subscribe(onMove);
+  watcher = {
+    stop: unsubscribe
+  };
+};
+
+// What plays when no relation matched (see defineRouteDefaultTransition), and
+// whether the navigation now landing found an answer already — a relation's
+// transition, a "none", a RouteTravel travel. The flag is reset when a
+// navigation begins, so it is always about the latest one.
+let defaultTransition = null;
+let navigationAnimated = false;
+
+// The two ends of a navigation, watched while there is anyone to animate it.
+// The picture of the page being left has to be honest, so rendering is held
+// from before the navigation's first write (see rendering_hold.js) — and given
+// back at the far end when the change turns out to be one nobody animates,
+// which is also the one moment the DEFAULT can decide: every relation has had
+// its say by then.
+let stopRoutingObservers = null;
+const updateRoutingObservers = () => {
+  const wanted = relations.length > 0 || defaultTransition !== null;
+  if (wanted && !stopRoutingObservers) {
+    const stopWatchingStart = observeBeforeRouting(() => {
+      navigationAnimated = false;
+      holdRenderingForRouting();
+    });
+    const stopWatchingEnd = observeAfterRouting(() => {
+      if (defaultTransition && defaultTransition.type !== "none" && !navigationAnimated) {
+        beginTransition({
+          page: null,
+          // A default has no direction: nothing says which of two arbitrary
+          // pages is before the other. The attribute is worn empty — present
+          // for whoever keys on "one of ours is playing", silent on the way.
+          direction: "",
+          type: defaultTransition.type,
+          duration: defaultTransition.duration
+        });
+      }
+      releaseRoutingRenderingHold();
+    });
+    stopRoutingObservers = () => {
+      stopWatchingStart();
+      stopWatchingEnd();
+    };
+    return;
+  }
+  if (!wanted && stopRoutingObservers) {
+    stopRoutingObservers();
+    stopRoutingObservers = null;
+  }
+};
+
+// The exact way travelled first, over the whole registry, and only then the
+// reverses: a relation written B → A owns that way, and being the reverse of
+// one written A → B never outranks it. This is what makes reciprocity a
+// default rather than a decree — write the way back to give it a movement of
+// its own, or "none" to silence it.
+const findRelation = (fromPage, toPage) => {
+  for (const relation of relations) {
+    if (samePage$1(relation.from, fromPage) && samePage$1(relation.to, toPage)) {
+      return {
+        direction: "forward",
+        relation
+      };
+    }
+  }
+  for (const relation of relations) {
+    if (samePage$1(relation.from, toPage) && samePage$1(relation.to, fromPage)) {
+      return {
+        direction: "back",
+        relation
+      };
+    }
+  }
+  return null;
+};
+
+// The transition whose direction the document is currently wearing. One per
+// document, as with view transitions themselves: a new one starting takes the
+// attributes over, and only their owner may take them off.
+let currentTransition = null;
+const beginTransition = ({
+  page,
+  direction,
+  type,
+  duration
+}) => {
+  navigationAnimated = true;
+  const documentElement = document.documentElement;
+  // One navigation, one animator. A RouteTravel box already travelling this
+  // change owns the document's transition — and possibly a finger; starting
+  // one here on top would skip its pictures mid-slide. A pair of routes must
+  // be animated by RouteTravel or by a route transition, never both.
+  if (documentElement.hasAttribute(ROUTE_TRAVEL_ATTRIBUTE)) {
+    console.warn("A RouteTravel is animating this navigation; the route transition defined between these routes is skipped. Animate a pair of routes with RouteTravel or defineRouteTransition, not both.");
+    return;
+  }
+  const transition = {};
+  currentTransition = transition;
+  documentElement.setAttribute(TRANSITION_ATTRIBUTE, direction);
+  if (type) {
+    documentElement.setAttribute(TRANSITION_TYPE_ATTRIBUTE, type);
+  }
+  // Looked up per transition, not once: the area is the application's own
+  // element and follows its lifecycle — a page layout without bars has none,
+  // and the movement then plays on the document itself.
+  const areaElements = document.querySelectorAll(`[${TRANSITION_AREA_ATTRIBUTE}]`);
+  if (areaElements.length > 1) {
+    warnOnce("several-areas", `${areaElements.length} elements carry ${TRANSITION_AREA_ATTRIBUTE}. They all take the same view-transition-name, and a name belongs to one element at a time: the browser refuses EVERY view transition of the document while this holds. Mark the one element the pages live in.`);
+  }
+  const areaElement = areaElements.length > 0 ? areaElements[0] : null;
+  // The area as it stands before anything moves: rendering is held, so this is
+  // still the page being left (see holdAreaGeometry).
+  let areaRectBefore = null;
+  if (areaElement) {
+    documentElement.setAttribute(TRANSITION_TARGET_ATTRIBUTE, "area");
+    areaRectBefore = areaElement.getBoundingClientRect();
+  }
+  // A duration of this relation's own, worn for the length of the transition —
+  // and whatever the application had written inline put back afterwards, not
+  // erased.
+  let restoreDuration = null;
+  if (duration !== undefined) {
+    const durationBefore = documentElement.style.getPropertyValue(TRANSITION_DURATION_PROPERTY);
+    documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, typeof duration === "number" ? `${duration}ms` : duration);
+    restoreDuration = () => {
+      if (durationBefore) {
+        documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, durationBefore);
+      } else {
+        documentElement.style.removeProperty(TRANSITION_DURATION_PROPERTY);
+      }
+    };
+  }
+  const releaseRendering = takeoverRoutingRenderingHold();
+  // Armed 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 renders its page in between — a wait armed then waits for
+  // something that has already happened.
+  const renderWait = armRouteRenderWait$1();
+  // What the browser ACTUALLY captured, read once the pictures exist: it is
+  // the only place the two silent misconfigurations show. Both are about the
+  // same thing — a movement playing on pictures that are not the pages.
+  const viewTransitionReady = () => {
+    const capturedNames = capturedViewTransitionNames();
+    if (areaElements.length > 0) {
+      if (!capturedNames.has(AREA_NAME)) {
+        warnOnce("area-not-captured", `The element marked ${TRANSITION_AREA_ATTRIBUTE} was not captured, so the movement plays on nothing. An element is captured only if it generates a box: \`display: contents\` (or an element not rendered) cannot be the area — its rectangle is what gets photographed and clipped.`);
+      }
+      return;
+    }
+    for (const name of capturedNames) {
+      if (name === "root") {
+        continue;
+      }
+      // Something stands still while the whole document travels under it. The
+      // root picture spans the viewport and has a HOLE where that thing was
+      // captured, so what crosses the screen is a blank band.
+      warnOnce("pages-travel-under-named-elements", `The movement plays on the whole document while "${name}" is captured on its own, so a blank band travels where it stands. Wrap the pages in <RouteTransitionArea> (or mark their element with ${TRANSITION_AREA_ATTRIBUTE}) so the movement plays on them rather than on the document.`);
+      break;
+    }
+  };
+  const viewTransition = startViewTransition$1(async () => {
+    // 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. Whatever
+    // is awaited here must be able to resolve without a frame: the document
+    // is frozen for the whole of this callback.
+    try {
+      // Releasing flushes the held render synchronously, so a route that
+      // rendered has already resolved the wait by the next line.
+      releaseRendering();
+      if (page === null) {
+        // A default transition: which page is arriving is unknown, and some
+        // navigations render no route at all (a search param bound to a
+        // signal) — waited on, those would freeze the page until the browser
+        // gives up. The wait is raced with a short timer instead.
+        await Promise.race([renderWait.rendered, waitMs(50)]);
+      } else if (pageIsCurrent$1(page)) {
+        await renderWait.rendered;
+      }
+    } finally {
+      renderWait.stop();
+    }
+    // The page arriving is in the DOM and the transition has not started
+    // playing: the one moment both states of the area can be known.
+    if (areaElement) {
+      holdTransitionWindow(transition, areaElement, areaRectBefore);
+    }
+  });
+  const end = () => {
+    // Whatever ends it — played out, skipped by another transition starting,
+    // failed before its callback ever ran — the hold is given back and the
+    // document is handed back to the application. Both are idempotent, and
+    // the attributes belong to the LAST transition begun: an earlier one
+    // ending late must not strip what a later one is wearing.
+    renderWait.stop();
+    releaseRendering();
+    if (currentTransition === transition) {
+      currentTransition = null;
+      documentElement.removeAttribute(TRANSITION_ATTRIBUTE);
+      documentElement.removeAttribute(TRANSITION_TYPE_ATTRIBUTE);
+      documentElement.removeAttribute(TRANSITION_TARGET_ATTRIBUTE);
+      releaseTransitionWindow(transition);
+      if (restoreDuration) {
+        restoreDuration();
+      }
+    }
+  };
+  viewTransition.ready.then(viewTransitionReady, ignoreSkipped$1);
+  viewTransition.finished.then(end, end);
+};
+
+// A transition skipped by another one starting is an outcome, not a failure.
+const ignoreSkipped$1 = () => {};
+
+// The names the browser captured, read off the pictures themselves: what was
+// asked for in CSS and what was taken are not the same question (see
+// viewTransitionReady).
+const capturedViewTransitionNames = () => {
+  const names = new Set();
+  for (const animation of document.getAnimations()) {
+    const pseudoElement = animation.effect?.pseudoElement;
+    if (!pseudoElement || !pseudoElement.startsWith("::view-transition")) {
+      continue;
+    }
+    const nameStart = pseudoElement.indexOf("(");
+    if (nameStart === -1) {
+      continue;
+    }
+    names.add(pseudoElement.slice(nameStart + 1, -1));
+  }
+  return names;
+};
+
+// Said once per kind, whatever the number of navigations: a misconfiguration
+// is one fact about the application, and repeating it every time the user
+// moves would bury it.
+const warningsSaid = new Set();
+const warnOnce = (id, message) => {
+  if (warningsSaid.has(id)) {
+    return;
+  }
+  warningsSaid.add(id);
+  console.warn(message);
+};
+
+// A route matching is a signal changing; how many passes Preact takes to
+// answer it is its own business, and the render is the moment the picture can
+// be taken. Listening starts before the change, or a render landing while the
+// change settles is a render nobody heard.
+const armRouteRenderWait$1 = () => {
+  let stopListening;
+  const rendered = new Promise(resolve => {
+    stopListening = observeRouteRender(resolve);
+  });
+  return {
+    rendered,
+    stop: () => stopListening()
+  };
+};
+const waitMs = ms => new Promise(resolve => setTimeout(resolve, ms));
+const normalizePage$1 = page => page.isRoute ? {
+  route: page,
+  params: undefined
+} : page;
+
+// Two pages are the same page when they select the same thing, not when they
+// were written by the same hand.
+const samePage$1 = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  return a.route === b.route && compareTwoJsValues(a.params, b.params);
+};
+const pageIndexOf$1 = (pages, page) => pages.findIndex(candidate => samePage$1(candidate, page));
+
+// Whether this page is the one on screen — same reading as route_travel.jsx's
+// own: matchingSignal is the necessary condition and is read whatever happens,
+// params only for a route that matches (the params of a route that does not
+// match are not params).
+const pageIsCurrent$1 = ({
+  route,
+  params
+}) => {
+  if (!route.matchingSignal.value) {
+    return false;
+  }
+  return params ? route.matchesParams(params) : true;
+};
+// The FIRST page that answers, and every page read all the same: a page that
+// is not the current one today is the one that must wake the reader tomorrow.
+const currentPageIndex$1 = pages => {
+  let currentIndex = -1;
+  for (let i = 0; i < pages.length; i++) {
+    const isCurrent = pageIsCurrent$1(pages[i]);
+    if (isCurrent && currentIndex === -1) {
+      currentIndex = i;
+    }
+  }
+  return currentIndex;
+};
+
 installImportMetaCssBuild(import.meta);/**
  * Dragging from one route to the next, when the tabs of a page are URLs.
  *
@@ -38355,6 +39468,10 @@ installImportMetaCssBuild(import.meta);/**
  */
 const CAN_KEEP_PICTURE = Boolean(document.startViewTransition && !document.startViewTransition.isPolyfill);
 const startViewTransition = ensureDocumentStartViewTransition();
+
+// route_transition.js reads this attribute by name (not imported, see its
+// ROUTE_TRAVEL_ATTRIBUTE) to refuse animating a navigation a travel already
+// animates — keep the two in sync.
 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
@@ -38374,19 +39491,6 @@ const DRAGGED_ATTRIBUTE = "data-navi-route-travel-dragged";
 const TURNED_ATTRIBUTE = "data-navi-route-travel-turned";
 // The name the box wears while it travels, and only then (see nameForTravel).
 const TRAVEL_NAME = "navi-route-travel";
-// Where the two boxes of a travel stand in the window, published for the
-// length of it. Measurements only: what is DERIVED from them — where a picture
-// goes, what a bar covers — is derived in the CSS below, so the app's own
-// numbers (the room its fixed bars take) can take part in it. Only the
-// measuring needs JS, and only for the one moment both boxes exist (see
-// holdTravelGeometry).
-const TRAVEL_TOP_PROPERTY = "--navi-route-travel-top";
-const TRAVEL_LEFT_PROPERTY = "--navi-route-travel-left";
-const TRAVEL_WIDTH_PROPERTY = "--navi-route-travel-width";
-const TRAVEL_HEIGHT_PROPERTY = "--navi-route-travel-height";
-const TRAVEL_OLD_TOP_PROPERTY = "--navi-route-travel-old-top";
-const TRAVEL_OLD_LEFT_PROPERTY = "--navi-route-travel-old-left";
-const TRAVEL_GEOMETRY_PROPERTIES = [TRAVEL_TOP_PROPERTY, TRAVEL_LEFT_PROPERTY, TRAVEL_WIDTH_PROPERTY, TRAVEL_HEIGHT_PROPERTY, TRAVEL_OLD_TOP_PROPERTY, TRAVEL_OLD_LEFT_PROPERTY];
 const css$S = /* css */`
   /* The name that makes the page inside this box a picture of its own during a
      transition — rather than part of the one big picture the document takes, so
@@ -38469,10 +39573,16 @@ const css$S = /* css */`
          would be seen jumping back to its top before it even begins to leave.
          Offset here rather than by \`translate\`, which the movement itself uses,
          and at its own size rather than the group's so that nothing is cut off
-         the far side of the shift (see holdTravelGeometry). */
-      top: calc(var(${TRAVEL_OLD_TOP_PROPERTY}) - var(${TRAVEL_TOP_PROPERTY}));
+         the far side of the shift (see transition_window.js). */
+      top: calc(
+        var(--navi-transition-window-old-top) - var(
+            --navi-transition-window-top
+          )
+      );
       left: calc(
-        var(${TRAVEL_OLD_LEFT_PROPERTY}) - var(${TRAVEL_LEFT_PROPERTY})
+        var(--navi-transition-window-old-left) - var(
+            --navi-transition-window-left
+          )
       );
       width: auto;
     }
@@ -38487,7 +39597,7 @@ const css$S = /* css */`
     }
     &::view-transition-group(navi-route-travel) {
       /* The window the two pictures are seen through, held still for the whole
-         travel at the taller of the two boxes (see holdTravelGeometry): the group
+         travel at the taller of the two boxes (see transition_window.js): the group
          is what CLIPS, and the browser animates its height from the box being
          left to the box arriving — so the window shrinks under the pictures and
          cuts the page leaving from the bottom, progressively. The box does end
@@ -38498,7 +39608,7 @@ const css$S = /* css */`
          winning against it with !important — which also drops its position
          animation, fine while a travel box stands in the same place from one
          route to the next. */
-      height: var(${TRAVEL_HEIGHT_PROPERTY});
+      height: var(--navi-transition-window-height);
 
       /* Cut at the safe area, on top of being cut at the box. The pictures are
          drawn in the top layer, so they cover a fixed bar as easily as anything
@@ -38515,20 +39625,22 @@ const css$S = /* css */`
          only where it itself stands, and that is the measured half. */
       --navi-route-travel-clip-top: max(
         0px,
-        var(--navi-safe-area-inset-top) - var(${TRAVEL_TOP_PROPERTY})
+        var(--navi-safe-area-inset-top) - var(--navi-transition-window-top)
       );
       --navi-route-travel-clip-left: max(
         0px,
-        var(--navi-safe-area-inset-left) - var(${TRAVEL_LEFT_PROPERTY})
+        var(--navi-safe-area-inset-left) - var(--navi-transition-window-left)
       );
       --navi-route-travel-clip-bottom: max(
         0px,
-        var(${TRAVEL_TOP_PROPERTY}) + var(${TRAVEL_HEIGHT_PROPERTY}) +
+        var(--navi-transition-window-top) +
+          var(--navi-transition-window-height) +
           var(--navi-safe-area-inset-bottom) - 100dvh
       );
       --navi-route-travel-clip-right: max(
         0px,
-        var(${TRAVEL_LEFT_PROPERTY}) + var(${TRAVEL_WIDTH_PROPERTY}) +
+        var(--navi-transition-window-left) +
+          var(--navi-transition-window-width) +
           var(--navi-safe-area-inset-right) - 100dvw
       );
       clip-path: inset(
@@ -38850,12 +39962,11 @@ const RouteTravel = ({
     }
     pageAskedForRef.current = page;
     // The box as it stands before anything moves: rendering is held, so this is
-    // still the page being left (see holdTravelGeometry).
+    // still the page being left (see transition_window.js).
     const rectBefore = elementRef.current.getBoundingClientRect();
     // The hold a navigation already took, if this travel is the answer to one:
     // taking another would be taking a hold on a page that is holding still.
-    const releaseRendering = renderingHeldForRouting || holdRendering();
-    renderingHeldForRouting = null;
+    const releaseRendering = takeoverRoutingRenderingHold();
     // 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. Watched from
     // here rather than from inside the callback below: the browser calls that
@@ -38879,7 +39990,7 @@ const RouteTravel = ({
       }, renderWait);
       // The page arriving is in the DOM and the transition has not started
       // playing: the one moment both boxes can be known.
-      holdTravelGeometry(elementRef.current, rectBefore);
+      holdTransitionWindow(travel, elementRef.current, rectBefore);
     });
     travel.viewTransition = viewTransition;
     if (scrub) {
@@ -38998,25 +40109,14 @@ const RouteTravel = ({
   }, [pages]);
 
   // Rendering is held for the length of a navigation, so that whatever picture
-  // this box is about to take is of the page being LEFT (see holdRendering).
-  // Held from before the navigation's first write, because by the time a route
-  // announces that it matches, Preact has already been told and the render is
-  // queued — a hold taken then is a hold taken too late.
+  // this box is about to take is of the page being LEFT (see
+  // rendering_hold.js).
   useLayoutEffect(() => {
-    const stopWatchingStart = observeBeforeRouting(() => {
-      renderingHeldForRouting = holdRendering();
-    });
+    const stopWatchingStart = observeBeforeRouting(holdRenderingForRouting);
     // Nobody may have had a picture to take: this navigation is not always one
-    // this box travels, and a page held for a change it does not animate is a
-    // page that stutters for nothing. Whoever wanted it took it over
-    // (beginTravel) while the change was being applied, and left nothing here.
-    const stopWatchingEnd = observeAfterRouting(() => {
-      const release = renderingHeldForRouting;
-      renderingHeldForRouting = null;
-      if (release) {
-        release();
-      }
-    });
+    // this box travels. Whoever wanted the hold took it over (beginTravel)
+    // while the change was being applied, and left nothing here.
+    const stopWatchingEnd = observeAfterRouting(releaseRoutingRenderingHold);
     return () => {
       stopWatchingStart();
       stopWatchingEnd();
@@ -39208,7 +40308,7 @@ const RouteTravel = ({
       document.documentElement.removeAttribute(TRAVEL_AXIS_ATTRIBUTE);
       document.documentElement.removeAttribute(DRAGGED_ATTRIBUTE);
       document.documentElement.removeAttribute(TURNED_ATTRIBUTE);
-      releaseTravelGeometry();
+      releaseTransitionWindow(travel);
     }
   };
 
@@ -39591,92 +40691,6 @@ const releaseHold = travel => {
   document.documentElement.removeAttribute(HOLD_ATTRIBUTE);
 };
 
-// The two boxes of a travel, measured at the one moment both exist: the
-// arriving page is in the DOM and the transition has not started playing.
-//
-// The group stands at the ARRIVING box — its own animation is dropped, so it
-// takes the geometry the browser declared for it and holds it for the whole
-// travel. That is why both rectangles have to be published: a group that does
-// not move says nothing about where the page being left was, and its rectangle
-// in the window is the only thing CSS cannot work out on its own.
-const holdTravelGeometry = (element, rectBefore) => {
-  const rectAfter = element.getBoundingClientRect();
-  // The height it is held at is the taller of the two boxes, so neither picture
-  // is ever cut. It cannot be measured from one side alone: a page arriving
-  // shorter than the one it replaces would cut the one leaving, a page arriving
-  // taller would be cut itself.
-  const height = rectBefore.height > rectAfter.height ? rectBefore.height : rectAfter.height;
-  const {
-    style
-  } = document.documentElement;
-  style.setProperty(TRAVEL_TOP_PROPERTY, `${rectAfter.top}px`);
-  style.setProperty(TRAVEL_LEFT_PROPERTY, `${rectAfter.left}px`);
-  style.setProperty(TRAVEL_WIDTH_PROPERTY, `${rectAfter.width}px`);
-  style.setProperty(TRAVEL_HEIGHT_PROPERTY, `${height}px`);
-  style.setProperty(TRAVEL_OLD_TOP_PROPERTY, `${rectBefore.top}px`);
-  style.setProperty(TRAVEL_OLD_LEFT_PROPERTY, `${rectBefore.left}px`);
-};
-// The live layout takes the box back. A discontinuity by construction — the
-// group stands at the held height, the box is at the new one — and an invisible
-// one: the page arriving is fully in place, and the strip below it that the
-// group still covers shows the page leaving only while it is still on screen.
-const releaseTravelGeometry = () => {
-  const {
-    style
-  } = document.documentElement;
-  for (const property of TRAVEL_GEOMETRY_PROPERTIES) {
-    style.removeProperty(property);
-  }
-};
-
-// The browser does not take the picture of the page being left when a
-// transition is ASKED for — it takes it at the next frame, just before running
-// the update callback. Preact renders sooner than that, in a microtask: so a
-// change nobody here asked for (a tab pressed, the back button) has already
-// reached the DOM when the picture is taken, and the picture is of the page
-// ARRIVING. Both sides of the travel then show it, and one watches a page slide
-// onto itself.
-//
-// So what Preact has queued waits until the update callback, which is the
-// moment the API is built around — the change belongs inside it. The whole
-// document is held, for the one frame the browser needs: it is about to be
-// frozen under a picture anyway.
-let renderingHold = null;
-// The hold a navigation took on its way in, until a travel takes it over or the
-// navigation turns out to be one nobody here animates.
-let renderingHeldForRouting = null;
-const holdRendering = () => {
-  if (renderingHold) {
-    return renderingHold.release;
-  }
-  const debounceRenderingBefore = options.debounceRendering;
-  const hold = {
-    render: null,
-    release: () => {
-      // Only the hold that is still standing may be given back: a travel
-      // ending after another has taken over must not let go of what it does
-      // not hold.
-      if (renderingHold !== hold) {
-        return;
-      }
-      renderingHold = null;
-      options.debounceRendering = debounceRenderingBefore;
-      const {
-        render
-      } = hold;
-      hold.render = null;
-      if (render) {
-        render();
-      }
-    }
-  };
-  renderingHold = hold;
-  options.debounceRendering = render => {
-    hold.render = render;
-  };
-  return hold.release;
-};
-
 // The animations of the pictures, asked for again until there are some: they
 // come into existence with the transition, several frames after it was asked
 // for, and the gesture has already begun by then. Kept once found — the set
@@ -73013,5 +74027,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, SplitButton, 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, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, 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 };
+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, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, 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, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, 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