@jsenv/navi 0.29.511 → 0.29.513

package/dist/dev/jsenv_navi.js

@@ -38356,6 +38356,10 @@ const releaseTransitionDestination = (owner) => {
  * inside its rectangle — which is where the hand thinks it pressed. The same
  * move route_travel.jsx makes for the box a finger reaches for mid-flight.
  *
+ * A `RouteTravel` holds this too. It leaves the bars live, so a control there
+ * gets its click on its own; what this serves is a control in the part of a bar
+ * photographed for the travel (`data-navi-fixed-bar-overhang`, fixed_bar.jsx).
+ *
  * ASKED FOR, never derived, and that is the whole safety of it: only the
  * application knows the control does not move. One that travels with the pages
  * has a rectangle where it WILL be, not where it is seen, and a press handed to
@@ -38461,7 +38465,7 @@ const warnAboutPressablesThatMove = (areaElement) => {
     }
     warnOnce$1(
       "inside-area",
-      `A control asking to stay pressable during a route transition stands inside the pages (the element marked ${AREA_ATTRIBUTE}), and the pages are what moves: its rectangle says where it will BE, not where it is drawn, so a press aimed at what is on screen would be handed to whatever ends up under the finger. Only the furniture around the pages stands still for the length of a movement.`,
+      `A control asking to stay pressable during a route transition stands inside the pages (the element marked ${AREA_ATTRIBUTE}, or the box of a RouteTravel), and the pages are what moves: its rectangle says where it will BE, not where it is drawn, so a press aimed at what is on screen would be handed to whatever ends up under the finger. Only the furniture around the pages stands still for the length of a movement.`,
     );
     return;
   }
