@jsenv/navi 0.29.163 → 0.29.165

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";
@@ -28064,6 +28064,21 @@ installImportMetaCssBuild(import.meta);/**
  * the reverse of another, so B → A can be given a movement of its own, or
  * silenced with "none", by writing it (see findRelation).
  *
+ * One shape of page has no pair to write: the one whose door is in the fixed
+ * furniture — a gear in a top bar, a "+" in a tab bar — and which is therefore
+ * opened from every screen and closed back onto whichever one the reader was
+ * on. The relation is real and it is a single sentence; only the `from` is
+ * missing, so it is left out:
+ *
+ *   defineRouteTransition(null, SETTINGS_PAGE, "cover-top");
+ *
+ * Arriving there plays forward from wherever, leaving plays back to wherever,
+ * and that is what lets the back button close it the way it opened — a
+ * traversal carries no request, and nothing has to remember per history entry
+ * what the press that created it had asked for. It is tried after every
+ * written pair, and it is not defineRouteDefaultTransition: a default is about
+ * every navigation nothing was said about, this is about ONE destination.
+ *
  * The relation says WHEN something plays and which way; the transition says
  * WHAT plays — a movement navi ships, or a name the application defines in its
  * own CSS (see the JSDoc below). Said without one, the relation plays the
@@ -28252,7 +28267,7 @@ const css$11 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     }
   }
 
-  &[data-navi-route-transition-type="cover-x"] {
+  &[data-navi-route-transition-type="cover-right"] {
     &[data-navi-route-transition="forward"] {
       --navi-route-transition-leave: navi-route-transition-still;
       --navi-route-transition-enter: navi-route-transition-enter-from-end;
@@ -28261,14 +28276,22 @@ const css$11 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     &[data-navi-route-transition="back"] {
       --navi-route-transition-leave: navi-route-transition-leave-towards-end;
       --navi-route-transition-enter: navi-route-transition-still;
+    }
+  }
 
-      &::view-transition-old(root), &::view-transition-old(navi-route-transition) {
-        z-index: 1;
-      }
+  &[data-navi-route-transition-type="cover-left"] {
+    &[data-navi-route-transition="forward"] {
+      --navi-route-transition-leave: navi-route-transition-still;
+      --navi-route-transition-enter: navi-route-transition-enter-from-start;
+    }
+
+    &[data-navi-route-transition="back"] {
+      --navi-route-transition-leave: navi-route-transition-leave-towards-start;
+      --navi-route-transition-enter: navi-route-transition-still;
     }
   }
 
-  &[data-navi-route-transition-type="cover-y"] {
+  &[data-navi-route-transition-type="cover-bottom"] {
     &[data-navi-route-transition="forward"] {
       --navi-route-transition-leave: navi-route-transition-still;
       --navi-route-transition-enter: navi-route-transition-enter-from-bottom;
@@ -28277,7 +28300,23 @@ const css$11 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     &[data-navi-route-transition="back"] {
       --navi-route-transition-leave: navi-route-transition-leave-towards-bottom;
       --navi-route-transition-enter: navi-route-transition-still;
+    }
+  }
+
+  &[data-navi-route-transition-type="cover-top"] {
+    &[data-navi-route-transition="forward"] {
+      --navi-route-transition-leave: navi-route-transition-still;
+      --navi-route-transition-enter: navi-route-transition-enter-from-top;
+    }
+
+    &[data-navi-route-transition="back"] {
+      --navi-route-transition-leave: navi-route-transition-leave-towards-top;
+      --navi-route-transition-enter: navi-route-transition-still;
+    }
+  }
 
+  &[data-navi-route-transition-type="cover-right"], &[data-navi-route-transition-type="cover-left"], &[data-navi-route-transition-type="cover-bottom"], &[data-navi-route-transition-type="cover-top"] {
+    &[data-navi-route-transition="back"] {
       &::view-transition-old(root), &::view-transition-old(navi-route-transition) {
         z-index: 1;
       }
@@ -28300,7 +28339,7 @@ const css$11 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     }
   }
 
-  &[data-navi-route-transition-type="slide-x"], &[data-navi-route-transition-type="slide-y"], &[data-navi-route-transition-type="cover-x"], &[data-navi-route-transition-type="cover-y"], &[data-navi-route-transition-type="zoom"] {
+  &[data-navi-route-transition-type="slide-x"], &[data-navi-route-transition-type="slide-y"], &[data-navi-route-transition-type="cover-right"], &[data-navi-route-transition-type="cover-left"], &[data-navi-route-transition-type="cover-bottom"], &[data-navi-route-transition-type="cover-top"], &[data-navi-route-transition-type="zoom"] {
     &::view-transition-old(root), &::view-transition-old(navi-route-transition) {
       animation-name: var(--navi-route-transition-leave);
     }
@@ -28310,7 +28349,7 @@ const css$11 = /* css */`:root[data-navi-route-transition] [data-navi-route-tran
     }
   }
 
-  &[data-navi-route-transition-type="slide-x"], &[data-navi-route-transition-type="slide-y"], &[data-navi-route-transition-type="cover-x"], &[data-navi-route-transition-type="cover-y"] {
+  &[data-navi-route-transition-type="slide-x"], &[data-navi-route-transition-type="slide-y"], &[data-navi-route-transition-type="cover-right"], &[data-navi-route-transition-type="cover-left"], &[data-navi-route-transition-type="cover-bottom"], &[data-navi-route-transition-type="cover-top"] {
     &::view-transition-old(root), &::view-transition-new(root), &::view-transition-old(navi-route-transition), &::view-transition-new(navi-route-transition) {
       animation-timing-function: ease;
     }
@@ -28435,10 +28474,17 @@ const RouteTransitionArea = ({
 };
 
 /**
- * Declare how a pair of routes moves against each other.
- *
- * @param {object} from - a route, or `{ route, params }` when the page is a
- *   param of a route rather than a route of its own.
+ * Declare how a pair of routes moves against each other — or how one route is
+ * entered, from wherever its door happens to be.
+ *
+ * @param {object|null} from - a route, or `{ route, params }` when the page is
+ *   a param of a route rather than a route of its own. `null` says the page is
+ *   reached FROM ANYWHERE: its door is in the furniture (a gear in the top
+ *   bar, a "+" in the tab bar) rather than on a screen, so there is no pair to
+ *   write it on. Arriving at `to` from any page then plays forward and leaving
+ *   it for any page plays back, which is what makes the back button close it
+ *   the way it opened. Tried last, after every written pair: a pair naming the
+ *   same destination still owns its crossing.
  * @param {object} to - same forms. Going from `from` to `to` plays forward,
  *   the reverse plays back — unless the reverse is written as a relation of
  *   its own, which then owns that way (a movement of its own, or `"none"` for
@@ -28452,8 +28498,11 @@ const RouteTransitionArea = ({
  *   Omitted, the browser's own cross-fade. Shipped with navi:
  *   - `"slide-x"`, `"slide-y"`: the two pages slide past each other, forward
  *     towards the start of the axis;
- *   - `"cover-x"`, `"cover-y"`: the page arriving slides in OVER one that does
- *     not move, and slides off it on the way back;
+ *   - `"cover-right"`, `"cover-left"`, `"cover-bottom"`, `"cover-top"`: the
+ *     page arriving slides in OVER one that does not move, and slides off it
+ *     on the way back. The edge named is the one it comes IN from, which is
+ *     where its door is: a page reached from a bottom bar covers from the
+ *     bottom, one pulled down from a top bar covers from the top;
  *   - `"zoom"`: the deeper page is the closer one — it lands from slightly too
  *     big, and grows away when left;
  *   - `"none"`: nothing, said out loud — written on one way of a pair, it cuts
@@ -28484,6 +28533,9 @@ const RouteTransitionArea = ({
 const defineRouteTransition = (from, to, transition) => {
   import.meta.css = [css$11, "@jsenv/navi/src/nav/route_transition.jsx"];
   installTransitionWindowCss();
+  if (!to) {
+    throw new TypeError(`defineRouteTransition needs a destination: "to" is ${to}. The page reached from anywhere is written defineRouteTransition(null, THAT_PAGE, ...) — there is no relation the other way round, a page LEFT for anywhere being the back half of that one.`);
+  }
   const {
     type,
     duration
@@ -28652,13 +28704,15 @@ const rebuildWatcher = () => {
   }
   // Every page any relation mentions, each once: the position of the current
   // page in this list is what turns "some signal moved" into "the document
-  // went from page A to page B".
+  // went from page A to page B". A relation written from anywhere mentions one
+  // page only — the other end is whatever the reader was on, and -1 is how it
+  // reads here.
   const pages = [];
   for (const {
     from,
     to
   } of relations) {
-    if (pageIndexOf$1(pages, from) === -1) {
+    if (from && pageIndexOf$1(pages, from) === -1) {
       pages.push(from);
     }
     if (pageIndexOf$1(pages, to) === -1) {
@@ -28678,10 +28732,15 @@ const rebuildWatcher = () => {
       firstReading = false;
       return;
     }
-    if (index === -1 || fromIndex === -1 || fromIndex === index) {
+    if (fromIndex === index) {
       return;
     }
-    const found = findRelation(pages[fromIndex], pages[index]);
+    // 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).
+    const fromPage = fromIndex === -1 ? null : pages[fromIndex];
+    const toPage = index === -1 ? null : pages[index];
+    const found = findRelation(fromPage, toPage);
     if (!found && !navigationRequest) {
       // No relation says anything about these two and this navigation asked
       // for nothing: they are side by side, and silence is the fact — not a
@@ -28700,7 +28759,7 @@ const rebuildWatcher = () => {
       return;
     }
     beginTransition({
-      page: pages[index],
+      page: toPage,
       url: navigationUrl,
       // 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
@@ -28777,13 +28836,23 @@ observeAfterRouting(() => {
   releaseRoutingRenderingHold();
 });
 
-// The exact way travelled first, over the whole registry, and only then the
-// reverses: a relation written B → A owns that way, and being the reverse of
-// one written A → B never outranks it. This is what makes reciprocity a
-// default rather than a decree — write the way back to give it a movement of
-// its own, or "none" to silence it.
+// The exact way travelled first, over the whole registry, then the reverses,
+// and last the pages written from anywhere.
+//
+// A relation written B → A owns that way, and being the reverse of one written
+// A → B never outranks it. This is what makes reciprocity a default rather
+// than a decree — write the way back to give it a movement of its own, or
+// "none" to silence it.
+//
+// A page reached from anywhere is tried after every pair, so a pair naming the
+// same destination still owns its crossing — the map, where it was drawn, is
+// more precise than "from wherever". Arriving is read before leaving: between
+// two such pages, the one being opened says what plays.
 const findRelation = (fromPage, toPage) => {
   for (const relation of relations) {
+    if (!relation.from) {
+      continue;
+    }
     if (samePage$1(relation.from, fromPage) && samePage$1(relation.to, toPage)) {
       return {
         direction: "forward",
@@ -28792,6 +28861,9 @@ const findRelation = (fromPage, toPage) => {
     }
   }
   for (const relation of relations) {
+    if (!relation.from) {
+      continue;
+    }
     if (samePage$1(relation.from, toPage) && samePage$1(relation.to, fromPage)) {
       return {
         direction: "back",
@@ -28799,6 +28871,28 @@ const findRelation = (fromPage, toPage) => {
       };
     }
   }
+  for (const relation of relations) {
+    if (relation.from) {
+      continue;
+    }
+    if (samePage$1(relation.to, toPage)) {
+      return {
+        direction: "forward",
+        relation
+      };
+    }
+  }
+  for (const relation of relations) {
+    if (relation.from) {
+      continue;
+    }
+    if (samePage$1(relation.to, fromPage)) {
+      return {
+        direction: "back",
+        relation
+      };
+    }
+  }
   return null;
 };
 
@@ -28906,10 +29000,11 @@ const beginTransition = ({
       // rendered has already resolved the wait by the next line.
       releaseRendering();
       if (page === null) {
-        // A default transition: which page is arriving is unknown, and some
-        // navigations render no route at all (a search param bound to a
-        // signal) — waited on, those would freeze the page until the browser
-        // gives up. The wait is raced with a short timer instead.
+        // Which page is arriving is unknown — a default transition, or a page
+        // reached from anywhere being left for wherever — and some navigations
+        // render no route at all (a search param bound to a signal): waited
+        // on, those would freeze the page until the browser gives up. The wait
+        // is raced with a short timer instead.
         await Promise.race([renderWait.rendered, waitMs(50)]);
       } else if (pageIsCurrent$1(page)) {
         await renderWait.rendered;
@@ -29034,10 +29129,18 @@ const armRouteRenderWait$1 = () => {
   };
 };
 const waitMs = ms => new Promise(resolve => setTimeout(resolve, ms));
-const normalizePage$1 = page => page.isRoute ? {
-  route: page,
-  params: undefined
-} : page;
+
+// A page written as the route itself, and the page written nowhere: `from`
+// may be left out, which is a relation about arriving at `to` from anywhere.
+const normalizePage$1 = page => {
+  if (!page) {
+    return null;
+  }
+  return page.isRoute ? {
+    route: page,
+    params: undefined
+  } : page;
+};
 
 // Two pages are the same page when they select the same thing, not when they
 // were written by the same hand.
@@ -30594,6 +30697,117 @@ const unnameAfterTravel = element => {
   element.style.viewTransitionName = "";
 };
 
+/**
+ * What covers the box a route movement plays in, from INSIDE the document: a
+ * sticky row of tabs above a `<RouteTravel>`, a header pinned to the top of a
+ * scroller. The element says it is there, this measures what it takes and
+ * publishes it under --navi-transition-cover-* — the slot transition_window.js
+ * declares and explains, and which nothing but the element covering the box can
+ * fill: the safe area answers for what is pinned to the WINDOW's edges, and a
+ * sticky row is none of those.
+ *
+ * The pictures of a transition are drawn in the top layer, above every z-index
+ * of the document, so a band left uncounted here is a band the pictures slide
+ * over instead of being cut at.
+ *
+ * Same shape as the room a fixed bar gives back (layout/fixed_bar/
+ * fixed_bar_space.js): measured rather than declared, and the largest of the
+ * elements sharing an edge rather than their sum — during a route movement the
+ * outgoing and the incoming row are both mounted, pinned to the same edge, one
+ * over the other. Nothing takes its layout from these variables, though, so the
+ * write happens where it is measured, with no frame to wait for.
+ */
+
+
+const sizeMapByEdge = new Map();
+// What is currently on <html> for each edge (absent = the variable is not set).
+// Several elements sharing an edge means most calls compute the same largest
+// size again, and a size that has not changed is a style recalculation of the
+// whole document for nothing.
+const writtenValueByEdge = new Map();
+
+/**
+ * @param {import("preact").RefObject<Element>} elementRef - The element
+ *   covering the box.
+ * @param {"top"|"right"|"bottom"|"left"} [edge="top"] - Which side of the box
+ *   it covers. Its size across that edge is what gets published; the edge's own
+ *   band (the safe area, the fixed bars) is already counted, so an element
+ *   states its own size and nothing else.
+ */
+const useTransitionCover = (elementRef, edge = "top") => {
+  installTransitionWindowCss();
+
+  const measureCover = (element) => {
+    const { width, height } = element.getBoundingClientRect();
+    return edge === "left" || edge === "right" ? width : height;
+  };
+
+  // Anything a render can change — the row's content, a size prop, a theme
+  // variable — is measured in that same commit: a movement starting on the
+  // render that grew the row is cut at the row as it now is.
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    writeCover(edge, element, measureCover(element));
+  });
+
+  // What no render caused: a font arriving late, content coming from outside, a
+  // rotation.
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      writeCover(edge, element, measureCover(element));
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+      writeCover(edge, element, null);
+    };
+  }, [edge]);
+};
+
+const writeCover = (edge, element, size) => {
+  let sizeMap = sizeMapByEdge.get(edge);
+  if (!sizeMap) {
+    sizeMap = new Map();
+    sizeMapByEdge.set(edge, sizeMap);
+  }
+  if (size === null) {
+    sizeMap.delete(element);
+  } else {
+    sizeMap.set(element, size);
+  }
+  let largestSize = 0;
+  for (const coverSize of sizeMap.values()) {
+    if (coverSize > largestSize) {
+      largestSize = coverSize;
+    }
+  }
+  const property = `--navi-transition-cover-${edge}`;
+  const { style } = document.documentElement;
+  if (sizeMap.size === 0) {
+    // Back to the zero the sheet declares, rather than a zero written over it:
+    // a page with no sticky row must read what navi says, not what the last one
+    // left behind.
+    if (writtenValueByEdge.has(edge)) {
+      writtenValueByEdge.delete(edge);
+      style.removeProperty(property);
+    }
+    return;
+  }
+  const value = `${largestSize}px`;
+  if (writtenValueByEdge.get(edge) === value) {
+    return;
+  }
+  writtenValueByEdge.set(edge, value);
+  style.setProperty(property, value);
+};
+
 const routeAction = (
   routeOrRoutes,
   action,
@@ -39632,6 +39846,12 @@ const shouldInjectSpacingBetween = (left, right) => {
  *   An invisible placeholder rendered with those styles reserves the space; the
  *   real visible text is layered on top via `position: absolute`.
  *   Best combined with `noWrap` — does not work reliably on multi-line text.
+ *   The placeholder is a SECOND copy of the children: it is `aria-hidden`, so
+ *   the accessible name is right, but the text appears twice in `textContent`
+ *   — which is what a test asserting on the element's text reads. Where the
+ *   element's text must stay single (a tab, a label a test matches on), reserve
+ *   the space some other way; `Link`'s `currentEffectBold` paints the weight by
+ *   default and comes here only when asked to (`"hold-space"`).
  *
  * @param {boolean} [boldStable]
  *   Alternative to `holdSpaceForStyle` for multi-line text. Keeps a consistent
@@ -40131,6 +40351,7 @@ installImportMetaCssBuild(import.meta);const css$X = /* css */`@layer navi {
     --link-text-decoration-hover: var(--link-text-decoration);
     --link-cursor: pointer;
     --link-outline-width: 2px;
+    --link-current-effect-bold-thickness: .02em;
     --link-current-indicator-size: 2px;
     --link-current-indicator-spacing: 0;
     --link-current-indicator-color: var(--navi-link-current-indicator-color);
@@ -40266,7 +40487,12 @@ installImportMetaCssBuild(import.meta);const css$X = /* css */`@layer navi {
       --x-link-color: var(--link-color-current);
     }
 
-    &[data-current-effect-bold] {
+    &[data-current-effect-bold="text-shadow"] {
+      text-shadow: var(--link-current-effect-bold-thickness) 0 0 currentColor,
+          calc(-1 * var(--link-current-effect-bold-thickness)) 0 0 currentColor;
+    }
+
+    &[data-current-effect-bold="hold-space"] {
       font-weight: bold;
     }
 
@@ -40479,8 +40705,17 @@ Object.assign(PSEUDO_CLASSES, {
  *   `"tab"` renders a tab-like affordance.
  * @param {boolean|"top"|"bottom"|"left"|"right"} [props.currentIndicator] - A
  *   bar drawn on the given edge (or bottom when `true`) while current.
- * @param {boolean} [props.currentEffectBold] - Bold the text while current
- *   (reserving the bold width so layout doesn't shift).
+ * @param {boolean|"text-shadow"|"hold-space"} [props.currentEffectBold] - Bold
+ *   the label while current, without its width changing — a row of tabs must
+ *   not jump when one becomes current. Which is a choice of two:
+ *   - `"text-shadow"` (what `true` means): the weight is PAINTED, the glyphs
+ *     drawn a hair to each side of themselves
+ *     (`--link-current-effect-bold-thickness`). The label stays one piece of
+ *     text, so `textContent` and anything reading it still see it once.
+ *   - `"hold-space"`: the real bold face, its width held by an invisible copy
+ *     of the label rendered bold underneath. True bold — and the label then
+ *     appears TWICE in `textContent`, which a test asserting on the element's
+ *     text reads (see `holdSpaceForStyle` in `text.jsx`).
  * @param {boolean} [props.currentEffectShadow] - Inset-shadow effect while
  *   current (used with `variant="tab"`).
  * @param {boolean|import("ignore:preact").ComponentChild} [props.startIcon] - Icon
@@ -40710,6 +40945,11 @@ const LinkPlain = props => {
   const startIconEl = startIcon;
   const endIconEl = innerEndIcon;
 
+  // Bold by painting the glyphs unless asked for the bold face itself, because
+  // that one costs a second copy of the label in the element's text (see the
+  // css above).
+  const currentEffectBoldTechnique = currentEffectBold === true ? "text-shadow" : currentEffectBold || undefined;
+
   // Where the bar goes: said here, or once for the whole row by the <Nav>
   // around this link.
   const currentIndicatorAsked = currentIndicator ?? nav?.currentIndicator;
@@ -40799,7 +41039,7 @@ const LinkPlain = props => {
     onnavi_value: e => {
       e.detail.setValue(value);
     },
-    holdSpaceForStyle: currentEffectBold ? {
+    holdSpaceForStyle: currentEffectBoldTechnique === "hold-space" ? {
       fontWeight: "bold"
     } : undefined,
     preventSpaceUnderlines: true
@@ -40813,7 +41053,7 @@ const LinkPlain = props => {
     ,
 
     "data-variant": variant,
-    "data-current-effect-bold": currentEffectBold ? "" : undefined,
+    "data-current-effect-bold": currentEffectBoldTechnique,
     "data-current-effect-shadow": currentEffectShadow ? "" : undefined,
     "data-current-indicator-position": currentIndicatorPosition,
     "data-anchor": anchor ? "" : undefined,
@@ -41051,6 +41291,10 @@ const css$W = /* css */`@layer navi {
     --nav-current-indicator-size: 2px;
     --nav-current-indicator-color: var(--navi-link-current-indicator-color);
   }
+
+  .navi_nav .navi_link {
+    --link-current-indicator-color: var(--nav-current-indicator-color);
+  }
 }
 
 .navi_nav[data-nav-indicator] {
@@ -41061,8 +41305,14 @@ const css$W = /* css */`@layer navi {
           var(--nav-indicator-position-delta));
     --x-nav-indicator-length: calc(var(--nav-indicator-length) + var(--slide-travel-progress) *
           var(--nav-indicator-length-delta));
+    --x-nav-indicator-color: var(--nav-indicator-color, var(--nav-current-indicator-color));
+    --x-nav-indicator-color-toward: var(--nav-indicator-color-toward, var(--x-nav-indicator-color));
     z-index: 1;
-    background: var(--nav-current-indicator-color);
+    background: color-mix(in srgb,
+        var(--x-nav-indicator-color-toward)
+          calc(var(--slide-travel-progress) * var(--nav-indicator-toward-sign, 0) *
+              100%),
+        var(--x-nav-indicator-color));
     pointer-events: none;
     border-radius: .1px;
     position: absolute;
@@ -41127,6 +41377,11 @@ const css$W = /* css */`@layer navi {
 
   &[data-scrollable] {
     max-width: 100%;
+
+    & .navi_link {
+      white-space: nowrap;
+      flex: none;
+    }
   }
 
   &[data-scrollable][data-vertical] {
@@ -41162,13 +41417,13 @@ const css$W = /* css */`@layer navi {
   &[data-expand-x] {
     flex-grow: 1;
 
-    &:not([data-vertical]) .navi_link {
+    &:not([data-vertical]):not([data-scrollable]) .navi_link {
       flex: 1;
       justify-content: center;
     }
   }
 
-  &[data-expand-y][data-vertical] {
+  &[data-expand-y][data-vertical]:not([data-scrollable]) {
     & .navi_link {
       flex: 1;
     }
@@ -41256,6 +41511,10 @@ const positionOfCurrentIndicator = (currentIndicator, vertical) => {
  * @param {boolean|"top"|"bottom"|"left"|"right"} [props.currentIndicator] - the
  *   bar that says which tab one is on, said once here rather than on every
  *   `<Link>`. A link may still say otherwise for itself.
+ *   Its colour belongs to the tab it is under: `currentIndicatorColor` here is
+ *   what every tab inherits, and a tab declaring
+ *   `--nav-current-indicator-color` for itself is arrived at in its own colour
+ *   — the bar changes colour as it travels rather than once it lands.
  * @param {boolean} [props.currentIndicatorSlides=true] - whether that bar
  *   travels from the tab it was under to the tab it is under now, instead of
  *   going out on one and coming back on the other. For a nav made of routes it
@@ -41334,11 +41593,11 @@ const Nav = ({
     return navElement.querySelector(`[data-slide-target="${CSS.escape(towardArea)}"]`);
   };
 
-  // Where the trait is and where it is headed, as four numbers of pixels the
-  // CSS above interpolates between (see the .navi_nav_indicator rules). Written
-  // by hand rather than rendered: it is read off the row as it stands, and the
-  // travel it must agree with starts in the same frame the container publishes
-  // it — a render would land after the movement had begun.
+  // Where the trait is, where it is headed, and in which colour at each end —
+  // the numbers the CSS above interpolates between (see the .navi_nav_indicator
+  // rules). Written by hand rather than rendered: it is read off the row as it
+  // stands, and the travel it must agree with starts in the same frame the
+  // container publishes it — a render would land after the movement had begun.
   const paintIndicatorGeometry = () => {
     const navElement = navRef.current;
     const containerElement = slideContainerElementRef.current;
@@ -41360,13 +41619,29 @@ const Nav = ({
       position: tabElement.offsetLeft,
       length: tabElement.offsetWidth
     };
+    // The colour a tab asks the bar to be under it. Read from the tab and not
+    // from the row, so a tab that says nothing gives the row's value back —
+    // it inherits it (see the css above) — and one that says something gives
+    // its own. Empty when neither resolves to anything: the css then falls
+    // back on its own, rather than being handed a colour that is not one.
+    const colorOf = tabElement => getComputedStyle(tabElement).getPropertyValue("--link-current-indicator-color").trim();
+    const writeColor = (property, color) => {
+      if (color) {
+        navElement.style.setProperty(property, color);
+      } else {
+        navElement.style.removeProperty(property);
+      }
+    };
     const currentMeasure = measure(tabElements[currentIndex]);
     const towardArea = containerElement.getAttribute("data-slide-travel-toward");
     const towardIndex = tabElements.findIndex(tabElement => areaOf(tabElement) === towardArea);
     let positionDelta = 0;
     let lengthDelta = 0;
+    let towardSign = 0;
+    let towardColor = "";
     if (towardIndex !== -1 && towardIndex !== currentIndex) {
-      const towardMeasure = measure(tabElements[towardIndex]);
+      const towardTabElement = tabElements[towardIndex];
+      const towardMeasure = measure(towardTabElement);
       // What one box of travel is worth in pixels of this row, signed so that
       // the trait is exactly on the other tab when the progress is at its own
       // end: the container counts +1 when the picture leans on a slide sitting
@@ -41374,6 +41649,8 @@ const Nav = ({
       const sign = towardIndex > currentIndex ? -1 : 1;
       positionDelta = (towardMeasure.position - currentMeasure.position) * sign;
       lengthDelta = (towardMeasure.length - currentMeasure.length) * sign;
+      towardSign = sign;
+      towardColor = colorOf(towardTabElement);
     }
     const {
       style
@@ -41382,6 +41659,9 @@ const Nav = ({
     style.setProperty("--nav-indicator-length", currentMeasure.length);
     style.setProperty("--nav-indicator-position-delta", positionDelta);
     style.setProperty("--nav-indicator-length-delta", lengthDelta);
+    style.setProperty("--nav-indicator-toward-sign", towardSign);
+    writeColor("--nav-indicator-color", colorOf(tabElements[currentIndex]));
+    writeColor("--nav-indicator-color-toward", towardColor);
     navElement.setAttribute("data-nav-indicator-measured", "");
   };
   // Reached through a ref by everything watching the DOM below: those watchers
@@ -42857,7 +43137,15 @@ installImportMetaCssBuild(import.meta);/**
  *    keeps its bars against its own edges.
  * 2. **It gives its space back.** Being fixed it covers the content: without a
  *    reserve the end of a long page stays under it, unreachable. It publishes
- *    what it takes on <html> — see fixed_bar_space.js.
+ *    what it takes on <html> — see fixed_bar_space.js. An edge holds ONE bar:
+ *    bars sharing an edge are pinned to it one over the other, so the room
+ *    given back is the largest of them and never their sum — which is what the
+ *    two bars of a page transition need, and what makes a deliberately stacked
+ *    second bar unexpressible. A second strip under the first belongs to the
+ *    flow: `position: sticky` at `top: var(--navi-fixed-bar-space-top)`, which
+ *    puts it under whatever the bar of the moment is worth, and
+ *    `useTransitionCover` (nav/transition_cover.js) so the pictures of a route
+ *    movement are cut at it.
  * 3. **It reaches under the notch.** `env(safe-area-inset-*)` is padding, so
  *    the content is pushed in while the background keeps running to the edge of
  *    the screen. Across the bar that inset is added to `width`/`height` too, so
@@ -42972,7 +43260,9 @@ const FixedBarStyleCSSVars = {
  *   borderColor?: string,
  * }>}
  * @param {"top"|"bottom"|"left"|"right"} [props.area="top"] - Which edge of
- *   the window it is pinned to.
+ *   the window it is pinned to. One bar per edge: a second one does not stack
+ *   under the first, it sits on it (see this file's top comment for the strip
+ *   that does stack).
  * @param {string|number} [props.height] - For a bar on the top or bottom
  * @param {string|number} [props.width] - …and for one on a side. The safe-area
  *   inset is NOT part of it: it is added on top, so the content keeps the size
@@ -43610,255 +43900,868 @@ const DetailsFieldContent = ({
   });
 };
 
-/**
- * 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
- * mounted run inside the call too, exactly as they would on any other commit.
- *
- * For the caller that has to read the DOM it just asked for — measuring an
- * element whose content it mounts in the same breath — and cannot wait a tick
- * to do it, because what comes after is a browser event still in flight
- * (preventDefault, focus placement) that no longer accepts being answered late.
- *
- * `options.debounceRendering` is Preact's own hook for deciding *when* the
- * render queue drains; swapping it for "right now" for the duration of the call
- * is exactly how preact/compat implements React's flushSync. Reserve it for the
- * case above: rendering synchronously in the middle of an event gives up the
- * batching that makes several state changes one commit.
- */
-const flushSyncRendering = (fn) => {
-  const debounceRenderingPrevious = options.debounceRendering;
-  options.debounceRendering = (drainRenderQueue) => {
-    drainRenderQueue();
-  };
-  try {
-    fn();
-  } finally {
-    options.debounceRendering = debounceRenderingPrevious;
-  }
-};
-
-/**
- * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
- * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
- * of which of the two owns it.
- */
-
+// 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;
 
 /**
- * Whether a visibleRectEffect delivery is one that can have taken height away
- * from a popup, and so pushed whatever holds focus out of sight:
- * - "resize": the window/visual viewport settled — which is also how the
- *   on-screen keyboard arrives, overlay or not (window_size.js);
- * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
- * - "focusin": the focus-settled re-measure, for the room that changes with
- *   nothing announcing it (subscribeFocusSettled in window_size.js).
+ * Owns open/close decision-making for a popup (Dialog or Popover): guards
+ * against duplicate requests and notifies the popup owner's own reactions.
  *
- * Everything else is a scroll of one kind or another, where nothing got
- * smaller and scrolling the focused element back would fight the very gesture
- * that fired it.
- */
-const mayHaveHiddenFocus = (event) => {
-  const type = event?.type;
-  return (
-    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
-  );
-};
-
-/**
- * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
- * getting shorter has pushed it out.
+ * `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.
  *
- * The case this exists for: a field low in the scrolling body of a popup that
- * also has a footer (box.jsx — with a body, the body is the only thing that
- * scrolls and the footer is a sibling sitting right under it). Focusing the
- * field makes the browser scroll it into view, which it does against the
- * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
- * that height away. The body shrinks, its scrollTop does not move, so the
- * content slides down relative to the shorter scrollport and the field ends up
- * past its bottom edge — visually, swallowed by the footer. The browser does
- * not redo a scroll-into-view it already answered, so this does.
+ * Dialog/Popover also call `openController.requestClose(e, { isCancel })` for
+ * their own internal triggers (backdrop click, Escape).
  *
- * Scoped to the field's own scroll container (never the page): a popup traps
- * scrolling precisely so the document underneath cannot move, and a plain
- * scrollIntoView walks past a container whose scrollbar isn't visible — see
- * scrollIntoViewScoped's own doc.
+ * `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.
  *
- * "nearest": the smallest scroll that makes it visible, and none at all when
- * it already is — so this is free to call on every resize, and never fights
- * where the user had scrolled to.
+ * 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 keepFocusedElementVisible = (popupEl) => {
-  const { activeElement } = document;
-  if (!activeElement || activeElement === popupEl) {
-    return;
-  }
-  if (!popupEl.contains(activeElement)) {
-    return;
-  }
-  scrollIntoViewScoped(activeElement, { block: "nearest" });
-};
+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
 
-/**
- * Calls `onSettled` once `el`'s current CSS transition is over — via
- * `transitionend`, with a safety `setTimeout` fallback matching the longest
- * `transition-duration`, in case nothing actually transitions or an event is
- * missed.
- *
- * Returns a "cancel" function, so a caller whose instance has been superseded
- * (a fresh open/close about to set its own state) can keep this stale one from
- * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
- * did up front is that fresh call's business, not this one's.
- */
-const whenTransitionSettles = (el, onSettled) => {
-  let settled = false;
-  const onTransitionEnd = (transitionEvent) => {
-    if (transitionEvent.target === el) {
-      finish();
-    }
-  };
-  const stopWatching = () => {
-    settled = true;
-    el.removeEventListener("transitionend", onTransitionEnd);
-    clearTimeout(safetyTimeoutId);
-  };
-  const finish = () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
-    onSettled();
-  };
-  el.addEventListener("transitionend", onTransitionEnd);
-  const durationsInSeconds = getComputedStyle(el)
-    .transitionDuration.split(",")
-    .map((value) => parseFloat(value) || 0);
-  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
-  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
-  return () => {
-    if (settled) {
-      return;
-    }
-    stopWatching();
+  // 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 });
   };
-};
 
-/**
- * Disables pointer-events on `el` until its current CSS transition settles —
- * avoids the cursor changing/something becoming clickable while the popup is
- * still visually moving into or out of place.
- *
- * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
- * pointer-events, since a fresh call for the next open/close is about to set
- * its own state.
- */
-const suppressPointerEventsDuringTransition = (el) => {
-  el.style.pointerEvents = "none";
-  return whenTransitionSettles(el, () => {
-    el.style.pointerEvents = "";
-  });
-};
+  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;
 
-/**
- * Hides the backdrop, deferring until the browser's matching "click" fires
- * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
- * comment for why) — same capture-phase-on-document pattern as
- * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
- * can't safely replace: mouseup (and the click that follows it) can land an
- * arbitrarily long time after mousedown (the user is still holding the
- * button down), so a short timeout can fire first and hide the backdrop
- * before its own click ever arrives. A capture-phase listener on document
- * fires for every click regardless of what any bubble-phase handler does
- * downstream, so no fallback timer is needed.
- *
- * `hide` is the caller's own way to actually hide the backdrop
- * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
- * for a plain div) — this helper only owns the mousedown/click timing.
- *
- * Returns a disarm function (or undefined if hidden immediately), so a
- * fresh open can cancel a pending hide it's about to make redundant.
- */
-const armPointerDownOutsideClose = (closeEvent, hide) => {
-  const mousedownEvent = findEvent(closeEvent, "mousedown");
-  if (!mousedownEvent) {
-    hide();
-    return undefined;
-  }
-  const onClick = () => {
-    document.removeEventListener("click", onClick, { capture: true });
-    hide();
-  };
-  document.addEventListener("click", onClick, { capture: true });
-  return () => {
-    document.removeEventListener("click", onClick, { capture: true });
-  };
-};
+    prevent_reopen: {
+      const mousedownEvent = findEvent(closeEvent, "mousedown");
+      if (mousedownEvent) {
+        debugInteraction(
+          closeEvent,
+          `closed by mousedown -> ignore next click`,
+        );
+        armSuppressNextOpenRequest();
+        break prevent_reopen;
+      }
 
-/**
- * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
- * `prefix` plus a direction word), or `null` if both axes overlap the anchor
- * (no direction at all — that's `resolvedAnimationKind === "scaling"`
- * territory instead, see resolveAutoAnimationKind below).
- *
- * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
- * when docked) keeps the word as the compass direction the popup comes
- * from: placed "top" (a point/corner), it slides in from the top.
- * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
- * direction instead, the opposite compass point: placed "top" of the
- * anchor, it moves/grows up, away from the anchor (which sits below it).
- *
- * "inset-*"/"center" contribute no direction on their axis either way.
- */
-const resolveDirectionValue = (y, x, { prefix }) => {
-  const yWord =
-    y === "top"
-      ? prefix === "expand"
-        ? "up"
-        : "top"
-      : y === "bottom"
-        ? prefix === "expand"
-          ? "down"
-          : "bottom"
-        : null;
-  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
-  if (!yWord && !xWord) {
-    return null;
-  }
-  return yWord && xWord
-    ? `${prefix}-${yWord}-${xWord}`
-    : `${prefix}-${yWord || xWord}`;
-};
+      // 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.
 
-/**
- * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
- * — picked for any real anchor, or for a point/corner placed dead-center
- * (both positionArea axes overlapping — there's no sensible direction to
- * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
- * for any no-anchor/docked case (Dialog always, Popover's own custom
- * renderer when there's no real anchor), so this collapses to "scaling"
- * there only for the dead-center case, "sliding" otherwise. The two
- * "overlapping" booleans below describe the *positionArea* itself (a bare
- * word vs. "inset-"/"center"), not anything about the anchor — they'd
- * mean exactly the same thing even with no anchor at all, since it's the
- * position strategy, not the anchor, that decides whether there's a
- * direction to slide from.
- */
-const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
-  const yIsOverlapping =
-    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
-  const xIsOverlapping =
-    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
-  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
-};
+      // 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;
+      }
 
-/**
- * When a popup builds what it holds, and when it throws it away.
- *
- * A closed popup shows nothing, focuses nothing, and answers nothing: what it
- * holds is out of reach until it opens. Building that content at mount time
- * means a page carrying a handful of closed popups pays, on the very render
- * that decides how fast it appears, for content nobody has asked for — and
- * pays again on every subsequent measurement, since each of those nodes makes
+      // 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" };
+};
+
+/**
+ * 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) {
+            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);
+
+  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.
+    if (signal) {
+      signal.value = openController.opened;
+    }
+    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
+ * mounted run inside the call too, exactly as they would on any other commit.
+ *
+ * For the caller that has to read the DOM it just asked for — measuring an
+ * element whose content it mounts in the same breath — and cannot wait a tick
+ * to do it, because what comes after is a browser event still in flight
+ * (preventDefault, focus placement) that no longer accepts being answered late.
+ *
+ * `options.debounceRendering` is Preact's own hook for deciding *when* the
+ * render queue drains; swapping it for "right now" for the duration of the call
+ * is exactly how preact/compat implements React's flushSync. Reserve it for the
+ * case above: rendering synchronously in the middle of an event gives up the
+ * batching that makes several state changes one commit.
+ */
+const flushSyncRendering = (fn) => {
+  const debounceRenderingPrevious = options.debounceRendering;
+  options.debounceRendering = (drainRenderQueue) => {
+    drainRenderQueue();
+  };
+  try {
+    fn();
+  } finally {
+    options.debounceRendering = debounceRenderingPrevious;
+  }
+};
+
+/**
+ * Small, renderer-agnostic helpers shared by Popover and Dialog's own custom
+ * (non-top-layer) renderers — operate on a plain DOM element, no knowledge
+ * of which of the two owns it.
+ */
+
+
+/**
+ * Whether a visibleRectEffect delivery is one that can have taken height away
+ * from a popup, and so pushed whatever holds focus out of sight:
+ * - "resize": the window/visual viewport settled — which is also how the
+ *   on-screen keyboard arrives, overlay or not (window_size.js);
+ * - ELEMENT_SIZE_CHANGE: the popup's own box measured different;
+ * - "focusin": the focus-settled re-measure, for the room that changes with
+ *   nothing announcing it (subscribeFocusSettled in window_size.js).
+ *
+ * Everything else is a scroll of one kind or another, where nothing got
+ * smaller and scrolling the focused element back would fight the very gesture
+ * that fired it.
+ */
+const mayHaveHiddenFocus = (event) => {
+  const type = event?.type;
+  return (
+    type === "resize" || type === ELEMENT_SIZE_CHANGE || type === "focusin"
+  );
+};
+
+/**
+ * Scrolls whatever holds focus inside `popupEl` back into view, if the popup
+ * getting shorter has pushed it out.
+ *
+ * The case this exists for: a field low in the scrolling body of a popup that
+ * also has a footer (box.jsx — with a body, the body is the only thing that
+ * scrolls and the footer is a sibling sitting right under it). Focusing the
+ * field makes the browser scroll it into view, which it does against the
+ * popup's height AT THAT MOMENT; the on-screen keyboard then opens and takes
+ * that height away. The body shrinks, its scrollTop does not move, so the
+ * content slides down relative to the shorter scrollport and the field ends up
+ * past its bottom edge — visually, swallowed by the footer. The browser does
+ * not redo a scroll-into-view it already answered, so this does.
+ *
+ * Scoped to the field's own scroll container (never the page): a popup traps
+ * scrolling precisely so the document underneath cannot move, and a plain
+ * scrollIntoView walks past a container whose scrollbar isn't visible — see
+ * scrollIntoViewScoped's own doc.
+ *
+ * "nearest": the smallest scroll that makes it visible, and none at all when
+ * it already is — so this is free to call on every resize, and never fights
+ * where the user had scrolled to.
+ */
+const keepFocusedElementVisible = (popupEl) => {
+  const { activeElement } = document;
+  if (!activeElement || activeElement === popupEl) {
+    return;
+  }
+  if (!popupEl.contains(activeElement)) {
+    return;
+  }
+  scrollIntoViewScoped(activeElement, { block: "nearest" });
+};
+
+/**
+ * Calls `onSettled` once `el`'s current CSS transition is over — via
+ * `transitionend`, with a safety `setTimeout` fallback matching the longest
+ * `transition-duration`, in case nothing actually transitions or an event is
+ * missed.
+ *
+ * Returns a "cancel" function, so a caller whose instance has been superseded
+ * (a fresh open/close about to set its own state) can keep this stale one from
+ * firing later. Cancelling only stops `onSettled`: undoing whatever the caller
+ * did up front is that fresh call's business, not this one's.
+ */
+const whenTransitionSettles = (el, onSettled) => {
+  let settled = false;
+  const onTransitionEnd = (transitionEvent) => {
+    if (transitionEvent.target === el) {
+      finish();
+    }
+  };
+  const stopWatching = () => {
+    settled = true;
+    el.removeEventListener("transitionend", onTransitionEnd);
+    clearTimeout(safetyTimeoutId);
+  };
+  const finish = () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+    onSettled();
+  };
+  el.addEventListener("transitionend", onTransitionEnd);
+  const durationsInSeconds = getComputedStyle(el)
+    .transitionDuration.split(",")
+    .map((value) => parseFloat(value) || 0);
+  const longestDurationMs = Math.max(0, ...durationsInSeconds) * 1000;
+  const safetyTimeoutId = setTimeout(finish, longestDurationMs + 50);
+  return () => {
+    if (settled) {
+      return;
+    }
+    stopWatching();
+  };
+};
+
+/**
+ * Disables pointer-events on `el` until its current CSS transition settles —
+ * avoids the cursor changing/something becoming clickable while the popup is
+ * still visually moving into or out of place.
+ *
+ * Returns whenTransitionSettles' own "cancel" function: it doesn't restore
+ * pointer-events, since a fresh call for the next open/close is about to set
+ * its own state.
+ */
+const suppressPointerEventsDuringTransition = (el) => {
+  el.style.pointerEvents = "none";
+  return whenTransitionSettles(el, () => {
+    el.style.pointerEvents = "";
+  });
+};
+
+/**
+ * Hides the backdrop, deferring until the browser's matching "click" fires
+ * when `closeEvent` was triggered by a mousedown (see popover.jsx's top
+ * comment for why) — same capture-phase-on-document pattern as
+ * armSuppressNextOpenRequest in open_controller.js, which a plain timeout
+ * can't safely replace: mouseup (and the click that follows it) can land an
+ * arbitrarily long time after mousedown (the user is still holding the
+ * button down), so a short timeout can fire first and hide the backdrop
+ * before its own click ever arrives. A capture-phase listener on document
+ * fires for every click regardless of what any bubble-phase handler does
+ * downstream, so no fallback timer is needed.
+ *
+ * `hide` is the caller's own way to actually hide the backdrop
+ * (`hidePopover()` for a top-layer backdrop, a plain `style.display = "none"`
+ * for a plain div) — this helper only owns the mousedown/click timing.
+ *
+ * Returns a disarm function (or undefined if hidden immediately), so a
+ * fresh open can cancel a pending hide it's about to make redundant.
+ */
+const armPointerDownOutsideClose = (closeEvent, hide) => {
+  const mousedownEvent = findEvent(closeEvent, "mousedown");
+  if (!mousedownEvent) {
+    hide();
+    return undefined;
+  }
+  const onClick = () => {
+    document.removeEventListener("click", onClick, { capture: true });
+    hide();
+  };
+  document.addEventListener("click", onClick, { capture: true });
+  return () => {
+    document.removeEventListener("click", onClick, { capture: true });
+  };
+};
+
+/**
+ * Maps a positionArea y/x pair to a concrete `navi-animation` value (a
+ * `prefix` plus a direction word), or `null` if both axes overlap the anchor
+ * (no direction at all — that's `resolvedAnimationKind === "scaling"`
+ * territory instead, see resolveAutoAnimationKind below).
+ *
+ * `prefix: "slide-from"` (used with no real anchor — Dialog always, Popover
+ * when docked) keeps the word as the compass direction the popup comes
+ * from: placed "top" (a point/corner), it slides in from the top.
+ * `prefix: "expand"` (a real anchor, Popover-only) uses the motion/growth
+ * direction instead, the opposite compass point: placed "top" of the
+ * anchor, it moves/grows up, away from the anchor (which sits below it).
+ *
+ * "inset-*"/"center" contribute no direction on their axis either way.
+ */
+const resolveDirectionValue = (y, x, { prefix }) => {
+  const yWord =
+    y === "top"
+      ? prefix === "expand"
+        ? "up"
+        : "top"
+      : y === "bottom"
+        ? prefix === "expand"
+          ? "down"
+          : "bottom"
+        : null;
+  const xWord = x === "left" ? "left" : x === "right" ? "right" : null;
+  if (!yWord && !xWord) {
+    return null;
+  }
+  return yWord && xWord
+    ? `${prefix}-${yWord}-${xWord}`
+    : `${prefix}-${yWord || xWord}`;
+};
+
+/**
+ * Shared `animation="auto"`/`true` resolution: "scaling" reads best overall
+ * — picked for any real anchor, or for a point/corner placed dead-center
+ * (both positionArea axes overlapping — there's no sensible direction to
+ * slide from in that case). "sliding" otherwise. `anchor` is `undefined`
+ * for any no-anchor/docked case (Dialog always, Popover's own custom
+ * renderer when there's no real anchor), so this collapses to "scaling"
+ * there only for the dead-center case, "sliding" otherwise. The two
+ * "overlapping" booleans below describe the *positionArea* itself (a bare
+ * word vs. "inset-"/"center"), not anything about the anchor — they'd
+ * mean exactly the same thing even with no anchor at all, since it's the
+ * position strategy, not the anchor, that decides whether there's a
+ * direction to slide from.
+ */
+const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
+  const yIsOverlapping =
+    parsedPositionArea.y !== "top" && parsedPositionArea.y !== "bottom";
+  const xIsOverlapping =
+    parsedPositionArea.x !== "left" && parsedPositionArea.x !== "right";
+  return anchor || (yIsOverlapping && xIsOverlapping) ? "scaling" : "sliding";
+};
+
+/**
+ * When a popup builds what it holds, and when it throws it away.
+ *
+ * A closed popup shows nothing, focuses nothing, and answers nothing: what it
+ * holds is out of reach until it opens. Building that content at mount time
+ * means a page carrying a handful of closed popups pays, on the very render
+ * that decides how fast it appears, for content nobody has asked for — and
+ * pays again on every subsequent measurement, since each of those nodes makes
  * the document the rest of the page queries bigger.
  *
  * So the content is built when the popup first opens, and stays built from
@@ -43898,7 +44801,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(
@@ -43938,30 +44841,48 @@ const usePopupContentMount = (
     }
   }, [mountedAlways]);
 
-  return contentMounted ? children : null;
+  return contentMounted;
 };
 
 installImportMetaCssBuild(import.meta);/**
  * Expandable: an in-flow disclosure — a UI part that reveals a content part.
  * It covers the same ground as <Details> with structural differences:
  *
- * - the two parts are explicit and free to order/orient:
+ * - the two parts are explicit, and are Boxes:
  *
  *     <Expandable>
  *       <Expandable.UI>See more</Expandable.UI>
  *       <Expandable.Content>…</Expandable.Content>
  *     </Expandable>
  *
- *   Content after UI expands below (the <details> shape), Content before UI
- *   expands above; `layout="column"` puts the parts side by side (sharing
- *   their height), the content then expanding horizontally. The marker
- *   chevron follows: it points right while closed and toward where the
- *   content went while open (down, up, or left). The common shape has a
- *   shorthand: `ui` prop + children as content.
+ *   `openDirection` decides where the content is revealed — down (the
+ *   <details> shape) or up, left or right in `layout="column"`, where the
+ *   parts sit side by side sharing their height. It places the parts too
+ *   (CSS `order`), so an expandable revealing upward can still be written UI
+ *   first, and an expandable with no UI part at all — driven from
+ *   `open`/`signal` by a toggle of the app's own — can say which way it
+ *   opens. The marker chevron follows: it points right while closed and
+ *   toward where the content went while open (down, up, or left). The common
+ *   shape has a shorthand: `ui` prop + children as content.
+ *
  * - the UI part is the focusable toggle itself (role button, Space/Enter,
  *   arrow keys) and accepts any markup: controls inside it keep their own
  *   behavior, the marker is purely decorative.
  *
+ * 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.
+ *
+ * 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
  * answers the same click on its own layer, moving nothing, which is usually
@@ -43980,17 +44901,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.
@@ -44001,6 +44923,10 @@ const css$Q = /* css */`.navi_expandable {
   display: flex;
   position: relative;
 
+  &[data-open-direction="down"] > .navi_expandable_content_container, &[data-open-direction="right"] > .navi_expandable_content_container, &[data-open-direction="up"] > .navi_expandable_ui, &[data-open-direction="left"] > .navi_expandable_ui {
+    order: 1;
+  }
+
   & > .navi_expandable_ui {
     cursor: pointer;
     user-select: none;
@@ -44046,7 +44972,7 @@ const css$Q = /* css */`.navi_expandable {
     grid-template-rows: 1fr;
   }
 
-  &[data-content-first]:not([data-layout="column"]) > .navi_expandable_content_container {
+  &[data-open-direction="up"] > .navi_expandable_content_container {
     clip-path: inset(0 -9999px -9999px);
     align-content: end;
 
@@ -44087,7 +45013,7 @@ const css$Q = /* css */`.navi_expandable {
       grid-template-rows: none;
     }
 
-    &[data-content-first] > .navi_expandable_content_container {
+    &[data-open-direction="left"] > .navi_expandable_content_container {
       clip-path: inset(-9999px -9999px 0 0);
       justify-content: end;
 
@@ -44138,11 +45064,14 @@ 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,
  *   animation?: boolean,
  *   layout?: "row" | "column",
+ *   openDirection?: "down" | "up" | "right" | "left",
  *   autoFocus?: boolean,
  *   maxContentHeight?: string | number,
  *   mount?: "always" | "from-first-open" | "while-opened",
@@ -44158,10 +45087,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.
@@ -44175,15 +45113,23 @@ const useExpandableContext = partName => {
  * @param layout - `"row"` (default): the parts stack, the content expands
  *   vertically. `"column"`: the parts sit side by side sharing their height,
  *   the content expands horizontally next to the UI part.
- * @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 openDirection - Where the content is revealed: `"down"` (default) or
+ *   `"up"` in the stacked layout, `"right"` (default) or `"left"` in
+ *   `layout="column"`. It also places the parts, so the direction holds
+ *   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 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
@@ -44194,16 +45140,22 @@ 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,
     layout,
+    openDirection,
     autoFocus,
     maxContentHeight,
     mount = MOUNT_DEFAULT,
@@ -44213,35 +45165,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.
@@ -44255,10 +45215,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
@@ -44270,50 +45227,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 = () => {
@@ -44321,119 +45375,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), move the focus, and
-  // set up the reveal. Skipped on mount — nothing changed, so neither the
-  // event nor a transition 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 undefined;
-    }
-    const root = rootRef.current;
-    root.dispatchEvent(createToggleEvent(opened));
-    if (opened) {
-      if (autoFocus) {
-        const firstFocusableElement = findFirstFocusableInContent();
-        if (firstFocusableElement) {
-          firstFocusableElement.focus();
-        }
-      }
-    } else {
-      const focusedBeforeClose = focusedBeforeCloseRef.current;
-      focusedBeforeCloseRef.current = null;
-      if (focusedBeforeClose && contentContainerRef.current && contentContainerRef.current.contains(focusedBeforeClose)) {
-        uiRef.current.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 effect 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;
-  }, [opened]);
-  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
@@ -44457,17 +45403,16 @@ 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;
     }
+    // The shortcuts all speak about the UI part — opening from it, stepping
+    // into the content, stepping back to it. Without one the expandable is
+    // driven from outside and the keys belong to whatever drives it.
+    if (!uiRef.current) {
+      return;
+    }
     // A nested expandable (deeper, so heard first) already answered this key.
     if (keyboardEvent.defaultPrevented) {
       return;
@@ -44486,9 +45431,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();
@@ -44496,20 +45441,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);
       }
     }
   };
@@ -44528,7 +45474,7 @@ const Expandable = props => {
         return;
       }
     }
-    toggleTo(!openedRef.current);
+    toggle(clickEvent);
   };
 
   // Space/Enter on the UI part itself (role button) — a key pressed on a
@@ -44545,27 +45491,25 @@ const Expandable = props => {
     } = keyboardEvent;
     if (key === " " || key === "Enter") {
       keyboardEvent.preventDefault();
-      toggleTo(!openedRef.current);
+      toggle(keyboardEvent);
     }
   };
 
