@jsenv/navi 0.29.164 → 0.29.166

package/dist/jsenv_navi.js

@@ -4,7 +4,7 @@
  */
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
-import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, scrollIntoViewScoped, initFocusGroup, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, scrollIntoViewScoped, initFocusGroup, isTouchDrivenEvent, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { isValidElement, h, Fragment, createContext, render, toChildArray, options, cloneElement } from "preact";
@@ -27612,6 +27612,105 @@ const releaseTransitionDestination = (owner) => {
   publishDestination(null);
 };
 
+/**
+ * The press that lands on a control the movement turned into a picture.
+ *
+ * A captured element is dead in both senses: it stops being painted where it
+ * stands, and nothing hit-tests to it — the press falls through to the nearest
+ * ancestor still being painted, whatever the pseudo-elements are told about
+ * pointer events. For the pages that is the whole point: both are pictures of
+ * somewhere the reader is no longer, or not yet.
+ *
+ * For the DOOR it is not. A page reached from the furniture — a gear in a top
+ * bar, a "+" in a tab bar — is opened and closed by the same control, and that
+ * control is standing exactly where its picture is drawn: the bar the two
+ * states share is one group the browser holds still. So a press on it during
+ * those few hundred milliseconds is aimed at what the reader can see, and
+ * swallowing it makes the toggle feel stuck at the very moment it is being used
+ * as one — press to open, press again to close.
+ *
+ * A control therefore may ask to keep answering, and while a route transition
+ * plays the press is caught at the document and handed to it when it fell
+ * inside its rectangle — which is where the hand thinks it pressed. The same
+ * move route_travel.jsx makes for the box a finger reaches for mid-flight.
+ *
+ * ASKED FOR, never derived, and that is the whole safety of it: only the
+ * application knows the control does not move. One that travels with the pages
+ * has a rectangle where it WILL be, not where it is seen, and a press handed to
+ * it fires something the reader never aimed at — worse than the press being
+ * lost. Hence the dev warning below for a control found inside the area.
+ *
+ * The click alone is re-aimed, not the pointer stream that leads to it: what
+ * has to survive is the press meaning what it meant, and the press feedback is
+ * lost anyway — the control is a picture, so nothing it paints for its own
+ * `:active` state reaches the screen. Synthesising a pointerdown with no
+ * pointer behind it would start gestures (a drag, a hold) that no pointerup
+ * ever ends.
+ */
+
+// Worn by a control that keeps answering while the pages move. Written by
+// <Link pressableDuringRouteTransition> / <Button pressableDuringRouteTransition>,
+// and by hand on anything else — this module owns the name and does the reading.
+const PRESSABLE_ATTRIBUTE = "data-navi-route-transition-pressable";
+const PRESSABLE_SELECTOR = `[${PRESSABLE_ATTRIBUTE}]`;
+
+let pressOwner = null;
+
+const holdTransitionPress = (owner, areaElement) => {
+  pressOwner = owner;
+  // Adding the same listener twice is a no-op, so a movement taking over from
+  // another needs nothing but the new owner.
+  document.addEventListener("click", onDocumentClick, true);
+};
+
+const releaseTransitionPress = (owner) => {
+  if (owner !== pressOwner) {
+    return;
+  }
+  pressOwner = null;
+  document.removeEventListener("click", onDocumentClick, true);
+};
+
+const onDocumentClick = (clickEvent) => {
+  // A click of our own making, or one an application dispatched by hand: both
+  // are already aimed, and re-aiming them by coordinates that mean nothing
+  // (0, 0 for a synthetic click) would fire whatever sits in the corner.
+  if (!clickEvent.isTrusted) {
+    return;
+  }
+  const pressables = document.querySelectorAll(PRESSABLE_SELECTOR);
+  if (pressables.length === 0) {
+    return;
+  }
+  const { target, clientX, clientY } = clickEvent;
+  for (const pressable of pressables) {
+    if (pressable.contains(target)) {
+      // It got there on its own: nothing has been photographed yet, or the
+      // control is not part of what was.
+      return;
+    }
+  }
+  for (const pressable of pressables) {
+    const { left, right, top, bottom } = pressable.getBoundingClientRect();
+    if (
+      clientX < left ||
+      clientX > right ||
+      clientY < top ||
+      clientY > bottom
+    ) {
+      continue;
+    }
+    // The document is not where this press was going. Stopped here so the
+    // application sees ONE click, on the control it was aimed at, rather than
+    // two: this one falling through and the one below.
+    clickEvent.stopPropagation();
+    pressable.dispatchEvent(
+      new clickEvent.constructor(clickEvent.type, clickEvent),
+    );
+    return;
+  }
+};
+
 /**
  * The furniture around the pages — the fixed bars, and the popups standing
  * over them in the top layer — photographed with them for the length of a
@@ -28039,6 +28138,178 @@ const bandTheCutMayBeRelaxedTo = (bandBefore, bandAfter, rectAfter) => {
   };
 };
 
+/**
+ * A view transition already playing, walked back to where it started.
+ *
+ * The way back is not a second transition. A transition photographs the state
+ * it leaves, so one started to undo another photographs the state being undone:
+ * the pictures then animate FROM where the reader is TO where they were, which
+ * is a way forward to somewhere, not a return. The same pictures are run
+ * backwards instead, and the state is put back UNDER them before they are
+ * dropped — the two are the same thing at the instant they are swapped, so
+ * nothing is seen changing.
+ *
+ * The way back is paid for in DISTANCE, not in time. A movement is eased: at
+ * half of its TIME the pictures have covered ~80% of their distance, so one
+ * caught "half-way" by the eye has barely begun by the clock. Rewound at -1 it
+ * plays those few milliseconds back through the steep end of the curve — nearly
+ * the whole visible distance collapses into two frames, and what one sees is a
+ * snap, not a return. So the pictures are walked over how far they LOOK from
+ * where they are going, at the movement's own pace, each animation at the rate
+ * that gets it there in that time.
+ *
+ * Where they visibly stand is computed from the clock THROUGH the easing curve,
+ * never read off the pseudo-elements: getComputedStyle on them answers with the
+ * un-animated value — the animated one lives on the compositor, where no
+ * reading from here reaches. It is the same trap as the playbackRate setter,
+ * which is why every rate below is handed over with updatePlaybackRate.
+ */
+
+const viewTransitionAnimations = () => {
+  const animations = [];
+  for (const animation of document.getAnimations()) {
+    const pseudoElement = animation.effect?.pseudoElement;
+    if (pseudoElement && pseudoElement.startsWith("::view-transition")) {
+      animations.push(animation);
+    }
+  }
+  return animations;
+};
+
+/**
+ * The animation carrying the movement, not the first that comes: everything a
+ * movement takes along is animated too — a bar held where it stands, a trait
+ * under a tab row, a popup travelling with its page — each with a pace of its
+ * own. A time read on one of those and turned into a fraction of ANOTHER lands
+ * anywhere, over 1 more often than not, which reads as a movement already over.
+ * The names are tried in order, so a caller can say "the pages, or the document
+ * when the pages are the document".
+ */
+const findLeadAnimation = (animations, leadNames) => {
+  for (const leadName of leadNames) {
+    const found = animations.find((candidate) =>
+      candidate.effect?.pseudoElement?.includes(leadName),
+    );
+    if (found) {
+      return found;
+    }
+  }
+  return null;
+};
+
+// How far the pictures visibly are into their movement, between 0 and 1.
+const visibleProgress = (animation) => {
+  const timing = animation.effect.getComputedTiming();
+  const duration = timing.delay + timing.activeDuration;
+  if (!duration) {
+    return null;
+  }
+  const temporal = animation.currentTime / duration;
+  // The easing sits on the keyframes, where a CSS animation's
+  // animation-timing-function ends up. "ease" is what these movements play;
+  // anything else (linear under a finger) maps time to distance one for one.
+  const easing = animation.effect.getKeyframes()[0]?.easing;
+  const ratio =
+    easing === "ease" ? easedProgress(temporal, CSS_EASE) : temporal;
+  return { duration, ratio };
+};
+
+// A frame's worth of movement is not a movement: under it the pictures are home
+// already, and a rate computed over it is a division by nearly nothing.
+const ONE_FRAME = 17;
+
+// How long the walk should take, and 0 where the movement cannot say — a lead
+// nobody named, a duration of nothing. The rates below fall back to the
+// movement's own pace there, which is the browser's answer and the only one
+// left.
+const walkTime = (animations, leadNames, remaining) => {
+  const lead = findLeadAnimation(animations, leadNames);
+  const visible = lead ? visibleProgress(lead) : null;
+  if (!visible) {
+    return 0;
+  }
+  const ratio = remaining ? 1 - visible.ratio : visible.ratio;
+  return ratio * visible.duration;
+};
+
+/**
+ * The pictures, sent back to the state the movement left. Returns false when
+ * there are no pictures — a movement the browser skipped, or one whose
+ * animations it has not created yet.
+ */
+const walkPicturesHome = (animations, leadNames) => {
+  if (animations.length === 0) {
+    return false;
+  }
+  const wallTime = walkTime(animations, leadNames, false);
+  for (const animation of animations) {
+    const timeCovered = animation.currentTime;
+    const rate =
+      wallTime > ONE_FRAME && timeCovered > 0 ? -(timeCovered / wallTime) : -1;
+    animation.updatePlaybackRate(rate);
+  }
+  return true;
+};
+
+/**
+ * The pictures, sent on to the state the movement was going to — a way back
+ * that is itself turned round, when the door is pressed a third time. The same
+ * arithmetic read from the other end: what is left to cover, walked at the
+ * movement's own pace.
+ */
+const walkPicturesOn = (animations, leadNames) => {
+  if (animations.length === 0) {
+    return false;
+  }
+  const wallTime = walkTime(animations, leadNames, true);
+  for (const animation of animations) {
+    const timing = animation.effect.getComputedTiming();
+    const timeLeft =
+      timing.delay + timing.activeDuration - animation.currentTime;
+    const rate = wallTime > ONE_FRAME && timeLeft > 0 ? timeLeft / wallTime : 1;
+    animation.updatePlaybackRate(rate);
+  }
+  return true;
+};
+
+/**
+ * When the pictures have arrived, whichever way they were walking. A rejection
+ * is an outcome — animations cancelled by a transition that took this one's
+ * place — and the caller finds nothing left to undo either way.
+ */
+const whenPicturesArrived = (animations) => {
+  if (animations.length === 0) {
+    // Nothing to run — a transition the browser skipped, or one that never
+    // became ready. There is no picture to undo either, so what the caller does
+    // next is the state alone.
+    return Promise.resolve();
+  }
+  return Promise.all(
+    animations.map((animation) => animation.finished.catch(() => {})),
+  );
+};
+
+// CSS `ease`, evaluated: time in, distance out. Solved numerically because the
+// curve is parametric — two cubics sharing a parameter, with no closed form for
+// one against the other. Twenty halvings put the answer well under a pixel of a
+// screen-wide movement.
+const CSS_EASE = [0.25, 0.1, 0.25, 1];
+const bezierAxis = (s, a, b) =>
+  3 * (1 - s) * (1 - s) * s * a + 3 * (1 - s) * s * s * b + s * s * s;
+const easedProgress = (x, [x1, y1, x2, y2]) => {
+  let low = 0;
+  let high = 1;
+  for (let i = 0; i < 20; i++) {
+    const mid = (low + high) / 2;
+    if (bezierAxis(mid, x1, x2) < x) {
+      low = mid;
+    } else {
+      high = mid;
+    }
+  }
+  return bezierAxis((low + high) / 2, y1, y2);
+};
+
 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.