@@ -41731,7 +41735,8 @@ const css$16 = /* css */`.navi_route_travel {
  * root's name is dropped for that time (`view-transition-name: none`), so what
  * stands around the box — a tab row beside it — stays live and answers a press
  * mid-travel. The application's own rule for the root applies again the moment
- * the travel is over.
+ * the travel is over. What stands out of a `FixedBar` is the exception, when it
+ * asks to stay over the pages (see `data-navi-fixed-bar-overhang` there).
  */
 const RouteTravel = ({
   routes: routesProp,
@@ -41814,7 +41819,11 @@ const RouteTravel = ({
       // by CSS until then, so an empty hand here costs nothing: there is
       // nothing to stop, only nowhere to put them yet.
       animations: null,
-      ended: false
+      ended: false,
+      // The box as it set off, kept rather than read from the ref: the
+      // navigation a travel asks for can take the box down (see the update
+      // callback), and the name it wears is still given back to it.
+      element: elementRef.current
     };
     travelRef.current = travel;
     // A press landing on a playing travel lands on the document root: the box
@@ -41830,7 +41839,7 @@ const RouteTravel = ({
     });
     // Whether the document's offset is this row's business at all (see
     // pagesScrollTheDocument), asked once and before anything is swapped.
-    travel.scrollsDocument = pagesScrollTheDocument(elementRef.current);
+    travel.scrollsDocument = pagesScrollTheDocument(travel.element);
     if (travel.scrollsDocument) {
       // One of the tabs is about to be swapped out from under that scrollport,
       // and whatever the browser does with the offset meanwhile — clamping it
@@ -41847,8 +41856,12 @@ const RouteTravel = ({
     // at the same moment and for the same reason: whoever names something for
     // a movement between two pages decides on it now (see
     // transition_destination.js).
-    nameForTravel(elementRef.current);
+    nameForTravel(travel.element);
     holdTransitionDestination(travel, page.route.buildUrl(page.params));
+    // The bars stay live, except what one of them has photographed on its own
+    // (see fixed_bar.jsx), which is deaf like any picture and may have asked to
+    // keep answering.
+    holdTransitionPress(travel, travel.element);
     document.documentElement.setAttribute(TRAVEL_ATTRIBUTE, direction);
     document.documentElement.setAttribute(TRAVEL_AXIS_ATTRIBUTE, axis);
     if (scrub) {
@@ -41859,7 +41872,7 @@ const RouteTravel = ({
     // The box as it stands before anything moves, and the band the furniture
     // around it leaves free: rendering is held, so both are still the page
     // being left (see transition_window.js).
-    const stateBefore = measureTransitionWindowState(elementRef.current);
+    const stateBefore = measureTransitionWindowState(travel.element);
     // The hold a navigation already took, if this travel is the answer to one:
     // taking another would be taking a hold on a page that is holding still.
     const releaseRendering = takeoverRoutingRenderingHold();
@@ -41897,6 +41910,19 @@ const RouteTravel = ({
         } = travel.page;
         arriveAtScrollPosition(route.buildUrl(params));
       }
+      // The box itself may be gone: rendered inside one of the pages of its
+      // row rather than around them, it went down with the page being left,
+      // and there is no box left for the page arriving to be photographed in.
+      // The navigation stands — it is what was asked for — and the movement
+      // is dropped.
+      if (!travel.element.isConnected) {
+        {
+          warnBoxTakenDown(travel.page);
+        }
+        travel.viewTransition.skipTransition();
+        endTravel(travel);
+        return;
+      }
       // The page arriving is in the DOM and the transition has not started
       // playing: the one moment both boxes can be known. After the scroll,
       // which is what the box is measured through: the two states are at the
@@ -41904,7 +41930,7 @@ const RouteTravel = ({
       // (see transition_window.js).
       // The bars stay live under the pictures for a travel: only the box is
       // photographed (see the TRAVEL_ATTRIBUTE css).
-      holdTransitionWindow(travel, elementRef.current, stateBefore, {
+      holdTransitionWindow(travel, travel.element, stateBefore, {
         furnitureLive: true
       });
     });
@@ -42251,13 +42277,14 @@ const RouteTravel = ({
       // Given back, so another box may wear it: kept, two of them on a page
       // would both answer to it and the browser refuses the whole transition
       // rather than pick.
-      unnameAfterTravel(elementRef.current);
+      unnameAfterTravel(travel.element);
       document.documentElement.removeAttribute(TRAVEL_ATTRIBUTE);
       document.documentElement.removeAttribute(TRAVEL_AXIS_ATTRIBUTE);
       document.documentElement.removeAttribute(DRAGGED_ATTRIBUTE);
       document.documentElement.removeAttribute(TURNED_ATTRIBUTE);
       releaseTransitionWindow(travel);
       releaseTransitionDestination(travel);
+      releaseTransitionPress(travel);
     }
   };
 
@@ -42813,6 +42840,17 @@ const currentPageIndex = pages => {
 // A transition skipped by another one starting is an outcome, not a failure.
 const ignoreSkipped = () => {};
 
+// Said once, whatever the number of swipes: a box in the wrong place is one
+// fact about the application, and repeating it every time would bury it.
+let boxTakenDownWarned = false;
+const warnBoxTakenDown = page => {
+  if (boxTakenDownWarned) {
+    return;
+  }
+  boxTakenDownWarned = true;
+  console.warn(`[navi] RouteTravel: the page ${page.route.buildUrl(page.params)} is not rendered under this box — the navigation took the box down with the page it was in, so the travel is dropped. The box must outlive every page of its row: around those <Route>s (a layout route), or around one <Route> whose params are the tabs, never inside one of the pages.`);
+};
+
 // The name is lent to the box that is travelling and taken back afterwards.
 // There is one transition in a document at a time, so one box wears it at a
 // time — and the others, unnamed, are simply not captured: they stay live
@@ -57973,7 +58011,8 @@ const LinkPseudoElements = ["::-navi-loader", "::-navi-indicator"];
  *   press on it is aimed at what the reader can see. Say it there, and only
  *   there: a control that TRAVELS with the pages has a rectangle where it will
  *   be, not where it is seen, and a press handed to it fires something nobody
- *   aimed at.
+ *   aimed at. A `RouteTravel` honours it as well, for a control in the part of
+ *   a `FixedBar` it photographs (`data-navi-fixed-bar-overhang`).
  * @param {boolean} [props.replace] - Go to the destination by TAKING THE PLACE
  *   of the current history entry instead of stacking onto it: the link stays a
  *   link (an address, a middle click, the keyboard, `aria-current`), only the
@@ -60533,6 +60572,7 @@ const css$Y = /* css */`@layer navi {
     --navi-fixed-bar-border-width: 1px;
     --navi-fixed-bar-border-color: var(--navi-separator-color-default);
     --navi-fixed-bar-padding: 0px;
+    --navi-fixed-bar-shadow: none;
   }
 }
 
