@jsenv/navi 0.29.14 → 0.29.16

package/dist/jsenv_navi.js

@@ -6490,6 +6490,10 @@ const POSITION_PROPS = {
   fixed: applyToCssPropWhenTruthy("position", "fixed", "static"),
   sticky: applyToCssPropWhenTruthy("position", "sticky", "static"),
   zIndex: PASS_THROUGH,
+  // Keeps the zIndex values used inside this box local to it — see
+  // docs/z_index.md: a z-index that opens no stacking context competes with
+  // the whole page, fixed bars included.
+  isolation: PASS_THROUGH,
   order: PASS_THROUGH,
   left: (value) => {
     return { left: value === true ? 0 : value };
@@ -8905,6 +8909,20 @@ import.meta.css = [/* css */`
      between them — and a control flush against the edge of a scrolling area
      overflows it (a focus outline is drawn outside the control it belongs to)
      and raises a scrollbar of its own. */
+  /* A control sitting right against the edge of what scrolls must keep its
+     loading outline within its own box: the outline is drawn a couple pixels
+     outside the control (see loading_outline.jsx), and that bleed alone is
+     enough to make the area scrollable — a scrollbar appearing and disappearing
+     as things load. Only what the scroller directly contains is against that
+     edge; anything nested deeper has room around it and keeps the outline it
+     asked for, hence the child combinators. Written on the outline itself
+     rather than on the control, because the var inherits: setting it on a
+     container would reach every control below it, edge or not. */
+  [data-scrollable] > .navi_loading_outline_wrapper,
+  [data-scrollable] > * > .navi_loading_outline_wrapper {
+    --loading-outline-min-inset: 0px;
+  }
+
   [data-scrollable] {
     overflow: var(--x-scrollable-overflow, auto);
 
@@ -10057,6 +10075,15 @@ const LoadingOutlineUI = props => {
   } = props;
   const shouldShowSpinner = useDebounceTrue(loading, debounce);
   const rectangleRef = useRef(null);
+
+  // Nothing in the DOM until something actually loads: the box below is
+  // absolutely positioned slightly outside the control, which is enough to
+  // make an ancestor scrollable (a 1px scrollbar on a control sitting against
+  // the edge of a scrolling area). A control that never loads must not pay for
+  // a decoration it will never draw.
+  if (!loading) {
+    return children;
+  }
   let insetTop = inset + spacingTop + marginTop;
   let insetRight = inset + spacingRight + marginRight;
   let insetBottom = inset + spacingBottom + marginBottom;
@@ -10087,7 +10114,7 @@ const LoadingOutlineUI = props => {
         "--loading-rectangle-bottom": `${insetBottom}px`,
         "--loading-rectangle-left": `${insetLeft}px`
       },
-      children: loading && jsx(LoadingIndicatorFluid, {
+      children: jsx(LoadingIndicatorFluid, {
         visuallyHidden: !shouldShowSpinner,
         radius: radius,
         color: color,
@@ -13764,6 +13791,25 @@ const css$V = /* css */`
  * @param {Function} [options.onClose] - Callback when callout is closed
  * @param {boolean} [options.closeOnClickOutside] - Whether to close on outside clicks (defaults to true for "info" status)
  * @param {boolean} [options.debug=false] - Enable debug logging
+ *
+ * Positioning is also driven by attributes read on the anchor element itself
+ * (so markup can tune a callout without going through this function):
+ * - `data-callout-arrow-x="start" | "center" | "end"`: where the arrow points
+ *   horizontally along the anchor — `start`/`end` target the left/right edge of
+ *   the anchor's text content (inside its borders and padding), `center` targets
+ *   the middle of the anchor. Without it the arrow follows the anchor's computed
+ *   `text-align` (`center` → center, `right`/`end` → end, anything else → start),
+ *   so it lands where the text visually begins. The arrow is always clamped to
+ *   stay within the callout's own rounded corners, so a value pointing outside
+ *   the callout's width sticks to the nearest side.
+ * - `data-callout-position="top" | "bottom" | …`: preferred side of the anchor
+ *   (defaults to `"bottom"`, flipped when there isn't enough space).
+ * - `data-callout-position-fixed`: opt out of that flipping.
+ * - `data-callout-anchor="<selector>"`: point at an inner element instead of the
+ *   anchor itself.
+ * - `data-callout-point-to-border-box` / `data-callout-point-to-content-box`:
+ *   which box the callout aligns to.
+ * - `data-callout-viewport-spacing="<number>"`: minimum gap with the viewport edges.
  * @returns {Object} - Callout object with properties:
  *   - {Function} close - Function to close the callout
  *   - {Function} update - Function to update message and options
@@ -17775,6 +17821,104 @@ const useExecuteAction = (
   return executeAction;
 };
 
+/**
+ * A control placed inside a region that expands on click — a `<summary>`, an
+ * accordion header carrying `aria-expanded` — has its click read twice: once by
+ * the control it was aimed at, once by the region around it. The second reading
+ * is never wanted; a menu opened from a collapsed row should not also unfold the
+ * row.
+ *
+ * Cancelling the click is the only way to stop the region: a `<summary>` runs
+ * its default action after the propagation, so `stopPropagation` does not reach
+ * it. And it can only be done once the control has taken the click for itself —
+ * navi refuses an interaction on an already-cancelled event (see
+ * `onRequestInteraction`), so cancelling any earlier silences the control
+ * instead of the region.
+ *
+ * That moment — right after an interaction was allowed — only exists inside
+ * navi, which is why the cancellation lives here rather than in application code.
+ */
+
+const CLICK_TO_EXPAND_SELECTOR = "summary, [aria-expanded]";
+
+/**
+ * Cancels `event` when the control consumed a click that a surrounding
+ * click-to-expand region would otherwise read as "unfold me".
+ *
+ * Does nothing when cancelling the click would also cancel what the control
+ * itself does with it (a link navigating, a checkbox toggling): there, the two
+ * behaviours cannot be separated and the control's own comes first.
+ */
+const preventClickToExpand = (element, event) => {
+  if (!event || event.type !== "click") {
+    return;
+  }
+  if (event.defaultPrevented) {
+    return;
+  }
+  if (!clickDefaultActionIsInert(element, event)) {
+    return;
+  }
+  const parentElement = element.parentElement;
+  if (!parentElement) {
+    return;
+  }
+  // From the parent: a control that opens something carries its own
+  // `aria-expanded` and would find itself.
+  const clickToExpandRegion = parentElement.closest(CLICK_TO_EXPAND_SELECTOR);
+  if (!clickToExpandRegion) {
+    return;
+  }
+  event.preventDefault();
+};
+
+const clickDefaultActionIsInert = (element, event) => {
+  if (!isInertOnClick(element)) {
+    return false;
+  }
+  // The activation belongs to what was clicked, which can be deeper than the
+  // control host (a button inside it) or above it (a label wrapping it).
+  const { target } = event;
+  if (target && target !== element && target.nodeType === 1) {
+    let ancestor = target;
+    while (ancestor) {
+      if (!isInertOnClick(ancestor)) {
+        return false;
+      }
+      ancestor = ancestor.parentElement;
+    }
+  }
+  return true;
+};
+
+const NON_INERT_INPUT_TYPE_SET = new Set([
+  "checkbox",
+  "radio",
+  "submit",
+  "reset",
+  "image",
+  "file",
+]);
+
+const isInertOnClick = (element) => {
+  const { tagName } = element;
+  if (tagName === "A" || tagName === "AREA") {
+    return !element.hasAttribute("href");
+  }
+  if (tagName === "LABEL") {
+    // A label forwards the click to its control, whose activation would be
+    // cancelled along with the click.
+    return false;
+  }
+  if (tagName === "INPUT") {
+    return !NON_INERT_INPUT_TYPE_SET.has(element.type);
+  }
+  if (tagName === "BUTTON") {
+    return element.type === "button";
+  }
+  return true;
+};
+
 const BUSY_CONSTRAINT = {
   name: "busy",
   messageAttribute: "data-busy-message",
@@ -18143,6 +18287,9 @@ const onRequestInteraction = (
   debugInteraction(event, `"${name}" allowed`);
   allowed?.();
   always?.();
+  // The click served this control; it must not serve a second time whatever
+  // unfolds around it (see click_to_expand.js).
+  preventClickToExpand(controlHost, event);
   return true;
 };
 
@@ -25713,8 +25860,8 @@ const css$T = /* css */`
  *   the screen and a centered box ends up both cramped and out of thumb
  *   reach, while under a mouse the centered box is already the right shape —
  *   hence a prop that only ever does something on touch. It supplies defaults
- *   for `positionArea`, `marginWithContainer` and `expandX`, so any of the
- *   three can still be pinned explicitly. Keyed off `(pointer: coarse)` (the
+ *   for `positionArea`, `marginWithContainer`, `expandX` and `scrollCapture`,
+ *   so any of them can still be pinned explicitly. Keyed off `(pointer: coarse)` (the
  *   input device, not a width breakpoint — a narrow desktop window is still a
  *   mouse) via `coarsePointerSignal`, so it re-resolves live.
  * @param {string} [props.positionArea="center"] - Where to dock the dialog
@@ -25751,7 +25898,7 @@ const css$T = /* css */`
  *   A `layer="local"` dialog always locks its own positioned ancestor's
  *   scroll while open (its backdrop only covers the scrollport, so scrolling
  *   there would reveal uncovered content); this prop extends the lock to the
- *   whole page.
+ *   whole page. Defaults to `true` for a dialog docked by `dockedOnTouch`.
  * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`} [props.animation]
  *   - `true`/`"auto"` resolves to `"scaling"` for a centered `positionArea`,
  *   or a concrete `"slide-from-*"` direction otherwise. Any other explicit
@@ -25920,7 +26067,11 @@ const DialogLocal = props => {
 const DOCKED = {
   positionArea: "bottom",
   marginWithContainer: 0,
-  expandX: true
+  expandX: true,
+  // A sheet resting on the bottom edge is dragged with a thumb, and a drag that
+  // runs past its own edge must not land on the page behind it: the same
+  // reasoning as "bottom" above, applied to the gesture instead of the shape.
+  scrollCapture: true
 };
 
 // The first control inside `dialogEl` that is mid-action, if any. Walks the
@@ -25966,7 +26117,7 @@ const useDialogProps = props => {
     // there's no native inert-ing, so the real backdrop below is what
     // actually makes "capture"/"none" behave the same way here too.
     pointerInteractionOutsideEffect = "close",
-    scrollCapture,
+    scrollCapture: scrollCaptureProp,
     animation,
     // Only ever affects --anchor-width/--anchor-height (see this file's top
     // comment) — Dialog's own positioning is never relative to it.
@@ -26001,6 +26152,7 @@ const useDialogProps = props => {
   const expandXUnset = expand === undefined && expandXProp === undefined;
   const expandX = expandXUnset ? isDocked && DOCKED.expandX : Boolean(expand) || Boolean(expandXProp);
   const expandY = Boolean(expand) || Boolean(expandYProp);
+  const scrollCapture = scrollCaptureProp ?? (isDocked ? DOCKED.scrollCapture : false);
   const backdropRef = useRef();
   // Disarms a still-pending backdrop hide from a previous close (see
   // armPointerDownOutsideClose below) — same pattern as popover.jsx's own.
@@ -26560,8 +26712,13 @@ const DIALOG_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible",
 
 // Lets consumers pass animationDuration="0.5s" as a regular prop; Box maps
 // it to the CSS var for us (see box.jsx's styleCSSVars handling).
+// borderRadius goes through --dialog-border-radius rather than the
+// border-radius property itself so the flush-corner rules above (a plain
+// stylesheet) can still square the corners that land on the container's own —
+// an inline border-radius would outrank them.
 const DIALOG_STYLE_CSS_VARS = {
   animationDuration: "--popup-animation-duration",
+  borderRadius: "--dialog-border-radius",
   minWidth: "--dialog-min-width",
   maxWidth: "--dialog-max-width",
   minHeight: "--dialog-min-height",
@@ -31521,12 +31678,30 @@ const useActionAsyncData = (action, {
   const runningState = action.runningStateSignal.peek();
   const [, setTick] = useState(0);
   useEffect(() => {
-    return action.runningStateSignal.subscribe(state => {
+    const unsubscribeFromRunningState = action.runningStateSignal.subscribe(state => {
       if (state === RUNNING) {
         dismissedActionWeakSet.delete(action);
       }
       setTick(n => n + 1);
     });
+    // The data does not come from this action's runs alone: dataSignal is a
+    // computed over the resource store, so an other action writing that store
+    // (a PUT upserting an item that a GET_MANY list already holds) changes the
+    // data while this action stays COMPLETED. Subscribing here re-renders
+    // through the same controlled path as the run state, instead of `.value`.
+    let dataNotificationIsInitial = true;
+    const unsubscribeFromData = action.dataSignal.subscribe(() => {
+      if (dataNotificationIsInitial) {
+        // subscribe() calls back synchronously with the current value
+        dataNotificationIsInitial = false;
+        return;
+      }
+      setTick(n => n + 1);
+    });
+    return () => {
+      unsubscribeFromRunningState();
+      unsubscribeFromData();
+    };
   }, []);
   if (runningState === COMPLETED) {
     return [action.dataSignal.peek(), false, undefined];
@@ -35842,10 +36017,13 @@ installImportMetaCssBuild(import.meta);const css$N = /* css */`
       --link-background: unset;
       --link-background-current: unset;
       --link-background-selected: light-dark(#bbdefb, #2563eb);
-      --link-color: rgb(0, 0, 238);
-      --link-color-visited: color-mix(in srgb, var(--link-color), black 40%);
+      --link-color: var(--navi-link-color);
+      --link-color-visited: var(
+        --navi-link-color-visited,
+        color-mix(in srgb, var(--link-color), black 40%)
+      );
 
-      --link-color-pressed: red;
+      --link-color-pressed: var(--navi-link-color-pressed);
       --link-text-decoration: underline;
       --link-text-decoration-hover: var(--link-text-decoration);
       --link-cursor: pointer;
@@ -35854,7 +36032,7 @@ installImportMetaCssBuild(import.meta);const css$N = /* css */`
 
       --link-current-indicator-size: 2px;
       --link-current-indicator-spacing: 0;
-      --link-current-indicator-color: rgb(205, 52, 37);
+      --link-current-indicator-color: var(--navi-link-current-indicator-color);
     }
   }
 
@@ -38898,7 +39076,7 @@ installImportMetaCssBuild(import.meta);const css$F = /* css */`
       --loader-color: var(--navi-loader-color);
       --border-color: var(--navi-control-border-color);
       --background-color: white;
-      --accent-color: light-dark(#4476ff, #3b82f6);
+      --accent-color: var(--navi-control-accent-color);
       --background-color-checked: var(--accent-color);
       --border-color-checked: var(--accent-color);
       --checkmark-color: white;
@@ -39638,7 +39816,7 @@ installImportMetaCssBuild(import.meta);const css$D = /* css */`
       --border-color: var(--navi-control-border-color);
       --background-color: white;
       --background-color-checked: var(--background-color);
-      --accent-color: light-dark(#4476ff, #3b82f6);
+      --accent-color: var(--navi-control-accent-color);
       --radiomark-color: var(--accent-color);
       --border-color-checked: var(--accent-color);
       --cursor: pointer;
@@ -40150,7 +40328,7 @@ installImportMetaCssBuild(import.meta);const css$C = /* css */`
       --font-family: var(--navi-control-font-family);
 
       --loader-color: var(--navi-loader-color);
-      --accent-color: rgb(24, 117, 255);
+      --accent-color: var(--navi-control-accent-color);
       --color-mix-light: black;
       --color-mix-dark: white;
       --color-mix: var(--color-mix-dark);
@@ -42983,6 +43161,13 @@ installImportMetaCssBuild(import.meta);/**
  * the map one would have drawn for a line, so it is drawn here and everything
  * below only ever knows about maps.
  *
+ * A travel is ONE BOX long, whatever the distance between the two slides on the
+ * map: the slide arriving is placed next to the one being left for the duration
+ * and put back where the map says afterwards, so a tab bar jumping from the
+ * first tab to the last shows those two and nothing else. Nobody wants to watch
+ * the slides in between fly past — least of all in a tab bar, where they are
+ * not a road one travels but places one goes straight to.
+ *
  * The slides live INSIDE the box, which is what makes this work for a popup: a
  * dialog and a popover are both promoted to the browser's top layer, so no
  * container of ours could ever hold two of them side by side and translate the
@@ -43086,6 +43271,18 @@ const css$z = /* css */`
            slides. */
         translate: var(--slide-offset, 0);
       }
+      /* Off stage: everything but the slide one is looking at and, while the
+         track moves, the slide one is leaving. A travel is one box long
+         whatever the distance on the map (the two are placed a box apart for
+         the occasion, see the layout effect), so the slides in between are
+         never crossed — but on a map wider than one box they would still sit
+         in the frame, and a tab bar jumping from the first tab to the last must
+         show those two and nothing else.
+         visibility, not display: this box is measured on its LARGEST slide, and
+         a slide taken out of the layout would take its size out with it. */
+      > [data-slide][data-slide-offstage] {
+        visibility: hidden;
+      }
       /* Nothing here for a slide not on screen: [inert] (set from JS) already
          takes it out of reach of the pointer, of Tab and of a screen reader —
          one attribute instead of pointer-events plus aria-hidden, and the only
@@ -43317,6 +43514,25 @@ const SlideContainer = ({
   // mid-travel would read a moving value.
   const offsetRef = useRef();
   const trackAnimationRef = useRef(null);
+  // Where the slides are while the track moves, which is not where the map says
+  // they are: the one being left stays put and the one arriving is placed ONE
+  // BOX away from it, whichever way the travel goes and however far apart the
+  // two are on the map. So a jump from the first tab to the last is one box of
+  // travel and the tabs in between are never seen flying past — and everything
+  // not in this map is off stage for the duration. Null at rest, when the map
+  // is the whole truth again (see settleTravel).
+  const stageRef = useRef(null);
+  // Which slide the last drawing put on screen: the current one at rest, the
+  // one being travelled TO while the track moves. What the next travel departs
+  // from, because it is what one is looking at.
+  const drawnAreaRef = useRef(undefined);
+  // Which way the travel about to be drawn goes, when whatever asked for it
+  // knows: a window stepping off its last slide comes back on its first, and
+  // only the press says that is a step forward — the map, read between those
+  // two places, says the opposite. Undefined for a travel asked for by name
+  // (--navi-go-to-slide, --navi-back), where the map is the only thing that
+  // knows and is right.
+  const travelStepRef = useRef(null);
   // What to do once the travel now starting is over, handed to the animation as
   // soon as there is one.
   const rollBackRef = useRef(null);
@@ -43418,6 +43634,52 @@ const SlideContainer = ({
     }
   };
 
+  // The travel is over: the stage is struck and every slide goes back where the
+  // map says it is. Nothing is seen moving for it — the slide on screen sits at
+  // the same place whatever the arrangement (its own offset and the track's are
+  // opposites and cancel out), and the others are off stage — as long as the
+  // two are written in one go, which is why this is done here rather than left
+  // to a render.
+  const settleTravel = () => {
+    const track = trackRef.current;
+    if (!track) {
+      return;
+    }
+    const {
+      slideElements,
+      placeOf
+    } = readMap();
+    const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
+    if (!currentElement) {
+      return;
+    }
+    stageRef.current = null;
+    trackAnimationRef.current = null;
+    for (const slideElement of slideElements) {
+      const {
+        x,
+        y
+      } = placeOf.get(readArea(slideElement)) || {
+        x: 0,
+        y: 0
+      };
+      slideElement.style.setProperty("--slide-offset", `${x * 100}% ${y * 100}%`);
+      slideElement.toggleAttribute("data-slide-offstage", slideElement !== currentElement);
+    }
+    const currentArea = readArea(currentElement);
+    drawnAreaRef.current = currentArea;
+    const {
+      x,
+      y
+    } = placeOf.get(currentArea) || {
+      x: 0,
+      y: 0
+    };
+    const offset = `${-x * 100}% ${-y * 100}%`;
+    offsetRef.current = offset;
+    track.style.setProperty("--slide-container-offset", offset);
+  };
+
   // Everything positional is decided here, from the DOM, once per render: where
   // each slide stands on the map, which one is current, and how far the track
   // must be for that one to be the one on screen. Reading the DOM is what makes
@@ -43435,10 +43697,59 @@ const SlideContainer = ({
     // Nothing named, or a name nothing answers to: the first slide is the one
     // shown, the way a stack of pages opens on its first page.
     slideElements[0];
-    const currentPlace = placeOf.get(readArea(currentElement)) || {
+    const currentArea = readArea(currentElement);
+    const realPlaceOf = area => placeOf.get(area) || {
       x: 0,
       y: 0
     };
+    const durationMs = durationToMs(duration);
+    // Nothing is travelling, so nothing is staged: the picture to paint is the
+    // map itself, and a stage left over from a travel that has just been given
+    // up on would be painted instead of it.
+    if (noTravel) {
+      stageRef.current = null;
+    }
+    let stage = stageRef.current;
+    const drawnArea = stage ? stage.area : drawnAreaRef.current;
+    const travelStarts = !noTravel && durationMs > 0 && drawnArea !== undefined && drawnArea !== currentArea && slideElements.some(slideElement => readArea(slideElement) === drawnArea);
+    if (travelStarts) {
+      // Where the slide being left IS — the place the stage gave it if a travel
+      // was already playing (a press landing mid-travel departs from where the
+      // eye is, not from the map), its own place otherwise.
+      const departurePlace = stage ? stage.placeByArea.get(drawnArea) ?? realPlaceOf(drawnArea) : realPlaceOf(drawnArea);
+      const step = travelStepRef.current || {
+        x: Math.sign(realPlaceOf(currentArea).x - realPlaceOf(drawnArea).x),
+        y: Math.sign(realPlaceOf(currentArea).y - realPlaceOf(drawnArea).y)
+      };
+      // Kept, not replaced: the slides a chain of quick presses has already
+      // left behind are still trailing off screen, and taking them off stage
+      // now would blink them out mid-travel.
+      const placeByArea = new Map(stage?.placeByArea);
+      placeByArea.set(drawnArea, departurePlace);
+      const arrivalPlace = {
+        x: departurePlace.x + step.x,
+        y: departurePlace.y + step.y
+      };
+      // The cell the arriving slide takes, taken back from whoever was left
+      // standing on it: a travel turned around mid-flight comes back over
+      // ground it has just covered, and the slide it left there would be
+      // underneath the one arriving — two pictures in one box.
+      for (const [stagedArea, stagedPlace] of placeByArea) {
+        if (stagedArea !== drawnArea && stagedArea !== currentArea && stagedPlace.x === arrivalPlace.x && stagedPlace.y === arrivalPlace.y) {
+          placeByArea.delete(stagedArea);
+        }
+      }
+      placeByArea.set(currentArea, arrivalPlace);
+      stage = stageRef.current = {
+        placeByArea,
+        area: currentArea
+      };
+    }
+    // Said about the travel now being drawn and about no other: a re-render in
+    // the middle of one reads the stage back, which already knows.
+    travelStepRef.current = null;
+    const placeOfArea = area => stage && stage.placeByArea.get(area) || realPlaceOf(area);
+    const currentPlace = placeOfArea(currentArea);
     // A transfer waiting for a travel that never happened — a controlled
     // `current` the caller chose not to move: dropped, the focus has no
     // business going anywhere. The one for a travel that DID happen stays,
@@ -43454,17 +43765,18 @@ const SlideContainer = ({
     // and that one knows what was pressed.
     const focusIsLeaving = !focusHandOverRef.current && slideElements.some(slideElement => slideElement !== currentElement && slideElement.contains(document.activeElement));
     for (const slideElement of slideElements) {
+      const area = readArea(slideElement);
       const {
         x,
         y
-      } = placeOf.get(readArea(slideElement)) || {
-        x: 0,
-        y: 0
-      };
+      } = placeOfArea(area);
       slideElement.style.setProperty("--slide-offset", `${x * 100}% ${y * 100}%`);
       const isCurrent = slideElement === currentElement;
       slideElement.toggleAttribute("data-current", isCurrent);
       slideElement.toggleAttribute("data-slide-displaced", !isCurrent);
+      // On stage: the two ends of the travel while there is one, and the slide
+      // being shown when there is not.
+      slideElement.toggleAttribute("data-slide-offstage", stage ? !stage.placeByArea.has(area) : !isCurrent);
       if (isCurrent) {
         // Reachable again first, so the focus below has somewhere to land: an
         // inert element cannot take it.
@@ -43491,7 +43803,6 @@ const SlideContainer = ({
     // Where the track ends up, always — the animation below only covers the way
     // there, and when it is over this is what holds.
     track.style.setProperty("--slide-container-offset", offset);
-    const durationMs = durationToMs(duration);
     const travels = !noTravel && durationMs > 0 && offsetBefore !== undefined && offsetBefore !== offset;
     if (travels) {
       // The time it takes is the distance it has left to cover: a travel picked
@@ -43522,6 +43833,18 @@ const SlideContainer = ({
       if (pendingRollsRef.current.length) {
         hurryTravel(trackAnimationRef.current);
       }
+      // Arrived: the map is the truth again (see settleTravel). Attached before
+      // the window's own roll back just below, so the stage is struck first and
+      // whatever that one renders is drawn from the map.
+      trackAnimationRef.current.finished.then(settleTravel, () => {
+        // cancelled by the next travel — that one carries the stage on
+      });
+    } else if (stage && trackAnimationRef.current?.playState !== "running") {
+      // Staged with nothing left to play: a travel that was drawn and then had
+      // its animation taken away (a duration set to 0, a re-render landing
+      // between the two). Struck at once rather than left standing, since the
+      // thing it was standing for is over.
+      settleTravel();
     }
     // A window waiting for its travel to be over (see goToArea's own loop
     // branch): the animation says when, and says it about the move that just
@@ -43558,6 +43881,13 @@ const SlideContainer = ({
     for (const slideElement of slideElements) {
       slideElement.toggleAttribute("inert", slideElement !== currentElement);
     }
+    // What is on screen now, for the travel after this one to depart from.
+    // While a travel is playing the stage is the one that knows (it holds the
+    // slide being travelled TO, which is what one is looking at), so this is
+    // only ever written at rest.
+    if (!stageRef.current) {
+      drawnAreaRef.current = currentArea;
+    }
   });
 
   /**
@@ -43652,6 +43982,15 @@ const SlideContainer = ({
       ...cameFromRef.current,
       [area]: readArea(currentElement)
     };
+    // Which way this travel is drawn, said by what asked for it rather than
+    // read off the map: a window stepping off its last slide comes back on its
+    // first, and between those two places the map says "all the way back" when
+    // the press said "one forward". Nothing to say when the travel was asked
+    // for by name — there the map is the only one who knows.
+    travelStepRef.current = dx || dy ? {
+      x: Math.sign(dx),
+      y: Math.sign(dy)
+    } : null;
     if (loop) {
       // A window does not change slide, it rolls: the travel plays, and once it
       // is over the window is put back where it rests while whoever owns the
@@ -47826,13 +48165,10 @@ const css$u = /* css */`
     font-size: 1em;
     line-height: 1.4;
   }
-  /* A control that IS the row — a direct child of the item, so it spans it —
-     must keep its loading outline within its own box: the scroll container is
-     overflow:auto, and the couple pixels the outline normally draws outside
-     the control are enough to make it scrollable, so a scrollbar would appear
-     and disappear as things load. Targeted on the outline itself rather than
-     inherited from the item, so a control nested deeper (which has room around
-     it, and does not reach the edges) keeps the outline it asked for. */
+  /* Same rule as [data-scrollable] in box.jsx, said again for this scroller:
+     what an item holds IS against the edge of the scroll container — the list
+     element between the two is markup, not spacing — so its loading outline
+     stays inside its own box rather than raising a scrollbar. */
   .navi_list_item > .navi_loading_outline_wrapper,
   .navi_list_item > * > .navi_loading_outline_wrapper,
   .navi_list_item_header > * > .navi_loading_outline_wrapper,
@@ -53586,6 +53922,18 @@ const css$n = /* css */`
       /* The control grows itself; resizable below hands the handle back. */
       resize: none;
       overflow: auto;
+      /* A placeholder must be readable in full before anything is typed: a
+         field that opens already scrolled reads as a field that already has
+         text in it. Its wrapped height is measured (see usePlaceholderHeight)
+         because it only exists once laid out, and it only raises the floor
+         while the placeholder is what is being shown — what is typed sizes the
+         box on its own. */
+      &:placeholder-shown {
+        min-height: max(
+          calc(var(--textarea-min-rows, 1.5) * 1lh),
+          var(--x-textarea-placeholder-height, 0px)
+        );
+      }
     }
     &[data-resizable] .navi_control_input {
       height: calc(var(--textarea-min-rows, 1.5) * 1lh);
@@ -53623,7 +53971,9 @@ const css$n = /* css */`
  * @param {number} [maxRows] Lines after which the control stops growing and
  *   scrolls instead. Without it the control grows with its content.
  * @param {boolean} [resizable] Give the browser's vertical resize handle back.
- *   A manual resize takes over from the automatic growth.
+ *   An exchange, not an addition: the hand takes over from the automatic
+ *   growth, so the control stops following what is typed and stays at the
+ *   height it was last dragged to (starting at `minRows`).
  * @param {number} [maxLength] The character limit, validated at submit. Pair
  *   with `maxLengthGuard` to block typing past it, and render a
  *   TextareaCharCount to show it.
@@ -53645,6 +53995,7 @@ const Textarea = ({
   import.meta.css = [inputCss + css$n, "@jsenv/navi/src/control/input/textarea.jsx"];
   const defaultRef = useRef(null);
   props.ref = props.ref || defaultRef;
+  usePlaceholderHeight(props.ref, props.placeholder);
   const [rootProps, hostProps, childrenWrapperProps] = useControlProps(props, {
     controlType: "input"
   });
@@ -53725,6 +54076,61 @@ const TextareaCharCount = ({
     children: maxLength === undefined ? length : `${length}/${maxLength}`
   });
 };
+
+// `field-sizing: content` sizes the box from the value, and an empty field has
+// none — the placeholder is text the browser refuses to make room for. So the
+// height it wraps to is measured and published as --x-textarea-placeholder-height
+// for the CSS above to use as a floor.
+const usePlaceholderHeight = (ref, placeholder) => {
+  useLayoutEffect(() => {
+    const textareaEl = ref.current;
+    if (!placeholder) {
+      textareaEl.style.removeProperty("--x-textarea-placeholder-height");
+      return null;
+    }
+    let widthMeasured;
+    const measure = () => {
+      // What is typed sizes the box itself; the placeholder is not displayed
+      // then, and scrollHeight would report the value's height instead.
+      if (textareaEl.value !== "") {
+        return;
+      }
+      const {
+        paddingTop,
+        paddingBottom
+      } = getComputedStyle(textareaEl);
+      // Cleared before reading: scrollHeight can never report less than the
+      // height already applied, so measuring on top of a previous measure could
+      // only ever grow the box, never let it shrink back on a wider viewport.
+      textareaEl.style.setProperty("--x-textarea-placeholder-height", "0px");
+      const contentHeight = textareaEl.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
+      widthMeasured = textareaEl.clientWidth;
+      textareaEl.style.setProperty("--x-textarea-placeholder-height", `${contentHeight}px`);
+    };
+    measure();
+    // The placeholder wraps against the available width, so a new width is a
+    // new number of lines. Height changes are ignored: this measure is what
+    // causes them, and reacting to them would be reacting to ourselves.
+    const resizeObserver = new ResizeObserver(() => {
+      if (textareaEl.clientWidth !== widthMeasured) {
+        measure();
+      }
+    });
+    resizeObserver.observe(textareaEl);
+    // The width may have changed while the field held a value, when measuring
+    // was impossible — emptying it is when the placeholder comes back.
+    const onInput = () => {
+      if (textareaEl.value === "") {
+        measure();
+      }
+    };
+    textareaEl.addEventListener("input", onInput);
+    return () => {
+      resizeObserver.disconnect();
+      textareaEl.removeEventListener("input", onInput);
+    };
+  }, [placeholder]);
+};
 const RealTextarea = ({
   maxLength,
   ...domProps