@@ -28110,6 +28381,17 @@ installImportMetaCssBuild(import.meta);/**
  * rendering_hold.js for how the picture is kept honest). A browser without
  * view transitions navigates without the movement.
  *
+ * A movement can be turned round. A page whose door is in the furniture is
+ * opened and closed by the same control, so the press that closes it often
+ * lands while it is still opening: the navigation answering is exactly the way
+ * back of the one on screen, and the pictures are walked backwards with the
+ * state put under them before they are dropped (see
+ * turnRunningTransitionRound). A second transition cannot do this — it
+ * photographs the state being undone — and it would first skip the one playing,
+ * which is the page snapping fully open before it closes. That press has to
+ * arrive at all, and everything photographed is deaf to the pointer for the
+ * length of the movement: transition_press.js is the other half.
+ *
  * 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
@@ -28134,6 +28416,10 @@ const TRANSITION_TARGET_ATTRIBUTE = "data-navi-route-transition-target";
 // for that navigation and for no other — the next one is back to the relations.
 const TRANSITION_REQUEST_ATTRIBUTE = "data-navi-route-transition-request";
 const AREA_NAME = "navi-route-transition";
+// The pictures carrying the movement, among everything else it takes along —
+// the pages', or the document's own when the pages ARE the document (see
+// findLeadAnimation).
+const LEAD_NAMES = [AREA_NAME, "root"];
 // 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
@@ -28735,6 +29021,12 @@ const rebuildWatcher = () => {
     if (fromIndex === index) {
       return;
     }
+    if (navigationAnimated) {
+      // The movement on screen was turned round for this very navigation (see
+      // turnRunningTransitionRound): it is already being answered, by the
+      // pictures the relations would otherwise photograph over.
+      return;
+    }
     // A page in no relation at all is a real end of the crossing, not a
     // missing one: it is the "anywhere" a page reached from the furniture is
     // opened over and closed back onto (see findRelation).
@@ -28761,6 +29053,7 @@ const rebuildWatcher = () => {
     beginTransition({
       page: toPage,
       url: navigationUrl,
+      fromUrl: navigationFromUrl,
       // Which way it plays: what the navigation itself said first — the link
       // being pressed is where the way the app is being walked is known — then
       // the relation, and forward for a navigation that asked for a movement
@@ -28787,6 +29080,12 @@ const rebuildWatcher = () => {
 let defaultTransition = null;
 let navigationRequest = null;
 let navigationUrl = null;
+// Where the document stands as the navigation begins — the other end of the
+// crossing, and what lets the NEXT navigation be recognised as this one's way
+// back. Read off the document url rather than off window.location: a traversal
+// on a browser without the Navigation API is announced from "popstate", where
+// the address has already moved and location would answer with the destination.
+let navigationFromUrl = null;
 let navigationAnimated = false;
 
 // The two ends of every navigation, watched from here on. The picture of the
@@ -28799,18 +29098,28 @@ observeBeforeRouting(details => {
   navigationAnimated = false;
   navigationRequest = readNavigationRequest(details);
   navigationUrl = details.url;
+  navigationFromUrl = documentUrlSignal.peek();
   if (relations.length === 0 && !defaultTransition && !navigationRequest) {
     return;
   }
   holdRenderingForRouting();
+  // Said HERE, before the relations have their say: what is on screen may be
+  // this navigation's own way back, and that is a fact about the two ends of
+  // the crossing alone. A pair written "none" would silence a movement — it
+  // must not silence the undoing of one already playing.
+  if (turnRunningTransitionRound(navigationFromUrl, navigationUrl)) {
+    navigationAnimated = true;
+  }
 });
 observeAfterRouting(() => {
   const request = navigationRequest;
   const url = navigationUrl;
+  const fromUrl = navigationFromUrl;
   // Read here and dropped here: a request answers for the navigation it was
   // made on, and the next one is back to the relations.
   navigationRequest = null;
   navigationUrl = null;
+  navigationFromUrl = null;
   if (!navigationAnimated && (request || defaultTransition)) {
     const {
       type,
@@ -28820,6 +29129,7 @@ observeAfterRouting(() => {
       beginTransition({
         page: null,
         url,
+        fromUrl,
         // A default has no direction: nothing says which of two arbitrary
         // pages is before the other, and the attribute is then worn empty —
         // present for whoever keys on "one of ours is playing", silent on the
@@ -28903,6 +29213,7 @@ let currentTransition = null;
 const beginTransition = ({
   page,
   url,
+  fromUrl,
   direction,
   type,
   duration
@@ -28917,7 +29228,15 @@ const beginTransition = ({
     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 = {};
+  // The two ends of the crossing, kept for the length of the movement: they are
+  // what lets the navigation after this one be recognised as its way back (see
+  // turnRunningTransitionRound).
+  const transition = {
+    fromUrl: absoluteUrl(fromUrl),
+    url: absoluteUrl(url),
+    walkHome: null,
+    releaseReverting: null
+  };
   currentTransition = transition;
   // Said before the picture is taken: whoever names something for a movement
   // between two pages decides on it now (see transition_destination.js).
@@ -28934,6 +29253,10 @@ const beginTransition = ({
     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;
+  // Everything about to be photographed goes deaf to the pointer; the controls
+  // that asked to keep answering are heard at the document instead (see
+  // transition_press.js).
+  holdTransitionPress(transition);
   // The area as it stands before anything moves, and the band the furniture
   // around it leaves free: rendering is held, so both are still the page being
   // left (see transition_window.js).
@@ -29027,6 +29350,13 @@ const beginTransition = ({
     // ending late must not strip what a later one is wearing.
     renderWait.stop();
     releaseRendering();
+    // 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.
+    if (transition.releaseReverting) {
+      transition.releaseReverting();
+      transition.releaseReverting = null;
+    }
     if (currentTransition === transition) {
       currentTransition = null;
       documentElement.removeAttribute(TRANSITION_ATTRIBUTE);
@@ -29035,15 +29365,99 @@ const beginTransition = ({
       releaseTransitionWindow(transition);
       releaseTransitionDestination(transition);
       releaseTransitionFurniture(transition);
+      releaseTransitionPress(transition);
       if (restoreDuration) {
         restoreDuration();
       }
     }
   };
+  transition.viewTransition = viewTransition;
   viewTransition.ready.then(viewTransitionReady, ignoreSkipped$1);
   viewTransition.finished.then(end, end);
 };
 
+/**
+ * The movement playing, turned round rather than replaced: this navigation is
+ * exactly the way back of the one on screen — the door pressed again while the
+ * page it opened is still arriving.
+ *
+ * A second transition cannot do this. It photographs the state it leaves, which
+ * here is the state being undone, and animates from there to the one the reader
+ * came from: a way forward to somewhere, not a return. It also skips the one
+ * playing, so the page snaps fully open before it slides back off — the
+ * teleport a toggle must never show. The same pictures are walked back instead,
+ * and the state is put under them before they are dropped (see
+ * view_transition_revert.js).
+ *
+ * Only the exact way back qualifies. Anything else — a third page, a bar entry
+ * — is a different crossing, and gets a movement of its own.
+ */
+const turnRunningTransitionRound = (fromUrl, url) => {
+  const running = currentTransition;
+  if (!running || !running.viewTransition || !fromUrl || !url) {
+    return false;
+  }
+  const from = absoluteUrl(fromUrl);
+  const to = absoluteUrl(url);
+  const isWayBack = !running.walkHome && from === running.url && to === running.fromUrl;
+  // The door pressed a third time, while the way back is still being walked:
+  // the pictures turn round once more, where the last press left them, rather
+  // than a fresh movement starting over them.
+  const isWayInAgain = running.walkHome && from === running.fromUrl && to === running.url;
+  if (!isWayBack && !isWayInAgain) {
+    return false;
+  }
+  const animations = viewTransitionAnimations();
+  if (isWayInAgain) {
+    // The token is dropped first: the walk it stands for is the one that must
+    // not arrive anywhere anymore, and its promise is still pending.
+    running.walkHome = null;
+    walkPicturesOn(animations, LEAD_NAMES);
+    // The pages stay held. The pictures are going to the state they were going
+    // to all along, which is the one the DOM has held since the way back began
+    // — what must not land under them is the render the way back queued. The
+    // hold is given back when the movement ends (see end).
+    return true;
+  }
+  if (!walkPicturesHome(animations, LEAD_NAMES)) {
+    // The pictures do not exist yet: the movement was asked for a frame ago and
+    // the browser has not taken them. There is nothing to turn round, and this
+    // navigation gets a movement of its own — which skips the one that never
+    // played, and nothing was on screen to teleport.
+    return false;
+  }
+  // Which walk home this is, so the one that arrives is the one still wanted: a
+  // walk turned round mid-way leaves a promise nobody cancelled, and it settles
+  // when the pictures reach the far end.
+  const walkHome = {};
+  running.walkHome = walkHome;
+  // The pages are held where they are until the pictures are home. The picture
+  // of the state ARRIVING is live — it is the element being drawn, not a
+  // photograph of it — so a page put back under it while it is still on screen
+  // shows on BOTH sides of the movement, and the way back is watched happening
+  // to nothing.
+  const releaseRendering = takeoverRoutingRenderingHold();
+  running.releaseReverting = releaseRendering;
+  whenPicturesArrived(animations).then(() => {
+    if (currentTransition !== running || running.walkHome !== walkHome) {
+      // Turned round again on the way home, or replaced by another movement
+      // altogether: whoever did that owns the pictures now.
+      return;
+    }
+    running.walkHome = null;
+    running.releaseReverting = null;
+    // The state goes back UNDER the pictures before they are dropped, so the
+    // two are the same thing at the instant they are swapped.
+    releaseRendering();
+    running.viewTransition.skipTransition();
+  });
+  return true;
+};
+
+// Null rather than a url built out of nothing: two crossings that both failed
+// to say where they went must not look like each other's way back.
+const absoluteUrl = url => url ? new URL(url, window.location.href).href : null;
+
 // A transition skipped by another one starting is an outcome, not a failure.
 const ignoreSkipped$1 = () => {};
 
@@ -29271,6 +29685,12 @@ installImportMetaCssBuild(import.meta);/**
  * was to where it is, on the same clock as the pages. That is why the tab row
  * can stay where it is, outside this box, and still move with the finger.
  */
+const TRAVEL_LEAD_NAMES = ["navi-route-travel"];
+
+// A browser with no view transitions of its own has no picture of the page
+// being left, so there is nothing to drag: the gesture is still read (it is how
+// one asks to change tab with a thumb), and the change happens on release, as a
+// press on the tab would have done.
 const CAN_KEEP_PICTURE = Boolean(document.startViewTransition && !document.startViewTransition.isPolyfill);
 const startViewTransition = ensureDocumentStartViewTransition();
 