@@ -60597,6 +60637,46 @@ const css$Y = /* css */`@layer navi {
         var(--navi-fixed-bar-border-color);
   }
 }
+
+.navi_fixed_bar_shadow {
+  z-index: -1;
+  border-radius: inherit;
+  box-shadow: var(--navi-fixed-bar-shadow);
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.navi_fixed_bar[data-area="top"] > .navi_fixed_bar_shadow {
+  bottom: calc(-1 * var(--navi-fixed-bar-border-width));
+  clip-path: inset(0 0 -100vh);
+}
+
+.navi_fixed_bar[data-area="bottom"] > .navi_fixed_bar_shadow {
+  top: calc(-1 * var(--navi-fixed-bar-border-width));
+  clip-path: inset(-100vh 0 0);
+}
+
+.navi_fixed_bar[data-area="left"] > .navi_fixed_bar_shadow {
+  right: calc(-1 * var(--navi-fixed-bar-border-width));
+  clip-path: inset(0 -100vw 0 0);
+}
+
+.navi_fixed_bar[data-area="right"] > .navi_fixed_bar_shadow {
+  left: calc(-1 * var(--navi-fixed-bar-border-width));
+  clip-path: inset(0 0 0 -100vw);
+}
+
+@supports (view-transition-name: match-element) {
+  :root[data-navi-route-travel] .navi_fixed_bar_shadow, :root[data-navi-route-travel] [data-navi-fixed-bar-overhang] {
+    view-transition-name: match-element;
+    view-transition-class: navi_fixed_bar_over_pages;
+  }
+}
+
+:root[data-navi-route-travel-turned]::view-transition-group(.navi_fixed_bar_over_pages) {
+  display: block;
+}
 `;
 const FixedBarStyleCSSVars = {
   // width/height go through the vars the size calc reads: written as plain
@@ -60608,7 +60688,8 @@ const FixedBarStyleCSSVars = {
   padding: "--navi-fixed-bar-padding",
   background: "--navi-fixed-bar-background",
   borderWidth: "--navi-fixed-bar-border-width",
-  borderColor: "--navi-fixed-bar-border-color"
+  borderColor: "--navi-fixed-bar-border-color",
+  shadow: ["--navi-fixed-bar-shadow", "boxShadow"]
 };
 
 /**
@@ -60622,6 +60703,7 @@ const FixedBarStyleCSSVars = {
  *   border?: boolean,
  *   borderWidth?: string|number,
  *   borderColor?: string,
+ *   shadow?: string,
  * }>}
  * @param {"top"|"bottom"|"left"|"right"} [props.area="top"] - Which edge of
  *   the window it is pinned to. One bar per edge: a second one does not stack
@@ -60644,6 +60726,18 @@ const FixedBarStyleCSSVars = {
  * @param {string|number} [props.padding=0] - Along the bar only: left/right on
  *   a top or bottom bar, top/bottom on a side one. Across it, the size is
  *   `height`/`width`.
+ * @param {string} [props.shadow] - What the bar casts over the content, in
+ *   `box-shadow` syntax, cut at the bar's box on every side but the content's.
+ *   Takes no room. Prefer it to a `boxShadow` or a `filter` on the bar: those
+ *   are covered by the pages while a `RouteTravel` plays, this one stays over
+ *   them.
+ *
+ * A child standing out of the bar's box (a raised button, the notch around it)
+ * wears `data-navi-fixed-bar-overhang`: unmarked, the pages of a `RouteTravel`
+ * cover it wherever they have paint behind it. Marked, it stays over them, and
+ * like anything photographed it is deaf for the length of the travel —
+ * `pressableDuringRouteTransition` on a control inside it keeps that control
+ * answering. The rest of the bar stays live.
  */
 const FixedBar = ({
   children,
@@ -60707,12 +60801,14 @@ const FixedBar = ({
       setFixedBarSpace(area, barElement, null);
     };
   }, [area, vertical]);
-  return jsx(Box, {
+  return jsxs(Box, {
     baseClassName: "navi_fixed_bar",
     "data-area": area,
     ...props,
     styleCSSVars: FixedBarStyleCSSVars,
-    children: children
+    children: [children, jsx("span", {
+      className: "navi_fixed_bar_shadow"
+    })]
   });
 };
 
@@ -63909,7 +64005,8 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   button in a bar the two states share, standing exactly where its picture is
  *   drawn — must still close it. What `<Link pressableDuringRouteTransition>`
  *   says, for the other half of a toggle. Only for a control that does not
- *   travel with the pages.
+ *   travel with the pages. A `RouteTravel` honours it as well, for a control in
+ *   the part of a `FixedBar` it photographs (`data-navi-fixed-bar-overhang`).
  * @param {Function} [action] What the press runs: a button holds no value, so
  *   every press is one call. Inside a `<Form>` or a group it carries the value
  *   around it, merged over the action's bound params — a value that is not an