@jsenv/navi 0.29.506 → 0.29.508

package/dist/jsenv_navi.js

@@ -55951,6 +55951,10 @@ const css$$ = /* css */`@layer navi {
     --link-color: unset;
     --link-text-decoration: none;
   }
+
+  .navi_link[data-color-inherit] {
+    --link-color-visited: var(--navi-link-color-visited, var(--link-color));
+  }
 }
 
 .navi_link {
@@ -56767,6 +56771,7 @@ const LinkPlain = props => {
     // Visual
     ,
     "data-variant": variant,
+    "data-color-inherit": props.color === "inherit" ? "" : undefined,
     "data-current-effect-bold": currentEffectBoldTechnique,
     "data-current-effect-shadow": currentEffectShadow ? "" : undefined,
     "data-current-indicator-position": currentIndicatorPosition,
@@ -68014,6 +68019,40 @@ const causeOfEvent = event => {
 // into says (see writeAreaAsked).
 const CAUSES_WRITTEN_BY_REPLACEMENT = ["drag", "refusal", "state"];
 const readArea = slideElement => slideElement.getAttribute("data-slide-area") || slideElement.id || "";
+const slidesOf = containerElement => Array.from(containerElement.querySelectorAll(":scope > [data-slide-track] > [data-slide]"));
+
+// Who is drawing something about a box from outside it: a tab bar saying where
+// one is, a row of dots. They name the box they follow by its id, the way
+// everything else that talks to it across the document does (commandfor).
+const readFollowerElements = containerElement => {
+  const {
+    id
+  } = containerElement;
+  if (!id) {
+    return [];
+  }
+  return Array.from(document.querySelectorAll(`[data-slide-container-follows="${CSS.escape(id)}"]`));
+};
+
+// The containers inside a slide bound to the same state as the slide's own
+// container (see `signal`) — the ones directly under it, a container sharing
+// with one of those is that one's business.
+const sharingContainersIn = slideElement => {
+  const holderElement = slideElement.closest("[data-slide-container]");
+  return Array.from(slideElement.querySelectorAll("[data-slide-shares-state]")).filter(innerElement => innerElement.parentElement.closest("[data-slide-container]") === holderElement);
+};
+
+// Whether the state holding `area` is on screen when this slide is: it is the
+// slide's own area, or a slide of a container sharing the state inside it.
+const slideShows = (slideElement, area) => readArea(slideElement) === area || sharingContainersIn(slideElement).some(innerElement => slidesOf(innerElement).some(innerSlide => slideShows(innerSlide, area)));
+
+// What the state holds while this slide is on screen: the area a container
+// sharing the state inside it stands on, its own area when there is none.
+const areaHeldOn = slideElement => {
+  const [innerElement] = sharingContainersIn(slideElement);
+  const innerCurrent = innerElement && slidesOf(innerElement).find(innerSlide => innerSlide.hasAttribute("data-current"));
+  return innerCurrent ? areaHeldOn(innerCurrent) : readArea(slideElement);
+};
 
 /**
  * The slide shown can be driven from outside (a `signal`, or `current` +
@@ -68048,6 +68087,10 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   "create"]`. Spelled like grid-template-areas ("." is a hole, a name
  *   repeated spans), except that a row needs no trailing hole: what is not
  *   written is simply not there.
+ *   A map is read as a map: a step landing on a hole is not offered. So rows
+ *   of different lengths, each walked on its own and changed as a whole (a
+ *   column of levels, a row of titles in each), are not a map but a container
+ *   in each slide of a column, all bound to one signal — see `signal`.
  * @param {string} [props.current] - area (or id) of the slide being shown; omit
  *   to keep it here and drive it by command. An area named from outside is a
  *   REQUEST rather than a placement — see `signal` for what that means.
@@ -68088,6 +68131,47 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   by links built to that route. Written by replacement unless the state says
  *   `history: "push"`, and even then a slide reached by DRAGGING replaces — see
  *   docs/navigation.md.
