@jsenv/navi 0.29.209 → 0.29.211

package/dist/dev/jsenv_navi.js

@@ -11232,6 +11232,10 @@ const isMac = detectMac();
  * it, which is the hand saying it has moved on. What answers "away" is the same
  * thing that closes a popup, and the surface is the one that watches for it, so
  * an application never keeps a `pointerdown` listener on the window to know.
+ * `[data-hand-kept]` is on the element for as long as it holds the hand that
+ * way, so the paid wait can be drawn — a page darkened around a plan that
+ * answers on contact now. `[data-grabbed]` stays the narrower one: a hand on it
+ * at this instant.
  *
  * The WHEEL is the same question asked of a mouse, and it is not asked of the
  * caller at all: a wheel event is read rather than settled beforehand, so
@@ -27867,7 +27871,7 @@ installImportMetaCssBuild(import.meta);
 
 /**
  * The window two pages are seen through while one replaces the other, measured
- * once and published for the length of the movement.
+ * at the one moment both exist and published for the length of the movement.
  *
  * Both ways of moving from one route to another need the same numbers, so they
  * are written under the same names and read by the same CSS formulas —
@@ -27892,6 +27896,18 @@ installImportMetaCssBuild(import.meta);
  *   in the window — one page is scrolled and the other is not, one has a top
  *   bar over it and the other has the screen. Each picture is placed at its
  *   own corner inside the window.
+ * - **where the arriving state IS, frame after frame.** The browser places the
+ *   group from the live arriving element on every frame of the movement — that
+ *   is what makes a picture pair follow an element that moves — and the
+ *   formula that moves the group back to the window's corner cancels that
+ *   placement with this corner. Read once, the two stop cancelling the moment
+ *   anything scrolls the document under the movement (a slice landing and
+ *   putting a row back, a list placing its default row, a height growing under
+ *   a restored offset): the window drifts by as much, and both pictures with
+ *   it — the photograph of the page being left included. So this corner alone
+ *   is kept live, as often as the browser reads its side of it. It is also
+ *   the arriving picture's own corner, which then stays where the page really
+ *   is and lands with no jump when the pictures are dropped.
  * - **the band the state being left kept free**, next to the one the arriving
  *   state keeps free. A band is furniture — a fixed bar, a sticky row — and
  *   the pictures are cut at it so they are not watched painting over it. Read
@@ -27901,8 +27917,11 @@ installImportMetaCssBuild(import.meta);
  *   at the one moment the state being left still exists, the cut can be taken
  *   at what is furniture on BOTH sides (see the clip formulas).
  *
- * Only the measuring needs JS, and only for the one moment both states exist:
- * the page arriving is in the DOM and the transition has not started playing.
+ * Only the measuring needs JS, and apart from the arriving corner it happens
+ * at the one moment both states exist: the page arriving is in the DOM and the
+ * transition has not started playing. The window, the corner of the state
+ * being left and its band describe a state that no longer exists, and reading
+ * them again is what must never happen.
  * Everything DERIVED from these numbers — the band a fixed bar covers, how far
  * a page travels — is derived in CSS, so the application's own numbers (the
  * room its bars give back, see layout/safe_area.js; what covers the box from
@@ -28003,6 +28022,8 @@ const WINDOW_PROPERTIES = [
 // after another has replaced it must not wipe numbers the new one is standing
 // on.
 let windowOwner = null;
+// Stops re-reading the arriving state's corner, when a movement is on.
+let unfollowArrivingState = null;
 
 /**
  * The state being left, taken while rendering is held — the page arriving is
@@ -28048,6 +28069,7 @@ const holdTransitionWindow = (owner, element, stateBefore) => {
   style.setProperty(OLD_BAND_RIGHT_PROPERTY, `${oldBand.right}px`);
   style.setProperty(OLD_BAND_BOTTOM_PROPERTY, `${oldBand.bottom}px`);
   style.setProperty(OLD_BAND_LEFT_PROPERTY, `${oldBand.left}px`);
+  followArrivingState(element, rectAfter);
 };
 
 // The live layout takes the box back. A discontinuity by construction — the
@@ -28059,12 +28081,45 @@ const releaseTransitionWindow = (owner) => {
     return;
   }
   windowOwner = null;
+  if (unfollowArrivingState) {
+    unfollowArrivingState();
+  }
   const { style } = document.documentElement;
   for (const property of WINDOW_PROPERTIES) {
     style.removeProperty(property);
   }
 };
 
+// The arriving state's corner, re-read every frame — as often as the browser
+// refreshes the group's placement from the same element (see the top of the
+// file). Requested, never awaited: the first call runs inside the update
+// callback, where a frame cannot come. Written only when it moved: a custom
+// property set on the root recomputes the style of the whole document.
+const followArrivingState = (element, rectAtHold) => {
+  if (unfollowArrivingState) {
+    unfollowArrivingState();
+  }
+  const { style } = document.documentElement;
+  let top = rectAtHold.top;
+  let left = rectAtHold.left;
+  let frame = requestAnimationFrame(function read() {
+    const rect = element.getBoundingClientRect();
+    if (rect.top !== top) {
+      top = rect.top;
+      style.setProperty(WINDOW_NEW_TOP_PROPERTY, `${top}px`);
+    }
+    if (rect.left !== left) {
+      left = rect.left;
+      style.setProperty(WINDOW_NEW_LEFT_PROPERTY, `${left}px`);
+    }
+    frame = requestAnimationFrame(read);
+  });
+  unfollowArrivingState = () => {
+    unfollowArrivingState = null;
+    cancelAnimationFrame(frame);
+  };
+};
+
 // A band nothing can be wider than, published for an edge nothing is known
 // about: taken as the smaller of the two, it leaves the live band standing on
 // its own, which is the movement navi played before it knew any of this.
@@ -57000,8 +57055,9 @@ const getAvailableWidth = (layer, element) => {
  *
  * `animation="slide-from-*"` (anchorReference/point mode only): a real
  * translate-based entrance, 8 directions (cardinal + 4 diagonals), each
- * 100%-of-own-size, cut at the edges of the area the popup was placed in so
- * that a travel starting outside that area is not watched crossing it. It travels through `transform`, not through the
+ * 100%-of-own-size, cut on the side it comes from — at the edge of the area it
+ * was placed in, so the part of the travel that happens outside that area is
+ * not watched crossing it. It travels through `transform`, not through the
  * `translate` property, which belongs to the popup's own placement
  * (applyNewPosition in visible_rect.js — see its doc for why the placement is
  * a transform at all, and why it has to be the outermost one: the individual
@@ -57102,38 +57158,58 @@ const popupCss = /* css */ `
 
     /* slide — anchorReference/point mode family: direction multipliers,
          one per concrete navi-animation value, 100%-of-own-size distance
-         (see this file's top comment). */
+         (see this file's top comment).
+         Each also names the side(s) it comes from, as a cut placed on the edge
+         of the area the popup was placed in — and ONLY those sides: a popup
+         travelling down crosses the top edge of that area and no other, so
+         cutting the three it never reaches would take away what it legitimately
+         paints outside its own box (its shadow, a popup opened from inside it)
+         for nothing. A drawer the width of the app is the case that shows it:
+         its room to the left and right is zero, and cutting there would shave
+         its sides flat. See the shared rule below for what the cut is. */
     &[navi-animation="slide-from-top"] {
       --x-popup-slide-x: 0;
       --x-popup-slide-y: -1;
+      --x-popup-cut-top: var(--x-popup-cut-top-at-area);
     }
     &[navi-animation="slide-from-bottom"] {
       --x-popup-slide-x: 0;
       --x-popup-slide-y: 1;
+      --x-popup-cut-bottom: var(--x-popup-cut-bottom-at-area);
     }
     &[navi-animation="slide-from-left"] {
       --x-popup-slide-x: -1;
       --x-popup-slide-y: 0;
+      --x-popup-cut-left: var(--x-popup-cut-left-at-area);
     }
     &[navi-animation="slide-from-right"] {
       --x-popup-slide-x: 1;
       --x-popup-slide-y: 0;
+      --x-popup-cut-right: var(--x-popup-cut-right-at-area);
     }
     &[navi-animation="slide-from-top-left"] {
       --x-popup-slide-x: -1;
       --x-popup-slide-y: -1;
+      --x-popup-cut-top: var(--x-popup-cut-top-at-area);
+      --x-popup-cut-left: var(--x-popup-cut-left-at-area);
     }
     &[navi-animation="slide-from-top-right"] {
       --x-popup-slide-x: 1;
       --x-popup-slide-y: -1;
+      --x-popup-cut-top: var(--x-popup-cut-top-at-area);
+      --x-popup-cut-right: var(--x-popup-cut-right-at-area);
     }
     &[navi-animation="slide-from-bottom-left"] {
       --x-popup-slide-x: -1;
       --x-popup-slide-y: 1;
+      --x-popup-cut-bottom: var(--x-popup-cut-bottom-at-area);
+      --x-popup-cut-left: var(--x-popup-cut-left-at-area);
     }
     &[navi-animation="slide-from-bottom-right"] {
       --x-popup-slide-x: 1;
       --x-popup-slide-y: 1;
+      --x-popup-cut-bottom: var(--x-popup-cut-bottom-at-area);
+      --x-popup-cut-right: var(--x-popup-cut-right-at-area);
     }
     &[navi-animation="slide-from-top"],
     &[navi-animation="slide-from-bottom"],
@@ -57144,32 +57220,35 @@ const popupCss = /* css */ `
     &[navi-animation="slide-from-bottom-left"],
     &[navi-animation="slide-from-bottom-right"] {
       opacity: 1;
-      /* The travel is cut at the edges of the area the popup was placed in:
-         what it crosses on its way in is outside that area, and outside it is
-         either the glass beside an app narrowed with --navi-app-max-width
-         (layout/safe_area.js) or whatever surrounds a container — neither the
-         popup's to paint, and a popup in the top layer answers to no overflow
-         of the document.
-         --container-position-room-* is how far past each of its own edges the
-         popup may still paint before reaching that area's edge
-         (applyNewPosition in @jsenv/dom), so the negated value puts the cut ON
-         that edge, and an unplaced popup reading 100vmax cuts nothing. The
-         popup itself is never cut: the rooms floor at 0. */
-      --x-popup-cut-top: calc(-1 * var(--container-position-room-top, 100vmax));
-      --x-popup-cut-right: calc(
+      /* Where the area the popup was placed in has its edges, in the popup's
+         own coordinates: --container-position-room-* is how far past each of
+         its own edges the popup may still paint before reaching that edge
+         (applyNewPosition in @jsenv/dom), so the negated value puts a cut ON
+         it. Only the side(s) the travel comes from take one (see the direction
+         rules above); the rest stay far outside the box, uncut. A popup that
+         was never placed reads 100vmax and is not cut at all.
+         Outside that area is either the glass beside an app narrowed with
+         --navi-app-max-width (layout/safe_area.js) or whatever surrounds a
+         container — neither the popup's to paint, and a popup in the top layer
+         answers to no overflow of the document. The popup itself is never cut
+         either: the rooms floor at 0. */
+      --x-popup-cut-top-at-area: calc(
+        -1 * var(--container-position-room-top, 100vmax)
+      );
+      --x-popup-cut-right-at-area: calc(
         -1 * var(--container-position-room-right, 100vmax)
       );
-      --x-popup-cut-bottom: calc(
+      --x-popup-cut-bottom-at-area: calc(
         -1 * var(--container-position-room-bottom, 100vmax)
       );
-      --x-popup-cut-left: calc(
+      --x-popup-cut-left-at-area: calc(
         -1 * var(--container-position-room-left, 100vmax)
       );
       --x-popup-travel-x: calc(var(--x-popup-slide-x, 0) * 100%);
       --x-popup-travel-y: calc(var(--x-popup-slide-y, -1) * 100%);
       clip-path: inset(
-        var(--x-popup-cut-top) var(--x-popup-cut-right)
-          var(--x-popup-cut-bottom) var(--x-popup-cut-left)
+        var(--x-popup-cut-top, -100vmax) var(--x-popup-cut-right, -100vmax)
+          var(--x-popup-cut-bottom, -100vmax) var(--x-popup-cut-left, -100vmax)
       );
 
       transform: translate(0px, 0px);
@@ -57183,10 +57262,10 @@ const popupCss = /* css */ `
            ends of the transition — and so at every instant in between, the two
            interpolating over one duration and one easing. */
         clip-path: inset(
-          calc(var(--x-popup-cut-top) - var(--x-popup-travel-y))
-            calc(var(--x-popup-cut-right) + var(--x-popup-travel-x))
-            calc(var(--x-popup-cut-bottom) + var(--x-popup-travel-y))
-            calc(var(--x-popup-cut-left) - var(--x-popup-travel-x))
+          calc(var(--x-popup-cut-top, -100vmax) - var(--x-popup-travel-y))
+            calc(var(--x-popup-cut-right, -100vmax) + var(--x-popup-travel-x))
+            calc(var(--x-popup-cut-bottom, -100vmax) + var(--x-popup-travel-y))
+            calc(var(--x-popup-cut-left, -100vmax) - var(--x-popup-travel-x))
         );
         transform: translate(var(--x-popup-travel-x), var(--x-popup-travel-y));
       }
@@ -57409,7 +57488,7 @@ const createSwipeToClose = (side, { grip } = {}) => {
     // composes under the placement instead of replacing it.
     const styleAt = (distance) => ({
       transform: translateOf(axis, distance),
-      clipPath: clipOf(axis, distance),
+      clipPath: clipOf(side, distance),
     });
     const paint = (distance) => {
       Object.assign(panelEl.style, styleAt(distance));
@@ -57497,21 +57576,27 @@ const translateOf = (axis, distance) =>
     ? `translate(${distance}px, 0px)`
     : `translate(0px, ${distance}px)`;
 // The same cut the entry/exit animation makes (popup_css.js), at a distance the
-// finger decides instead of a transition: each edge sits where the popup's own
-// room ran out (--container-position-room-*, written by applyNewPosition), and
-// the pull is added back so the cut stays on that line while the box travels
-// under it. Unset rooms — a popup that was never placed — read as 100vmax,
-// which cuts nothing.
-const roomOf = (edge) => `var(--container-position-room-${edge}, 100vmax)`;
-const clipOf = (axis, distance) => {
-  const alongX = axis === "x" ? distance : 0;
-  const alongY = axis === "y" ? distance : 0;
-  return `inset(
-    calc(-1 * ${roomOf("top")} - ${alongY}px)
-    calc(-1 * ${roomOf("right")} + ${alongX}px)
-    calc(-1 * ${roomOf("bottom")} + ${alongY}px)
-    calc(-1 * ${roomOf("left")} - ${alongX}px)
-  )`;
+// finger decides instead of a transition: the edge the popup is pushed back
+// through sits where its own room ran out (--container-position-room-*, written
+// by applyNewPosition), plus what has been pulled, so the cut holds that line
+// while the box travels under it. The three other sides are left far outside
+// the box — the pull never takes the popup past them, and cutting there would
+// only shave what it legitimately paints outside its own box. An unset room —
+// a popup that was never placed — reads 100vmax and cuts nothing.
+const UNCUT = "-100vmax";
+const clipOf = (side, distance) => {
+  const pulled = distance < 0 ? -distance : distance;
+  const cut = `calc(-1 * var(--container-position-room-${side}, 100vmax) + ${pulled}px)`;
+  if (side === "top") {
+    return `inset(${cut} ${UNCUT} ${UNCUT} ${UNCUT})`;
+  }
+  if (side === "right") {
+    return `inset(${UNCUT} ${cut} ${UNCUT} ${UNCUT})`;
+  }
+  if (side === "bottom") {
+    return `inset(${UNCUT} ${UNCUT} ${cut} ${UNCUT})`;
+  }
+  return `inset(${UNCUT} ${UNCUT} ${UNCUT} ${cut})`;
 };
 
 /**
@@ -76064,6 +76149,14 @@ function WheelUI(props) {
     if (trackedItemsRef.current.length === 0) {
       return;
     }
+    // Without a box (display: none, rows not laid out yet) every position below
+    // multiplies by an item size of 0: nothing can be placed. Leave
+    // centeredIndexRef null rather than claim a row is centered, so the render
+    // that brings the wheel back on screen doesn't read it as "already there".
+    if (getItemSize(viewportEl) === 0) {
+      centeredIndexRef.current = null;
+      return;
+    }
     let selectedIndex = getIndexForValue(currentValueRef.current);
     if (selectedIndex < 0) {
       selectedIndex = 0;
@@ -76110,7 +76203,7 @@ function WheelUI(props) {
     const requestedBehavior = pendingBehaviorRef.current;
     pendingBehaviorRef.current = null;
     const viewportEl = getViewport();
-    if (!viewportEl || viewportEl.offsetParent === null) {
+    if (!viewportEl) {
       return;
     }
     let behavior = "auto";