@jsenv/navi 0.29.413 → 0.29.414

package/dist/jsenv_navi.js

@@ -6,8 +6,8 @@ import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, win
 import { createPubSub, elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, getScrollContainer, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
-import { options, isValidElement, createContext, render, h, toChildArray, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
-import { useErrorBoundary, useLayoutEffect, useContext, useMemo, useRef, useEffect, useCallback, useState, useId } from "preact/hooks";
+import { options, isValidElement, createContext, render, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
+import { useErrorBoundary, useLayoutEffect, useContext, useMemo, useRef, useEffect, useCallback, useState, useReducer, useId } from "preact/hooks";
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
@@ -79,7 +79,7 @@ installImportMetaCssBuild(import.meta);
  * any of these, and a number is the last resort, not the first tool.
  */
 
-const css$17 = /* css */ `@layer navi {
+const css$18 = /* css */ `@layer navi {
   :root {
     --navi-z-index-control-hovered: 1;
     --navi-z-index-control-focused: 2;
@@ -92,7 +92,7 @@ const css$17 = /* css */ `@layer navi {
   }
 }
 `;
-import.meta.css = [css$17, "@jsenv/navi/src/navi_z_indexes.js"];
+import.meta.css = [css$18, "@jsenv/navi/src/navi_z_indexes.js"];
 
 /**
  * A navigation is ABOUT to be applied — said before its very first write.
@@ -430,7 +430,7 @@ installImportMetaCssBuild(import.meta);
 
 const URL_TARGET_ATTRIBUTE = "data-url-target";
 
-const css$16 = /* css */ `@layer navi {
+const css$17 = /* css */ `@layer navi {
   [data-url-target] {
     animation: navi_url_target var(--navi-url-target-duration, 2s)
         ease-out;
@@ -448,7 +448,7 @@ const css$16 = /* css */ `@layer navi {
   }
 }
 `;
-import.meta.css = [css$16, "@jsenv/navi/src/nav/url_target/url_target.js"];
+import.meta.css = [css$17, "@jsenv/navi/src/nav/url_target/url_target.js"];
 
 let urlTargetOptions = {
   block: "start",
@@ -2048,7 +2048,7 @@ const useActionStatus = (action) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const css$15 = /* css */`.action_error {
+const css$16 = /* css */`.action_error {
   background: #fdd;
   border: 1px solid red;
   margin-top: 0;
@@ -2072,7 +2072,7 @@ const ActionRenderer = ({
   children,
   disabled
 }) => {
-  import.meta.css = [css$15, "@jsenv/navi/src/action/action_renderer.jsx"];
+  import.meta.css = [css$16, "@jsenv/navi/src/action/action_renderer.jsx"];
   if (action === undefined) {
     throw new Error("ActionRenderer requires an action to render, but none was provided.");
   }
@@ -15336,7 +15336,7 @@ installImportMetaCssBuild(import.meta);
  * (see calloutTemplate in callout.js).
  */
 
-const css$14 = /* css */`.navi_callout_status_icon {
+const css$15 = /* css */`.navi_callout_status_icon {
   --x-callout-status-icon-color: var(--navi-callout-neutral-color);
   box-sizing: border-box;
   aspect-ratio: 1;
@@ -15407,7 +15407,7 @@ const CalloutStatusIcon = ({
   status = "info",
   shape = "square"
 }) => {
-  import.meta.css = [css$14, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
+  import.meta.css = [css$15, "@jsenv/navi/src/control/rules/callout/callout_status_icon.jsx"];
   return jsx("span", {
     className: "navi_callout_status_icon",
     "data-status": status === "none" ? undefined : status,
@@ -15434,7 +15434,7 @@ let calloutCount = 0;
 // large enough to survive the pixel or two a trackpad rests on.
 const CLOSE_BY_SCROLL_DISTANCE = 10;
 
-const css$13 = /* css */ `
+const css$14 = /* css */ `
   /* jsenv-css-opaque: same as dialog.jsx, cascade order. */
   @layer navi {
     .navi_callout {
@@ -15795,7 +15795,7 @@ const openCallout = (
     debug = () => {},
   } = {},
 ) => {
-  import.meta.css = [css$13, "@jsenv/navi/src/control/rules/callout/callout.js"];
+  import.meta.css = [css$14, "@jsenv/navi/src/control/rules/callout/callout.js"];
   if (debug === true) {
     debug = (e, ...args) => console.debug(`"${e.type}" -> `, ...args);
   }
@@ -20787,7 +20787,9 @@ const swipeTypeOf = (axis, pulled) => {
  * meantime, nothing is picked up. The carry is the element's own, outcomes and
  * refusal included, without the wait for intent (the hold was the proof), and
  * the copy is brought to the finger rather than following it from wherever the
- * element stands. A copy or nothing: `move` and `moving` carry the thing itself,
+ * element stands. Let go of there before it has travelled — the hold only meant
+ * to open the popup — it goes back and nothing is answered, whatever it was
+ * brought over. A copy or nothing: `move` and `moving` carry the thing itself,
  * which would leave its place just for being handed a press. When it starts is
  * navi's — after a popup still being lifted (see `--navi-grab` in commands.js).
  *
@@ -30886,6 +30888,12 @@ const useUrlSearchParam = (paramName, defaultValue) => {
   return [value, setSearchParamValue];
 };
 
+// The title belongs to the last Head to arrive, whatever order they leave in:
+// the page being left by a route transition is taken down AFTER the page
+// arriving is up (see keepLeavingPages in route.jsx), and putting back the
+// title it found would put its own page's title over the new one.
+const titleEntries = [];
+let titleWithoutHead = null;
 const Head = ({
   children
 }) => {
@@ -30894,15 +30902,17 @@ const Head = ({
       return undefined;
     }
     const childArray = Array.isArray(children) ? children : [children];
-    const previousTitle = document.title;
     const appendedElements = [];
+    let titleEntry = null;
     for (const child of childArray) {
       if (!child) {
         continue;
       }
       if (child.type === "title") {
         const titleChildren = child.props.children;
-        document.title = Array.isArray(titleChildren) ? titleChildren.join("") : titleChildren ?? "";
+        titleEntry = {
+          title: Array.isArray(titleChildren) ? titleChildren.join("") : titleChildren ?? ""
+        };
         continue;
       }
       const el = document.createElement(child.type);
@@ -30913,8 +30923,19 @@ const Head = ({
       document.head.appendChild(el);
       appendedElements.push(el);
     }
+    if (titleEntry) {
+      if (titleEntries.length === 0) {
+        titleWithoutHead = document.title;
+      }
+      titleEntries.push(titleEntry);
+      document.title = titleEntry.title;
+    }
     return () => {
-      document.title = previousTitle;
+      if (titleEntry) {
+        titleEntries.splice(titleEntries.indexOf(titleEntry), 1);
+        const lastEntry = titleEntries[titleEntries.length - 1];
+        document.title = lastEntry ? lastEntry.title : titleWithoutHead;
+      }
       for (const el of appendedElements) {
         el.remove();
       }
@@ -31077,75 +31098,7 @@ const samePages = (pages, otherPages) => {
   return true;
 };
 
-/**
- * Route is the single primitive for URL-based rendering.
- *
- * ## Layout pattern
- * Use this when multiple routes share a common layout but have no shared URL prefix,
- * making it impossible to set a guard route on the parent container.
- * For example, `/profile` and `/settings` both live inside `AuthLayout` but there
- * is no `/auth/` prefix to match on. A container Route wraps them: the active
- * child's element is injected as `children` into the layout element.
- * If a page needs state owned by the layout, the layout must expose it via context.
- *
- * ```jsx
- * const PROFILE_ROUTE = route("/profile");
- * const SETTINGS_ROUTE = route("/settings");
- *
- * <Route element={AuthLayout}>
- *   <Route route={PROFILE_ROUTE} element={ProfilePage} />
- *   <Route route={SETTINGS_ROUTE} element={SettingsPage} />
- * </Route>
- * ```
- *
- * Such a container holds no fallback, and cannot: what makes this one the right
- * layout is a child matching, and having no prefix is the very reason it was
- * reached for — so there is no address that belongs to it and to none of its
- * children. An address nothing claims is the router's to answer; write the
- * fallback there.
- *
- * ## Self-contained section pattern
- * Use this when routes share a common URL prefix (e.g. `/dashboard/`).
- * A single leaf Route in the top-level router matches the prefix; the component
- * it renders owns its sub-router and all related routes internally.
- * Everything about the section — routes, structure, sub-pages — is co-located.
- * The component is not a reusable layout; it is the section.
- *
- * Compared to the layout pattern, a dedicated section component is more powerful:
- * - Wrapper elements (chrome, nav, containers) are part of the component's render,
- *   not injected via `children`, so a layout is not needed.
- * - Local state can be passed directly via `elementProps` to sub-pages. With the
- *   layout pattern, sub-pages receive state only through `children` or context.
- *
- * The layout pattern remains necessary when a shared prefix does not exist
- * (see "Layout pattern" above).
- *
- * ```jsx
- * const DASHBOARD_SECTION_ROUTE = route("/dashboard/");
- * const DASHBOARD_HOME_ROUTE = route("/dashboard");
- * const DASHBOARD_POSTS_ROUTE = route("/dashboard/posts");
- *
- * // top-level router — only knows about the prefix
- * <Route route={DASHBOARD_SECTION_ROUTE} element={DashboardSection} />
- *
- * // Dashboard owns the rest
- * const DashboardSection = () => {
- *  const [sidebarOpen, setSidebarOpen] = useState(false);
- *
- *   return <div
- *     style="background: lightblue; padding: 10px;"
- *     onClick={() => setSidebarOpen(o => !o)}
- *   >
- *     <Route>
- *       <Route route={DASHBOARD_HOME_ROUTE} element={DashboardHomePage} elementProps={{ sidebarOpen}} />
- *       <Route route={DASHBOARD_POSTS_ROUTE} element={DashboardPostsPage} elementProps={{ sidebarOpen }} />
- *       <Route fallback element={DashboardNotFound} />
- *     </Route>
- *   </div>;
- * }
- * ```
- */
-
+installImportMetaCssBuild(import.meta);
 
 /**
  * Keep every container showing the page it is showing, whatever the routes say.
@@ -31169,6 +31122,56 @@ const freezeRouteRender = () => {
     routeRenderFrozenSignal.value++;
   };
 };
+
+/**
+ * Keep the page a container leaves, hidden, until its route transition is over.
+ *
+ * The browser photographs the page being left before the change, and the page
+ * arriving inside the transition's update callback — where everything done
+ * delays the movement. Taking the page being left down is most of that: every
+ * hook of every component in it is cleaned up, and a page of thirty cards
+ * takes longer to take down than the page arriving takes to build. Its picture
+ * is already taken, so it only has to stay out of the second one: a container
+ * that changes page while this is held keeps the page it was showing, hidden,
+ * and drops it once the movement is over (see route_transition.jsx).
+ *
+ * Kept only where Preact would have unmounted it: a page rendered by the same
+ * element on both sides is the same component instance carried over, exactly
+ * as without a movement.
+ */
+let leavingPagesHold = null;
+const keepLeavingPages = () => {
+  const hold = {
+    released: false,
+    containers: new Set()
+  };
+  leavingPagesHold = hold;
+  return () => {
+    if (hold.released) {
+      return;
+    }
+    hold.released = true;
+    if (leavingPagesHold === hold) {
+      leavingPagesHold = null;
+    }
+    for (const rerender of hold.containers) {
+      rerender();
+    }
+    hold.containers.clear();
+  };
+};
+
+// What a page can learn about its place from the container rendering it:
+// whether it is a page kept while leaving (see keepLeavingPages). Such a page
+// is still mounted, and whatever it fills OUTSIDE its own nodes — a slot in a
+// bar, say — would otherwise go on showing with the page arriving (see
+// layout/slot.jsx).
+const RoutePageContext = createContext(null);
+const LEAVING_ATTRIBUTE = "data-navi-route-leaving";
+const css$13 = /* css */`[data-navi-route-leaving] {
+  display: none !important;
+}
+`;
 const debug$1 = (...args) => {
   {
     return;
@@ -31288,6 +31291,7 @@ const RouteContainer = ({
     shownBranchRef.current = activeBranch;
   }
   const branch = shownBranchRef.current || activeBranch;
+  const content = useContentKeepingLeavingPages(branch);
 
   // The two things this component knows that nobody outside can find out: the
   // pages a named fallback is the absence of — the children it was written
@@ -31309,7 +31313,6 @@ const RouteContainer = ({
     };
   }, [fallbackPage]);
   debug$1(`[container "${id}"] RENDER, active=${branch ? branch.type : "none"}`);
-  const content = branch ? branch.node : null;
   if (!content) {
     return null;
   }
@@ -31318,12 +31321,141 @@ const RouteContainer = ({
   }
   return content;
 };
+// What a container renders: the page it shows and, while a route transition
+// keeps them (see keepLeavingPages), the pages it has left — each the very
+// vnode rendered last time, which Preact does not look into, between two
+// markers that say which nodes to hide. Always an array, even of one page: the
+// page being left must stay the child it was when a page is added beside it,
+// or Preact takes it down and builds it again.
+let leavingKeyCount = 0;
+const useContentKeepingLeavingPages = branch => {
+  const [, rerender] = useReducer(countRenders, 0);
+  const shownRef = useRef(null);
+  const leavingRef = useRef([]);
+  const shown = shownRef.current;
+  const element = branchElement(branch);
+  let key;
+  let page = null;
+  if (shown && branch && (shown.id === branch.id || shown.element === element)) {
+    // The same page, or one Preact carries over from it: the key it was
+    // mounted with, or it would be mounted again.
+    key = shown.key;
+    page = shown.page;
+  } else if (shown && leavingPagesHold) {
+    leavingRef.current.push({
+      vnode: shown.vnode,
+      page: shown.page,
+      key: `navi-route-leaving-${++leavingKeyCount}`,
+      hold: leavingPagesHold,
+      startRef: createRef(),
+      endRef: createRef(),
+      hidden: false
+    });
+    leavingPagesHold.containers.add(rerender);
+    // Keyed apart from the page it takes the place of, which is still there.
+    key = `navi-route-${++leavingKeyCount}`;
+  }
+  let vnode = null;
+  if (branch) {
+    if (!page) {
+      page = {
+        leavingSignal: signal(false)
+      };
+    }
+    vnode = h(RoutePageContext.Provider, {
+      key,
+      value: page
+    }, branch.node);
+  }
+  shownRef.current = branch ? {
+    id: branch.id,
+    element,
+    key,
+    vnode,
+    page
+  } : null;
+  const leaving = leavingRef.current.filter(entry => !entry.hold.released);
+  leavingRef.current = leaving;
+
+  // Hidden as soon as it is in the DOM next to the page arriving: this runs in
+  // the update callback's render, before the second picture is taken.
+  useLayoutEffect(() => {
+    for (const entry of leavingRef.current) {
+      const start = entry.startRef.current;
+      const end = entry.endRef.current;
+      if (entry.hidden || !start || !end) {
+        continue;
+      }
+      entry.hidden = true;
+      entry.page.leavingSignal.value = true;
+      let node = start.nextSibling;
+      while (node && node !== end) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          node.setAttribute(LEAVING_ATTRIBUTE, "");
+        }
+        node = node.nextSibling;
+      }
+    }
+  });
+  useLayoutEffect(() => {
+    return () => {
+      for (const entry of leavingRef.current) {
+        entry.hold.containers.delete(rerender);
+      }
+    };
+  }, []);
+  if (leaving.length === 0) {
+    return vnode ? [vnode] : null;
+  }
+  import.meta.css = [css$13, "@jsenv/navi/src/nav/route.jsx"];
+  const children = vnode ? [vnode] : [];
+  for (const entry of leaving) {
+    children.push(h("template", {
+      key: `${entry.key}-start`,
+      ref: entry.startRef
+    }), entry.vnode, h("template", {
+      key: `${entry.key}-end`,
+      ref: entry.endRef
+    }));
+  }
+  return children;
+};
+const countRenders = count => count + 1;
+// What Preact compares when a container changes page, below the <Route> it
+// renders either way: the element the page is rendered with — a layout, for a
+// container branch.
+const branchElement = branch => {
+  if (!branch) {
+    return null;
+  }
+  let node = branch.node;
+  while (node && node.type !== Route) {
+    // A wrapper around the branch (see wrapBranch).
+    node = node.props.children;
+  }
+  if (!node) {
+    return null;
+  }
+  const {
+    element
+  } = node.props;
+  if (element === undefined || typeof element === "function") {
+    return element;
+  }
+  return element.type;
+};
+
 // Walk JSX children vnodes (without rendering) to build a branch list and
 // find the active one in the same pass. Anything that is not a <Route> is read
 // through and kept around the branch it holds (see below).
 // Returns { matchingBranch, fallbackBranch, activeBranch, pages }.
-const collectBranches = children => {
+//
+// Each branch is given an id from where it is written among the children,
+// which is what tells a container it changed page: the vnodes themselves are
+// new at every render of the parent.
+const collectBranches = (children, path = "") => {
   let matchingBranch = null;
+  let childIndex = 0;
   let fallbackBranch = null;
   // Every page a branch can be on, at any depth: what a named fallback is the
   // ABSENCE of (see route_fallback.js). A container with a guard route counts
@@ -31341,6 +31473,7 @@ const collectBranches = children => {
       }
       return;
     }
+    const id = `${path}${childIndex++}`;
     if (child.type !== Route) {
       // Anything else is a wrapper around branches, and the two that matter are
       // navi's own: a page says what it renders and delegates what it cannot —
@@ -31360,7 +31493,7 @@ const collectBranches = children => {
         matchingBranch: matchingInside,
         fallbackBranch: fallbackInside,
         pages: pagesInside
-      } = collectBranches(wrapperChildren);
+      } = collectBranches(wrapperChildren, `${id}.`);
       for (const pageInside of pagesInside) {
         pages.push(pageInside);
       }
@@ -31383,7 +31516,7 @@ const collectBranches = children => {
         matchingBranch: matchingChild,
         fallbackBranch: fallbackChild,
         pages: pagesChild
-      } = collectBranches(nodeChildren);
+      } = collectBranches(nodeChildren, `${id}.`);
       if (fallbackChild && !route) {
         // A fallback is the branch taken for an address none of its siblings
         // claim — so something has to make that address BELONG to this
@@ -31407,6 +31540,7 @@ const collectBranches = children => {
       }
       const branch = {
         type: "container",
+        id,
         node: child
       };
       const guardMatching = route ? route.matchingSignal.value : false;
@@ -31424,6 +31558,7 @@ const collectBranches = children => {
       if (!fallbackBranch) {
         fallbackBranch = {
           type: "fallback",
+          id,
           node: child,
           page: fallback.isRouteFallback ? fallback : null
         };
@@ -31431,6 +31566,7 @@ const collectBranches = children => {
     } else {
       const branch = {
         type: "leaf",
+        id,
         node: child
       };
       pages.push({
@@ -31878,7 +32014,7 @@ const holdTransitionFurniture = (owner, areaElement) => {
   }
   const namesLeaving = [];
   for (const element of namedElements) {
-    if (!element.isConnected) {
+    if (!isRendered(element)) {
       namesLeaving.push(nameByElement.get(element));
     } else if (element.matches(FIXED_BAR_SELECTOR$1)) {
       element.setAttribute(FURNITURE_ATTRIBUTE, "shared");
@@ -31997,11 +32133,16 @@ const travelRule = (side, names, movementProperty) => {
  * The pictures are up and about to move: what no picture covers heads to the
  * state arriving, on the same clock.
  */
-const startTransitionFurniture = (owner) => {
+const startTransitionFurniture = (owner, { duration } = {}) => {
   if (owner !== furnitureOwner) {
     return;
   }
   for (const restWall of restWallElements) {
+    // A duration of the movement's own is written for its pictures alone (see
+    // transition_values.js); the stand-in is an element, and is told.
+    if (duration !== undefined) {
+      restWall.style.setProperty("--navi-route-transition-duration", duration);
+    }
     restWall.style.opacity = restWallOpacity;
   }
 };
@@ -32032,7 +32173,9 @@ const releaseTransitionFurniture = (owner) => {
 // area's stand-in answers for it.
 const paintTransitionWalls = (areaElement) => {
   removeTransitionWalls();
-  const sources = document.querySelectorAll(TOP_LAYER_WALL_SELECTOR);
+  const sources = Array.from(
+    document.querySelectorAll(TOP_LAYER_WALL_SELECTOR),
+  ).filter(isRendered);
   if (sources.length === 0) {
     return sources;
   }
@@ -32234,6 +32377,14 @@ const subtractRect = (rect, hole) => {
   return pieces;
 };
 
+// Out of the state arriving: taken out of the document, or in a page kept
+// hidden until its movement is over (see keepLeavingPages in route.jsx) —
+// where a dialog is still :modal and a popover still :popover-open, and
+// neither is painted or photographed.
+const isRendered = (element) => {
+  return element.isConnected && element.checkVisibility();
+};
+
 const removeRestWalls = () => {
   for (const restWall of restWallElements) {
     restWall.remove();
@@ -32243,6 +32394,52 @@ const removeRestWalls = () => {
   leavingRects = new Map();
 };
 
+/**
+ * The values a movement hands to its pictures, written where only the pictures
+ * read them: on ::view-transition, the root of the pseudo-element tree, rather
+ * than on the document's root.
+ *
+ * A custom property written on :root is inherited by every element of the
+ * document, and writing one restyles all of them. A movement writes its
+ * numbers as its pages are held, again whenever a scroll moves the window, and
+ * takes them off as it ends — each time a whole-document restyle of a page that
+ * can be thousands of elements long. On ::view-transition they reach every
+ * picture by plain inheritance, and no element at all.
+ *
+ * An inline style cannot target a pseudo-element, so they are declarations of
+ * one rule, in a sheet of their own. Written only: what a pseudo-element that
+ * is not on screen computes is not reliably readable, so nothing reads them
+ * back from there.
+ */
+
+let valuesStyle = null;
+const getValuesStyle = () => {
+  if (valuesStyle) {
+    return valuesStyle;
+  }
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(":root::view-transition {}");
+  const [rule] = sheet.cssRules;
+  if (rule) {
+    document.adoptedStyleSheets.push(sheet);
+    valuesStyle = rule.style;
+  } else {
+    // A browser without view transitions drops the rule: the movement runs its
+    // steps all the same (see start_view_transition_polyfill.js), with no
+    // pictures to hand anything to.
+    valuesStyle = document.createElement("div").style;
+  }
+  return valuesStyle;
+};
+
+const setTransitionValue = (name, value) => {
+  getValuesStyle().setProperty(name, value);
+};
+
+const removeTransitionValue = (name) => {
+  getValuesStyle().removeProperty(name);
+};
+
 installImportMetaCssBuild(import.meta);
 
 const TRANSITION_WINDOW_CSS = /* css */ `@property --navi-transition-cover-top {
@@ -32277,96 +32474,6 @@ const TRANSITION_WINDOW_CSS = /* css */ `@property --navi-transition-cover-top {
     --navi-transition-cover-left: 0px;
   }
 }
-
-@property --navi-transition-window-top {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-left {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-width {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-height {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-old-top {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-old-left {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-new-top {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-window-new-left {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-old-band-top {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-old-band-right {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-old-band-bottom {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-transition-old-band-left {
-  syntax: "*";
-  inherits: false
-}
-
-:root::view-transition, :root::view-transition-group(*), :root::view-transition-image-pair(*), :root::view-transition-old(*), :root::view-transition-new(*) {
-  --navi-transition-window-top: inherit;
-  --navi-transition-window-left: inherit;
-  --navi-transition-window-width: inherit;
-  --navi-transition-window-height: inherit;
-  --navi-transition-window-old-top: inherit;
-  --navi-transition-window-old-left: inherit;
-  --navi-transition-window-new-top: inherit;
-  --navi-transition-window-new-left: inherit;
-  --navi-transition-old-band-top: inherit;
-  --navi-transition-old-band-right: inherit;
-  --navi-transition-old-band-bottom: inherit;
-  --navi-transition-old-band-left: inherit;
-}
-
-:root::view-transition-group-children(*) {
-  --navi-transition-window-top: inherit;
-  --navi-transition-window-left: inherit;
-  --navi-transition-window-width: inherit;
-  --navi-transition-window-height: inherit;
-  --navi-transition-window-old-top: inherit;
-  --navi-transition-window-old-left: inherit;
-  --navi-transition-window-new-top: inherit;
-  --navi-transition-window-new-left: inherit;
-  --navi-transition-old-band-top: inherit;
-  --navi-transition-old-band-right: inherit;
-  --navi-transition-old-band-bottom: inherit;
-  --navi-transition-old-band-left: inherit;
-}
 `;
 
 // Called by whatever needs the window — a render, a movement declared or
@@ -32464,22 +32571,21 @@ const holdTransitionWindow = (
   const right =
     rectBefore.right > rectAfter.right ? rectBefore.right : rectAfter.right;
   windowOwner = owner;
-  const { style } = document.documentElement;
-  style.setProperty(WINDOW_TOP_PROPERTY, `${top}px`);
-  style.setProperty(WINDOW_LEFT_PROPERTY, `${left}px`);
-  style.setProperty(WINDOW_WIDTH_PROPERTY, `${right - left}px`);
-  style.setProperty(WINDOW_HEIGHT_PROPERTY, `${bottom - top}px`);
-  style.setProperty(WINDOW_OLD_TOP_PROPERTY, `${rectBefore.top}px`);
-  style.setProperty(WINDOW_OLD_LEFT_PROPERTY, `${rectBefore.left}px`);
-  style.setProperty(WINDOW_NEW_TOP_PROPERTY, `${rectAfter.top}px`);
-  style.setProperty(WINDOW_NEW_LEFT_PROPERTY, `${rectAfter.left}px`);
+  setTransitionValue(WINDOW_TOP_PROPERTY, `${top}px`);
+  setTransitionValue(WINDOW_LEFT_PROPERTY, `${left}px`);
+  setTransitionValue(WINDOW_WIDTH_PROPERTY, `${right - left}px`);
+  setTransitionValue(WINDOW_HEIGHT_PROPERTY, `${bottom - top}px`);
+  setTransitionValue(WINDOW_OLD_TOP_PROPERTY, `${rectBefore.top}px`);
+  setTransitionValue(WINDOW_OLD_LEFT_PROPERTY, `${rectBefore.left}px`);
+  setTransitionValue(WINDOW_NEW_TOP_PROPERTY, `${rectAfter.top}px`);
+  setTransitionValue(WINDOW_NEW_LEFT_PROPERTY, `${rectAfter.left}px`);
   const oldBand = furnitureLive
     ? bandTheCutMayBeRelaxedTo(bandBefore, bandAfter, rectAfter)
     : bandBefore;
-  style.setProperty(OLD_BAND_TOP_PROPERTY, `${oldBand.top}px`);
-  style.setProperty(OLD_BAND_RIGHT_PROPERTY, `${oldBand.right}px`);
-  style.setProperty(OLD_BAND_BOTTOM_PROPERTY, `${oldBand.bottom}px`);
-  style.setProperty(OLD_BAND_LEFT_PROPERTY, `${oldBand.left}px`);
+  setTransitionValue(OLD_BAND_TOP_PROPERTY, `${oldBand.top}px`);
+  setTransitionValue(OLD_BAND_RIGHT_PROPERTY, `${oldBand.right}px`);
+  setTransitionValue(OLD_BAND_BOTTOM_PROPERTY, `${oldBand.bottom}px`);
+  setTransitionValue(OLD_BAND_LEFT_PROPERTY, `${oldBand.left}px`);
   followArrivingState(element, rectAfter, {
     outerScroll,
     windowTop: top,
@@ -32501,9 +32607,8 @@ const releaseTransitionWindow = (owner) => {
   if (unfollowArrivingState) {
     unfollowArrivingState();
   }
-  const { style } = document.documentElement;
   for (const property of WINDOW_PROPERTIES) {
-    style.removeProperty(property);
+    removeTransitionValue(property);
   }
 };
 
@@ -32512,12 +32617,11 @@ const releaseTransitionWindow = (owner) => {
 // file) — and with it the offset outside the box, which carries the window
 // and the corner of the state being left along. Requested, never awaited: the
 // first call runs inside the update callback, where a frame cannot come.
-// Written only when it moved: every write restyles the root and the pictures.
+// Written only when it moved: every write restyles the pictures.
 const followArrivingState = (element, rectAtHold, heldAt) => {
   if (unfollowArrivingState) {
     unfollowArrivingState();
   }
-  const { style } = document.documentElement;
   let top = rectAtHold.top;
   let left = rectAtHold.left;
   let outerTop = heldAt.outerScroll.top;
@@ -32526,24 +32630,27 @@ const followArrivingState = (element, rectAtHold, heldAt) => {
     const rect = element.getBoundingClientRect();
     if (rect.top !== top) {
       top = rect.top;
-      style.setProperty(WINDOW_NEW_TOP_PROPERTY, `${top}px`);
+      setTransitionValue(WINDOW_NEW_TOP_PROPERTY, `${top}px`);
     }
     if (rect.left !== left) {
       left = rect.left;
-      style.setProperty(WINDOW_NEW_LEFT_PROPERTY, `${left}px`);
+      setTransitionValue(WINDOW_NEW_LEFT_PROPERTY, `${left}px`);
     }
     const outerScroll = readOuterScroll(element);
     if (outerScroll.top !== outerTop) {
       outerTop = outerScroll.top;
       const shift = heldAt.outerScroll.top - outerTop;
-      style.setProperty(WINDOW_TOP_PROPERTY, `${heldAt.windowTop + shift}px`);
-      style.setProperty(WINDOW_OLD_TOP_PROPERTY, `${heldAt.oldTop + shift}px`);
+      setTransitionValue(WINDOW_TOP_PROPERTY, `${heldAt.windowTop + shift}px`);
+      setTransitionValue(WINDOW_OLD_TOP_PROPERTY, `${heldAt.oldTop + shift}px`);
     }
     if (outerScroll.left !== outerLeft) {
       outerLeft = outerScroll.left;
       const shift = heldAt.outerScroll.left - outerLeft;
-      style.setProperty(WINDOW_LEFT_PROPERTY, `${heldAt.windowLeft + shift}px`);
-      style.setProperty(
+      setTransitionValue(
+        WINDOW_LEFT_PROPERTY,
+        `${heldAt.windowLeft + shift}px`,
+      );
+      setTransitionValue(
         WINDOW_OLD_LEFT_PROPERTY,
         `${heldAt.oldLeft + shift}px`,
       );
@@ -32906,58 +33013,9 @@ const css$12 = /* css */`@property --navi-route-transition-leave {
   inherits: false
 }
 
-@property --navi-route-transition-clip-top {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-route-transition-clip-right {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-route-transition-clip-bottom {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-route-transition-clip-left {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-route-transition-travel-x {
-  syntax: "*";
-  inherits: false
-}
-
-@property --navi-route-transition-travel-y {
-  syntax: "*";
-  inherits: false
-}
-
 :root::view-transition, :root::view-transition-group(*), :root::view-transition-image-pair(*), :root::view-transition-old(*), :root::view-transition-new(*) {
   --navi-route-transition-leave: inherit;
   --navi-route-transition-enter: inherit;
-  --navi-route-transition-covered: inherit;
-  --navi-route-transition-clip-top: inherit;
-  --navi-route-transition-clip-right: inherit;
-  --navi-route-transition-clip-bottom: inherit;
-  --navi-route-transition-clip-left: inherit;
-  --navi-route-transition-travel-x: inherit;
-  --navi-route-transition-travel-y: inherit;
-}
-
-:root::view-transition-group-children(*) {
-  --navi-route-transition-leave: inherit;
-  --navi-route-transition-enter: inherit;
-  --navi-route-transition-covered: inherit;
-  --navi-route-transition-clip-top: inherit;
-  --navi-route-transition-clip-right: inherit;
-  --navi-route-transition-clip-bottom: inherit;
-  --navi-route-transition-clip-left: inherit;
-  --navi-route-transition-travel-x: inherit;
-  --navi-route-transition-travel-y: inherit;
 }
 
 :root[data-navi-route-transition] [data-navi-route-transition-area] {
@@ -32978,28 +33036,32 @@ const css$12 = /* css */`@property --navi-route-transition-leave {
 
   &[data-navi-route-transition-target="area"] {
     view-transition-name: none;
-    --navi-route-transition-clip-top: max(0px,
-        min(var(--navi-safe-area-inset-top) + var(--navi-transition-cover-top),
-            var(--navi-transition-old-band-top)) - var(--navi-transition-window-top));
-    --navi-route-transition-clip-left: max(0px,
-        min(var(--navi-safe-area-inset-left) + var(--navi-transition-cover-left),
-            var(--navi-transition-old-band-left)) - var(--navi-transition-window-left));
-    --navi-route-transition-clip-bottom: max(0px,
-        var(--navi-transition-window-top) +
-          var(--navi-transition-window-height) +
-          min(var(--navi-safe-area-inset-bottom) +
-              var(--navi-transition-cover-bottom),
-            var(--navi-transition-old-band-bottom)) -
-          100dvh);
-    --navi-route-transition-clip-right: max(0px,
-        var(--navi-transition-window-left) +
-          var(--navi-transition-window-width) +
-          min(var(--navi-safe-area-inset-right) +
-              var(--navi-transition-cover-right),
-            var(--navi-transition-old-band-right)) -
-          100dvw);
-    --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 {
+      --navi-route-transition-clip-top: max(0px,
+          min(var(--navi-safe-area-inset-top) + var(--navi-transition-cover-top),
+              var(--navi-transition-old-band-top)) - var(--navi-transition-window-top));
+      --navi-route-transition-clip-left: max(0px,
+          min(var(--navi-safe-area-inset-left) +
+                var(--navi-transition-cover-left),
+              var(--navi-transition-old-band-left)) - var(--navi-transition-window-left));
+      --navi-route-transition-clip-bottom: max(0px,
+          var(--navi-transition-window-top) +
+            var(--navi-transition-window-height) +
+            min(var(--navi-safe-area-inset-bottom) +
+                var(--navi-transition-cover-bottom),
+              var(--navi-transition-old-band-bottom)) -
+            100dvh);
+      --navi-route-transition-clip-right: max(0px,
+          var(--navi-transition-window-left) +
+            var(--navi-transition-window-width) +
+            min(var(--navi-safe-area-inset-right) +
+                var(--navi-transition-cover-right),
+              var(--navi-transition-old-band-right)) -
+            100dvw);
+      --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-group(*) {
       z-index: 0;
@@ -34027,7 +34089,9 @@ const beginTransition = ({
     decision: navigationDecision,
     walkHome: null,
     releaseReverting: null,
-    restoreDuration: null
+    duration: undefined,
+    restoreDuration: null,
+    releaseLeavingPages: null
   };
   // The document wears one transition at a time, and the one this interrupts
   // ends only after this one has begun — too late to take off what it wears
@@ -34080,18 +34144,13 @@ const beginTransition = ({
   if (areaElement) {
     documentElement.setAttribute(TRANSITION_TARGET_ATTRIBUTE, "area");
   }
-  // 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.
+  // A duration of this relation's own, worn by the pictures for the length of
+  // the transition, over whatever the application says on the root.
   if (duration !== undefined) {
-    const durationBefore = documentElement.style.getPropertyValue(TRANSITION_DURATION_PROPERTY);
-    documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, typeof duration === "number" ? `${duration}ms` : duration);
+    transition.duration = typeof duration === "number" ? `${duration}ms` : duration;
+    setTransitionValue(TRANSITION_DURATION_PROPERTY, transition.duration);
     transition.restoreDuration = () => {
-      if (durationBefore) {
-        documentElement.style.setProperty(TRANSITION_DURATION_PROPERTY, durationBefore);
-      } else {
-        documentElement.style.removeProperty(TRANSITION_DURATION_PROPERTY);
-      }
+      removeTransitionValue(TRANSITION_DURATION_PROPERTY);
     };
   }
   const releaseRendering = takeoverRoutingRenderingHold();
@@ -34104,7 +34163,9 @@ const beginTransition = ({
   // the only place the silent misconfigurations show. They are all about the
   // same thing — a movement playing on pictures that are not the pages.
   const viewTransitionReady = () => {
-    startTransitionFurniture(transition);
+    startTransitionFurniture(transition, {
+      duration: transition.duration
+    });
     const capturedNames = capturedViewTransitionNames();
     if (areaElements.length > 0) {
       if (!capturedNames.has(AREA_NAME)) {
@@ -34130,6 +34191,10 @@ const beginTransition = ({
     // is awaited here must be able to resolve without a frame: the document
     // is frozen for the whole of this callback.
     try {
+      // The page being left is photographed already: it only has to stay out
+      // of the second picture, not be taken down before it (see
+      // keepLeavingPages in route.jsx).
+      transition.releaseLeavingPages = keepLeavingPages();
       // Releasing flushes the held render synchronously, so a route that
       // rendered has already resolved the wait by the next line.
       releaseRendering();
@@ -34182,6 +34247,11 @@ const beginTransition = ({
     // must not strip what that one is wearing.
     renderWait.stop();
     releaseRendering();
+    // Taken down once nobody sees it any more.
+    if (transition.releaseLeavingPages) {
+      transition.releaseLeavingPages();
+      transition.releaseLeavingPages = null;
+    }
     // The hold a way back took, when it is still standing: the pictures were
     // turned round a second time and played out, or something else took the
     // document over mid-walk. A hold nobody gives back freezes the page.
@@ -89869,8 +89939,7 @@ const createSlot = (SlotRenderer = Box) => {
   };
   const SlotFill = props => {
     const fillerRef = useRef();
-    filler = fillerRef;
-    slotPropsSignal.value = props;
+    const routePage = useContext(RoutePageContext);
     useLayoutEffect(() => {
       return () => {
         // Within one diff preact mounts the newcomer before unmounting the
@@ -89883,6 +89952,26 @@ const createSlot = (SlotRenderer = Box) => {
         slotPropsSignal.value = null;
       };
     }, []);
+    // In a page kept while leaving: out of the slot as if unmounted, since
+    // the page arriving is what the slot must show — or nothing, when it
+    // fills none.
+    if (routePage && routePage.leavingSignal.value) {
+      if (filler === fillerRef) {
+        filler = null;
+        slotPropsSignal.value = null;
+      }
+      return null;
+    }
+    if (!fillerRef.current) {
+      fillerRef.current = true;
+      filler = fillerRef;
+    }
+    if (filler === null) {
+      filler = fillerRef;
+    }
+    if (filler === fillerRef) {
+      slotPropsSignal.value = props;
+    }
     return null;
   };
   return [Slot, SlotFill];