+ *   ONE STATE FOR CONTAINERS INSIDE ONE ANOTHER: a container in a slide,
+ *   bound to the SAME signal as the container holding it, shares that state.
+ *   For screens where one place is said at two levels — a column of
+ *   tournament levels with a row of titles in each, the address saying which
+ *   title (`?cup=P100:2`): the level is not a second state, it is read from
+ *   the title.
+ *   ```jsx
+ *   const cupSignal = stateSignal(undefined, { id: "cup" });
+ *
+ *   <SlideContainer layout="column" signal={cupSignal}>
+ *     {levels.map((level) => (
+ *       <Slide area={level.name}>
+ *         <LevelHeader level={level} />
+ *         <SlideContainer signal={cupSignal} defaultCurrent={level.entryKey}>
+ *           {level.titles.map((title) => (
+ *             <Slide area={title.key}>…</Slide>
+ *           ))}
+ *         </SlideContainer>
+ *       </Slide>
+ *     ))}
+ *   </SlideContainer>
+ *   ```
+ *   - The state holds an area of an INNER container. The outer one shows the
+ *     slide holding it, the inner ones that do not have it stay where they
+ *     are.
+ *   - A travel of the outer one writes the area the inner one stands on in the
+ *     slide it arrives at: a row left keeps its place for when one comes back,
+ *     and a row not seen yet opens on its `defaultCurrent`.
+ *   - A value written from outside (an address, a traversal) is walked to by
+ *     both, each on its own axis.
+ *   - The arrows of the inner one on screen are heard on the outer box and on
+ *     what follows it (`data-slide-container-follows`), so a surface follows
+ *     the OUTER one and all four arrows walk it.
+ *   - `onCurrentChange` still tells each one its own area: the level to the
+ *     outer one, the title to the inner one.
+ *   What an outer slide holds is read in the DOM: one whose content is not
+ *   built (`mount="near"`) holds nothing the state can name.
+ *   Neither `current` + `onCurrentChange` on each, ignoring `cause: "state"`
+ *   and remembering by hand where each row was left — that is a second copy of
+ *   the state (see docs/state_binding.md) — nor one map with rows of different
+ *   lengths (see `layout`).
  * @param {string} [props.defaultCurrent] - which slide to open on, for a
  *   container that owns its position. Mount-only, like every other `default*`:
  *   it says where one starts, not where one is — say `current` for that.
@@ -68097,7 +68181,8 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   opens is that state's own default (`stateSignal`'s first argument) rather
  *   than this: one place says where the area starts, and it is the place a
  *   reset goes back to. This still answers for a signal holding nothing at
- *   all.
+ *   all. And for a container sharing the state of the one holding it (see
+ *   `signal`), it is where it opens while the state names a place elsewhere.
  * @param {(area: string, detail: {cause: "drag"|"keyboard"|"command"|"code"|"state", event: Event}) => void|false|Promise<void|false>} [props.onCurrentChange]
  *   - the slide being shown has changed. `cause` says what asked for it, which
  *   is what tells a place browsed past from a place aimed at — a slide dragged
