@jsenv/navi 0.29.363 → 0.29.365

package/dist/dev/jsenv_navi.js

@@ -56555,6 +56555,10 @@ const SlideContainer = ({
   // 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);
+  // The movement the track is playing, while it plays: the slide it is leaving
+  // and the slide it is going to. A hand landing on the box takes it over from
+  // its origin (see onStart in createTravelHandlers).
+  const movingRef = useRef(null);
   // 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
@@ -56823,6 +56827,7 @@ const SlideContainer = ({
     }
     stageRef.current = null;
     trackAnimationRef.current = null;
+    movingRef.current = null;
     // At rest the picture IS the current slide, whatever the last gesture wrote
     // there: an indicator has nothing left to lean towards.
     paintTravelProgress(0);
@@ -57017,7 +57022,7 @@ const SlideContainer = ({
     // there, and when it is over this is what holds. Except under a hand-off
     // still waiting for its travel: the track stays where the finger left it,
     // until the render that moves it or the frame after which the gesture gives
-    // up on it (see returnToRest in onEnd).
+    // up on it (see settleTowards in onEnd).
     if (!travelFromRef.current) {
       track.style.setProperty("--slide-container-offset", offset);
     }
@@ -57052,6 +57057,10 @@ const SlideContainer = ({
         duration: durationMs * travelRatio,
         easing
       });
+      movingRef.current = {
+        from: drawnArea,
+        to: currentArea
+      };
       // The trait travels with the slides: from where the gesture left it when
       // there was one, from a whole box away when the travel was asked for.
       const progressFrom = travelProgressFromRef.current ?? (travelStep ? travelStep.x || travelStep.y : 0);
@@ -57837,7 +57846,7 @@ const SlideContainer = ({
   // The two slides the gesture can bring in, placed one box either side of the
   // one being dragged — the same stage a travel builds, except that both ends
   // are set up at once because the finger has not said yet which way it goes.
-  const stageDrag = drag => {
+  const stageDrag = (drag, currentArea) => {
     const {
       slideElements,
       placeOf
@@ -57865,7 +57874,7 @@ const SlideContainer = ({
     }
     stageRef.current = {
       placeByArea,
-      area: drag.area
+      area: currentArea
     };
     for (const slideElement of slideElements) {
       const area = readArea(slideElement);
@@ -57881,33 +57890,63 @@ const SlideContainer = ({
     }
   };
 
-  // Let go of without enough of a gesture to travel: the slide comes back to
-  // where it was, over the distance it was pulled — so a slide barely moved
-  // snaps back and one dragged most of the way there takes its time.
-  const returnToRest = drag => {
+  // Let go of, and the slides go where the gesture leaves them: back on the
+  // slide being dragged when nothing travels, on to the slide arriving when a
+  // travel caught in flight is let carry on. Over the distance left to cover,
+  // so a slide barely moved snaps back and one dragged most of the way there
+  // takes its time.
+  const settleTowards = (drag, area) => {
     const track = trackRef.current;
     if (!track) {
       return;
     }
-    const restOffset = `${drag.baseOffset.x}px ${drag.baseOffset.y}px`;
+    const stage = stageRef.current;
+    const {
+      placeOf
+    } = readMap();
+    const place = stage?.placeByArea.get(area) || placeOf.get(area) || {
+      x: 0,
+      y: 0
+    };
+    const restPx = {
+      x: -place.x * drag.box.width,
+      y: -place.y * drag.box.height
+    };
+    const nowPx = {
+      x: drag.baseOffset.x + drag.pull.x,
+      y: drag.baseOffset.y + drag.pull.y
+    };
+    const restOffset = `${restPx.x}px ${restPx.y}px`;
     const durationMs = durationToMs(duration);
-    const pulled = Math.abs(drag.pull[drag.axis]);
     const size = drag.axis === "x" ? drag.box.width : drag.box.height;
+    const left = Math.abs(restPx[drag.axis] - nowPx[drag.axis]);
     trackAnimationRef.current?.cancel();
     trackAnimationRef.current = null;
     track.style.setProperty("--slide-container-offset", restOffset);
-    if (!durationMs || !pulled) {
+    if (!durationMs || !left) {
       paintTravelProgress(0);
       settleTravel();
       return;
     }
-    animateTravelProgress(drag.progress, durationMs * (pulled / size), "ease-out", drag.areaPulled);
+    // Which other slide the picture leans on while it arrives: the one being
+    // pulled in when it comes back on the dragged slide, the dragged slide
+    // itself when it goes on to the one arriving — and the trait is then a
+    // box short of that one, which is what it has to close.
+    const arrivesOnBase = area === drag.area;
+    const sign = drag.pull[drag.axis] > 0 ? 1 : -1;
+    const progressFrom = arrivesOnBase ? drag.progress : drag.progress - sign;
+    const otherArea = arrivesOnBase ? drag.areaPulled : drag.area;
+    movingRef.current = {
+      from: otherArea,
+      to: area
+    };
+    animateTravelProgress(progressFrom, durationMs * (left / size), "ease-out", otherArea);
     const animation = track.animate([{
-      translate: drag.offset
+      translate: `${nowPx.x}px ${nowPx.y}px`
     }, {
       translate: restOffset
     }], {
-      duration: durationMs * (pulled / size),
+      duration: durationMs * (left / size),
       easing: "ease-out"
     });
     trackAnimationRef.current = animation;
@@ -57938,11 +57977,14 @@ const SlideContainer = ({
     // value underneath it, which is the far end of the travel — the very jump
     // this is about.
     trackElement.style.setProperty("--slide-container-offset", offsetOnScreen);
+    const moving = movingRef.current || {};
     return {
       trackElement,
       onScreenPx,
       offsetOnScreen,
-      offsetTarget: offsetRef.current
+      offsetTarget: offsetRef.current,
+      from: moving.from,
+      to: moving.to
     };
   };
   // Which way a caught travel was going: a hand reaching for something moving
@@ -57989,8 +58031,6 @@ const SlideContainer = ({
         sign,
         target
       }) => {
-        let areaBack = axis === "x" ? areaTowards(-1, 0) : areaTowards(0, -1);
-        let areaOn = axis === "x" ? areaTowards(1, 0) : areaTowards(0, 1);
         // Everything positional is read HERE rather than when the pointer
         // landed: the travel that was playing then may have arrived since, and
         // it is what the slides are doing at the moment the gesture takes them
@@ -58001,39 +58041,66 @@ const SlideContainer = ({
           placeOf
         } = readMap();
         const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
-        // The hold goToArea reads at the release, read again HERE, off the same
-        // slide and the same attribute: a slide that will refuse the arrival
-        // must not offer the journey. A locked direction simply has nowhere to
-        // go for the length of this gesture — the one case the gesture already
-        // knows, being the last slide of a walk. The hand then gets the wall it
-        // can lean on and never walk through (see drag_to_travel), the slide
-        // behind it stays offstage instead of being read on the way, and the
-        // release has nothing left to refuse.
-        // Nothing here about `released` (--navi-done): that is one particular
-        // departure letting go, decided as it happens, and a gesture armed
-        // before it has no such thing to read — the attribute as rendered is
-        // what the hand is answered from.
-        if (currentElement?.hasAttribute("data-prevent-nav-previous")) {
-          areaBack = undefined;
-        }
-        if (currentElement?.hasAttribute("data-prevent-nav-next")) {
-          areaOn = undefined;
-        }
         const box = track.getBoundingClientRect();
-        if (!areaBack && !areaOn || !currentElement || !box.width || !box.height ||
-        // Something else with a better claim on the gesture: a scroller
-        // between the finger and the slide, with room left that way.
-        scrollRoomTowards(target, currentElement, axis, sign)) {
+        if (!currentElement || !box.width || !box.height) {
           return false;
         }
-        const area = readArea(currentElement);
-        // Where the slide being dragged stands: where the stage put it while a
-        // travel is playing, its place on the map otherwise.
+        const currentArea = readArea(currentElement);
         const stage = stageRef.current;
-        const basePlace = stage?.placeByArea.get(area) || placeOf.get(area) || {
+        // Where a slide stands: where the stage put it while a travel is
+        // playing, its place on the map otherwise.
+        const placeOfArea = someArea => stage?.placeByArea.get(someArea) || placeOf.get(someArea) || {
           x: 0,
           y: 0
         };
+        // A travel caught in flight is measured from the slide it SET OFF from,
+        // with the slide it was going to as the one thing the hand can bring
+        // in — the way drag_to_travel reads a `slack`: how far the box already
+        // sits from its resting place, towards what is being pulled in. That is
+        // what makes its answer "carry on" mean arriving. Based on the slide
+        // arriving instead, the slack would point back at the origin, and a
+        // hand that merely touched the box would send it all the way back.
+        // A movement with no origin of its own (the track re-placed without a
+        // travel) is dragged from the slide shown, like any slide at rest.
+        const origin = caughtTravel && caughtTravel.from !== caughtTravel.to ? caughtTravel.from : null;
+        let area;
+        let areaBack;
+        let areaOn;
+        if (origin) {
+          area = origin;
+          const towardsEnd = axis === "x" ? placeOfArea(currentArea).x > placeOfArea(origin).x : placeOfArea(currentArea).y > placeOfArea(origin).y;
+          areaBack = towardsEnd ? undefined : currentArea;
+          areaOn = towardsEnd ? currentArea : undefined;
+        } else {
+          area = currentArea;
+          areaBack = axis === "x" ? areaTowards(-1, 0) : areaTowards(0, -1);
+          areaOn = axis === "x" ? areaTowards(1, 0) : areaTowards(0, 1);
+          // The hold goToArea reads at the release, read again HERE, off the
+          // same slide and the same attribute: a slide that will refuse the
+          // arrival must not offer the journey. A locked direction simply has
+          // nowhere to go for the length of this gesture — the one case the
+          // gesture already knows, being the last slide of a walk. The hand
+          // then gets the wall it can lean on and never walk through (see
+          // drag_to_travel), the slide behind it stays offstage instead of
+          // being read on the way, and the release has nothing left to refuse.
+          // Nothing here about `released` (--navi-done): that is one particular
+          // departure letting go, decided as it happens, and a gesture armed
+          // before it has no such thing to read — the attribute as rendered is
+          // what the hand is answered from.
+          if (currentElement.hasAttribute("data-prevent-nav-previous")) {
+            areaBack = undefined;
+          }
+          if (currentElement.hasAttribute("data-prevent-nav-next")) {
+            areaOn = undefined;
+          }
+          if (!areaBack && !areaOn ||
+          // Something else with a better claim on the gesture: a scroller
+          // between the finger and the slide, with room left that way.
+          scrollRoomTowards(target, currentElement, axis, sign)) {
+            return false;
+          }
+        }
+        const basePlace = placeOfArea(area);
         const baseOffset = {
           x: -basePlace.x * box.width,
           y: -basePlace.y * box.height
@@ -58064,7 +58131,8 @@ const SlideContainer = ({
           [axis]: slack
         };
         drag.progress = slack / size;
-        stageDrag(drag);
+        drag.areaPulled = slack > 0 ? areaBack : slack < 0 ? areaOn : null;
+        stageDrag(drag, currentArea);
         // From here the box is busy, whichever input asked: a wheel gesture and
         // a press must not both be moving the same track.
         dragRef.current = drag;
@@ -58095,24 +58163,50 @@ const SlideContainer = ({
         event
       }) => {
         dragRef.current = null;
-        if (!travels) {
-          returnToRest(drag);
+        // Where the gesture leaves the slides: on the one it was pulling in
+        // when it says so, back on the one it was dragging otherwise.
+        const destination = travels ? sign > 0 ? drag.areaBack : drag.areaOn : drag.area;
+        const {
+          slideElements,
+          placeOf
+        } = readMap();
+        const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
+        const currentArea = currentElement && readArea(currentElement);
+        if (!destination || destination === currentArea) {
+          // Nothing to ask of the state: the slide it names is already the one
+          // shown — a drag let go of short of a travel, a travel caught in
+          // flight and let carry on. The track goes there on its own.
+          settleTowards(drag, destination || drag.area);
           return;
         }
         // Where the slide is being left, for the travel to depart from instead
         // of from the map.
         travelFromRef.current = drag.offset;
         // …and where the indicator is being left, said about the slide that is
-        // ARRIVING: the picture is `sign` of a box short of it, and that is
-        // what the travel about to be drawn has to close.
-        travelProgressFromRef.current = drag.progress - sign;
-        const moved = axis === "x" ? move(-sign, 0, event) : move(0, -sign, event);
+        // ARRIVING: a box short of the slide being pulled in, right where the
+        // finger left it when going back to the slide being dragged.
+        travelProgressFromRef.current = travels ? drag.progress - sign : drag.progress;
+        // Which way the travel goes, read off where the two slides stand
+        // rather than off the pull: a travel caught in flight and put back
+        // goes the way it came, whatever the finger did meanwhile.
+        const stage = stageRef.current;
+        const placeOfArea = someArea => stage?.placeByArea.get(someArea) || placeOf.get(someArea) || {
+          x: 0,
+          y: 0
+        };
+        const towards = Math.sign(placeOfArea(destination)[axis] - placeOfArea(currentArea)[axis]);
+        const moved = goToArea(destination, {
+          forward: towards > 0,
+          event,
+          dx: axis === "x" ? towards : 0,
+          dy: axis === "y" ? towards : 0
+        });
         if (!moved) {
           // Nowhere to go after all — a slide holding on to the user
           // (preventNav), or a caller that refused the change.
           travelFromRef.current = null;
           travelProgressFromRef.current = null;
-          returnToRest(drag);
+          settleTowards(drag, currentArea);
           return;
         }
         // A container whose `current` is held outside and was not moved: no
@@ -58123,7 +58217,7 @@ const SlideContainer = ({
           if (travelFromRef.current) {
             travelFromRef.current = null;
             travelProgressFromRef.current = null;
-            returnToRest(drag);
+            settleTowards(drag, currentArea);
           }
         });
       },
@@ -58138,9 +58232,15 @@ const SlideContainer = ({
           trackElement: trackCaught,
           offsetOnScreen,
           offsetTarget,
-          onScreenPx: caughtOnScreenPx
+          onScreenPx: caughtOnScreenPx,
+          from,
+          to
         } = caughtTravel;
         caughtTravel = null;
+        movingRef.current = {
+          from,
+          to
+        };
         if (offsetOnScreen === offsetTarget) {
           settleTravel();
           return;
@@ -60467,6 +60567,13 @@ const clipOf = (side, distance) => {
  * (TARGET_WAIT_MS), on the half-strength frame where the anchor is still
  * readable, and lifts the moment it is there.
  *
+ * A closing may land where no opening took off: a dialog opened the plain way
+ * (`animation={{ open, close: "lifting" }}` in dialog.jsx), closing into a box the close
+ * itself brings — the state `onClose` writes renders the place the lifted node
+ * belongs to. So the box a closing comes back to is read once the change is
+ * made, inside the transition, and when the caller named it (`liftAnchor`) it
+ * is waited for (LANDING_WAIT_MS): the new picture is taken once it is there.
+ *
  * One name serves the whole movement, because only one of the two boxes is on
  * screen at a time: it names the anchor while the popup is closed, and the
  * lifted node while it is open.
@@ -60509,6 +60616,12 @@ const ARRIVING_ATTRIBUTE = "data-navi-popup-lift-arriving";
 // stands, without a movement, so a target that never comes cannot keep it
 // unpainted.
 const TARGET_WAIT_MS = 1000;
+// How long a closing waits for the box it comes back to, when that box is
+// brought by the close (see this file's top comment). The page is frozen on
+// the picture of the open popup meanwhile, so the wait is short: what it
+// covers is a render, not a fetch. Past it the popup's picture plays out on
+// its own.
+const LANDING_WAIT_MS = 300;
 // The popup's own animation duration, published on the root because the
 // ::view-transition tree hangs off it and inherits from nowhere else.
 const DURATION_PROPERTY = "--navi-popup-lift-duration";
@@ -60549,14 +60662,16 @@ let releaseScrollHold = null;
  * a view transition morphing the anchor's box into the lifted node's, or back.
  *
  * `opened` says which way: the box being left is the anchor when the popup is
- * opening and the lifted node when it is closing. `lift` is Dialog's own prop
- * of that name.
+ * opening and the lifted node when it is closing. `resolveAnchor` is read on
+ * the spot for an opening, and once the change is made for a closing;
+ * `waitForAnchor` has a closing wait for it when it is not there yet. `lift`
+ * is Dialog's own prop of that name.
  */
 const liftPopupFromAnchor = (
   popupEl,
-  anchorElement,
+  resolveAnchor,
   applyChange,
-  { opened, lift },
+  { opened, lift, waitForAnchor },
 ) => {
   const startViewTransition = ensureDocumentStartViewTransition();
   // A movement still wearing the name would make the name two elements wide,
@@ -60564,7 +60679,7 @@ const liftPopupFromAnchor = (
   // document.
   releaseLiftInProgress?.();
 
-  const elementLeaving = opened ? anchorElement : resolveLiftTarget(popupEl);
+  const elementLeaving = opened ? resolveAnchor() : resolveLiftTarget(popupEl);
   // Read before the first write: the read brings the style up to date, and a
   // write before it would make it bring it up to date once more.
   const duration = getComputedStyle(popupEl)
@@ -60588,12 +60703,14 @@ const liftPopupFromAnchor = (
 
   let giveBackNameArriving = null;
   let stopWaitingForTarget = null;
+  let stopWaitingForAnchor = null;
   const release = () => {
     if (releaseLiftInProgress !== release) {
       return;
     }
     releaseLiftInProgress = null;
     stopWaitingForTarget?.();
+    stopWaitingForAnchor?.();
     boxAnimationInProgress?.cancel();
     boxAnimationInProgress = null;
     releaseScrollHold?.();
@@ -60619,13 +60736,18 @@ const liftPopupFromAnchor = (
     const boxLeaving = room ? elementLeaving.getBoundingClientRect() : null;
     let boxArriving = null;
     let cornersArriving = null;
-    const viewTransition = startViewTransition(() => {
+    const viewTransition = startViewTransition(async () => {
       // The name is the arriving box's from here on: worn by both, it is worn
       // by neither. Written rather than removed, so a name the element also
       // has from a stylesheet cannot resurface for the length of the movement.
       elementLeaving.style.setProperty(NAME_PROPERTY, "none");
       change();
-      const elementArriving = resolveElementArriving();
+      const elementArriving = await resolveElementArriving();
+      // Replaced while waiting for its landing: the movement replacing it
+      // holds the name now.
+      if (releaseLiftInProgress !== release) {
+        return;
+      }
       if (elementArriving) {
         giveBackNameArriving = wearLiftName(elementArriving);
         cornersArriving = readCorners(elementArriving);
@@ -60650,12 +60772,33 @@ const liftPopupFromAnchor = (
   };
 
   if (!opened) {
-    startMovement(applyChange, () =>
+    startMovement(applyChange, () => {
+      const anchorElement = resolveAnchor();
+      if (anchorElement?.isConnected) {
+        return anchorElement;
+      }
       // Gone from the document while the popup was open (the row it stood in
       // was removed): nothing to arrive at, and the browser plays the popup's
       // picture out on its own.
-      anchorElement.isConnected ? anchorElement : null,
-    );
+      if (!waitForAnchor) {
+        return null;
+      }
+      return new Promise((resolve) => {
+        stopWaitingForAnchor = whenAnchorAppears(resolveAnchor, (element) => {
+          stopWaitingForAnchor = null;
+          // Not when stopped by a movement replacing this one.
+          if (
+            !element &&
+            releaseLiftInProgress === release
+          ) {
+            console.warn(
+              `[navi] Dialog's "liftAnchor" named nothing on screen within ${LANDING_WAIT_MS}ms of the close, so the dialog closes without landing. The element it names is where the box comes back to: in the document at the close, or rendered by what the close changes (onClose).`,
+            );
+          }
+          resolve(element);
+        });
+      });
+    });
     return;
   }
 
@@ -60815,6 +60958,40 @@ const whenLiftTargetAppears = (popupEl, callback) => {
   return stop;
 };
 
+// Calls `callback` with the anchor once `resolveAnchor` finds it in the
+// document, or with null past LANDING_WAIT_MS — or when stopped, since the
+// transition's update is waiting on it. Returns how to stop.
+const whenAnchorAppears = (resolveAnchor, callback) => {
+  const observer = new MutationObserver(() => {
+    const anchorElement = resolveAnchor();
+    if (anchorElement?.isConnected) {
+      stop(anchorElement);
+    }
+  });
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["id"],
+  });
+  const timeout = setTimeout(() => {
+    stop(null);
+  }, LANDING_WAIT_MS);
+  let stopped = false;
+  const stop = (anchorElement = null) => {
+    if (stopped) {
+      return;
+    }
+    stopped = true;
+    observer.disconnect();
+    clearTimeout(timeout);
+    callback(anchorElement);
+  };
+  return () => {
+    stop(null);
+  };
+};
+
 const ignore = () => {};
 
 // The room the fixed bars leave, in viewport coordinates; null without bars.
@@ -61480,6 +61657,18 @@ const css$E = /* css */`
     opacity: 0;
   }
 
+  /* A closing lift is the dialog leaving as a picture: whatever exit its
+     opening animation arms (animation={{ open, close: "lifting" }}, see
+     popup_css.js) would
+     keep it rendered into the picture of the state it closes into. */
+  :root[data-navi-popup-lift="closing"] {
+    .navi_dialog,
+    .navi_dialog::backdrop,
+    .navi_dialog_backdrop {
+      transition: none;
+    }
+  }
+
   /* While a dialog is lifting out of the element that opened it
      (popup_lift.js). The page around IS taken as a picture, the browser's own
      default, and on purpose: the wall and what the dialog holds around the
@@ -61722,7 +61911,7 @@ const css$E = /* css */`
  *   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. Defaults to `true` for a dialog docked by `dockedOnSmallTouchScreen`.
- * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"lifting"|`slide-from-${string}`} [props.animation]
+ * @param {boolean|"auto"|"fading"|"scaling"|"sliding"|"lifting"|`slide-from-${string}`|{open: boolean|"auto"|"fading"|"scaling"|"sliding"|`slide-from-${string}`, close: "lifting"}} [props.animation]
  *   - `true`/`"auto"` resolves to `"scaling"` for a centered `positionArea`,
  *   or a concrete `"slide-from-*"` direction otherwise. Any other explicit
  *   value is used as-is. `"lifting"` is the odd one out: every other kind
@@ -61741,6 +61930,15 @@ const css$E = /* css */`
  *   being what the movement leaves rather than a context to keep readable;
  *   `backdropVariant="discrete"` asks for the light wash back. See
  *   `popup_lift.js`.
+ *   - `{ open, close: "lifting" }`: the close alone lifts. The dialog opens
+ *   with `open` (any value above but `"lifting"`), and its `data-lift` node
+ *   travels into `liftAnchor` on close — for a dialog that did not come out
+ *   of what it lands in (a banner opens a full-screen reveal, closing it puts
+ *   the crest in its place on the plate that replaces the banner). The box it
+ *   lands in may be rendered by the close itself: `liftAnchor` is read once
+ *   `onClose` has run, and waited for a moment when it is not there yet.
+ *   `"lifting"` is the only `close` that differs from the opening: every
+ *   other kind closes by playing its opening backwards.
  * @param {"box"|"scene"} [props.lift="box"] - Under `animation="lifting"`,
  *   what the anchor and what it becomes are to each other, which decides
  *   how their pictures sit in the box moving between them. `"box"`: one
@@ -61765,14 +61963,15 @@ const css$E = /* css */`
  *   `document.getElementById` when the dialog opens — see popover.jsx's own
  *   `anchor` doc for why (mainly `defaultOpen`).
  * @param {Element|{current: Element}|string} [props.liftAnchor] - Under
- *   `animation="lifting"`, where the closing brings the box back to, when that
- *   is no longer where it came from: a popup one walks through (a row of cards
- *   shown one at a time) has something else in front by the time it closes,
- *   and the box would otherwise fly back to the card the press opened on. Same
- *   grammar as `anchor` (element, ref or id), resolved at the close, so
- *   whatever names the card currently in front — an id built from the signal
- *   the walk is bound to, a ref moved with it — is read then and not at the
- *   opening. Left out, the box comes back to the anchor it came out of.
+ *   `animation="lifting"` or `animation={{ open, close: "lifting" }}`, where the closing
+ *   brings the box back to, when that is not where it came from: a popup one
+ *   walks through (a row of cards shown one at a time) has something else in
+ *   front by the time it closes, and the box would otherwise fly back to the
+ *   card the press opened on. Same grammar as `anchor` (element, ref or id),
+ *   resolved once the close is made — after `onClose` — so whatever names the
+ *   card currently in front, or the box the close itself renders, is read
+ *   then and not at the opening. Left out, the box comes back to the anchor
+ *   it came out of.
  * @param {boolean} [props.sizeFromAnchor=false] - Whether the dialog takes the
  *   anchor's width/height as a min-width/min-height floor
  *   (`--anchor-width`/`--anchor-height`). Off by default: unlike a popover,
@@ -62260,7 +62459,18 @@ const useDialogProps = props => {
     flushEdges.left = expandX || x === "left" || x === "inset-left";
     flushEdges.right = expandX || x === "right" || x === "inset-right";
   }
-  const isAutoAnimation = animation === true || animation === "auto";
+
+  // `{ open, close }` says each way on its own; a single value says both.
+  const {
+    open: openAnimation,
+    close: closeAnimation = openAnimation
+  } = animation !== null && typeof animation === "object" ? animation : {
+    open: animation
+  };
+  if (closeAnimation !== openAnimation && closeAnimation !== "lifting") {
+    console.warn(`[navi] Dialog animation={{ close: ${JSON.stringify(closeAnimation)} }}: "lifting" is the only close that differs from the opening; every other kind closes by playing the opening backwards.`);
+  }
+  const isAutoAnimation = openAnimation === true || openAnimation === "auto";
   // The dialog and the anchor are one box, and what plays between them is the
   // browser's own morph (popup_lift.js) — nothing this dialog does to its own
   // box. So it arms no CSS transition of its own, which is not merely useless
@@ -62268,11 +62478,12 @@ const useDialogProps = props => {
   // with allow-discrete, and a dialog kept rendered for the length of its exit
   // is exactly what the picture taken of the state it closes into must not
   // show.
-  const lifting = animation === "lifting";
+  const lifting = openAnimation === "lifting";
+  const liftsOnClose = closeAnimation === "lifting";
   // Dialog never has a real anchor to POSITION against (see this file's top
   // comment), so this is always the "no anchor" path — the same one Popover's
   // own custom renderer falls into when it has no real anchor either.
-  const resolvedAnimationKind = isAutoAnimation ? resolveAutoAnimationKind(undefined, parsedPositionArea) : animation;
+  const resolvedAnimationKind = isAutoAnimation ? resolveAutoAnimationKind(undefined, parsedPositionArea) : openAnimation;
   // Not gated on isAutoAnimation — an explicit animation="sliding" needs a
   // concrete direction just as much as an auto-resolved one does (same as
   // Popover's own "sliding"/"expanding" resolution step in openEffect).
@@ -62321,13 +62532,11 @@ const useDialogProps = props => {
   // is in front NOW, which only the caller knows. Resolved at the close for
   // that reason: the element it names changes while the popup is open, so
   // anything read at the opening would be the walk's starting point again.
+  // Silent when it names nothing: the close may be what renders it, and
+  // popup_lift.js asks again until it is there (and warns past that).
   const resolveLiftAnchorElement = () => {
     if (typeof liftAnchor === "string") {
-      const liftAnchorElementById = document.getElementById(liftAnchor);
-      if (!liftAnchorElementById) {
-        console.warn(`Dialog: liftAnchor="${liftAnchor}" did not match any element`);
-      }
-      return liftAnchorElementById;
+      return document.getElementById(liftAnchor);
     }
     // A ref is unwrapped even when it holds nothing, the same way `anchor` is:
     // the ref object itself has no box to come back to.
@@ -62339,7 +62548,7 @@ const useDialogProps = props => {
   // provided the change happens between its two pictures, which is what
   // handing it to the controller buys (see popup_lift.js and
   // open_controller.js's own transitionChange).
-  openController.transitionChange = lifting ? (applyChange, {
+  openController.transitionChange = liftsOnClose ? (applyChange, {
     opened,
     event
   }) => {
@@ -62347,29 +62556,29 @@ const useDialogProps = props => {
     // A mount-time opening was never seen closed (see openEffect's own
     // `silent`): there is no box it comes from, because nothing was shown
     // before it.
-    if (!dialogEl || opened && event.detail.silent) {
+    if (!dialogEl || opened && (!lifting || event.detail.silent)) {
       applyChange();
       return;
     }
-    let anchorElement;
-    if (opened) {
-      anchorElement = resolveAnchorElement(event);
-    } else if (liftAnchor) {
-      anchorElement = resolveLiftAnchorElement();
-    } else {
-      anchorElement = anchorElementRef.current;
+    if (!opened) {
+      // Read once the close is made (popup_lift.js): the box it lands in
+      // may be one the close itself renders.
+      liftPopupFromAnchor(dialogEl, liftAnchor ? resolveLiftAnchorElement : () => anchorElementRef.current, applyChange, {
+        opened,
+        lift,
+        waitForAnchor: Boolean(liftAnchor)
+      });
+      return;
     }
+    const anchorElement = resolveAnchorElement(event);
     if (!anchorElement) {
-      if (opened) {
+      {
         console.warn(`[navi] Dialog has animation="lifting" and no anchor to lift out of, so it simply appears. The anchor is whatever opened it — a <Button command="--navi-open">, the "source" given to triggerNaviCommand — or the "anchor" prop.`);
       }
-      if (!opened && liftAnchor) {
-        console.warn(`[navi] Dialog has animation="lifting" and a "liftAnchor" naming nothing on screen, so it simply closes. The element it names is where the box comes back to, and it has to be in the document at the close.`);
-      }
       applyChange();
       return;
     }
-    liftPopupFromAnchor(dialogEl, anchorElement, applyChange, {
+    liftPopupFromAnchor(dialogEl, () => anchorElement, applyChange, {
       opened,
       lift
     });
@@ -65804,6 +66013,7 @@ const PickerContentInsidePopup = props => {
     popupWidthFitContent,
     animation,
     lift,
+    liftAnchor,
     animationDuration,
     // mode="callout": what the callout says about what it holds, and paints
     // in its border and icon — "none" for a plain tooltip (see the callout
@@ -65900,6 +66110,7 @@ const PickerContentInsidePopup = props => {
       dockedOnSmallTouchScreen: isPopover ? undefined : dockedOnSmallTouchScreen,
       sizeFromAnchor: isPopover ? undefined : dialogSizeFromAnchor,
       lift: isPopover ? undefined : lift,
+      liftAnchor: isPopover ? undefined : liftAnchor,
       children: jsx(PopupModeContext.Provider, {
         value: mode,
         children: children
@@ -75371,8 +75582,9 @@ const PickerFirstResolver = props => {
  *   children?: import("ignore:preact").ComponentChildren,
  *   mode?: "popover" | "dialog" | "callout",
  *   openOn?: "press" | "longpress" | "contextmenu" | string | string[],
- *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "lifting" | `slide-from-${string}`,
+ *   animation?: boolean | "auto" | "fading" | "scaling" | "sliding" | "lifting" | `slide-from-${string}` | { open: boolean | "auto" | "fading" | "scaling" | "sliding" | `slide-from-${string}`, close: "lifting" },
  *   lift?: "box" | "scene",
+ *   liftAnchor?: Element | { current: Element } | string,
  *   animationDuration?: string,
  *   calloutStatus?: "info" | "warning" | "error" | "success" | "none",
  *   calloutIcon?: boolean,
@@ -75743,6 +75955,11 @@ const PickerFirstResolver = props => {
  *   that opens precisely to get bigger. It brings an opaque, blurred backdrop
  *   with it (`--navi-backdrop-lift-*`); `backdropVariant="discrete"` asks for
  *   the light wash back.
+ * @param {Element|{current: Element}|string} [liftAnchor] Dialog mode,
+ *   Dialog's own: where a lifting close lands when that is not the trigger
+ *   (`animation="lifting"`, or `animation={{ open, close: "lifting" }}` for a
+ *   popup that opens the plain way and only lands on close),
+ *   read once the close is made (after `onClose`).
  * @param {"box"|"scene"} [lift="box"] Dialog's own, under `animation="lifting"`:
  *   `"box"` for a card that extends (its top stays, the box uncovers the rest),
  *   `"scene"` for a thumbnail that is a band cut from the middle of the bigger