-  // Where the content went, so the marker can point at it while open (closed
-  // always points right): below by default, above when the content part comes
-  // first, beside for layout="column" (the chevron then points back toward
-  // the UI: left).
-  const childArray = toChildArray(children);
-  const firstPart = childArray.find(child => child && (child.type === ExpandableUI || child.type === ExpandableContent));
-  const hasParts = Boolean(firstPart);
-  const contentFirst = hasParts && firstPart.type === ExpandableContent;
-  const openDirection = isColumn ? "left" : contentFirst ? "up" : "down";
+  // Only the two directions the layout has room for: a column layout reveals
+  // sideways, a stacked one vertically.
+  const revealDirection = isColumn ? openDirection === "left" ? "left" : "right" : openDirection === "up" ? "up" : "down";
+  // While open the marker points at the content, while closed always right.
+  // In a column layout it points back toward the UI part whichever side the
+  // content took, "right" being the closed direction already.
+  const markerDirection = isColumn ? "left" : revealDirection;
   const expandableContextValue = {
     opened,
     loading: loading || hasAction && actionLoading,
     contentMounted,
     hasAction,
     effectiveAction,
-    openDirection,
-    toggleTo,
+    markerDirection,
+    openController,
     onUIClick,
     onUIPointerDown,
     onUIKeyDown,
@@ -44574,12 +45518,9 @@ const Expandable = props => {
     contentId
   };
 
-  // Explicit parts win; the `ui` prop + children is the shorthand for the
-  // common shape (UI above, content below). Parts are cloned on every render:
-  // reference-stable children would be bailed out of the commit, leaving
-  // their context subscription to re-render them asynchronously — after the
-  // [opened] effect above, which measures the content they render.
-  const body = hasParts ? childArray.map(child => child && (child.type === ExpandableUI || child.type === ExpandableContent) ? cloneElement(child) : child) : jsxs(Fragment$1, {
+  // The `ui` prop is the shorthand for the common shape: it names the UI part
+  // and children are the content. Without it the children ARE the parts.
+  const body = ui === undefined ? children : jsxs(Fragment$1, {
     children: [jsx(ExpandableUI, {
       children: ui
     }), jsx(ExpandableContent, {
@@ -44591,7 +45532,7 @@ const Expandable = props => {
     baseClassName: "navi_expandable",
     "aria-expanded": opened ? "true" : "false",
     "data-layout": isColumn ? "column" : undefined,
-    "data-content-first": contentFirst ? "" : undefined,
+    "data-open-direction": revealDirection,
     "data-animation": animation ? "" : undefined,
     "data-settled": settled ? "" : undefined,
     "data-content-scrolls": maxContentHeight === undefined ? undefined : "",
@@ -44606,11 +45547,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);
@@ -44631,32 +45578,35 @@ const Expandable = props => {
  * The always-visible part that reveals the content: the focusable toggle
  * itself (role button — click, Space/Enter, arrow keys), holding the marker
  * plus whatever it is given — any markup, a function of `{ open }` included.
- * Controls inside it keep their own behavior and do not toggle. Its position
- * among the parts decides where the content goes (before the content: content
- * below/right; after it: content above/left).
+ * Controls inside it keep their own behavior and do not toggle. A Box, so it
+ * takes the layout and style props every Box takes.
  *
  * @type {import("ignore:preact").FunctionComponent<{
+ *   marker?: false | import("ignore:preact").ComponentChildren,
  *   children?: import("ignore:preact").ComponentChildren | ((state: { open: boolean }) => import("ignore:preact").ComponentChildren),
  * }>}
+ * @param marker - The chevron drawn before the label. `false` removes it (a UI
+ *   part that is already an icon has no room for one); any node replaces it.
  */
 const ExpandableUI = ({
+  marker,
   children,
   ...rest
 }) => {
   const {
     opened,
     loading,
-    openDirection,
-    toggleTo,
+    markerDirection,
+    openController,
     onUIClick,
     onUIPointerDown,
     onUIKeyDown,
     uiRef,
     contentId
   } = useExpandableContext("UI");
-  return jsxs("div", {
+  return jsxs(Box, {
     ref: uiRef,
-    className: "navi_expandable_ui",
+    baseClassName: "navi_expandable_ui",
     role: "button",
     tabIndex: 0,
     "aria-expanded": opened,
@@ -44674,21 +45624,23 @@ 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: [jsx("span", {
+    children: [marker === false ? null : jsx("span", {
       className: "navi_expandable_marker",
       "aria-hidden": "true",
-      children: jsx(SummaryMarker, {
+      children: marker === undefined ? jsx(SummaryMarker, {
         open: opened,
         loading: loading,
-        openDirection: openDirection
-      })
+        openDirection: markerDirection
+      }) : marker
     }), jsx("div", {
       className: "navi_expandable_ui_label",
       children: typeof children === "function" ? children({
@@ -44699,8 +45651,9 @@ const ExpandableUI = ({
 };
 
 /**
- * The revealed part. With an `action` on the Expandable, children may be a
- * function `(data) => ui` or a branches object — see ActionRenderer.
+ * The revealed part, a Box like the UI part. With an `action` on the
+ * Expandable, children may be a function `(data) => ui` or a branches object —
+ * see ActionRenderer.
  *
  * @type {import("ignore:preact").FunctionComponent<{}>}
  */
@@ -44723,10 +45676,10 @@ const ExpandableContent = ({
       children: children
     });
   }
-  return jsx("div", {
+  return jsx(Box, {
     ref: contentContainerRef,
     id: contentId,
-    className: "navi_expandable_content_container",
+    baseClassName: "navi_expandable_content_container",
     inert: opened ? undefined : true,
     ...rest,
     children: jsx("div", {
@@ -54346,806 +55299,212 @@ const useInputGroup = (ref) => {
         const allSelected =
           active.selectionStart === 0 &&
           active.selectionEnd === active.value.length;
-        const atEnd =
-          allSelected ||
-          (active.selectionStart === active.value.length &&
-            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 atEnd =
+          allSelected ||
+          (active.selectionStart === active.value.length &&
+            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;
       }
-      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);
 };
 
 /**
@@ -56691,10 +57050,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);
@@ -58136,10 +58495,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();
@@ -80746,5 +81105,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map