@@ -68217,6 +68302,10 @@ const SlideContainer = ({
   // The box itself: it is what takes the keyboard when what is on screen holds
   // nothing that can (see handOverFocus).
   const containerRef = useRef();
+  // Bound to the state of the container holding this one: its slides are
+  // places inside one of that container's slides (see `signal`).
+  const holder = useContext(SlideContainerContext);
+  const sharesState = Boolean(currentSignal) && holder?.signal === currentSignal;
   // The AREA of the slide being shown, not its rank: a rank would be wrong the
   // moment a slide appears before it, and there is nothing to renumber here.
   // This is where the container's own answer lives, and it is the only one the
@@ -68227,7 +68316,10 @@ const SlideContainer = ({
   // walking past every lock in exactly the case the locks are there for.
   // So the picture starts where the state itself would open (a stateSignal's
   // own default), or on `defaultCurrent`, and the walk goes from there.
-  const [currentAreaState, setCurrentAreaState] = useState(() => currentSignal?.options?.getDefaultValue?.() ?? defaultCurrent);
+  // A container sharing its holder's state starts on `defaultCurrent`: the
+  // state's default is a place in ONE of the containers sharing it, and the
+  // one holding it is walked there like any other.
+  const [currentAreaState, setCurrentAreaState] = useState(() => sharesState ? defaultCurrent : currentSignal?.options?.getDefaultValue?.() ?? defaultCurrent);
   // The slide this container is travelling to while its controller has not been
   // told yet (commit="rest"): for the length of that travel the container is
   // ahead of whoever holds `current`, and this is where it keeps its own answer
@@ -68310,6 +68402,21 @@ const SlideContainer = ({
   const followerElementsRef = useRef([]);
   const currentFromCaller = currentSignal ? currentSignal.value : currentProp;
   const current = rollingArea ?? provisionalArea ?? currentAreaState;
+  // The area of this box a value held outside is shown on: the slide of that
+  // name, or the one holding a container that shares the state and has it.
+  // Read off the last commit, so a render before the first sees it as it is.
+  const ownAreaOf = value => {
+    const track = trackRef.current;
+    if (value === undefined || !track) {
+      return value;
+    }
+    const slideElements = Array.from(track.children);
+    if (slideElements.some(slideElement => readArea(slideElement) === value)) {
+      return value;
+    }
+    const holding = slideElements.find(slideElement => slideShows(slideElement, value));
+    return holding ? readArea(holding) : value;
+  };
   // The last area this container knows the caller holds, whether it wrote it
   // there or read it from there. What makes a two-way binding stop turning: an
   // area held outside is an INSTRUCTION only when it changed by itself (a load,
@@ -68328,7 +68435,7 @@ const SlideContainer = ({
   // it is painted, the first request included — and the container's own answer
   // otherwise. What a slide waiting for a travel reads to have its content in
   // the very render that shows it (see Slide's `mount`).
-  const areaShownNext = requestIsNews() ? currentFromCaller : current;
+  const areaShownNext = requestIsNews() ? ownAreaOf(currentFromCaller) : current;
   // Where the container stands, said where the caller holds it.
   //
   // Whether a slide is a place one came from is the STATE's own business (see
@@ -68345,17 +68452,31 @@ const SlideContainer = ({
   const writeAreaAsked = (area, {
     cause
   } = {}) => {
-    areaAskedSeenRef.current = area;
     if (!currentSignal) {
+      areaAskedSeenRef.current = area;
       return;
     }
+    const value = valueOfArea(area);
+    areaAskedSeenRef.current = value;
     if (CAUSES_WRITTEN_BY_REPLACEMENT.includes(cause) && currentSignal.set) {
-      currentSignal.set(area, {
+      currentSignal.set(value, {
         history: "replace"
       });
       return;
     }
-    currentSignal.value = area;
+    currentSignal.value = value;
+  };
+  // What the state holds for one of this box's areas: the place a container
+  // sharing it stands on inside that slide (see areaHeldOn). A state already
+  // naming a place in that slide is kept as it is — a container in there may
+  // have written it in this very commit, before its DOM says so.
+  const valueOfArea = area => {
+    const held = currentSignal.peek();
+    if (held !== area && ownAreaOf(held) === area) {
+      return held;
+    }
+    const slideElement = readMap().slideElements.find(slideElement => readArea(slideElement) === area);
+    return slideElement ? areaHeldOn(slideElement) : area;
   };
   const vertical = layout === "column";
   // What the map has, and what each way of asking is allowed to use of it.
@@ -68407,7 +68528,7 @@ const SlideContainer = ({
     if (provisionalArea === null) {
       return;
     }
-    const heldOutside = currentFromCaller ?? currentAreaState;
+    const heldOutside = ownAreaOf(currentFromCaller) ?? currentAreaState;
     if (heldOutside === provisionalArea) {
       setProvisionalArea(null);
     }
@@ -68498,20 +68619,6 @@ const SlideContainer = ({
     };
   };
 
-  // Who is drawing something about this box from outside it: a tab bar saying
-  // where one is, a row of dots. They name the box they follow by its id, the
-  // way everything else that talks to it across the document does (commandfor).
-  const readFollowerElements = () => {
-    const containerEl = containerRef.current;
-    const {
-      id
-    } = containerEl;
-    if (!id) {
-      return [];
-    }
-    return Array.from(document.querySelectorAll(`[data-slide-container-follows="${CSS.escape(id)}"]`));
-  };
-
   // Which slide is on screen, said in the DOM: it is what anything outside the
   // box reads to know where one is (a tab bar marking its current tab), and
   // there is nothing else for it to read — a slide the container holds by
@@ -68650,7 +68757,7 @@ const SlideContainer = ({
     // Read on every render rather than subscribed to: a follower says who it
     // follows in the DOM, and the render that mounted one is the render this
     // runs after.
-    followerElementsRef.current = readFollowerElements();
+    followerElementsRef.current = readFollowerElements(containerRef.current);
     const {
       slideElements,
       placeOf
@@ -68736,7 +68843,7 @@ const SlideContainer = ({
     // 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,
-    // and lands when the slide it is for says it is settled (see settleFocus).
+    // and lands once the slide it is for is final (see landFocusHandOver).
     if (focusHandOverRef.current && focusHandOverRef.current.area !== readArea(currentElement)) {
       focusHandOverRef.current = null;
     }
@@ -68890,6 +68997,11 @@ const SlideContainer = ({
         requestAnimationFrame(rollBack);
       }
     }
+    // The slide a transfer waits for is current (any other one was dropped
+    // above): it lands once the renders this commit sets off are over.
+    if (focusHandOverRef.current) {
+      landFocusHandOver();
+    }
     // The keyboard is on a slide about to go out of reach and nobody has moved
     // it: inert would drop it on the floor (document.body), so it is handed to
     // the slide on screen instead. No event to read — this travel was asked for
@@ -68907,9 +69019,10 @@ const SlideContainer = ({
     // Out of reach LAST, once the keyboard has already moved on: a browser
     // takes the focus off an element the moment it becomes inert, and on its
     // own schedule — doing this first would let that undo the landing above and
-    // leave the focus on nothing.
-    for (const slideElement of slideElements) {
-      slideElement.toggleAttribute("inert", slideElement !== currentElement);
+    // leave the focus on nothing. A transfer still on its way does it itself,
+    // once landed.
+    if (!focusHandOverRef.current) {
+      markOutOfReach(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
@@ -68923,7 +69036,7 @@ const SlideContainer = ({
     // this one, in the same commit, and the slides around a picture about to be
     // walked away from would be built for nothing. The neighbours only at
     // rest, see renderNear.
-    const settlingArea = requestIsNews() && reachableTowards(currentArea, currentFromCaller) || currentArea;
+    const settlingArea = requestIsNews() && reachableTowards(currentArea, ownAreaOf(currentFromCaller)) || currentArea;
     renderNear(settlingArea, {
       alongside: !stageRef.current
     });
@@ -69173,8 +69286,11 @@ const SlideContainer = ({
     // content arrives a request later. Not a refusal: nothing is remembered and
     // nothing is written, and the render that brings the slide asks again. A
     // name that will never be a slide is the state's to refuse (`oneOf`), not
-    // the container's: from here, "later" and "never" look the same.
-    if (!readMap().slideElements.some(slideElement => readArea(slideElement) === currentFromCaller)) {
+    // the container's: from here, "later" and "never" look the same. Nor is a
+    // place shown by another container sharing the state — a row of a column
+    // of rows stays where it was while the state names a place in another one.
+    const areaAsked = ownAreaOf(currentFromCaller);
+    if (!readMap().slideElements.some(slideElement => readArea(slideElement) === areaAsked)) {
       return;
     }
     areaAskedSeenRef.current = currentFromCaller;
@@ -69182,10 +69298,10 @@ const SlideContainer = ({
     // names a slide, and the container standing on its first one is a fact only
     // the map knows (see the layout effect that paints it).
     const areaOnScreen = containerRef.current.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
-    if (currentFromCaller === areaOnScreen) {
+    if (areaAsked === areaOnScreen) {
       return;
     }
-    const reached = reachableTowards(areaOnScreen, currentFromCaller);
+    const reached = reachableTowards(areaOnScreen, areaAsked);
     if (reached && reached !== areaOnScreen) {
       // Told rather than asked: the walk above has already put every lock on
       // the way the question goToArea would have put the first one, and this
@@ -69257,14 +69373,7 @@ const SlideContainer = ({
   // dialog is OPEN, not when it was asked to open). `prepareFocusTransfer` has
   // to read the interaction — which element a mousedown landed on, whether the
   // modality is the keyboard — while the event is still being dispatched. The
-  // landing waits for the slide to say its DOM is settled (settleFocus below),
-  // which is later than one would think: a travel hands the slide a value
-  // (useSlideValue) and that value reaches it through context, so Preact
-  // re-renders the slide in a flush of its own — the container's own layout
-  // effect runs BEFORE its children have seen the value. A screen keyed by it,
-  // a form whose uncontrolled fields must start again from a new prefill,
-  // replaces its whole subtree there. Landing before that took the focus to a
-  // node about to be thrown away, and the focus went to document.body with it.
+  // landing waits for the slide's DOM to be final (see landFocusHandOver).
   const handOverFocus = (slideElement, focusTransfer, event) => {
     focusTransfer.transferFocus(event, slideElement);
     // Asked of the SLIDE, not of this box: the box contains itself, so asking
@@ -69289,21 +69398,46 @@ const SlideContainer = ({
     }
   };
 
-  // A slide reporting that its DOM is settled (its own layout effect, see
-  // Slide) — the moment the transfer prepared in goToArea can land. Every
-  // slide reports on every commit; only the one a transfer is waiting for,
-  // and only while it is the current one, takes it.
-  const settleFocus = slideArea => {
+  // The transfer prepared in goToArea lands once the slide it is for is the
+  // current one AND everything the travel set off has rendered — which is
+  // later than this box's own commit. A travel hands the slide a value
+  // (useSlideValue), and what reads it below a component that skipped its own
+  // render is re-rendered by Preact in a commit of its own, after this one. A
+  // screen keyed by it, a form whose uncontrolled fields must start again from
+  // a new prefill, replaces its whole subtree there: a focus landed before it
+  // goes to document.body with the node. Nor can the slide say when it is done
+  // from its own layout effect: rendered in the same pass as this box, its
+  // effects run before this box has made it current.
+  // Preact drains its render queue in one go, the renders it cascades into
+  // included, so a microtask queued from this commit runs after all of them.
+  // Until then the slide being left stays within reach (see markOutOfReach):
+  // inert would take the keyboard off it first, and drop it on document.body.
+  const landFocusHandOver = () => {
     const focusHandOver = focusHandOverRef.current;
-    if (!focusHandOver || focusHandOver.area !== slideArea) {
-      return;
-    }
-    const slideElement = readMap().slideElements.find(slideElement => readArea(slideElement) === slideArea);
-    if (!slideElement || !slideElement.hasAttribute("data-current")) {
-      return;
+    queueMicrotask(() => {
+      // Already landed by an earlier commit of this cascade, given up on, or
+      // replaced by the transfer of a newer travel.
+      if (focusHandOverRef.current !== focusHandOver || !trackRef.current) {
+        return;
+      }
+      focusHandOverRef.current = null;
+      const currentElement = readMap().slideElements.find(slideElement => slideElement.hasAttribute("data-current"));
+      if (!currentElement) {
+        return;
+      }
+      if (readArea(currentElement) === focusHandOver.area) {
+        handOverFocus(currentElement, focusHandOver.focusTransfer, focusHandOver.event);
+      }
+      markOutOfReach(currentElement);
+    });
+  };
+
+  // Every slide but the one on screen out of reach — of the keyboard and of
+  // assistive technology alike.
+  const markOutOfReach = currentElement => {
+    for (const slideElement of readMap().slideElements) {
+      slideElement.toggleAttribute("inert", slideElement !== currentElement);
     }
-    focusHandOverRef.current = null;
-    handOverFocus(slideElement, focusHandOver.focusTransfer, focusHandOver.event);
   };
 
   /**
@@ -69614,7 +69748,7 @@ const SlideContainer = ({
     // Read again at the start of every travel, not only at every render: a
     // follower appearing does not make this box render, and the travel it must
     // draw is the one about to start.
-    followerElementsRef.current = readFollowerElements();
+    followerElementsRef.current = readFollowerElements(containerRef.current);
     cancelTravelProgressAnimation();
     paintTravelProgress(0);
     const painters = travelPainters();
@@ -69927,7 +70061,7 @@ const SlideContainer = ({
         trackAnimationRef.current?.cancel();
         trackAnimationRef.current = null;
         cancelTravelProgressAnimation();
-        followerElementsRef.current = readFollowerElements();
+        followerElementsRef.current = readFollowerElements(containerRef.current);
         drag.axis = axis;
         drag.areaBack = areaBack;
         drag.areaOn = areaOn;
@@ -70315,6 +70449,35 @@ const SlideContainer = ({
       }
     };
   });
+  // A container sharing the state of the one holding it is part of that one's
+  // surface: the arrows it walks are heard on the holder's box and on what
+  // follows it, while its slide is the one on screen — a row of a column of
+  // rows walks sideways with the keyboard on the column, or on a chevron of
+  // the column. A press something already travelled on is left alone (it is
+  // marked, see applyKeyboardShortcuts), and so is one pressed inside this box,
+  // which heard it first.
+  useLayoutEffect(() => {
+    const holderElement = sharesState && holder.containerRef.current;
+    if (!holderElement) {
+      return undefined;
+    }
+    const surfaceElements = [holderElement, ...readFollowerElements(holderElement)];
+    const onSurfaceKeyDown = keyDownEvent => {
+      const containerEl = containerRef.current;
+      if (keyDownEvent.defaultPrevented || !containerEl || containerEl.contains(keyDownEvent.target) || !containerEl.closest("[data-slide]")?.hasAttribute("data-current")) {
+        return;
+      }
+      onKeyDownShortcuts(keyDownEvent);
+    };
+    for (const surfaceElement of surfaceElements) {
+      surfaceElement.addEventListener("keydown", onSurfaceKeyDown);
+    }
+    return () => {
+      for (const surfaceElement of surfaceElements) {
+        surfaceElement.removeEventListener("keydown", onSurfaceKeyDown);
+      }
+    };
+  });
   return (
     // Box rather than a plain div: it is how every navi component takes the
     // onnavi_* handlers below — they are navi's own event names, and Box is
@@ -70324,6 +70487,10 @@ const SlideContainer = ({
       ref: containerRef,
       baseClassName: "navi_slide_container",
       "data-slide-container": ""
+      // What the holder reads to show the slide holding the place the state
+      // names, and to write the place this box stands on (see `signal`).
+      ,
+      "data-slide-shares-state": sharesState ? "" : undefined
       // Which axes a touch may travel on, said in the DOM: what the browser
       // does with a finger is decided by CSS (touch-action) before any of this
       // has seen the gesture — and it is also what a box HOLDING this one reads
@@ -70458,13 +70625,15 @@ const SlideContainer = ({
             answeredAreas,
             done,
             valueByArea,
-            settleFocus,
             // What a slide reads to know whether its content is rendered yet
             // (see Slide's `mount`).
             mount,
             areaShownNext,
             nearAreas,
             claimOpening: areaShownNext === undefined ? claimOpening : null,
+            // What a container nested in a slide compares its own with, to
+            // know it shares this state (see `signal`).
+            signal: currentSignal,
             // The box itself, for what is written INSIDE it to read the same
             // facts what is written outside reads by id (useSlideContainer):
             // a way out is a way out on either side of the box.
@@ -70539,15 +70708,6 @@ const Slide = ({
   }), [nextIsLocked, preventNavPrevious]);
   // What the travel into this slide carried, if anything (see useSlideValue).
   const slideValue = container?.valueByArea?.[slideArea];
-  // This slide's DOM is settled — said after EVERY commit, no dependency
-  // array, because it is a fact about the render that just happened, not a
-  // reaction to a particular prop. The container is the one holding a focus
-  // transfer waiting for it (see settleFocus): a travel's value reaches this
-  // slide through context one flush after the container moved, and what it
-  // shows (a form keyed by a prefill) is only final here.
-  useLayoutEffect(() => {
-    container?.settleFocus?.(slideArea);
-  });
   return jsx(SlideContext.Provider, {
     value: locks,
     children: jsx(SlideValueContext.Provider, {