@@ -29901,34 +30321,9 @@ const RouteTravel = ({
     // may go on rendering, and a tab row beside the box keeps answering.
     const releaseRendering = freezeRouteRender();
     const animations = travelAnimations(travel);
-    // The way back is paid for in DISTANCE, not in time. The way in is eased:
-    // at half of its TIME the pictures have covered ~80% of their distance, so
-    // a travel caught "half-way" by the eye has barely begun by the clock.
-    // Rewound at -1 it plays those few milliseconds back through the steep end
-    // of the curve — nearly the whole visible distance collapses into two
-    // frames, and what one sees is a snap, not a return. So the pictures are
-    // walked home over `how far they LOOK from home`, at the travel's own
-    // pace, each animation at the rate that gets it there in that time.
-    const wallTime = revertWalkTime(animations);
-    for (const animation of animations) {
-      const timeLeft = animation.currentTime;
-      const rate = wallTime > 17 && timeLeft > 0 ? -(timeLeft / wallTime) : -1;
-      // updatePlaybackRate, never the playbackRate setter: these animations
-      // run on the compositor, and the setter is a non-seamless change there —
-      // on screen the pictures jump straight to their end state while the
-      // Animation object ticks backwards unseen. What one sees then is the
-      // travel SNAPPING home instead of returning, and no reading of
-      // getAnimations() will say so: only the compositor knows, and
-      // updatePlaybackRate is how a new rate is handed to it in flight.
-      animation.updatePlaybackRate(rate);
-    }
+    walkPicturesHome(animations, TRAVEL_LEAD_NAMES);
     releaseHold(travel);
-    const backAtTheStart = animations.length ? Promise.all(animations.map(animation => animation.finished.catch(() => {}))) :
-    // Nothing to run backwards — a transition the browser skipped, or one
-    // that never became ready. There is no picture to undo either, so the
-    // way back is the state alone.
-    Promise.resolve();
-    backAtTheStart.then(async () => {
+    whenPicturesArrived(animations).then(async () => {
       try {
         pageAskedForRef.current = travel.fromPage;
         // The page that was left is put back UNDER the picture before the
@@ -30463,13 +30858,7 @@ const travelAnimations = travel => {
   if (travel.animations) {
     return travel.animations;
   }
-  const animations = [];
-  for (const animation of document.getAnimations()) {
-    const pseudoElement = animation.effect?.pseudoElement;
-    if (pseudoElement && pseudoElement.startsWith("::view-transition")) {
-      animations.push(animation);
-    }
-  }
+  const animations = viewTransitionAnimations();
   if (animations.length) {
     travel.animations = animations;
   }
@@ -30481,12 +30870,7 @@ const travelAnimations = travel => {
 // reaching for it must find it where it IS.
 const ratioOfTravel = travel => {
   const animations = travelAnimations(travel);
-  // The pages' own animation, not the first that comes: everything the travel
-  // carries along is animated too (a trait under a tab row, the page behind),
-  // each with a duration of its own. A time read on one of those and turned
-  // into a fraction of ANOTHER lands anywhere — over 1 more often than not,
-  // which reads as a travel already over and jumps the pictures to their end.
-  const animation = animations.find(candidate => candidate.effect?.pseudoElement?.includes("navi-route-travel")) || animations[0];
+  const animation = findLeadAnimation(animations, TRAVEL_LEAD_NAMES) || animations[0];
   if (!animation) {
     return travel.ratio;
   }
@@ -30498,52 +30882,6 @@ const ratioOfTravel = travel => {
   return animation.currentTime / duration;
 };
 
-// CSS `ease`, evaluated: time in, distance out. Solved numerically because
-// the curve is parametric — two cubics sharing a parameter, with no closed
-// form for one against the other. Twenty halvings put the answer well under
-// a pixel of a screen-wide travel.
-const CSS_EASE = [0.25, 0.1, 0.25, 1];
-const bezierAxis = (s, a, b) => 3 * (1 - s) * (1 - s) * s * a + 3 * (1 - s) * s * s * b + s * s * s;
-const easedProgress = (x, [x1, y1, x2, y2]) => {
-  let low = 0;
-  let high = 1;
-  for (let i = 0; i < 20; i++) {
-    const mid = (low + high) / 2;
-    if (bezierAxis(mid, x1, x2) < x) {
-      low = mid;
-    } else {
-      high = mid;
-    }
-  }
-  return bezierAxis((low + high) / 2, y1, y2);
-};
-
-// How long the way back should take: the distance the pictures visibly are
-// from home, converted to time at the travel's own pace. The distance is
-// computed from the clock THROUGH the easing curve, never read off the
-// pseudo-elements: getComputedStyle on them answers with the un-animated
-// value — the animated one lives on the compositor, where no reading from
-// here reaches (the same trap as the playbackRate setter above).
-const revertWalkTime = animations => {
-  const animation = animations.find(candidate => candidate.effect?.pseudoElement?.includes("navi-route-travel"));
-  if (!animation) {
-    return 0;
-  }
-  const timing = animation.effect.getComputedTiming();
-  const duration = timing.delay + timing.activeDuration;
-  if (!duration) {
-    return 0;
-  }
-  const temporal = animation.currentTime / duration;
-  // The easing sits on the keyframes, where a CSS animation's
-  // animation-timing-function ends up. "ease" is what our travels play;
-  // anything else (linear under a finger, see the DRAGGED attribute) maps
-  // time to distance one for one.
-  const easing = animation.effect.getKeyframes()[0]?.easing;
-  const visibleRatio = easing === "ease" ? easedProgress(temporal, CSS_EASE) : temporal;
-  return visibleRatio * duration;
-};
-
 // Where the two pictures stand, said as a moment in the movement they would
 // have played on their own: the browser knows how they move (it is written in
 // CSS), so the finger only has to say how far in. They are held still by CSS
@@ -40700,6 +41038,17 @@ Object.assign(PSEUDO_CLASSES, {
  *   (`navi_value`); defaults to `href`.
  * @param {boolean} [props.current] - Forces the "current" state on (otherwise
  *   derived from the href/route).
+ * @param {import("../route.js").Route|import("../route.js").Route[]} [props.currentExcept] -
+ *   Route(s) inside this link's own that are NOT it: while one of them matches,
+ *   the link is not current even though its route still is. A bar entry
+ *   standing for a whole section, and one place under that section the entry
+ *   does not stand for — settings reached from everywhere and shown over
+ *   whatever the reader was on. Nothing about the routing changes: the url is
+ *   in the section, only the link stops claiming "you are here".
+ * @param {import("../route.js").Route|import("../route.js").Route[]} [props.currentAlso] -
+ *   Route(s) other than this link's own that are it: the link is current while
+ *   one of them matches. The other side of `currentExcept` — an entry standing
+ *   for more than the one page it opens. `currentExcept` wins over it.
  * @param {"text"|"icon"|"tab"} [props.variant] - Visual variant
  *   (`data-variant`); `"text"`/`"icon"` drop the link color/underline,
  *   `"tab"` renders a tab-like affordance.
@@ -40743,6 +41092,16 @@ Object.assign(PSEUDO_CLASSES, {
  *   the pair's movement and only turns it round, which is what the rare way
  *   round a pair usually needs. Said nowhere else, the relations answer as
  *   they always do.
+ * @param {boolean} [props.pressableDuringRouteTransition] - Keep answering
+ *   presses while a route transition plays. Everything a movement photographs
+ *   goes deaf to the pointer for its whole length — a captured element is not
+ *   painted where it stands, so nothing hit-tests to it — which is right for
+ *   the pages and wrong for the door that opened them: a control in a bar the
+ *   two states share is standing exactly where its picture is drawn, and a
+ *   press on it is aimed at what the reader can see. Say it there, and only
+ *   there: a control that TRAVELS with the pages has a rectangle where it will
+ *   be, not where it is seen, and a press handed to it fires something nobody
+ *   aimed at.
  * @param {boolean} [props.replace] - Go to the destination by TAKING THE PLACE
  *   of the current history entry instead of stacking onto it: the link stays a
  *   link (an address, a middle click, the keyboard, `aria-current`), only the
@@ -40781,6 +41140,8 @@ const LinkWithRoute = ({
   route,
   routeParams,
   current,
+  currentExcept,
+  currentAlso,
   children,
   ...rest
 }) => {
@@ -40789,7 +41150,11 @@ const LinkWithRoute = ({
     matching
   } = useRouteStatus(route);
   const paramsAreMatching = route.matchesParams(routeParams);
-  const linkMatching = matching && paramsAreMatching;
+  const someExceptedRouteMatching = useSomeRouteMatching(currentExcept);
+  const someAlsoRouteMatching = useSomeRouteMatching(currentAlso);
+  // "Except" is a veto: a route named there is somewhere else, whatever the
+  // rest of the reading says.
+  const linkMatching = !someExceptedRouteMatching && (matching && paramsAreMatching || someAlsoRouteMatching);
   const innerCurrent = current || linkMatching;
   return jsx(Link, {
     href: url,
@@ -40798,6 +41163,22 @@ const LinkWithRoute = ({
     children: children || route.buildRelativeUrl(routeParams)
   });
 };
+// A route, or a list of them, read as one answer: does any of them match.
+// Reading matchingSignal during the render is what subscribes the component to
+// it, so every route is read even once one has answered yes — stopping early
+// would leave the component deaf to the ones it skipped.
+const useSomeRouteMatching = routes => {
+  if (!routes) {
+    return false;
+  }
+  let someMatching = false;
+  for (const route of Array.isArray(routes) ? routes : [routes]) {
+    if (route.matchingSignal.value) {
+      someMatching = true;
+    }
+  }
+  return someMatching;
+};
 const LinkPlain = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
@@ -40821,6 +41202,7 @@ const LinkPlain = props => {
     revealOnInteraction = false,
     hrefFallback = !anchor,
     routeTransition,
+    pressableDuringRouteTransition,
     replace,
     children
   } = props;
@@ -40981,6 +41363,8 @@ const LinkPlain = props => {
     revealOnInteraction: undefined,
     variant: undefined,
     current: undefined,
+    currentExcept: undefined,
+    currentAlso: undefined,
     currentIndicator: undefined,
     currentEffectBold: undefined,
     currentEffectShadow: undefined,
@@ -40990,8 +41374,12 @@ const LinkPlain = props => {
     endIcon: undefined,
     hrefFallback: undefined,
     routeTransition: undefined,
+    pressableDuringRouteTransition: undefined,
     replace: undefined,
     "data-navi-route-transition-request": routeTransitionRequest,
+    ...(pressableDuringRouteTransition ? {
+      [PRESSABLE_ATTRIBUTE]: ""
+    } : null),
     ...replaceRequest,
     // The control's own handlers first — the interaction gate, the caller's
     // onClick/onKeyDown, the command and the action — then what only a link
@@ -41032,8 +41420,14 @@ const LinkPlain = props => {
     commandfor: slide ? nav?.slideContainer : undefined,
     "aria-controls": slide ? nav?.slideContainer : undefined,
     tabIndex: slide ? props.tabIndex ?? 0 : props.tabIndex,
-    role: slide ? "tab" : props.role,
-    "aria-current": isCurrent ? "page" : undefined,
+    role: slide ? "tab" : props.role
+    // The same reading the paint uses: what the link claims about being
+    // where the reader is has to be one claim, said to the eye and to a
+    // screen reader alike. A slide is not a page — that tab says it with
+    // aria-selected below.
+    ,
+
+    "aria-current": !slide && innerCurrent ? "page" : undefined,
     "aria-selected": slide ? innerCurrent : selectionContext ? selected : undefined,
     "data-value-event": "navi_value",
     onnavi_value: e => {
@@ -43900,6 +44294,673 @@ const DetailsFieldContent = ({
   });
 };
 
+// How long a popup waits before handing the focus to a field, when giving it
+// is what raises the on-screen keyboard.
+//
+// The focus is normally given as early as possible. But a popup places itself
+// against the viewport, and on a phone the keyboard takes a third of that
+// viewport away the moment a field receives focus — so the two landing in the
+// same tick means the popup is still arriving when the room under it changes,
+// and it re-places itself mid-entrance. Waiting lets it settle first, and the
+// keyboard then shrinks a box that has stopped moving.
+//
+// Long enough to outlast an entrance transition rather than merely reaching
+// the next frame: what has to be over is the popup MOVING, not one paint of
+// it.
+const FOCUS_DELAY_ON_KEYBOARD_MS = 250;
+
+/**
+ * Owns open/close decision-making for a popup (Dialog or Popover): guards
+ * against duplicate requests and notifies the popup owner's own reactions.
+ *
+ * `controller.openEffect` is implemented by the controlled element (Dialog or
+ * Popover), reassigned on every render so it always closes over the latest
+ * props (scrollCapture, anchor, etc.). It performs whatever DOM side effects
+ * are needed to make the element actually open (`showModal()`/`showPopover()`,
+ * focus transfer, positioning, traps...) and returns its cleanup —
+ * the matching side effects to sync back to closed (`close()`/
+ * `hidePopover()`, releasing traps...). That cleanup is kept private to the
+ * controller (not exposed as a property) and invoked when the popup actually
+ * closes, however that happens.
+ *
+ * Dialog/Popover also call `openController.requestClose(e, { isCancel })` for
+ * their own internal triggers (backdrop click, Escape).
+ *
+ * `openHandler` is the popup owner's own business logic, passed once to
+ * `createOpenController`. Its return value is `{ onRequestClose, onClose }`,
+ * in the spirit of CloseWatcher
+ * (https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher) but with
+ * clearer naming than its cancel/close pair:
+ * - `onRequestClose(e)`: about to close — call `e.preventDefault()` to stay
+ *   open. Validation lives here.
+ * - `onClose(e)`: actually closing, not preventable — final reactions live here.
+ *
+ * The controller exposes matching action methods:
+ * - `open()`: requests opening — calls the caller's `onOpen` (see below), then
+ *   `mountContent`/`openEffect`, then `openHandler`.
+ * - `requestClose()`: requests closing — calls `onRequestClose` then `onClose`,
+ *   stopping after the first if denied. The popup may choose to stay open,
+ *   which is what a `false` return says (`true`: closed, or closed already).
+ * - `close()`: closes for real — calls only `onClose`, skipping
+ *   `onRequestClose` entirely. Used when there really is no choice (e.g. the
+ *   popup unmounting).
+ */
+const createOpenController = (
+  openHandler,
+  { debugInteraction } = {},
+) => {
+  let closeHandlers = null; // { onRequestClose, onClose } returned by openHandler
+  let openEffectCleanup = null; // function returned by openEffect, undoes its DOM side effects
+  let focusedAtClose = null; // what held the focus when the close was decided, see performClose
+
+  // Set true while we're waiting to see whether the click that follows a
+  // mousedown-close will land back on whatever would reopen us — see
+  // armSuppressNextOpenRequest below.
+  let suppressNextOpenRequest = false;
+  let disarmSuppressNextOpenRequest = null;
+
+  // When the popup closes because of a mousedown (e.g. clicking the
+  // backdrop), the browser still dispatches the matching "click" afterward.
+  // If that click lands back on the element that triggers open() (e.g. the
+  // picker button), it would immediately reopen the popup. We cannot
+  // preventDefault/stopPropagation the mousedown to stop that — the browser
+  // dispatches the click regardless.
+  //
+  // Instead: arm a capture-phase "click" listener on document. Capture fires
+  // before the click reaches its target, so by the time any bubble-phase
+  // click handler (e.g. the trigger button's onClick, which calls
+  // controller.open()) runs, `suppressNextOpenRequest` is already true and
+  // open() ignores the request — no need to know *which* element triggers
+  // it. A bubble-phase listener (runs after everything else, once the click
+  // reaches document) clears the flag if nothing consumed it, meaning this
+  // click never resulted in an open() call. A timeout is a last-resort safety
+  // net in case the click never reaches document at all (e.g. some ancestor
+  // called stopPropagation()) — a *task*, never a microtask: a microtask
+  // checkpoint runs between two listeners of the same trusted event dispatch,
+  // so it would clear the flag before the bubble-phase handler this is meant
+  // to block ever runs, which is precisely the case it exists for.
+  const armSuppressNextOpenRequest = () => {
+    disarmSuppressNextOpenRequest?.();
+    let safetyTimeout = null;
+    const onCaptureClick = () => {
+      document.removeEventListener("click", onCaptureClick, {
+        capture: true,
+      });
+      suppressNextOpenRequest = true;
+      document.addEventListener("click", onBubbleClick);
+      safetyTimeout = setTimeout(() => {
+        suppressNextOpenRequest = false;
+      });
+    };
+    const onBubbleClick = () => {
+      document.removeEventListener("click", onBubbleClick);
+      clearTimeout(safetyTimeout);
+      suppressNextOpenRequest = false;
+    };
+    disarmSuppressNextOpenRequest = () => {
+      clearTimeout(safetyTimeout);
+      document.removeEventListener("click", onCaptureClick, {
+        capture: true,
+      });
+      document.removeEventListener("click", onBubbleClick);
+    };
+    document.addEventListener("click", onCaptureClick, { capture: true });
+  };
+
+  const performClose = (closeEvent) => {
+    controller.opened = false;
+    // Read before any close effect touches the DOM: closing a native <dialog>
+    // hands the focus back to whatever held it at showModal() time, so by the
+    // time the close cleanup runs, the popup's content has already lost the
+    // focus and could not be remembered for the next open.
+    focusedAtClose = document.activeElement;
+
+    prevent_reopen: {
+      const mousedownEvent = findEvent(closeEvent, "mousedown");
+      if (mousedownEvent) {
+        debugInteraction(
+          closeEvent,
+          `closed by mousedown -> ignore next click`,
+        );
+        armSuppressNextOpenRequest();
+        break prevent_reopen;
+      }
+
+      // The keyboard counterpart of the mousedown case above: a key press that
+      // closes the popup and then goes on to activate the trigger, reopening it
+      // on the spot. Space and Enter both get there, but not the same way and
+      // not always — preventing the key unconditionally would eat presses that
+      // were never going to activate anything (a space typed in a field, an
+      // Enter the popup's own handler already consumed), so each is verified
+      // before being prevented.
+
+      // Space: pressed on the trigger itself, which still has focus (closing
+      // does not move it away from an element outside the popup). The browser
+      // turns that press into a click on keyup, and that click lands back on
+      // the trigger. Asked of the browser's own default action rather than
+      // guessed from the tag name: a space that scrolls, or types into a field
+      // inside the popup, has no activation to prevent and preventing it would
+      // swallow the scroll / the character.
+      const spaceKeyEvent = findEvent(
+        closeEvent,
+        (e) => e.type === "keydown" && e.key === " ",
+      );
+      if (
+        spaceKeyEvent &&
+        getKeyboardEventDefaultAction(spaceKeyEvent) === "activate"
+      ) {
+        debugInteraction(
+          closeEvent,
+          `closed by space on <${spaceKeyEvent.target.tagName.toLowerCase()}> -> prevent the click it would produce (space.preventDefault())`,
+        );
+        // The browser won't dispatch the click, and our "space_to_open" sees
+        // defaultPrevented too so it won't try to open the picker either.
+        spaceKeyEvent.preventDefault();
+        break prevent_reopen;
+      }
+
+      // Enter: pressed inside the popup (its own submit button, or implicit
+      // submission from a field it contains). The popup closes synchronously
+      // and focus is restored to the trigger, so the activation the browser
+      // still owes this press is delivered to the trigger instead.
+      //
+      // Verified on two counts: the press still owes an activation (the
+      // browser's default action for it is one — "activate" on a submit button,
+      // "form_submit" on a field — and nothing has consumed it yet), and it came
+      // from inside the popup. An Enter from outside is not this case at all.
+      const enterKeyEvent = findEvent(
+        closeEvent,
+        (e) => e.type === "keydown" && e.key === "Enter",
+      );
+      if (
+        enterKeyEvent &&
+        !enterKeyEvent.defaultPrevented &&
+        ENTER_ACTIVATING_DEFAULT_ACTION_SET.has(
+          getKeyboardEventDefaultAction(enterKeyEvent),
+        ) &&
+        isInsideOpenPopup(enterKeyEvent.target)
+      ) {
+        debugInteraction(
+          closeEvent,
+          `closed by enter from inside the popup -> prevent the activation it would deliver to the trigger (enter.preventDefault())`,
+        );
+        enterKeyEvent.preventDefault();
+        break prevent_reopen;
+      }
+    }
+
+    // Sync the DOM closed first (releasing the focus trap) — only then run
+    // the owner's own reaction (onClose may restore focus to an element
+    // outside the popup, which the focus trap would otherwise fight while
+    // still active).
+    openEffectCleanup?.(closeEvent);
+    openEffectCleanup = null;
+    closeHandlers?.onClose?.(closeEvent);
+    closeHandlers = null;
+    // Last: the close effects above are what starts the exit transition the
+    // content must outlive (see popup_content_mount.js).
+    controller.unmountContent?.();
+    controller.onOpenedChange?.(false, closeEvent);
+  };
+  const controller = {
+    opened: false,
+    openEffect: null,
+    // Set by the controlled element (see popup_content_mount.js) when its
+    // content is still waiting for a first open to be built. Called below,
+    // before openEffect, so the popup measures and positions the real thing.
+    mountContent: null,
+    // The caller's own `onOpen`, set by Dialog/Popover from their props on
+    // every render (like openEffect). Called BEFORE mountContent, so whatever
+    // it decides — which record this dialog is opening on — is already true by
+    // the time the content is built, positioned and shown. That order is the
+    // whole point: learning it afterwards means the content mounted on the
+    // previous subject first.
+    onOpen: null,
+    // The counterpart, set only when the popup was told to throw its content
+    // away on close (`mount="while-opened"`). Called from performClose above.
+    unmountContent: null,
+    // Told whenever `opened` actually changes, whatever asked for it — an
+    // interaction, a command, a prop — with the event that asked. What lets a
+    // `signal` prop reflect the popup's real state, and a `navState` prop write
+    // it into the history entry (see useOpenPropsEffectOnOpenController);
+    // called once the open/close has fully happened rather than mid-sequence.
+    onOpenedChange: null,
+    open: (e, detail) => {
+      if (controller.opened || !controller.openEffect) {
+        return;
+      }
+      if (suppressNextOpenRequest) {
+        suppressNextOpenRequest = false;
+        return;
+      }
+      const requestOpenEvent = new CustomEvent("navi_request_open", {
+        detail: { event: e, ...detail },
+        cancelable: true,
+      });
+      chainEvent(requestOpenEvent, e);
+      // we prepare focus transfer before actually opening the popover/dialog
+      // because opnening dialog makes browser try to transfer focus (which ends up in document.body for instance)
+      const focusTransfer = prepareFocusTransfer(
+        requestOpenEvent,
+        debugInteraction,
+      );
+      controller.transferFocusOnOpen = (el) => {
+        // requestOpenEvent, not the raw `e` — getFocusedBeforeTransfer needs
+        // e.detail.eventChain (built by chainEvent above) to recover the
+        // element a mousedown/click landed on. `e` itself is usually the raw
+        // native event: its own `.detail` is a number (click count) on a
+        // MouseEvent, so `e.detail.eventChain` is always undefined and the
+        // mousedown/click branches below never matched — silently falling
+        // back to `document.activeElement`, which is often `document.body`
+        // once mousedown.preventDefault() has kept focus from landing
+        // anywhere yet.
+
+        // Two conditions, and both are about THIS opening rather than about
+        // the device:
+        // - the interaction: only a finger raises a virtual keyboard, and a
+        //   hybrid tablet answers "coarse" to every device-level signal
+        //   whichever of its two inputs was just used — the open event still
+        //   remembers which one it was. An opening with no pointer in it at
+        //   all (a keyboard shortcut, defaultOpen, an app calling open()) is
+        //   not one either.
+        // - the target: focusing a button raises nothing, so there is nothing
+        //   to wait for and the focus stays immediate. Only a field the
+        //   keyboard comes up for is worth delaying — which is why the
+        //   decision is taken on the resolved target, inside transferFocus.
+        const openedByTouch = Boolean(
+          findEvent(requestOpenEvent, isTouchDrivenEvent),
+        );
+        const cancelPendingFocus = focusTransfer.transferFocus(e, el, {
+          getDelay: (target) =>
+            openedByTouch && isEditableTarget(target)
+              ? FOCUS_DELAY_ON_KEYBOARD_MS
+              : 0,
+        });
+        return (closeEvent) => {
+          // Closed before the delay was up: the focus was never given, so it
+          // must not be given now — to a field inside a popup on its way out,
+          // raising the keyboard as it goes.
+          cancelPendingFocus?.();
+          markAutofocusRestoreOnClose(el, closeEvent, focusedAtClose);
+          const focusoutEvent = findEvent(closeEvent, "focusout");
+          if (focusoutEvent) {
+            debugInteraction(
+              closeEvent,
+              `closed by focusout -> let focus go away`,
+            );
+          } else {
+            const mousedownEvent = findEvent(closeEvent, "mousedown");
+            if (mousedownEvent) {
+              debugInteraction(
+                closeEvent,
+                "closed by mousedown -> prevent browser focus (mousedown.preventDefault())",
+              );
+              mousedownEvent.preventDefault();
+            }
+            focusTransfer.restoreFocus();
+          }
+        };
+      };
+      // Before mountContent, which builds the content, and before openEffect,
+      // which shows it: what the popup opens ON has to be known before either
+      // (see `onOpen` above).
+      controller.onOpen?.(requestOpenEvent);
+      // After prepareFocusTransfer, which has to record what held the focus
+      // before anything inside the popup can claim it, and before openEffect,
+      // which measures the popup to place it.
+      controller.mountContent?.();
+      // Only now — after the content has been built, before openEffect shows
+      // it. Dialog/Popover recompute aria-expanded and navi-hidden from this
+      // flag on every render, and mountContent above renders synchronously:
+      // flipping it any earlier commits an already-open DOM (aria-expanded
+      // "true", navi-hidden gone) before openEffect has run a single
+      // statement, so the "closed" frame it pins to transition from is in
+      // fact the open one and the entrance animation has nothing to play.
+      // It also gives the content it just built the opening it is documented
+      // to observe — mounted while the popup reads as closed, told it opened
+      // right after (see popup_content_mount.js and
+      // use_displayed_layout_effect.js).
+      controller.opened = true;
+      const openEffectReturnValue =
+        controller.openEffect(requestOpenEvent) || null;
+      openEffectCleanup = (closeEvent) => {
+        openEffectReturnValue?.(closeEvent);
+      };
+      closeHandlers = openHandler(requestOpenEvent) || null;
+      controller.onOpenedChange?.(true, requestOpenEvent);
+    },
+    requestClose: (
+      e = new CustomEvent("programmatic", { detail: {} }),
+      detail,
+    ) => {
+      if (!controller.opened) {
+        return true;
+      }
+      const requestCloseEvent = new CustomEvent("navi_request_close", {
+        detail: { event: e, ...detail },
+        cancelable: true,
+      });
+      chainEvent(requestCloseEvent, e);
+      closeHandlers?.onRequestClose?.(requestCloseEvent);
+      if (requestCloseEvent.defaultPrevented) {
+        // The native <dialog> "cancel" event (Escape key) closes the dialog
+        // by default; prevent that default so denial actually keeps it open.
+        const nativeCancelEvent = findEvent(requestCloseEvent, "cancel");
+        if (nativeCancelEvent) {
+          nativeCancelEvent.preventDefault();
+        }
+        return false;
+      }
+      performClose(requestCloseEvent);
+      return true;
+    },
+    close: (e = new CustomEvent("programmatic", { detail: {} }), detail) => {
+      if (!controller.opened) {
+        return;
+      }
+      const closeEvent = new CustomEvent("navi_close", {
+        detail: { event: e, ...detail },
+      });
+      chainEvent(closeEvent, e);
+      // Skips onRequestClose entirely — there is no choice here.
+      performClose(closeEvent);
+    },
+  };
+  return controller;
+};
+
+// Inside a popup that is open right now — the popup being closed, in practice,
+// since that is the one the key press was delivered to.
+const isInsideOpenPopup = (element) => {
+  if (!element || element.nodeType !== 1) {
+    return false;
+  }
+  return Boolean(element.closest("dialog[open], [popover]:popover-open"));
+};
+
+// What Enter is about to do when it is about to activate something: press the
+// focused control, or submit the form around it. Anything else it can do
+// (typing a newline, nothing at all) leaves no activation behind to land on the
+// trigger once focus is restored.
+const ENTER_ACTIVATING_DEFAULT_ACTION_SET = new Set([
+  "activate",
+  "form_submit",
+]);
+
+// Created once per popup instance: openHandler is wrapped in a stable callback
+// so the controller identity never changes across renders, even though
+// Dialog/Popover read fresh closures (scrollTrap, etc.) via
+// openController.openEffect on every render.
+const useOpenController = (openHandler) => {
+  const debugInteraction = useDebugInteraction();
+  const stableOpenHandler = useStableCallback(openHandler);
+  const controllerRef = useRef(null);
+  if (!controllerRef.current) {
+    controllerRef.current = createOpenController(stableOpenHandler, {
+      debugInteraction,
+    });
+  }
+  // Unmount safety net: if Dialog/Popover unmounts while still open (parent
+  // removes it from the tree without going through requestClose()), there is
+  // no choice to leave open — close it for real.
+  useLayoutEffect(() => {
+    return () => {
+      controllerRef.current.close();
+    };
+  }, []);
+  return controllerRef.current;
+};
+
+// Nested popups that both mount already-open (`open`/`defaultOpen`) would
+// otherwise stack in the wrong order: Preact fires layout effects
+// child-first on mount, so a nested popup's own mount-open would call
+// showPopover() before its ancestor's — and the top layer stacks *later*
+// showPopover() calls above *earlier* ones (see popover.jsx's own openEffect
+// comment) — leaving the ancestor on top instead of the nested popup, the
+// opposite of what opening them one at a time (ancestor first, by real user
+// interaction) would produce. Batching every mount-time silent open queued
+// during the same commit's layout-effect phase into one microtask flush,
+// then simply running them in *reverse* of their registration order fixes
+// this — no need to compare DOM positions: since effects already fire
+// child-first, tree-wide, for *any* ancestor/descendant pair the descendant
+// is always queued before the ancestor, regardless of what else is in the
+// tree, so reversing the whole batch always puts every ancestor before its
+// own descendants. Works for any nesting depth for the same reason. Two
+// unrelated (sibling) popups both mounting open also get reordered
+// relative to each other, but there's no meaningful "correct" order between
+// those anyway.
+let pendingMountOpens = [];
+let mountOpenFlushScheduled = false;
+const scheduleMountOpen = (run) => {
+  pendingMountOpens.push(run);
+  if (mountOpenFlushScheduled) {
+    return;
+  }
+  mountOpenFlushScheduled = true;
+  queueMicrotask(() => {
+    const entries = pendingMountOpens;
+    pendingMountOpens = [];
+    mountOpenFlushScheduled = false;
+    for (let i = entries.length - 1; i >= 0; i--) {
+      entries[i]();
+    }
+  });
+};
+
+// Where the popup's open state is kept, when it is kept anywhere: `navState`
+// resolved to the `{ id, type }` useNavState wants.
+//
+// `true` takes the popup's own id — a popup a `--navi-open` command can name is
+// a popup that already has a stable one, and that id is what identifies its
+// open state too.
+const NO_NAV_STATE = { id: undefined, type: "replace" };
+const resolveNavStateProp = (navState, popupId, name) => {
+  if (!navState) {
+    return NO_NAV_STATE;
+  }
+  if (navState === true) {
+    return { id: popupId, type: "replace" };
+  }
+  if (typeof navState === "string") {
+    return { id: navState, type: "replace" };
+  }
+  return { id: navState.id || popupId, type: navState.type || "replace" };
+};
+
+// What a write of the open state is worth in the history, when the signal
+// holding it is bound to a url (a route's `searchParams`, see route.js). A
+// plain signal has no `set` and takes the value as it always did.
+const writeInSignal = (signal, value, { history }) => {
+  if (signal.set) {
+    signal.set(value, { history });
+    return;
+  }
+  signal.value = value;
+};
+
+// The popup says where it is, into a `signal` the caller holds — and when that
+// signal lives in a url, saying so is a navigation. It is worth exactly what
+// the same move is worth when the open state lives in the history entry
+// instead (see useNavState's own leave()):
+// - the opening is worth what the state declares (`history: "push"` for a
+//   popup one can back out of, the default replacement for one that merely
+//   qualifies the screen one is on);
+// - the closing is never an entry of its own. Stacking one would leave the
+//   entry that carries the popup BEHIND the reader, and their next back press
+//   would walk straight back into the popup they just closed.
+// A cancel (Escape, the backdrop, --navi-cancel) goes back to before the
+// opening rather than rewriting the entry, so everything else written to the
+// url while the popup was open goes back with it. A close that is not a cancel
+// keeps those writes and only drops the popup.
+const writeOpenedInSignal = (signal, opened, event) => {
+  if (signal.peek() === opened) {
+    // The signal already says so, meaning this open/close IS what it asked
+    // for: a back press that took the popup out of the url, the application
+    // writing it. Nothing to write back — and nothing to go back to either,
+    // since the navigation navBack would undo is the one that asked for this.
+    return;
+  }
+  if (opened) {
+    signal.value = true;
+    return;
+  }
+  if (
+    event?.detail?.isCancel &&
+    signal.options?.getHistory?.() === "push" &&
+    // Nothing of this document behind: the popup was opened by the url itself
+    // (a shared link, a bookmark). navBack would do nothing at all there, so
+    // the entry is rewritten instead — the address must not keep saying open
+    // about a popup that just closed.
+    canNavBackSignal.peek()
+  ) {
+    navBack();
+    return;
+  }
+  writeInSignal(signal, false, { history: "replace" });
+};
+
+/**
+ * Keeps an open controller in sync with where the caller says the popup should
+ * be: an `open`/`defaultOpen` pair, a `signal`, or a `navState` — the open
+ * state written into the history entry, so a screen left and come back to finds
+ * its popup as it was.
+ *
+ * Shared between `useOpenControllerByProps` below (Dialog/Popover driving their
+ * own controller), `picker_custom.jsx` (which owns its controller but wants
+ * the same skip-if-already-matching / open-or-requestClose control flow) and
+ * `expandable.jsx` (open in flow rather than on a layer, same decision).
+ *
+ * @param {{ open: (e: Event, detail?: object) => void, requestClose: (e: Event, detail?: object) => void, opened: boolean }} openController
+ * @param {{ id?: string, open?: boolean|"interaction", defaultOpen?: boolean|"interaction", signal?: import("@preact/signals").Signal<boolean>, navState?: boolean|string|{id?: string, type?: "push"|"replace"} }} props
+ * @param {string} [name] What the dev warnings call the thing being opened.
+ */
+const useOpenPropsEffectOnOpenController = (
+  openController,
+  props,
+  name = "popup",
+) => {
+  const { signal, defaultOpen, navState } = props;
+  const { id: navStateId, type: navStateType } = resolveNavStateProp(
+    navState,
+    props.id);
+  // Called unconditionally (it answers with no-ops for an absent id), like
+  // every other hook here.
+  const [navStateValue, enterNavState, leaveNavState] = useNavState(
+    navStateId,
+    { type: navStateType },
+  );
+  // What the caller holds, however they hold it: the history entry when there
+  // is a `navState`, an `open` they re-render themselves, or a `signal` this
+  // hook also writes (see onOpenedChange below). Reading .value during render
+  // is what subscribes the popup to a signal; reading the document state is
+  // what subscribes it to the history entry, back button included.
+  const open = navStateId
+    ? Boolean(navStateValue)
+    : signal
+      ? signal.value
+      : props.open;
+  // Assigned on every render, like openEffect, so it always closes over the
+  // latest prop: a popup that opens or closes on its own (Escape, backdrop, a
+  // --navi-close command) writes what happened where the caller keeps it, so
+  // whoever holds it always reads where the popup is.
+  openController.onOpenedChange =
+    navStateId || signal
+      ? (opened, event) => {
+          if (navStateId) {
+            if (opened) {
+              enterNavState();
+            } else {
+              // Under type "push" a cancel goes back rather than rewriting the
+              // entry, so everything else written to the url while the popup
+              // was open goes back with it (see useNavState's own leave()).
+              leaveNavState({ isBack: Boolean(event?.detail?.isCancel) });
+            }
+          }
+          if (signal) {
+            writeOpenedInSignal(signal, opened, event);
+          }
+        }
+      : null;
+  // Tracks whether the effect below has ever run before — only the very
+  // first run gets the "mount already open" treatment (`open` truthy from
+  // the start, or the uncontrolled, mount-only `defaultOpen`); every
+  // subsequent `open` change is a real, later toggle and should animate
+  // normally like any other interactive open/close.
+  const isFirstRunRef = useRef(true);
+
+  useLayoutEffect(() => {
+    const isFirstRun = isFirstRunRef.current;
+    isFirstRunRef.current = false;
+
+    if (isFirstRun) {
+      const mountOpenReason = open || defaultOpen;
+      if (mountOpenReason) {
+        // Whether this popup being open is something that just happened, or
+        // something that was already true when the page appeared. "interaction"
+        // says the mount IS the opening — the popup exists because the user
+        // just asked for it — so the entrance plays like any other open. Any
+        // other truthy value means it was simply already open: nothing was ever
+        // shown as "closed" for the user to see it transition away from, so the
+        // entrance is skipped (`silent`, see popover.jsx's own openEffect).
+        //
+        // Deferred + batched (see scheduleMountOpen above) rather than called
+        // directly, so nested popups that both mount already-open end up
+        // stacked ancestor-first instead of Preact's own child-first effect
+        // order.
+        scheduleMountOpen(() =>
+          openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
+            silent: mountOpenReason !== "interaction",
+          }),
+        );
+      }
+      return;
+    }
+
+    if (open === undefined) {
+      return;
+    }
+    // Skip when the controller is already in the desired state.
+    // openController.opened tracks actual open/close (updated by onopen/onclose,
+    // not by renders) so it is the authoritative check against feedback loops.
+    if (open === openController.opened) {
+      return;
+    }
+    if (open) {
+      openController.open(new CustomEvent("open_by_prop", { detail: {} }));
+    } else {
+      openController.requestClose(
+        new CustomEvent("close_by_prop", { detail: {} }),
+        { isCancel: true },
+      );
+    }
+    // The request can be refused (a busy form denying the close): the popup
+    // then stays where it was, and whoever holds the open state is told so —
+    // otherwise it would keep saying "closed" about a popup still open.
+    // Written over rather than stacked on: a refusal corrects the state that
+    // asked, it is not a place one came from.
+    if (signal) {
+      writeInSignal(signal, openController.opened, { history: "replace" });
+    }
+    if (navStateId && openController.opened) {
+      enterNavState();
+    }
+  }, [open]);
+};
+
+const useOpenControllerByProps = (props, name) => {
+  const { onClose } = props;
+  // Lets an uncontrolled consumer (no openController of its own) still react
+  // to a self-initiated close (Escape, backdrop click, its own close button)
+  // without having to own a controller just to observe it — onClose is
+  // called on every real close, matching createOpenController's own
+  // { onRequestClose, onClose } contract (never denies the close itself).
+  const openController = useOpenController(() =>
+    onClose ? { onClose } : undefined,
+  );
+  useOpenPropsEffectOnOpenController(openController, props, name);
+  return openController;
+};
+
 /**
  * Runs `fn` and commits whatever it re-renders before returning, instead of
  * letting Preact batch it into the next microtask. Layout effects of what gets
@@ -44188,7 +45249,7 @@ const MOUNT_DEFAULT = "from-first-open";
 const usePopupContentMount = (
   openController,
   ref,
-  { children, mount = MOUNT_DEFAULT },
+  { mount = MOUNT_DEFAULT },
 ) => {
   const mountedAlways = mount === "always";
   const [contentMounted, setContentMounted] = useState(
@@ -44228,7 +45289,7 @@ const usePopupContentMount = (
     }
   }, [mountedAlways]);
 
-  return contentMounted ? children : null;
+  return contentMounted;
 };
 
 installImportMetaCssBuild(import.meta);/**
@@ -44258,10 +45319,17 @@ installImportMetaCssBuild(import.meta);/**
  *
  * The root never looks at its children: which parts are there, in which order,
  * is none of its business. It publishes a context and the parts take what they
- * need from it — including WHEN to arm the reveal, which <Expandable.Content>
- * asks for from its own layout effect. That is what lets a part re-render
- * later than the root (a memoized subtree does exactly that): the measurement
- * runs in the commit that put the content in the DOM, whichever one that is.
+ * need from it.
+ *
+ * Deciding to open or to close is the same decision a Dialog or a Popover
+ * takes — the same props behind it (`open`/`defaultOpen`/`signal`/`navState`),
+ * the same commands in front of it, the same refusable close — so it is taken
+ * in the same place: an open controller (see open_controller.js). What belongs
+ * to an expandable is only what opening LOOKS like, which is `openEffect` and
+ * the cleanup it returns. Both render synchronously (flushSyncRendering)
+ * before measuring, so the DOM is in the state they are about to measure —
+ * that, and not any inspection of the children, is what makes a part free to
+ * re-render later than the root (a memoized subtree does exactly that).
  *
  * Reach for it knowingly: expanding in-flow SHIFTS the layout — everything
  * below (or beside) moves when it opens. A Popover, Dialog, Picker or Callout
@@ -44281,17 +45349,18 @@ installImportMetaCssBuild(import.meta);/**
  *   and answer the `navi_command`/`navi_request_open`/`navi_request_close`
  *   events.
  *
- * Content is not built until the first expansion and stays built afterwards —
- * same policy, same `mount` prop as popups (see popup_content_mount.js):
- * `"always"` builds it right away, `"while-opened"` throws it away once the
- * collapse settles (so a closing animation still plays on real content).
+ * Content is not built until the first expansion and stays built afterwards:
+ * a popup's policy, and its code (`usePopupContentMount`, see
+ * popup_content_mount.js) — `"always"` builds it right away, `"while-opened"`
+ * throws it away once the collapse settles, so a closing animation still plays
+ * on real content.
  *
  * The animation is a REVEAL, not a resize: the expandable's own footprint
  * grows/shrinks progressively (the content's grid track interpolates
  * 0fr <-> 1fr — rows for the stacked layout, columns for `layout="column"`),
  * but the content inside is laid out at its final size for the whole movement
- * (its animated dimension is frozen to the measured final value, see the
- * [opened] effect) and the container simply uncovers it. Text never rewraps
+ * (its animated dimension is frozen to the measured final value, see
+ * freezeContentSize) and the container simply uncovers it. Text never rewraps
  * mid-animation. The content is revealed from its UI side (pinned against the
  * UI when it comes first). Once settled open the clipping is released, so a
  * popover or focus ring inside is not cut at the edges.
@@ -44443,6 +45512,8 @@ const useExpandableContext = partName => {
  *   open?: boolean,
  *   defaultOpen?: boolean,
  *   signal?: import("@preact/signals").Signal<boolean>,
+ *   navState?: boolean | string | { id?: string, type?: "push" | "replace" },
+ *   onClose?: (event: Event) => void,
  *   onToggle?: (event: Event) => void,
  *   action?: Function,
  *   loading?: boolean,
@@ -44464,10 +45535,19 @@ const useExpandableContext = partName => {
  *   `<Expandable.Content>` as children instead.
  * @param open - Drives the state from outside: the expandable opens/closes to
  *   match every change of this prop, but user interaction can still toggle it
- *   in between (same semantics as Dialog/Popover's own `open`).
+ *   in between. Same open controller as Dialog/Popover, so the four props
+ *   below behave exactly as they do there (see open_controller.js).
  * @param defaultOpen - Uncontrolled, mount-only initial state.
  * @param signal - Two-way binding: the expandable follows the signal and
  *   writes back into it whenever it toggles on its own. Excludes `open`.
+ * @param navState - Keeps the open state in the history entry, so a screen
+ *   left and come back to finds its sections as they were: `true` uses the
+ *   expandable's own `id`, a string names the key, `{ id, type }` chooses
+ *   between rewriting the entry ("replace", the default) and pushing one
+ *   ("push"), where closing goes back. Source of truth — excludes
+ *   `open`/`signal`.
+ * @param onClose - Called when the expandable actually closes, whatever asked
+ *   for it. Not preventable.
  * @param onToggle - Listens the "toggle" event dispatched on the root (a
  *   ToggleEvent with newState/oldState where supported). Fires on every actual
  *   state change, never on mount.
@@ -44487,15 +45567,17 @@ const useExpandableContext = partName => {
  *   whatever order they are written in — and an expandable with no
  *   `<Expandable.UI>` at all, driven from `open`/`signal` by a toggle of the
  *   app's own, can still say which way it opens.
- * @param autoFocus - Off by default (the focus stays on the UI part when
- *   opening). `true` moves the focus into the content on open — the
- *   `[autofocus]` element if any, the first focusable otherwise. Whatever the
- *   setting, closing while the focus is inside the content hands it back to
- *   the UI part (it would otherwise be lost to the closed, inert content).
+ * @param autoFocus - Off by default (the keyboard stays where it is when the
+ *   expandable opens). `true` hands the focus to the content through the same
+ *   transfer a popup uses — the ladder picks the target (`navi-autofocus`
+ *   first, see focus_transfer.js) and closing gives the keyboard back where it
+ *   came from. An expandable that mounts already open never takes it. Whatever
+ *   the setting, closing while the focus sits inside the content hands it back
+ *   to the UI part (it would otherwise be lost to the closed, inert content).
  * @param maxContentHeight - Caps the content height; taller content scrolls
  *   inside the expandable instead of growing it.
- * @param mount - When the content is built and thrown away, same three values
- *   as a popup's (see popup_content_mount.js). `"from-first-open"` (the
+ * @param mount - When the content is built and thrown away, a popup's own
+ *   three values and a popup's own code (see popup_content_mount.js). `"from-first-open"` (the
  *   default) builds it on the first expansion and keeps it afterwards.
  *   `"always"` builds it right away; in layout="column" it also gives the
  *   closed expandable its content's height (the content is kept laid out at
@@ -44506,12 +45588,17 @@ const useExpandableContext = partName => {
  */
 const Expandable = props => {
   import.meta.css = [css$Q, "@jsenv/navi/src/control/expandable/expandable.jsx"];
+  /* The open props are read from `props` by the open controller below; they
+     are named here only to keep them out of `rest`, and so out of the DOM. */
+  /* eslint-disable no-unused-vars */
   const {
     ref,
     ui,
     open,
     defaultOpen,
     signal,
+    navState,
+    onClose,
     action,
     loading,
     animation = false,
@@ -44526,35 +45613,43 @@ const Expandable = props => {
     children,
     ...rest
   } = props;
+  /* eslint-enable no-unused-vars */
+
   const defaultRef = useRef();
   const rootRef = ref || defaultRef;
   const uiRef = useRef();
   const contentContainerRef = useRef();
   const contentId = useId();
   const isColumn = layout === "column";
-  const mountedAlways = mount === "always";
-  const mountedWhileOpened = mount === "while-opened";
-  const closedContentSized = isColumn && mountedAlways;
-  // Reading .value during render is what subscribes the expandable to it.
-  const openRequested = signal ? signal.value : open;
-  const [opened, setOpened] = useState(() => Boolean(openRequested === undefined ? defaultOpen : openRequested));
-  const openedRef = useRef(opened);
-  openedRef.current = opened;
+  const closedContentSized = isColumn && mount === "always";
   const hasAction = Boolean(action);
   const effectiveAction = useAction(action);
   const {
     loading: actionLoading
   } = useActionStatus(effectiveAction);
-  const [contentMounted, setContentMounted] = useState(() => mountedAlways || opened);
 
-  // Fully open and no longer moving — what allows overflow to become visible
-  // (see the CSS) and what mount="while-opened" waits for before emptying.
+  // Registered before the open controller, so this cleanup runs before its own
+  // unmount safety net (see useOpenController): a close fired on the way out
+  // still does its bookkeeping, it just has no tree left to move.
+  const unmountedRef = useRef(false);
+  useLayoutEffect(() => {
+    return () => {
+      unmountedRef.current = true;
+    };
+  }, []);
+  const openController = useOpenControllerByProps(props, "expandable");
+  // What the controller decided, mirrored for the render (aria-expanded, the
+  // content's inert, the marker). Written only from `openEffect` and the
+  // cleanup it returns, and synchronously (see flushSyncRendering), so the DOM
+  // is already in the new state when what follows measures it.
+  const [opened, setOpened] = useState(false);
+  // Fully open (or fully closed) and no longer moving — what releases the
+  // clipping, see the CSS.
   const [settled, setSettled] = useState(true);
+  const contentMounted = usePopupContentMount(openController, contentContainerRef, {
+    mount
+  });
 
-  // Read before the close touches the DOM: flipping the content to inert can
-  // blur what it held, so by effect time the focus to hand back to the UI part
-  // could already be gone.
-  const focusedBeforeCloseRef = useRef(null);
   // The pointer press that is about to toggle can blur the focused field
   // before the click ever fires — so what held the focus has to be remembered
   // at pointerdown time.
@@ -44568,10 +45663,7 @@ const Expandable = props => {
   // released once the movement settles.
   const freezeContentSize = () => {
     const contentContainer = contentContainerRef.current;
-    const contentElement = contentContainer ? contentContainer.firstElementChild.firstElementChild : null;
-    if (!contentElement) {
-      return;
-    }
+    const contentElement = contentContainer.firstElementChild.firstElementChild;
     const rect = contentElement.getBoundingClientRect();
     if (isColumn) {
       // Both, not just the width: a max-height-capped content otherwise
@@ -44583,50 +45675,147 @@ const Expandable = props => {
     }
   };
 
-  // Where the last paint left the track, measured before the toggle commits:
-  // 0 when fully closed, partway when reopening during a collapse. Read here
-  // rather than in the effect — a layout read after the commit would also be
-  // the first style recalc of the open state, starting the track transition
-  // right there; once canceled (to measure the final size), a new transition
-  // to the same end value refuses to start and the reveal jumps.
-  const revealStartSizeRef = useRef(null);
-  const toggleTo = nextOpen => {
-    nextOpen = Boolean(nextOpen);
-    if (nextOpen === openedRef.current) {
-      return;
+  // A movement still playing: what a new one cancels before starting, so a
+  // reveal interrupted halfway does not have the previous settle release its
+  // frozen size under it.
+  const cancelSettleWatchRef = useRef(null);
+  const cancelSettleWatch = () => {
+    cancelSettleWatchRef.current?.();
+    cancelSettleWatchRef.current = null;
+  };
+  const watchSettle = () => {
+    const contentContainer = contentContainerRef.current;
+    const contentElement = contentContainer.firstElementChild.firstElementChild;
+    cancelSettleWatchRef.current = whenTransitionSettles(contentContainer, () => {
+      cancelSettleWatchRef.current = null;
+      contentElement.style.width = "";
+      contentElement.style.height = "";
+      setSettled(true);
+    });
+  };
+
+  // The reveal needs the content at its final size before the track starts
+  // moving, and that size only exists in the open state — the reflow trick
+  // (see instructions.md, CSS section), with transitions suppressed BEFORE the
+  // first layout read: this runs pre-paint, so any earlier read would itself be
+  // the first recalc of the open state and would start the track transition.
+  const armReveal = startRect => {
+    const contentContainer = contentContainerRef.current;
+    const contentElement = contentContainer.firstElementChild.firstElementChild;
+    contentContainer.style.transitionProperty = "none";
+    const finalRect = contentElement.getBoundingClientRect();
+    if (isColumn) {
+      contentElement.style.width = `${finalRect.width}px`;
+      contentElement.style.height = `${finalRect.height}px`;
+    } else {
+      contentElement.style.height = `${finalRect.height}px`;
     }
-    openedRef.current = nextOpen;
-    if (nextOpen) {
-      if (animation) {
-        const contentContainer = contentContainerRef.current;
-        revealStartSizeRef.current = contentContainer ? contentContainer.getBoundingClientRect() : null;
+    // Put the tracks back where the last paint left them and let the
+    // transition play from there. In fr — px does not interpolate with fr.
+    const startFrOf = (startSize, finalSize) => finalSize > 0 ? startSize / finalSize : 0;
+    if (isColumn) {
+      contentContainer.style.gridTemplateColumns = `${startFrOf(startRect ? startRect.width : 0, finalRect.width)}fr`;
+      if (!closedContentSized) {
+        // The height opens alongside the width (a closed column expandable is
+        // only as tall as its UI) — unless the closed content already sizes
+        // it, where only the width has anywhere to go.
+        contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
       }
-      setContentMounted(true);
     } else {
-      const activeElement = document.activeElement;
-      focusedBeforeCloseRef.current = !activeElement || activeElement === document.body ? focusedAtPointerDownRef.current : activeElement;
-      if (animation) {
-        // Now, while the content is still fully laid out — by effect time the
-        // track is already heading to 0 (the opening case measures in the
-        // effect instead, where the just-mounted content exists).
-        freezeContentSize();
-      }
-    }
-    focusedAtPointerDownRef.current = null;
-    setOpened(nextOpen);
-    // Flipped here, before the closing/opening commit, so effects of that very
-    // commit already see the movement as started — mount="while-opened" must not
-    // read a stale "settled" and empty the content under a closing animation.
-    setSettled(!animation);
-    if (signal) {
-      signal.value = nextOpen;
+      contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
     }
+    // That starting frame must be genuinely rendered to transition from it,
+    // and transitions re-enabled BEFORE the flip back to the open value —
+    // same order as popover.jsx's own reflow trick.
+    contentContainer.getBoundingClientRect();
+    contentContainer.style.transitionProperty = "";
+    contentContainer.style.gridTemplateColumns = "";
+    contentContainer.style.gridTemplateRows = "";
+  };
+
+  // What opening LOOKS like here, and how to undo it — the one thing an
+  // expandable owns that a popup does not (see open_controller.js). Reassigned
+  // on every render so it always closes over the latest props.
+  openController.openEffect = openEvent => {
+    const contentContainer = contentContainerRef.current;
+    // `silent`: the expandable was already open when the page appeared
+    // (`open`/`defaultOpen` at mount). Nothing changed for anyone to be told
+    // about, nothing was ever shown closed to move away from, and a page must
+    // not have its focus stolen by a section that was simply already open — so
+    // an opening that was never an opening plays nothing, says nothing and
+    // takes nothing. The action it carries still runs: its content is due.
+    const silent = Boolean(openEvent.detail.silent);
+    const revealing = animation && !silent && Boolean(contentContainer);
+    // Where the last paint left the track — 0 when fully closed, partway when
+    // reopening during a collapse — read while the DOM still says closed.
+    const startRect = revealing ? contentContainer.getBoundingClientRect() : null;
+    cancelSettleWatch();
+    flushSyncRendering(() => {
+      setOpened(true);
+      setSettled(!revealing);
+    });
     if (hasAction) {
-      if (nextOpen) {
-        runUnwatched(() => effectiveAction.run());
-      } else {
+      runUnwatched(() => effectiveAction.run());
+    }
+    // autoFocus off (the default): the keyboard stays where it is, and with no
+    // transfer there is nothing to restore on close either.
+    const restoreFocus = autoFocus && !silent && contentContainer ? openController.transferFocusOnOpen(contentContainer) : null;
+    if (revealing) {
+      armReveal(startRect);
+      watchSettle();
+    }
+    if (!silent) {
+      rootRef.current.dispatchEvent(createToggleEvent(true));
+    }
+    return closeEvent => {
+      if (unmountedRef.current) {
+        return;
+      }
+      const contentContainerAtClose = contentContainerRef.current;
+      // Read while the content still holds what it holds: the close is about
+      // to make it inert, which blurs whatever is inside it.
+      const activeElement = document.activeElement;
+      const focusedBeforeClose = !activeElement || activeElement === document.body ? focusedAtPointerDownRef.current : activeElement;
+      focusedAtPointerDownRef.current = null;
+      if (hasAction) {
         effectiveAction.abort();
       }
+      cancelSettleWatch();
+      const collapsing = animation && Boolean(contentContainerAtClose);
+      if (collapsing) {
+        // Now, while the content is still fully laid out — the collapsing
+        // track uncovers a content frozen at that size.
+        freezeContentSize();
+      }
+      flushSyncRendering(() => {
+        setOpened(false);
+        setSettled(!collapsing);
+      });
+      if (restoreFocus) {
+        restoreFocus(closeEvent);
+      } else if (focusedBeforeClose && contentContainerAtClose && contentContainerAtClose.contains(focusedBeforeClose)) {
+        const uiElement = uiRef.current;
+        if (uiElement) {
+          moveFocusTo(uiElement);
+        } else {
+          // Nothing of the expandable's own can hold the keyboard (no UI
+          // part): the focus only has to leave the content becoming inert.
+          focusedBeforeClose.blur();
+        }
+      }
+      if (collapsing) {
+        watchSettle();
+      }
+      rootRef.current.dispatchEvent(createToggleEvent(false));
+    };
+  };
+  const toggle = event => {
+    if (openController.opened) {
+      openController.requestClose(event, {
+        isCancel: true
+      });
+    } else {
+      openController.open(event);
     }
   };
   const findFirstFocusableInContent = () => {
@@ -44634,133 +45823,11 @@ const Expandable = props => {
     if (!contentContainer) {
       return null;
     }
-    const autofocusElement = contentContainer.querySelector("[autofocus]");
-    if (autofocusElement) {
-      return autofocusElement;
-    }
     return findAfter(contentContainer, elementIsFocusable, {
       root: contentContainer
     });
   };
 
-  // Follow `open`/`signal` changes after mount (the initial value is already
-  // in the state above). A self-initiated toggle that wrote the signal lands
-  // here too and no-ops, since the state already matches.
-  const isFirstOpenRequestedRunRef = useRef(true);
-  useLayoutEffect(() => {
-    if (isFirstOpenRequestedRunRef.current) {
-      isFirstOpenRequestedRunRef.current = false;
-      return;
-    }
-    if (openRequested === undefined) {
-      return;
-    }
-    toggleTo(openRequested);
-  }, [openRequested]);
-
-  // A state change: tell the world (the "toggle" event) and take the keyboard
-  // back if the closing content held it. Skipped on mount — nothing changed,
-  // so no event exists (and a page must not have its focus stolen by an
-  // expandable that was simply already open).
-  const isFirstOpenedRunRef = useRef(true);
-  useLayoutEffect(() => {
-    if (isFirstOpenedRunRef.current) {
-      isFirstOpenedRunRef.current = false;
-      return;
-    }
-    const root = rootRef.current;
-    root.dispatchEvent(createToggleEvent(opened));
-    if (opened) {
-      return;
-    }
-    const focusedBeforeClose = focusedBeforeCloseRef.current;
-    focusedBeforeCloseRef.current = null;
-    if (focusedBeforeClose && contentContainerRef.current && contentContainerRef.current.contains(focusedBeforeClose)) {
-      const uiElement = uiRef.current;
-      if (uiElement) {
-        uiElement.focus();
-      } else {
-        // Nothing of the expandable's own can hold the keyboard (no UI part):
-        // the focus only has to leave the content becoming inert.
-        focusedBeforeClose.blur();
-      }
-    }
-  }, [opened]);
-
-  // Everything a state change owes the content: the focus it may take, and the
-  // reveal, which measures it. Ran by <Expandable.Content> from its own layout
-  // effect — the commit where the content really is in the DOM — and returns
-  // that effect's cleanup.
-  const applyOpenedToContent = () => {
-    if (opened && autoFocus) {
-      const firstFocusableElement = findFirstFocusableInContent();
-      if (firstFocusableElement) {
-        firstFocusableElement.focus();
-      }
-    }
-    if (!animation) {
-      return undefined;
-    }
-    const contentContainer = contentContainerRef.current;
-    const contentElement = contentContainer.firstElementChild.firstElementChild;
-    if (opened) {
-      // The reveal needs the content at its final size before the track
-      // starts moving, and the final size only exists in the open state —
-      // the reflow trick (see instructions.md, CSS section), with transitions
-      // suppressed BEFORE the first layout read: this runs pre-paint, so any
-      // earlier read would itself be the first recalc of the open state and
-      // would start the track transition (see revealStartSizeRef).
-      contentContainer.style.transitionProperty = "none";
-      const finalRect = contentElement.getBoundingClientRect();
-      if (isColumn) {
-        contentElement.style.width = `${finalRect.width}px`;
-        contentElement.style.height = `${finalRect.height}px`;
-      } else {
-        contentElement.style.height = `${finalRect.height}px`;
-      }
-      // Put the tracks back where the last paint left them and let the
-      // transition play from there. In fr — px does not interpolate with fr.
-      const startRect = revealStartSizeRef.current;
-      revealStartSizeRef.current = null;
-      const startFrOf = (startSize, finalSize) => finalSize > 0 ? startSize / finalSize : 0;
-      if (isColumn) {
-        contentContainer.style.gridTemplateColumns = `${startFrOf(startRect ? startRect.width : 0, finalRect.width)}fr`;
-        if (!closedContentSized) {
-          // The height opens alongside the width (a closed column expandable
-          // is only as tall as its UI) — unless the closed content already
-          // sizes it, where only the width has anywhere to go.
-          contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
-        }
-      } else {
-        contentContainer.style.gridTemplateRows = `${startFrOf(startRect ? startRect.height : 0, finalRect.height)}fr`;
-      }
-      // That starting frame must be genuinely rendered to transition from it,
-      // and transitions re-enabled BEFORE the flip back to the open value —
-      // same order as popover.jsx's own reflow trick.
-      contentContainer.getBoundingClientRect();
-      contentContainer.style.transitionProperty = "";
-      contentContainer.style.gridTemplateColumns = "";
-      contentContainer.style.gridTemplateRows = "";
-    }
-    // (closing froze the content in toggleTo, while it was still laid out)
-    const cancel = whenTransitionSettles(contentContainer, () => {
-      contentElement.style.width = "";
-      contentElement.style.height = "";
-      setSettled(true);
-    });
-    return cancel;
-  };
-  useLayoutEffect(() => {
-    if (settled && !opened && mountedWhileOpened) {
-      setContentMounted(false);
-    }
-  }, [settled, opened, mountedWhileOpened]);
-  useLayoutEffect(() => {
-    if (mountedAlways) {
-      setContentMounted(true);
-    }
-  }, [mountedAlways]);
-
   // closedContentSized (column + mount="always"): the closed content sizes
   // the height (see the CSS), which is only right if it lies at its OPEN
   // width — at its natural closed width (a 0-wide track) it would wrap
@@ -44784,13 +45851,6 @@ const Expandable = props => {
     contentContainer.getBoundingClientRect();
     contentContainer.style.transitionProperty = "";
   }, [closedContentSized, opened, settled, contentMounted]);
-
-  // Mounted already open: the content is visible, its data is due.
-  useEffect(() => {
-    if (openedRef.current && hasAction) {
-      runUnwatched(() => effectiveAction.run());
-    }
-  }, []);
   const onRootKeyDown = keyboardEvent => {
     if (!arrowKeyShortcuts) {
       return;
@@ -44819,9 +45879,9 @@ const Expandable = props => {
       if (document.activeElement !== uiRef.current) {
         return;
       }
-      if (!openedRef.current) {
+      if (!openController.opened) {
         keyboardEvent.preventDefault();
-        toggleTo(true);
+        openController.open(keyboardEvent);
         return;
       }
       const firstFocusableElementInContent = findFirstFocusableInContent();
@@ -44829,20 +45889,21 @@ const Expandable = props => {
         return;
       }
       keyboardEvent.preventDefault();
-      firstFocusableElementInContent.focus();
+      moveFocusTo(firstFocusableElementInContent);
       return;
     }
     if (key === closeKeyShortcut) {
-      if (!openedRef.current) {
+      if (!openController.opened) {
         return;
       }
       const uiElement = uiRef.current;
+      keyboardEvent.preventDefault();
       if (document.activeElement === uiElement) {
-        keyboardEvent.preventDefault();
-        toggleTo(false);
+        openController.requestClose(keyboardEvent, {
+          isCancel: true
+        });
       } else {
-        keyboardEvent.preventDefault();
-        uiElement.focus();
+        moveFocusTo(uiElement);
       }
     }
   };
@@ -44861,7 +45922,7 @@ const Expandable = props => {
         return;
       }
     }
-    toggleTo(!openedRef.current);
+    toggle(clickEvent);
   };
 
   // Space/Enter on the UI part itself (role button) — a key pressed on a
@@ -44878,7 +45939,7 @@ const Expandable = props => {
     } = keyboardEvent;
     if (key === " " || key === "Enter") {
       keyboardEvent.preventDefault();
-      toggleTo(!openedRef.current);
+      toggle(keyboardEvent);
     }
   };
 
@@ -44896,8 +45957,7 @@ const Expandable = props => {
     hasAction,
     effectiveAction,
     markerDirection,
-    applyOpenedToContent,
-    toggleTo,
+    openController,
     onUIClick,
     onUIPointerDown,
     onUIKeyDown,
@@ -44935,11 +45995,17 @@ const Expandable = props => {
     },
     onnavi_request_open: e => {
       rest.onnavi_request_open?.(e);
-      toggleTo(true);
+      openController.open(e);
     },
     onnavi_request_close: e => {
       rest.onnavi_request_close?.(e);
-      toggleTo(false);
+      const closing = openController.requestClose(e, {
+        isCancel: e.detail?.isCancel
+      });
+      if (!closing) {
+        // Said back to whoever asked: --navi-close:all stops climbing here.
+        e.preventDefault();
+      }
     },
     onKeyDown: e => {
       rest.onKeyDown?.(e);
@@ -44979,7 +46045,7 @@ const ExpandableUI = ({
     opened,
     loading,
     markerDirection,
-    toggleTo,
+    openController,
     onUIClick,
     onUIPointerDown,
     onUIKeyDown,
@@ -45006,11 +46072,13 @@ const ExpandableUI = ({
     onnavi_command: e => {
       onNaviCommand(e);
     },
-    onnavi_request_open: () => {
-      toggleTo(true);
+    onnavi_request_open: e => {
+      openController.open(e);
     },
-    onnavi_request_close: () => {
-      toggleTo(false);
+    onnavi_request_close: e => {
+      openController.requestClose(e, {
+        isCancel: e.detail?.isCancel
+      });
     },
     ...rest,
     children: [marker === false ? null : jsx("span", {
@@ -45046,24 +46114,9 @@ const ExpandableContent = ({
     contentMounted,
     hasAction,
     effectiveAction,
-    applyOpenedToContent,
     contentContainerRef,
     contentId
   } = useExpandableContext("Content");
-
-  // The focus move and the reveal are the root's, but they measure the content
-  // and can only run once it is in the DOM — which is this commit, the one
-  // that rendered it. Skipped on mount: nothing has changed yet, and an
-  // expandable that was simply already open must neither animate nor take the
-  // focus.
-  const isFirstOpenedRunRef = useRef(true);
-  useLayoutEffect(() => {
-    if (isFirstOpenedRunRef.current) {
-      isFirstOpenedRunRef.current = false;
-      return undefined;
-    }
-    return applyOpenedToContent();
-  }, [opened]);
   let content = children;
   if (hasAction) {
     content = jsx(ActionRenderer, {
@@ -45613,6 +46666,7 @@ const ButtonUI = props => {
     target,
     rel,
     replace,
+    pressableDuringRouteTransition,
     // visual
     variant,
     pressEffect,
@@ -45663,6 +46717,12 @@ const ButtonUI = props => {
   const replaceRequest = replace ? {
     [LINK_REPLACE_ATTRIBUTE]: ""
   } : null;
+
+  // Worn as an attribute too, and read at the document by whoever catches the
+  // press a movement would have swallowed (see transition_press.js).
+  const pressableRequest = pressableDuringRouteTransition ? {
+    [PRESSABLE_ATTRIBUTE]: ""
+  } : null;
   const visualSelector = ".navi_button_content";
   useAccentColorAttributes(ref, null, {
     elementSelector: visualSelector
@@ -45691,6 +46751,8 @@ const ButtonUI = props => {
     rel: innerRel,
     replace: undefined,
     ...replaceRequest,
+    pressableDuringRouteTransition: undefined,
+    ...pressableRequest,
     // Respond with the JS prop value directly so callers (e.g. resolveCommandValue)
     // get the original type instead of the DOM-coerced string (e.g. "[object Object]").
     onnavi_get_value: e => {
@@ -45914,6 +46976,13 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   `--navi-nav-to` command — by TAKING THE PLACE of the current history entry
  *   rather than stacking on it: what `<Link replace>` says, for a press drawn
  *   as a button.
+ * @param {boolean} [pressableDuringRouteTransition] Keep answering presses
+ *   while a route transition plays: what a movement photographs goes deaf to
+ *   the pointer for its whole length, and the door that opened the page — a
+ *   button in a bar the two states share, standing exactly where its picture is
+ *   drawn — must still close it. What `<Link pressableDuringRouteTransition>`
+ *   says, for the other half of a toggle. Only for a control that does not
+ *   travel with the pages.
  * @param {Function} [action] On a button with an `href` or a `route`, the
  *   same order as a Link's: it runs on the press, before the navigation, and
  *   the navigation does not wait for it (see Link's `action`).
@@ -54700,800 +55769,206 @@ const useInputGroup = (ref) => {
             active.selectionEnd === active.value.length);
         if (!atEnd) {
           return;
-        }
-        const inputs = getInputs();
-        const idx = inputs.indexOf(active);
-        if (idx === -1) {
-          debugFocus(
-            e,
-            "InputGroup ArrowRight on non group input → do nothing",
-          );
-          return;
-        }
-        if (idx === inputs.length - 1) {
-          debugFocus(
-            e,
-            "InputGroup ArrowRight at end of last input → do nothing",
-          );
-          return;
-        }
-
-        debugFocus(
-          e,
-          "InputGroup ArrowRight at end of input[%d] → focus input[%d]",
-          idx,
-          idx + 1,
-        );
-        e.preventDefault();
-        focusInput(inputs[idx + 1]);
-        return;
-      }
-      const allSelected =
-        active.selectionStart === 0 &&
-        active.selectionEnd === active.value.length;
-      const atStart =
-        allSelected ||
-        (active.selectionStart === 0 && active.selectionEnd === 0);
-      if (!atStart) {
-        return;
-      }
-      const inputs = getInputs();
-      const idx = inputs.indexOf(active);
-      if (idx === 0) {
-        return;
-      }
-      debugFocus(
-        e,
-        "InputGroup ArrowLeft at start of input[%d] → focus input[%d]",
-        idx,
-        idx - 1,
-      );
-      e.preventDefault();
-      focusInput(inputs[idx - 1]);
-    };
-
-    const handleNaviInputFull = (e) => {
-      if (!e.detail.event?.isTrusted) {
-        // Programmatic value change (e.g. ArrowUp/Down) — don't auto-advance.
-        return;
-      }
-      const input = e.detail.event.currentTarget;
-      if (!el.contains(input)) {
-        return;
-      }
-      const inputs = getInputs();
-      const idx = inputs.indexOf(input);
-      if (idx === -1) {
-        return;
-      }
-      if (idx === inputs.length - 1) {
-        return;
-      }
-      const nextInput = inputs[idx + 1];
-      debugFocus(
-        e,
-        "InputGroup navi_input_full on input -> move to next input",
-        input,
-        nextInput,
-      );
-      e.preventDefault();
-      focusInput(nextInput);
-    };
-
-    // const handlePaste = (e) => {
-    //   const active = document.activeElement;
-    //   if (!isTextInputElement(active) || !el.contains(active)) {
-    //     return;
-    //   }
-    //   const inputs = getInputs();
-    //   const startIdx = inputs.indexOf(active);
-    //   if (startIdx === -1) {
-    //     return;
-    //   }
-    //   const pastedText = e.clipboardData?.getData("text") ?? "";
-    //   if (!pastedText) {
-    //     return;
-    //   }
-    //   // Only intercept when the pasted text contains at least one separator
-    //   // from the inputs starting at the focused position.
-    //   const remainingInputs = inputs.slice(startIdx);
-    //   const hasSeparatorMatch = remainingInputs.some(
-    //     (input) =>
-    //       input.dataset.separator &&
-    //       pastedText.includes(input.dataset.separator),
-    //   );
-    //   if (!hasSeparatorMatch) {
-    //     return;
-    //   }
-    //   e.preventDefault();
-    //   let remaining = pastedText;
-    //   let lastFilledIdx = startIdx;
-    //   for (let i = 0; i < remainingInputs.length; i++) {
-    //     const input = remainingInputs[i];
-    //     const separator = input.dataset.separator;
-    //     let part;
-    //     if (separator && remaining.includes(separator)) {
-    //       const sepIdx = remaining.indexOf(separator);
-    //       part = remaining.slice(0, sepIdx);
-    //       remaining = remaining.slice(sepIdx + separator.length);
-    //     } else {
-    //       part = remaining;
-    //       remaining = "";
-    //     }
-    //     requestSubPaste(input, part, e);
-    //     lastFilledIdx = startIdx + i;
-    //     if (remaining === "") {
-    //       break;
-    //     }
-    //   }
-    //   focusInput(inputs[lastFilledIdx]);
-    // };
-
-    el.addEventListener("keydown", handleKeyDown, { capture: true });
-    el.addEventListener("navi_input_full", handleNaviInputFull);
-    // el.addEventListener("paste", handlePaste, { capture: true });
-    return () => {
-      el.removeEventListener("keydown", handleKeyDown, { capture: true });
-      el.removeEventListener("navi_input_full", handleNaviInputFull);
-      // el.removeEventListener("paste", handlePaste, { capture: true });
-    };
-  }, [debugFocus]);
-};
-
-// const requestSubPaste = (input, value, event) => {
-//   dispatchRequestInteraction(input, {
-//     event,
-//     name: "subpaste",
-//     allowed: () => {
-//       dispatchRequestSetUIState(input, value, { event });
-//     },
-//   });
-// };
-
-const isTextInputElement = (el) => {
-  if (!el) {
-    return false;
-  }
-  if (el.tagName === "TEXTAREA") {
-    return true;
-  }
-  if (el.tagName !== "INPUT") {
-    return false;
-  }
-  const type = el.type || "text";
-  return (
-    type === "text" ||
-    type === "search" ||
-    type === "url" ||
-    type === "tel" ||
-    type === "email" ||
-    type === "password" ||
-    type === "number"
-  );
-};
-
-// How many lines the thing around a component gives it, when that thing caps
-// its own height and cannot cap what it holds.
-//
-// A <Picker> is the case it exists for: its value is clamped with maxLines,
-// which is CSS line-clamp — it counts line boxes of inline text and has no idea
-// what a wrapped flex row is. So a <BadgeList> rendered as a picker's ui reads
-// the number from here and caps its own rows to it, and the picker turns its
-// own clamp off (see .navi_picker_value:has(.navi_badge_list) in picker.jsx).
-const MaxLinesContext = createContext(undefined);
-
-// When a component render a prop that can be anything (js value of preact element)
-// make sure it cannot throw during render by converting it to a string if it's not a valid preact element or a primitive value
-const renderSafe = (value) => {
-  if (
-    value === null ||
-    value === undefined ||
-    typeof value === "string" ||
-    typeof value === "number" ||
-    typeof value === "boolean"
-  ) {
-    return value;
-  }
-
-  if (isValidElement(value)) {
-    return value;
-  }
-
-  return String(value);
-};
-
-// How long a popup waits before handing the focus to a field, when giving it
-// is what raises the on-screen keyboard.
-//
-// The focus is normally given as early as possible. But a popup places itself
-// against the viewport, and on a phone the keyboard takes a third of that
-// viewport away the moment a field receives focus — so the two landing in the
-// same tick means the popup is still arriving when the room under it changes,
-// and it re-places itself mid-entrance. Waiting lets it settle first, and the
-// keyboard then shrinks a box that has stopped moving.
-//
-// Long enough to outlast an entrance transition rather than merely reaching
-// the next frame: what has to be over is the popup MOVING, not one paint of
-// it.
-const FOCUS_DELAY_ON_KEYBOARD_MS = 250;
-
-/**
- * Owns open/close decision-making for a popup (Dialog or Popover): guards
- * against duplicate requests and notifies the popup owner's own reactions.
- *
- * `controller.openEffect` is implemented by the controlled element (Dialog or
- * Popover), reassigned on every render so it always closes over the latest
- * props (scrollCapture, anchor, etc.). It performs whatever DOM side effects
- * are needed to make the element actually open (`showModal()`/`showPopover()`,
- * focus transfer, positioning, traps...) and returns its cleanup —
- * the matching side effects to sync back to closed (`close()`/
- * `hidePopover()`, releasing traps...). That cleanup is kept private to the
- * controller (not exposed as a property) and invoked when the popup actually
- * closes, however that happens.
- *
- * Dialog/Popover also call `openController.requestClose(e, { isCancel })` for
- * their own internal triggers (backdrop click, Escape).
- *
- * `openHandler` is the popup owner's own business logic, passed once to
- * `createOpenController`. Its return value is `{ onRequestClose, onClose }`,
- * in the spirit of CloseWatcher
- * (https://developer.mozilla.org/en-US/docs/Web/API/CloseWatcher) but with
- * clearer naming than its cancel/close pair:
- * - `onRequestClose(e)`: about to close — call `e.preventDefault()` to stay
- *   open. Validation lives here.
- * - `onClose(e)`: actually closing, not preventable — final reactions live here.
- *
- * The controller exposes matching action methods:
- * - `open()`: requests opening — calls the caller's `onOpen` (see below), then
- *   `mountContent`/`openEffect`, then `openHandler`.
- * - `requestClose()`: requests closing — calls `onRequestClose` then `onClose`,
- *   stopping after the first if denied. The popup may choose to stay open,
- *   which is what a `false` return says (`true`: closed, or closed already).
- * - `close()`: closes for real — calls only `onClose`, skipping
- *   `onRequestClose` entirely. Used when there really is no choice (e.g. the
- *   popup unmounting).
- */
-const createOpenController = (
-  openHandler,
-  { debugInteraction } = {},
-) => {
-  let closeHandlers = null; // { onRequestClose, onClose } returned by openHandler
-  let openEffectCleanup = null; // function returned by openEffect, undoes its DOM side effects
-  let focusedAtClose = null; // what held the focus when the close was decided, see performClose
-
-  // Set true while we're waiting to see whether the click that follows a
-  // mousedown-close will land back on whatever would reopen us — see
-  // armSuppressNextOpenRequest below.
-  let suppressNextOpenRequest = false;
-  let disarmSuppressNextOpenRequest = null;
-
-  // When the popup closes because of a mousedown (e.g. clicking the
-  // backdrop), the browser still dispatches the matching "click" afterward.
-  // If that click lands back on the element that triggers open() (e.g. the
-  // picker button), it would immediately reopen the popup. We cannot
-  // preventDefault/stopPropagation the mousedown to stop that — the browser
-  // dispatches the click regardless.
-  //
-  // Instead: arm a capture-phase "click" listener on document. Capture fires
-  // before the click reaches its target, so by the time any bubble-phase
-  // click handler (e.g. the trigger button's onClick, which calls
-  // controller.open()) runs, `suppressNextOpenRequest` is already true and
-  // open() ignores the request — no need to know *which* element triggers
-  // it. A bubble-phase listener (runs after everything else, once the click
-  // reaches document) clears the flag if nothing consumed it, meaning this
-  // click never resulted in an open() call. A timeout is a last-resort safety
-  // net in case the click never reaches document at all (e.g. some ancestor
-  // called stopPropagation()) — a *task*, never a microtask: a microtask
-  // checkpoint runs between two listeners of the same trusted event dispatch,
-  // so it would clear the flag before the bubble-phase handler this is meant
-  // to block ever runs, which is precisely the case it exists for.
-  const armSuppressNextOpenRequest = () => {
-    disarmSuppressNextOpenRequest?.();
-    let safetyTimeout = null;
-    const onCaptureClick = () => {
-      document.removeEventListener("click", onCaptureClick, {
-        capture: true,
-      });
-      suppressNextOpenRequest = true;
-      document.addEventListener("click", onBubbleClick);
-      safetyTimeout = setTimeout(() => {
-        suppressNextOpenRequest = false;
-      });
-    };
-    const onBubbleClick = () => {
-      document.removeEventListener("click", onBubbleClick);
-      clearTimeout(safetyTimeout);
-      suppressNextOpenRequest = false;
-    };
-    disarmSuppressNextOpenRequest = () => {
-      clearTimeout(safetyTimeout);
-      document.removeEventListener("click", onCaptureClick, {
-        capture: true,
-      });
-      document.removeEventListener("click", onBubbleClick);
-    };
-    document.addEventListener("click", onCaptureClick, { capture: true });
-  };
-
-  const performClose = (closeEvent) => {
-    controller.opened = false;
-    // Read before any close effect touches the DOM: closing a native <dialog>
-    // hands the focus back to whatever held it at showModal() time, so by the
-    // time the close cleanup runs, the popup's content has already lost the
-    // focus and could not be remembered for the next open.
-    focusedAtClose = document.activeElement;
-
-    prevent_reopen: {
-      const mousedownEvent = findEvent(closeEvent, "mousedown");
-      if (mousedownEvent) {
-        debugInteraction(
-          closeEvent,
-          `closed by mousedown -> ignore next click`,
-        );
-        armSuppressNextOpenRequest();
-        break prevent_reopen;
-      }
-
-      // The keyboard counterpart of the mousedown case above: a key press that
-      // closes the popup and then goes on to activate the trigger, reopening it
-      // on the spot. Space and Enter both get there, but not the same way and
-      // not always — preventing the key unconditionally would eat presses that
-      // were never going to activate anything (a space typed in a field, an
-      // Enter the popup's own handler already consumed), so each is verified
-      // before being prevented.
-
-      // Space: pressed on the trigger itself, which still has focus (closing
-      // does not move it away from an element outside the popup). The browser
-      // turns that press into a click on keyup, and that click lands back on
-      // the trigger. Asked of the browser's own default action rather than
-      // guessed from the tag name: a space that scrolls, or types into a field
-      // inside the popup, has no activation to prevent and preventing it would
-      // swallow the scroll / the character.
-      const spaceKeyEvent = findEvent(
-        closeEvent,
-        (e) => e.type === "keydown" && e.key === " ",
-      );
-      if (
-        spaceKeyEvent &&
-        getKeyboardEventDefaultAction(spaceKeyEvent) === "activate"
-      ) {
-        debugInteraction(
-          closeEvent,
-          `closed by space on <${spaceKeyEvent.target.tagName.toLowerCase()}> -> prevent the click it would produce (space.preventDefault())`,
-        );
-        // The browser won't dispatch the click, and our "space_to_open" sees
-        // defaultPrevented too so it won't try to open the picker either.
-        spaceKeyEvent.preventDefault();
-        break prevent_reopen;
-      }
-
-      // Enter: pressed inside the popup (its own submit button, or implicit
-      // submission from a field it contains). The popup closes synchronously
-      // and focus is restored to the trigger, so the activation the browser
-      // still owes this press is delivered to the trigger instead.
-      //
-      // Verified on two counts: the press still owes an activation (the
-      // browser's default action for it is one — "activate" on a submit button,
-      // "form_submit" on a field — and nothing has consumed it yet), and it came
-      // from inside the popup. An Enter from outside is not this case at all.
-      const enterKeyEvent = findEvent(
-        closeEvent,
-        (e) => e.type === "keydown" && e.key === "Enter",
-      );
-      if (
-        enterKeyEvent &&
-        !enterKeyEvent.defaultPrevented &&
-        ENTER_ACTIVATING_DEFAULT_ACTION_SET.has(
-          getKeyboardEventDefaultAction(enterKeyEvent),
-        ) &&
-        isInsideOpenPopup(enterKeyEvent.target)
-      ) {
-        debugInteraction(
-          closeEvent,
-          `closed by enter from inside the popup -> prevent the activation it would deliver to the trigger (enter.preventDefault())`,
-        );
-        enterKeyEvent.preventDefault();
-        break prevent_reopen;
-      }
-    }
-
-    // Sync the DOM closed first (releasing the focus trap) — only then run
-    // the owner's own reaction (onClose may restore focus to an element
-    // outside the popup, which the focus trap would otherwise fight while
-    // still active).
-    openEffectCleanup?.(closeEvent);
-    openEffectCleanup = null;
-    closeHandlers?.onClose?.(closeEvent);
-    closeHandlers = null;
-    // Last: the close effects above are what starts the exit transition the
-    // content must outlive (see popup_content_mount.js).
-    controller.unmountContent?.();
-    controller.onOpenedChange?.(false, closeEvent);
-  };
-  const controller = {
-    opened: false,
-    openEffect: null,
-    // Set by the controlled element (see popup_content_mount.js) when its
-    // content is still waiting for a first open to be built. Called below,
-    // before openEffect, so the popup measures and positions the real thing.
-    mountContent: null,
-    // The caller's own `onOpen`, set by Dialog/Popover from their props on
-    // every render (like openEffect). Called BEFORE mountContent, so whatever
-    // it decides — which record this dialog is opening on — is already true by
-    // the time the content is built, positioned and shown. That order is the
-    // whole point: learning it afterwards means the content mounted on the
-    // previous subject first.
-    onOpen: null,
-    // The counterpart, set only when the popup was told to throw its content
-    // away on close (`mount="while-opened"`). Called from performClose above.
-    unmountContent: null,
-    // Told whenever `opened` actually changes, whatever asked for it — an
-    // interaction, a command, a prop — with the event that asked. What lets a
-    // `signal` prop reflect the popup's real state, and a `navState` prop write
-    // it into the history entry (see useOpenPropsEffectOnOpenController);
-    // called once the open/close has fully happened rather than mid-sequence.
-    onOpenedChange: null,
-    open: (e, detail) => {
-      if (controller.opened || !controller.openEffect) {
+        }
+        const inputs = getInputs();
+        const idx = inputs.indexOf(active);
+        if (idx === -1) {
+          debugFocus(
+            e,
+            "InputGroup ArrowRight on non group input → do nothing",
+          );
+          return;
+        }
+        if (idx === inputs.length - 1) {
+          debugFocus(
+            e,
+            "InputGroup ArrowRight at end of last input → do nothing",
+          );
+          return;
+        }
+
+        debugFocus(
+          e,
+          "InputGroup ArrowRight at end of input[%d] → focus input[%d]",
+          idx,
+          idx + 1,
+        );
+        e.preventDefault();
+        focusInput(inputs[idx + 1]);
         return;
       }
-      if (suppressNextOpenRequest) {
-        suppressNextOpenRequest = false;
+      const allSelected =
+        active.selectionStart === 0 &&
+        active.selectionEnd === active.value.length;
+      const atStart =
+        allSelected ||
+        (active.selectionStart === 0 && active.selectionEnd === 0);
+      if (!atStart) {
         return;
       }
-      const requestOpenEvent = new CustomEvent("navi_request_open", {
-        detail: { event: e, ...detail },
-        cancelable: true,
-      });
-      chainEvent(requestOpenEvent, e);
-      // we prepare focus transfer before actually opening the popover/dialog
-      // because opnening dialog makes browser try to transfer focus (which ends up in document.body for instance)
-      const focusTransfer = prepareFocusTransfer(
-        requestOpenEvent,
-        debugInteraction,
+      const inputs = getInputs();
+      const idx = inputs.indexOf(active);
+      if (idx === 0) {
+        return;
+      }
+      debugFocus(
+        e,
+        "InputGroup ArrowLeft at start of input[%d] → focus input[%d]",
+        idx,
+        idx - 1,
       );
-      controller.transferFocusOnOpen = (el) => {
-        // requestOpenEvent, not the raw `e` — getFocusedBeforeTransfer needs
-        // e.detail.eventChain (built by chainEvent above) to recover the
-        // element a mousedown/click landed on. `e` itself is usually the raw
-        // native event: its own `.detail` is a number (click count) on a
-        // MouseEvent, so `e.detail.eventChain` is always undefined and the
-        // mousedown/click branches below never matched — silently falling
-        // back to `document.activeElement`, which is often `document.body`
-        // once mousedown.preventDefault() has kept focus from landing
-        // anywhere yet.
+      e.preventDefault();
+      focusInput(inputs[idx - 1]);
+    };
 
-        // Two conditions, and both are about THIS opening rather than about
-        // the device:
-        // - the interaction: only a finger raises a virtual keyboard, and a
-        //   hybrid tablet answers "coarse" to every device-level signal
-        //   whichever of its two inputs was just used — the open event still
-        //   remembers which one it was. An opening with no pointer in it at
-        //   all (a keyboard shortcut, defaultOpen, an app calling open()) is
-        //   not one either.
-        // - the target: focusing a button raises nothing, so there is nothing
-        //   to wait for and the focus stays immediate. Only a field the
-        //   keyboard comes up for is worth delaying — which is why the
-        //   decision is taken on the resolved target, inside transferFocus.
-        const openedByTouch = Boolean(
-          findEvent(requestOpenEvent, isTouchDrivenEvent),
-        );
-        const cancelPendingFocus = focusTransfer.transferFocus(e, el, {
-          getDelay: (target) =>
-            openedByTouch && isEditableTarget(target)
-              ? FOCUS_DELAY_ON_KEYBOARD_MS
-              : 0,
-        });
-        return (closeEvent) => {
-          // Closed before the delay was up: the focus was never given, so it
-          // must not be given now — to a field inside a popup on its way out,
-          // raising the keyboard as it goes.
-          cancelPendingFocus?.();
-          markAutofocusRestoreOnClose(el, closeEvent, focusedAtClose);
-          const focusoutEvent = findEvent(closeEvent, "focusout");
-          if (focusoutEvent) {
-            debugInteraction(
-              closeEvent,
-              `closed by focusout -> let focus go away`,
-            );
-          } else {
-            const mousedownEvent = findEvent(closeEvent, "mousedown");
-            if (mousedownEvent) {
-              debugInteraction(
-                closeEvent,
-                "closed by mousedown -> prevent browser focus (mousedown.preventDefault())",
-              );
-              mousedownEvent.preventDefault();
-            }
-            focusTransfer.restoreFocus();
-          }
-        };
-      };
-      // Before mountContent, which builds the content, and before openEffect,
-      // which shows it: what the popup opens ON has to be known before either
-      // (see `onOpen` above).
-      controller.onOpen?.(requestOpenEvent);
-      // After prepareFocusTransfer, which has to record what held the focus
-      // before anything inside the popup can claim it, and before openEffect,
-      // which measures the popup to place it.
-      controller.mountContent?.();
-      // Only now — after the content has been built, before openEffect shows
-      // it. Dialog/Popover recompute aria-expanded and navi-hidden from this
-      // flag on every render, and mountContent above renders synchronously:
-      // flipping it any earlier commits an already-open DOM (aria-expanded
-      // "true", navi-hidden gone) before openEffect has run a single
-      // statement, so the "closed" frame it pins to transition from is in
-      // fact the open one and the entrance animation has nothing to play.
-      // It also gives the content it just built the opening it is documented
-      // to observe — mounted while the popup reads as closed, told it opened
-      // right after (see popup_content_mount.js and
-      // use_displayed_layout_effect.js).
-      controller.opened = true;
-      const openEffectReturnValue =
-        controller.openEffect(requestOpenEvent) || null;
-      openEffectCleanup = (closeEvent) => {
-        openEffectReturnValue?.(closeEvent);
-      };
-      closeHandlers = openHandler(requestOpenEvent) || null;
-      controller.onOpenedChange?.(true, requestOpenEvent);
-    },
-    requestClose: (
-      e = new CustomEvent("programmatic", { detail: {} }),
-      detail,
-    ) => {
-      if (!controller.opened) {
-        return true;
+    const handleNaviInputFull = (e) => {
+      if (!e.detail.event?.isTrusted) {
+        // Programmatic value change (e.g. ArrowUp/Down) — don't auto-advance.
+        return;
       }
-      const requestCloseEvent = new CustomEvent("navi_request_close", {
-        detail: { event: e, ...detail },
-        cancelable: true,
-      });
-      chainEvent(requestCloseEvent, e);
-      closeHandlers?.onRequestClose?.(requestCloseEvent);
-      if (requestCloseEvent.defaultPrevented) {
-        // The native <dialog> "cancel" event (Escape key) closes the dialog
-        // by default; prevent that default so denial actually keeps it open.
-        const nativeCancelEvent = findEvent(requestCloseEvent, "cancel");
-        if (nativeCancelEvent) {
-          nativeCancelEvent.preventDefault();
-        }
-        return false;
+      const input = e.detail.event.currentTarget;
+      if (!el.contains(input)) {
+        return;
       }
-      performClose(requestCloseEvent);
-      return true;
-    },
-    close: (e = new CustomEvent("programmatic", { detail: {} }), detail) => {
-      if (!controller.opened) {
+      const inputs = getInputs();
+      const idx = inputs.indexOf(input);
+      if (idx === -1) {
         return;
       }
-      const closeEvent = new CustomEvent("navi_close", {
-        detail: { event: e, ...detail },
-      });
-      chainEvent(closeEvent, e);
-      // Skips onRequestClose entirely — there is no choice here.
-      performClose(closeEvent);
-    },
-  };
-  return controller;
-};
-
-// Inside a popup that is open right now — the popup being closed, in practice,
-// since that is the one the key press was delivered to.
-const isInsideOpenPopup = (element) => {
-  if (!element || element.nodeType !== 1) {
-    return false;
-  }
-  return Boolean(element.closest("dialog[open], [popover]:popover-open"));
-};
+      if (idx === inputs.length - 1) {
+        return;
+      }
+      const nextInput = inputs[idx + 1];
+      debugFocus(
+        e,
+        "InputGroup navi_input_full on input -> move to next input",
+        input,
+        nextInput,
+      );
+      e.preventDefault();
+      focusInput(nextInput);
+    };
 
-// What Enter is about to do when it is about to activate something: press the
-// focused control, or submit the form around it. Anything else it can do
-// (typing a newline, nothing at all) leaves no activation behind to land on the
-// trigger once focus is restored.
-const ENTER_ACTIVATING_DEFAULT_ACTION_SET = new Set([
-  "activate",
-  "form_submit",
-]);
+    // const handlePaste = (e) => {
+    //   const active = document.activeElement;
+    //   if (!isTextInputElement(active) || !el.contains(active)) {
+    //     return;
+    //   }
+    //   const inputs = getInputs();
+    //   const startIdx = inputs.indexOf(active);
+    //   if (startIdx === -1) {
+    //     return;
+    //   }
+    //   const pastedText = e.clipboardData?.getData("text") ?? "";
+    //   if (!pastedText) {
+    //     return;
+    //   }
+    //   // Only intercept when the pasted text contains at least one separator
+    //   // from the inputs starting at the focused position.
+    //   const remainingInputs = inputs.slice(startIdx);
+    //   const hasSeparatorMatch = remainingInputs.some(
+    //     (input) =>
+    //       input.dataset.separator &&
+    //       pastedText.includes(input.dataset.separator),
+    //   );
+    //   if (!hasSeparatorMatch) {
+    //     return;
+    //   }
+    //   e.preventDefault();
+    //   let remaining = pastedText;
+    //   let lastFilledIdx = startIdx;
+    //   for (let i = 0; i < remainingInputs.length; i++) {
+    //     const input = remainingInputs[i];
+    //     const separator = input.dataset.separator;
+    //     let part;
+    //     if (separator && remaining.includes(separator)) {
+    //       const sepIdx = remaining.indexOf(separator);
+    //       part = remaining.slice(0, sepIdx);
+    //       remaining = remaining.slice(sepIdx + separator.length);
+    //     } else {
+    //       part = remaining;
+    //       remaining = "";
+    //     }
+    //     requestSubPaste(input, part, e);
+    //     lastFilledIdx = startIdx + i;
+    //     if (remaining === "") {
+    //       break;
+    //     }
+    //   }
+    //   focusInput(inputs[lastFilledIdx]);
+    // };
 
-// Created once per popup instance: openHandler is wrapped in a stable callback
-// so the controller identity never changes across renders, even though
-// Dialog/Popover read fresh closures (scrollTrap, etc.) via
-// openController.openEffect on every render.
-const useOpenController = (openHandler) => {
-  const debugInteraction = useDebugInteraction();
-  const stableOpenHandler = useStableCallback(openHandler);
-  const controllerRef = useRef(null);
-  if (!controllerRef.current) {
-    controllerRef.current = createOpenController(stableOpenHandler, {
-      debugInteraction,
-    });
-  }
-  // Unmount safety net: if Dialog/Popover unmounts while still open (parent
-  // removes it from the tree without going through requestClose()), there is
-  // no choice to leave open — close it for real.
-  useLayoutEffect(() => {
+    el.addEventListener("keydown", handleKeyDown, { capture: true });
+    el.addEventListener("navi_input_full", handleNaviInputFull);
+    // el.addEventListener("paste", handlePaste, { capture: true });
     return () => {
-      controllerRef.current.close();
+      el.removeEventListener("keydown", handleKeyDown, { capture: true });
+      el.removeEventListener("navi_input_full", handleNaviInputFull);
+      // el.removeEventListener("paste", handlePaste, { capture: true });
     };
-  }, []);
-  return controllerRef.current;
+  }, [debugFocus]);
 };
 
-// Nested popups that both mount already-open (`open`/`defaultOpen`) would
-// otherwise stack in the wrong order: Preact fires layout effects
-// child-first on mount, so a nested popup's own mount-open would call
-// showPopover() before its ancestor's — and the top layer stacks *later*
-// showPopover() calls above *earlier* ones (see popover.jsx's own openEffect
-// comment) — leaving the ancestor on top instead of the nested popup, the
-// opposite of what opening them one at a time (ancestor first, by real user
-// interaction) would produce. Batching every mount-time silent open queued
-// during the same commit's layout-effect phase into one microtask flush,
-// then simply running them in *reverse* of their registration order fixes
-// this — no need to compare DOM positions: since effects already fire
-// child-first, tree-wide, for *any* ancestor/descendant pair the descendant
-// is always queued before the ancestor, regardless of what else is in the
-// tree, so reversing the whole batch always puts every ancestor before its
-// own descendants. Works for any nesting depth for the same reason. Two
-// unrelated (sibling) popups both mounting open also get reordered
-// relative to each other, but there's no meaningful "correct" order between
-// those anyway.
-let pendingMountOpens = [];
-let mountOpenFlushScheduled = false;
-const scheduleMountOpen = (run) => {
-  pendingMountOpens.push(run);
-  if (mountOpenFlushScheduled) {
-    return;
-  }
-  mountOpenFlushScheduled = true;
-  queueMicrotask(() => {
-    const entries = pendingMountOpens;
-    pendingMountOpens = [];
-    mountOpenFlushScheduled = false;
-    for (let i = entries.length - 1; i >= 0; i--) {
-      entries[i]();
-    }
-  });
-};
+// const requestSubPaste = (input, value, event) => {
+//   dispatchRequestInteraction(input, {
+//     event,
+//     name: "subpaste",
+//     allowed: () => {
+//       dispatchRequestSetUIState(input, value, { event });
+//     },
+//   });
+// };
 
-// Where the popup's open state is kept, when it is kept anywhere: `navState`
-// resolved to the `{ id, type }` useNavState wants.
-//
-// `true` takes the popup's own id — a popup a `--navi-open` command can name is
-// a popup that already has a stable one, and that id is what identifies its
-// open state too.
-const NO_NAV_STATE = { id: undefined, type: "replace" };
-const resolveNavStateProp = (navState, popupId) => {
-  if (!navState) {
-    return NO_NAV_STATE;
+const isTextInputElement = (el) => {
+  if (!el) {
+    return false;
   }
-  if (navState === true) {
-    return { id: popupId, type: "replace" };
+  if (el.tagName === "TEXTAREA") {
+    return true;
   }
-  if (typeof navState === "string") {
-    return { id: navState, type: "replace" };
+  if (el.tagName !== "INPUT") {
+    return false;
   }
-  return { id: navState.id || popupId, type: navState.type || "replace" };
+  const type = el.type || "text";
+  return (
+    type === "text" ||
+    type === "search" ||
+    type === "url" ||
+    type === "tel" ||
+    type === "email" ||
+    type === "password" ||
+    type === "number"
+  );
 };
 
-/**
- * Keeps an open controller in sync with where the caller says the popup should
- * be: an `open`/`defaultOpen` pair, a `signal`, or a `navState` — the open
- * state written into the history entry, so a screen left and come back to finds
- * its popup as it was.
- *
- * Shared between `useOpenControllerByProps` below (Dialog/Popover driving their
- * own controller) and `picker_custom.jsx` (which owns its controller but wants
- * the same skip-if-already-matching / open-or-requestClose control flow).
- *
- * @param {{ open: (e: Event, detail?: object) => void, requestClose: (e: Event, detail?: object) => void, opened: boolean }} openController
- * @param {{ id?: string, open?: boolean|"interaction", defaultOpen?: boolean|"interaction", signal?: import("@preact/signals").Signal<boolean>, navState?: boolean|string|{id?: string, type?: "push"|"replace"} }} props
- */
-const useOpenPropsEffectOnOpenController = (openController, props) => {
-  const { signal, defaultOpen, navState } = props;
-  const { id: navStateId, type: navStateType } = resolveNavStateProp(
-    navState,
-    props.id,
-  );
-  // Called unconditionally (it answers with no-ops for an absent id), like
-  // every other hook here.
-  const [navStateValue, enterNavState, leaveNavState] = useNavState(
-    navStateId,
-    { type: navStateType },
-  );
-  // What the caller holds, however they hold it: the history entry when there
-  // is a `navState`, an `open` they re-render themselves, or a `signal` this
-  // hook also writes (see onOpenedChange below). Reading .value during render
-  // is what subscribes the popup to a signal; reading the document state is
-  // what subscribes it to the history entry, back button included.
-  const open = navStateId
-    ? Boolean(navStateValue)
-    : signal
-      ? signal.value
-      : props.open;
-  // Assigned on every render, like openEffect, so it always closes over the
-  // latest prop: a popup that opens or closes on its own (Escape, backdrop, a
-  // --navi-close command) writes what happened where the caller keeps it, so
-  // whoever holds it always reads where the popup is.
-  openController.onOpenedChange =
-    navStateId || signal
-      ? (opened, event) => {
-          if (navStateId) {
-            if (opened) {
-              enterNavState();
-            } else {
-              // Under type "push" a cancel goes back rather than rewriting the
-              // entry, so everything else written to the url while the popup
-              // was open goes back with it (see useNavState's own leave()).
-              leaveNavState({ isBack: Boolean(event?.detail?.isCancel) });
-            }
-          }
-          if (signal) {
-            signal.value = opened;
-          }
-        }
-      : null;
-  // Tracks whether the effect below has ever run before — only the very
-  // first run gets the "mount already open" treatment (`open` truthy from
-  // the start, or the uncontrolled, mount-only `defaultOpen`); every
-  // subsequent `open` change is a real, later toggle and should animate
-  // normally like any other interactive open/close.
-  const isFirstRunRef = useRef(true);
+// How many lines the thing around a component gives it, when that thing caps
+// its own height and cannot cap what it holds.
+//
+// A <Picker> is the case it exists for: its value is clamped with maxLines,
+// which is CSS line-clamp — it counts line boxes of inline text and has no idea
+// what a wrapped flex row is. So a <BadgeList> rendered as a picker's ui reads
+// the number from here and caps its own rows to it, and the picker turns its
+// own clamp off (see .navi_picker_value:has(.navi_badge_list) in picker.jsx).
+const MaxLinesContext = createContext(undefined);
 
-  useLayoutEffect(() => {
-    const isFirstRun = isFirstRunRef.current;
-    isFirstRunRef.current = false;
+// When a component render a prop that can be anything (js value of preact element)
+// make sure it cannot throw during render by converting it to a string if it's not a valid preact element or a primitive value
+const renderSafe = (value) => {
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return value;
+  }
 
-    if (isFirstRun) {
-      const mountOpenReason = open || defaultOpen;
-      if (mountOpenReason) {
-        // Whether this popup being open is something that just happened, or
-        // something that was already true when the page appeared. "interaction"
-        // says the mount IS the opening — the popup exists because the user
-        // just asked for it — so the entrance plays like any other open. Any
-        // other truthy value means it was simply already open: nothing was ever
-        // shown as "closed" for the user to see it transition away from, so the
-        // entrance is skipped (`silent`, see popover.jsx's own openEffect).
-        //
-        // Deferred + batched (see scheduleMountOpen above) rather than called
-        // directly, so nested popups that both mount already-open end up
-        // stacked ancestor-first instead of Preact's own child-first effect
-        // order.
-        scheduleMountOpen(() =>
-          openController.open(new CustomEvent("open_by_prop", { detail: {} }), {
-            silent: mountOpenReason !== "interaction",
-          }),
-        );
-      }
-      return;
-    }
+  if (isValidElement(value)) {
+    return value;
+  }
 
-    if (open === undefined) {
-      return;
-    }
-    // Skip when the controller is already in the desired state.
-    // openController.opened tracks actual open/close (updated by onopen/onclose,
-    // not by renders) so it is the authoritative check against feedback loops.
-    if (open === openController.opened) {
-      return;
-    }
-    if (open) {
-      openController.open(new CustomEvent("open_by_prop", { detail: {} }));
-    } else {
-      openController.requestClose(
-        new CustomEvent("close_by_prop", { detail: {} }),
-        { isCancel: true },
-      );
-    }
-    // The request can be refused (a busy form denying the close): the popup
-    // then stays where it was, and whoever holds the open state is told so —
-    // otherwise it would keep saying "closed" about a popup still open.
-    if (signal) {
-      signal.value = openController.opened;
-    }
-    if (navStateId && openController.opened) {
-      enterNavState();
-    }
-  }, [open]);
+  return String(value);
 };
 
 /**
@@ -57039,10 +57514,10 @@ const useDialogProps = props => {
   // the latest prop. Called by openController.open() before the content is
   // built: what this popup opens ON is known before anything reads it.
   openController.onOpen = onOpen || null;
-  const children = usePopupContentMount(openController, props.ref, {
-    children: childrenProp,
+  const contentMounted = usePopupContentMount(openController, props.ref, {
     mount
   });
+  const children = contentMounted ? childrenProp : null;
   const isModal = layer === "top";
   const ref = props.ref;
   const expandY = Boolean(expand) || Boolean(expandYProp);
@@ -58484,10 +58959,10 @@ const usePopoverProps = props => {
   // the latest prop. Called by openController.open() before the content is
   // built: what this popup opens ON is known before anything reads it.
   openController.onOpen = onOpen || null;
-  const children = usePopupContentMount(openController, props.ref, {
-    children: childrenProp,
+  const contentMounted = usePopupContentMount(openController, props.ref, {
     mount
   });
+  const children = contentMounted ? childrenProp : null;
   const isTopLayer = layer === "top";
   const ref = props.ref;
   const backdropRef = useRef();
@@ -80749,6 +81224,14 @@ const css = /* css */`.navi_side_panel {
  *   required at all for a purely command-driven panel (an `id` plus a
  *   `<Button command="--navi-toggle" commandFor={id}>` elsewhere, same as
  *   `Dialog`/`Popover` themselves — see either's own doc).
+ * @param {boolean|string|{id?: string, type?: "push"|"replace"}} [props.navState] -
+ *   Keeps the open state in the history entry, so a screen left and come back
+ *   to finds its panel as it was: `true` uses the panel's own `id`, a string
+ *   names the key, `{ id, type }` chooses between rewriting the entry
+ *   ("replace", the default) and pushing one ("push"), where closing goes
+ *   back — which is what makes the phone's back gesture close the panel.
+ *   Forwarded as-is to `Popup`; source of truth, so it excludes `open` and
+ *   `signal` (see `Dialog`/`Popover`'s own `navState`).
  * @param {(event: Event) => void} [props.onClose] - Called when the panel
  *   actually closes (see `Dialog`/`Popover`'s own `onClose`).
  * @param {"left"|"right"|"top"|"bottom"} [props.side="right"] - Which
@@ -80830,8 +81313,16 @@ const SidePanel = ({
   import.meta.css = [css, "@jsenv/navi/src/layout/side_panel.jsx"];
   const onSwipePointerDown = swipeToClose ? createSwipeToClose(side) : null;
   return jsx(Popup, {
-    mode: mode,
-    open: open,
+    mode: mode
+    // Spread rather than written: the collision warning between `signal` and
+    // `open` asks whether the prop is THERE, not what it holds, so a panel
+    // handed a signal and nothing else would be told off for an `open` only
+    // this line ever put on it.
+    ,
+
+    ...(open === undefined ? null : {
+      open
+    }),
     signal: signal,
     defaultOpen: defaultOpen,
     onClose: onClose,