@jsenv/navi 0.29.119 → 0.29.121

package/dist/jsenv_navi.js

@@ -4256,6 +4256,53 @@ const findControlProxy = (el) => {
   return firstProxy;
 };
 
+/**
+ * Typography reset shared by the surfaces a control opens: callout, popover,
+ * dialog.
+ *
+ * A surface is painted on top of the page but lives in the DOM subtree of the
+ * element it opens from, so every inherited text property of that element
+ * reaches it. The ink an element chose for its own background — centered,
+ * shadowed, uppercase, letter-spaced, kept on one line — arrives on paper that
+ * has none of that background, and the caller discovers it as a symptom
+ * (a blurred tooltip, a centered message) with nothing on screen pointing back
+ * to the rule three elements up. A surface writes its own text, on its own
+ * paper, in the document's terms.
+ *
+ * Every one of them is set to its initial value rather than `revert`: only
+ * `color` and `background-color` are declared by the UA on a `[popover]`/
+ * `<dialog>`, so `revert` on any of these would roll back to the inherited
+ * value — the very thing to stop. `text-align: initial` is `start`, which
+ * still reads the surface's own `direction`, so an RTL document keeps its
+ * side.
+ *
+ * `font-family` is deliberately absent: a surface keeps the face of what
+ * opened it, so a section written in a display font gets its tooltips in that
+ * font. `color`, `font-size` and `font-weight` are absent too — each surface
+ * answers those its own way (a popup writes in --navi-popup-color and follows
+ * the size of what opened it; a callout reverts to the document's ink and
+ * size).
+ *
+ * In `@layer navi` so an app that wants one of these back says so on the
+ * surface and wins, without having to out-specify anything.
+ */
+const surfaceTextCss = /* css */ `
+  @layer navi {
+    .navi_callout,
+    .navi_popover,
+    .navi_dialog {
+      font-style: initial;
+      text-align: initial;
+      text-indent: initial;
+      text-transform: initial;
+      text-shadow: none;
+      white-space: initial;
+      word-spacing: initial;
+      letter-spacing: initial;
+    }
+  }
+`;
+
 const CalloutContext = createContext();
 const useCalloutRequestClose = () => {
   return useContext(CalloutContext)?.requestClose;
@@ -4601,7 +4648,6 @@ const css$11 = /* css */`
           box-sizing: border-box;
           box-decoration-break: clone;
           align-self: center;
-          white-space: normal; /* Override in case ancetor sets nowrap */
           word-break: break-word;
           overflow-wrap: anywhere;
 
@@ -4670,6 +4716,8 @@ const css$11 = /* css */`
       }
     }
   }
+
+  ${surfaceTextCss}
 `;
 
 /**
@@ -38845,7 +38893,6 @@ installImportMetaCssBuild(import.meta);const css$W = /* css */`
       --link-text-decoration: underline;
       --link-text-decoration-hover: var(--link-text-decoration);
       --link-cursor: pointer;
-      --link-loading-outline-size: 1px;
       --link-outline-width: 2px;
 
       --link-current-indicator-size: 2px;
@@ -38904,12 +38951,7 @@ installImportMetaCssBuild(import.meta);const css$W = /* css */`
     aspect-ratio: inherit;
     padding-top: var(--x-link-padding-top);
     padding-right: var(--x-link-padding-right);
-    /* The loading underline is drawn inside the box: its own room is kept at
-       the bottom on top of whatever padding was asked for, so a link that
-       starts loading never reflows. */
-    padding-bottom: calc(
-      var(--x-link-padding-bottom) + var(--link-loading-outline-size)
-    );
+    padding-bottom: var(--x-link-padding-bottom);
     padding-left: var(--x-link-padding-left);
     color: var(--x-link-color);
     text-decoration: var(--x-link-text-decoration);
@@ -39608,6 +39650,155 @@ const LinkCurrentIndicator = () => {
 };
 markAsOutsideTextFlow(LinkCurrentIndicator);
 
+/**
+ * What a SlideContainer is doing, read from outside it.
+ *
+ * Only slides go in the box, so everything drawn AROUND the travel is written
+ * around it — a chevron pinned to the edge of a full-screen viewer, a "3 / 8"
+ * counter, a bar. Those need to know things the box alone knows: where one is,
+ * and whether there is anywhere to go that way. A container driven by nobody
+ * (no `current`, no `signal`) knows them and no one else does, so this is also
+ * what keeps such a container usable without lifting its state out of it.
+ *
+ * Two channels, and they answer two different questions. The attributes the box
+ * paints on itself are the STATE: they are there for whoever arrives later, and
+ * CSS draws with them without any of this ([data-slide-ways~="right"]). The
+ * event it dispatches is the NEWS: it says WHEN something changed, which no
+ * attribute can say. So this reads the first and listens to the second.
+ *
+ * Not watching the DOM for it, which is the tempting third way and the wrong
+ * one: a write is not a change. Under a finger the box writes where the picture
+ * leans on every frame, with the same value in it more often than not, and a
+ * watcher is woken for every one of them — while the box itself knows perfectly
+ * well whether anything is different, and says so once.
+ *
+ * Nothing is told to the box in return, and nothing has to be wired: it
+ * announces to itself and to its followers, so the thing doing the reading sits
+ * anywhere on the page — in a fixed bar, in the frame around the box, in a
+ * dialog holding it — and a container which never re-renders (a travel it drove
+ * itself) is still followed.
+ *
+ * Reading only. Asking for a travel is what it always was: a command aimed at
+ * the box (`commandFor={id}` + `--navi-right`, or triggerNaviCommand) — one way
+ * of asking, wherever the asking is written.
+ */
+
+
+// The vocabulary the box publishes, in one place: written by slide_container,
+// read here and by anything styling in CSS alone
+// ([data-slide-ways~="right"]).
+const SLIDE_CURRENT_ATTRIBUTE = "data-slide-current";
+const SLIDE_TOWARD_ATTRIBUTE = "data-slide-travel-toward";
+// Where a travel WOULD go right now: there is a slide that way and the one on
+// screen lets go of it.
+const SLIDE_WAYS_ATTRIBUTE = "data-slide-ways";
+// …and where there is a slide that way but the one on screen holds on to the
+// user (preventNav, or a `required` step still unanswered). Two facts, not one:
+// a way out leading nowhere is not there, while a way out being held is there
+// and says no — which is why it stays visible and explainable rather than
+// hidden.
+const SLIDE_HELD_ATTRIBUTE = "data-slide-held";
+// …and the one word said out loud, on the box and on every follower of it, when
+// any of the above has actually changed. It carries the whole state as its
+// detail, so `onnavi_slide_state` on the box is a way of hearing it too.
+const SLIDE_STATE_EVENT = "navi_slide_state";
+
+const NO_WAYS = [];
+const NOTHING = {
+  current: undefined,
+  toward: undefined,
+  areas: NO_WAYS,
+  ways: NO_WAYS,
+  held: NO_WAYS,
+};
+
+const wordsOf = (element, attribute) => {
+  const value = element.getAttribute(attribute);
+  return value ? value.split(" ") : NO_WAYS;
+};
+
+const readSlideContainerState = (element) => ({
+  current: element.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ?? undefined,
+  toward: element.getAttribute(SLIDE_TOWARD_ATTRIBUTE) ?? undefined,
+  // In DOM order, which is the order of the walk for a line and the order the
+  // areas were written in for a map — the same order everything else reads
+  // (see readMap).
+  areas: Array.from(
+    element.querySelectorAll(":scope > [data-slide-track] > [data-slide]"),
+    (slideElement) =>
+      slideElement.getAttribute("data-slide-area") || slideElement.id || "",
+  ),
+  ways: wordsOf(element, SLIDE_WAYS_ATTRIBUTE),
+  held: wordsOf(element, SLIDE_HELD_ATTRIBUTE),
+});
+
+const sameSlideContainerState = (a, b) =>
+  a.current === b.current &&
+  a.toward === b.toward &&
+  a.areas.join(" ") === b.areas.join(" ") &&
+  a.ways.join(" ") === b.ways.join(" ") &&
+  a.held.join(" ") === b.held.join(" ");
+
+/**
+ * @param {string|Element|{current: Element}} [target] - the container: its id
+ *   (the way everything else addresses one), the element, or a ref to it. Not a
+ *   follower — a follower is painted for CSS to draw with, the box is what holds
+ *   the walk. Nothing at all is allowed and answers "no container": a component
+ *   that may or may not be wired to one calls this unconditionally, like every
+ *   hook.
+ * @returns {{
+ *   current: string|undefined,
+ *   toward: string|undefined,
+ *   areas: string[],
+ *   can: (direction: "left"|"right"|"up"|"down") => boolean,
+ *   held: (direction: "left"|"right"|"up"|"down") => boolean,
+ * }} where the box stands. `current` is the slide on screen — the one being
+ *   travelled TO while a travel plays, because that is what one is looking at;
+ *   `toward` is the other slide in the frame while the picture is between two,
+ *   and nothing at rest. `can` is "a travel that way would happen", `held` is
+ *   "there is a slide that way and this one says no" — a chevron is dead in
+ *   both cases and only the second is worth explaining.
+ */
+const useSlideContainer = (target) => {
+  const [state, setState] = useState(NOTHING);
+
+  useLayoutEffect(() => {
+    const element =
+      typeof target === "string"
+        ? document.getElementById(target)
+        : target && "current" in target
+          ? target.current
+          : target;
+    if (!element) {
+      setState(NOTHING);
+      return undefined;
+    }
+    // Read off the DOM rather than taken from the event's detail, even though
+    // the two say the same thing: the first read has no event to take it from
+    // (the box was already standing somewhere when this mounted), and one way
+    // of reading is one thing that can be wrong.
+    const read = () => {
+      const nextState = readSlideContainerState(element);
+      setState((previous) =>
+        sameSlideContainerState(previous, nextState) ? previous : nextState,
+      );
+    };
+    read();
+    element.addEventListener(SLIDE_STATE_EVENT, read);
+    return () => {
+      element.removeEventListener(SLIDE_STATE_EVENT, read);
+    };
+  }, [target]);
+
+  return {
+    current: state.current,
+    toward: state.toward,
+    areas: state.areas,
+    can: (direction) => state.ways.includes(direction),
+    held: (direction) => state.held.includes(direction),
+  };
+};
+
 installImportMetaCssBuild(import.meta);/**
  * TabList component with support for horizontal and vertical layouts
  * https://dribbble.com/search/tabs
@@ -40006,19 +40197,17 @@ const Nav = ({
     }
     slideContainerElementRef.current = containerElement;
     const readContainer = () => {
-      setCurrentSlideArea(containerElement.getAttribute("data-slide-current") ?? undefined);
+      setCurrentSlideArea(containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE) ?? undefined);
       paintIndicatorGeometryRef.current();
     };
     readContainer();
-    // The container says where one is and what the picture leans on, and says
-    // it in the DOM: nothing here is told, everything is read — which is what
-    // lets this row sit anywhere on the page (above the box, in a fixed bar)
-    // rather than inside it.
-    const attributeObserver = new MutationObserver(readContainer);
-    attributeObserver.observe(containerElement, {
-      attributes: true,
-      attributeFilter: ["data-slide-current", "data-slide-travel-toward"]
-    });
+    // Where one is and what the picture leans on are written on the container,
+    // and the container says out loud when either has changed: this row is not
+    // in the box (it sits above it, in a fixed bar, anywhere), so it reads the
+    // first and listens to the second. Listening rather than watching the DOM
+    // because a write is not a change — the attribute the trait follows is
+    // written on every frame of a gesture with the same value in it.
+    containerElement.addEventListener(SLIDE_STATE_EVENT, readContainer);
     // A row whose tabs changed width — a badge count, a font that just
     // arrived, a window resized — is measured again: what was written is
     // pixels, and pixels go stale.
@@ -40027,7 +40216,7 @@ const Nav = ({
     });
     sizeObserver.observe(navRef.current);
     return () => {
-      attributeObserver.disconnect();
+      containerElement.removeEventListener(SLIDE_STATE_EVENT, readContainer);
       sizeObserver.disconnect();
       slideContainerElementRef.current = null;
     };
@@ -49856,7 +50045,7 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   it says where one starts, not where one is — say `current` for that.
  *   Without it the first slide is the one shown, the way a stack of pages opens
  *   on its first page.
- * @param {(area: string, detail: {cause: "drag"|"keyboard"|"command"|"code", event: Event}) => void|false|Promise<void|false>} [props.onCurrentChange]
+ * @param {(area: string, detail: {cause: "drag"|"keyboard"|"command"|"code"|"url", 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 caller writing
  *   this into the URL pushes a history entry for a tab that was pressed and
@@ -49866,6 +50055,8 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   from — a guard that says no, a session that is gone. A promise refuses it
  *   late, once whatever it had to ask has answered; the travel plays meanwhile
  *   and is undone if the answer is no.
+ *   `cause: "url"` is the address asking (see `urlParam`) — a load on a link, a
+ *   traversal — rather than anything done inside the box.
  * @param {"now"|"rest"} [props.commit="now"] - when the change is told.
  *   "rest" waits for the travel to be over, and lets the container hold the
  *   slide it is going to meanwhile: the picture moves with the finger and the
@@ -49883,6 +50074,33 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   one that just travelled there. Called once the travel is over, and in the
  *   same render as the return to rest — anything later shows the old content
  *   for a frame.
+ * @param {string|{name: string, history?: "replace"|"push"}} [props.urlParam]
+ *   - the search param this container owns, and where it stands is written
+ *   into: `urlParam="step"` puts `?step=<area>` in the address on every travel,
+ *   and opens on the area it names on a load, a bookmark, a traversal, a link
+ *   from anywhere else in the application.
+ *   It is the answer to "the step should be readable and should survive a
+ *   reload" WITHOUT one route per slide: no route to declare, no route guard to
+ *   re-express the walk's own rules in, and no page transition — what travels
+ *   is the box, and the address is a label on where the box stands. Say it on a
+ *   container whose slides are places one may be sent to; a walk nobody links
+ *   into keeps its position to itself.
+ *   Written by REPLACEMENT: four steps that each stacked an entry would turn
+ *   one back-press into four, and the back arrow of a page means "leave this
+ *   page", not "one question back". `history: "push"` says the opposite for the
+ *   containers that mean it — slides that ARE places one came from, a gallery
+ *   one browses — and even there a slide reached by dragging replaces, so
+ *   swiping back and forth does not bury the way out.
+ *   The address is READ through the walk, not jumped to: it comes from outside
+ *   the box, so every slide between here and there is asked to let go the way a
+ *   key going that way would ask it, and the first one that holds
+ *   (`preventNav`, or a `required` step still unanswered) is where one stops —
+ *   `?step=done` cannot open a confirmation screen for something nobody sent.
+ *   Whatever comes of it, the address is then rewritten with the area actually
+ *   shown: it says where one IS, never where one asked to be. A step the app
+ *   knows is already answered on a reload is told so by its own `required`
+ *   (`required={!alreadyFilled}`) — the container remembers nothing across a
+ *   load, and cannot.
  * Each way of travelling can be shut off, or narrowed to one axis: `true`
  * (every axis the map has), `false`, `"x"`, `"y"`, `"xy"`.
  *
@@ -49893,6 +50111,13 @@ const readArea = slideElement => slideElement.getAttribute("data-slide-area") ||
  *   screens are steps rather than places — so the keys keep the meaning the
  *   content gives them, and travelling stays something one asks for (a button,
  *   a command).
+ *   WHERE they are heard is a separate question, and it is not answered here: a
+ *   key only ever reaches what has the focus, so this box hears the ones pressed
+ *   inside it — and every follower of it hears the rest. A chevron pinned to the
+ *   edge of a full-screen surface is outside the box by necessity (only slides
+ *   go in it), so the surface says `data-slide-container-follows={id}` and the
+ *   arrows keep walking wherever the keyboard is in it. See the paragraph above
+ *   about what is drawn AROUND the travel.
  * @param {boolean|"x"|"y"|"xy"} [props.travelByDrag=true] - whether a pointer
  *   dragging the slides travels. On by default: slides side by side are
  *   something one expects to push around with a thumb. Off where the gesture
@@ -49928,6 +50153,7 @@ const SlideContainer = ({
   commit = "now",
   loop,
   onLoop,
+  urlParam,
   travelByKeyboard = true,
   travelByDrag = true,
   travelByScroll = "x",
@@ -50023,6 +50249,51 @@ const SlideContainer = ({
   const followerElementsRef = useRef([]);
   const currentFromCaller = currentSignal ? currentSignal.value : currentProp;
   const current = rollingArea ?? provisionalArea ?? currentFromCaller ?? currentAreaState;
+  // The search param this container owns, when it owns one: the name it is
+  // written under, and whether going somewhere is somewhere one CAME from.
+  const urlParamName = typeof urlParam === "string" ? urlParam : urlParam?.name;
+  const urlParamHistory = urlParam?.history || "replace";
+  // What the address says right now. Read from the signal rather than from
+  // window.location so that a traversal — the browser's own back and forward —
+  // is a render like any other: the address moved, and the slides follow it.
+  // Read only when there is a param to read, so a container that owns none is
+  // not re-rendered by every navigation in the application.
+  const areaInUrl = urlParamName ? new URL(documentUrlSignal.value).searchParams.get(urlParamName) : null;
+  // The last thing this container knows the address said, whether it wrote it
+  // or read it. What makes a two-way binding stop turning: the address is only
+  // an INSTRUCTION when it changed by itself (a load, a traversal, a link), and
+  // what this container put there is not news. Without it, a container ahead of
+  // its own URL (commit="rest", where the picture arrives before the address is
+  // written) would read its own lateness as an order to go back.
+  const areaInUrlSeenRef = useRef(undefined);
+  // Where the container stands, said in the address. `replace` amends the entry
+  // one is on: a walk of four steps must not turn one back-press into four, and
+  // the back arrow of a page keeps meaning "leave this page". `push` is for
+  // slides that ARE places one came from — and even there a slide reached by
+  // DRAGGING replaces, because browsing back and forth with a thumb is not a
+  // trail one wants to walk home along.
+  const writeUrlParam = (area, cause, {
+    replace = false
+  } = {}) => {
+    if (!urlParamName) {
+      return;
+    }
+    areaInUrlSeenRef.current = area;
+    const urlObject = new URL(window.location.href);
+    if (urlObject.searchParams.get(urlParamName) === area) {
+      return;
+    }
+    urlObject.searchParams.set(urlParamName, area);
+    navTo(urlObject.href, {
+      replace: replace || urlParamHistory !== "push" || cause === "drag" ||
+      // The address already says it: reading it back is not a place one went.
+      cause === "url",
+      // What travels is the box, not the page: the address is a label on where
+      // the box stands, and a route transition would move the whole document
+      // for a slide that has already travelled by itself.
+      routeTransition: "none"
+    });
+  };
   const vertical = layout === "column";
   // What the map has, and what each way of asking is allowed to use of it.
   const mapAxes = travelAxesOf(layout);
@@ -50167,7 +50438,7 @@ const SlideContainer = ({
   // there is nothing else for it to read — a slide the container holds by
   // itself is known to no one else.
   const paintCurrentArea = area => {
-    containerRef.current?.setAttribute("data-slide-current", area);
+    containerRef.current?.setAttribute(SLIDE_CURRENT_ATTRIBUTE, area);
   };
   const markAnswered = area => {
     const order = readMap().slideElements.map(readArea);
@@ -50490,6 +50761,14 @@ const SlideContainer = ({
     if (!stageRef.current) {
       drawnAreaRef.current = currentArea;
     }
+    // Said last, and after data-current has been written: what a travel would do
+    // is read off the map from the slide that is now current, and off the locks
+    // that slide is wearing in this very commit.
+    paintWays(currentElement);
+    // …and once everything this commit had to write is written, the box says so
+    // — a single announcement for a render that may have changed several of the
+    // facts at once.
+    announceState();
     // The finger has the last word: everything above drew the map at rest, and
     // where the track actually is right now is where the gesture put it.
     paintDrag();
@@ -50625,7 +50904,7 @@ const SlideContainer = ({
     }
     const leftArea = readArea(currentElement);
     setCurrentAreaState(area);
-    if (!onCurrentChange && !currentSignal) {
+    if (!onCurrentChange && !currentSignal && !urlParamName) {
       return true;
     }
     // What asked for this, read off the interaction rather than carried down
@@ -50660,6 +50939,12 @@ const SlideContainer = ({
   // `onCurrentChange` is called, in that order, so a caller reading the signal
   // from inside its own handler reads where it now is.
   const tellCurrentChange = (area, detail, leftArea) => {
+    // The address first, because it is the one thing that must never disagree
+    // with the picture — and it is told here rather than by the caller so that
+    // it is told about the travels that HAPPENED and about no others: the ones
+    // a lock refused never reach this point, and one refused late is written
+    // back below (see goBackToRefusedArea).
+    writeUrlParam(area, detail.cause);
     if (currentSignal) {
       currentSignal.value = area;
     }
@@ -50693,8 +50978,62 @@ const SlideContainer = ({
     if (currentSignal) {
       currentSignal.value = leftArea;
     }
+    // Written over rather than stacked on, whatever this container does with
+    // the history otherwise: the entry the refused travel wrote is the one
+    // being corrected, and a refusal is not a place one was.
+    writeUrlParam(leftArea, "code", {
+      replace: true
+    });
   };
 
+  // The address asks for a slide. Read on every render it changes on rather
+  // than at mount alone, because the browser's own arrows are exactly that —
+  // the address moving by itself — and a link from elsewhere in the application
+  // is too. What follows is a travel like any other: the slides move, the
+  // caller is told, and the address ends up saying where the box actually
+  // stands.
+  useLayoutEffect(() => {
+    if (!urlParamName) {
+      return;
+    }
+    if (areaInUrl === areaInUrlSeenRef.current) {
+      // Not news: either nothing moved, or this container is reading back what
+      // it wrote itself.
+      return;
+    }
+    areaInUrlSeenRef.current = areaInUrl;
+    if (areaInUrl === null) {
+      // An address that says nothing is not an address saying "the first
+      // slide": a container opened without the param opens where it would have
+      // opened anyway, and the param appears the first time one travels.
+      return;
+    }
+    // Where the box IS, read off the DOM: `current` is undefined until someone
+    // 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("data-slide-current");
+    if (!areaOnScreen || areaInUrl === areaOnScreen) {
+      return;
+    }
+    const reached = reachableTowards(areaOnScreen, areaInUrl);
+    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
+      // travel has no interaction behind it to hand a focus to — the slide
+      // arriving is handed the keyboard by the layout effect, the way it is for
+      // any travel nobody pressed anything for.
+      setCurrentAreaState(reached);
+      tellCurrentChange(reached, {
+        cause: "url"
+      }, areaOnScreen);
+      return;
+    }
+    // The param names nowhere this map knows, or somewhere the walk is not
+    // allowed to reach: the address is put back on the slide one is actually
+    // looking at, rather than left saying one is somewhere one is not.
+    writeUrlParam(areaOnScreen, "url");
+  }, [urlParamName, areaInUrl]);
+
   // The press kept during a roll, taken once the window rests and the travel is
   // given back (noTravel off): by direction when there was one, so it is read
   // against the map as it is NOW — the content moved one step under the window
@@ -50788,20 +51127,25 @@ const SlideContainer = ({
   };
 
   /**
+   * @param {number} dx
+   * @param {number} dy
+   * @param {string} [fromArea] - where to step from. The slide on screen when
+   *   nothing says otherwise; named only by a walk that is not standing there
+   *   (see reachableTowards).
    * @returns {string|undefined} the area one step that way, if there is one.
    *   Nothing there means the direction is simply not offered — no wrapping, no
    *   nearest-match: a map is read as a map, and a move landing nowhere would
    *   break that reading. Walks over its own cells first, so a spanning area
    *   leaves by its far edge rather than onto itself.
    */
-  const areaTowards = (dx, dy) => {
+  const areaTowards = (dx, dy, fromArea) => {
     const {
       slideElements,
       areaAt,
       placeOf
     } = readMap();
     const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
-    const currentArea = readArea(currentElement);
+    const currentArea = fromArea ?? readArea(currentElement);
     let {
       x,
       y
@@ -50860,6 +51204,64 @@ const SlideContainer = ({
   const moveNext = (event, options) => vertical ? move(0, 1, event, options) || move(1, 0, event, options) : move(1, 0, event, options) || move(0, 1, event, options);
   const movePrevious = (event, options) => vertical ? move(0, -1, event, options) || move(-1, 0, event, options) : move(-1, 0, event, options) || move(0, -1, event, options);
 
+  /**
+   * How far the map lets one get towards an area, walking from where the
+   * container stands.
+   *
+   * What the ADDRESS asks for goes through here rather than straight to
+   * goToArea: a URL comes from OUTSIDE the walk — typed, shared, kept from a
+   * session that has moved on — so every slide on the way is asked to let go,
+   * exactly as a hand or a key going that way would ask it, and the first one
+   * that holds is where one stops. Jumped to instead, an address would open the
+   * one screen the walk itself cannot reach: the confirmation of something
+   * nobody sent. Stopping short is not a failure either — a wizard reopens as
+   * far along as it is allowed to, which is where the reader left off.
+   *
+   * @returns {string|undefined} the area one ends up on, undefined for a name
+   *   this map does not know.
+   */
+  const reachableTowards = (fromArea, targetArea) => {
+    const {
+      slideElements,
+      placeOf
+    } = readMap();
+    const target = placeOf.get(targetArea);
+    if (!target || !placeOf.has(fromArea)) {
+      return undefined;
+    }
+    if (loop) {
+      // A window has no walls to walk into: its slides are one endless line,
+      // and what they show is whoever owns the content to place.
+      return targetArea;
+    }
+    const holds = (area, forward) => {
+      const slideElement = slideElements.find(slideElement => readArea(slideElement) === area);
+      return slideElement?.hasAttribute(forward ? "data-prevent-nav-next" : "data-prevent-nav-previous");
+    };
+    let area = fromArea;
+    // A walk crosses each slide at most once — beyond that a map is reading
+    // itself in circles.
+    let stepsLeft = slideElements.length;
+    while (area !== targetArea && stepsLeft--) {
+      const place = placeOf.get(area);
+      // Along the row first, then down: the order a map is read in.
+      const dx = Math.sign(target.x - place.x);
+      const dy = dx ? 0 : Math.sign(target.y - place.y);
+      if (!dx && !dy) {
+        break;
+      }
+      if (holds(area, dx > 0 || dy > 0)) {
+        break;
+      }
+      const next = areaTowards(dx, dy, area);
+      if (!next) {
+        break;
+      }
+      area = next;
+    }
+    return area;
+  };
+
   // Where the track is right now, as the gesture left it: the resting place of
   // the slide being dragged, plus what the pointer has pulled since.
   const paintDrag = () => {
@@ -50894,10 +51296,93 @@ const SlideContainer = ({
   const paintTravelToward = area => {
     for (const element of travelPainters()) {
       if (area) {
-        element.setAttribute("data-slide-travel-toward", area);
+        element.setAttribute(SLIDE_TOWARD_ATTRIBUTE, area);
+      } else {
+        element.removeAttribute(SLIDE_TOWARD_ATTRIBUTE);
+      }
+    }
+    // The one fact that changes without a render behind it: under a finger this
+    // is written per frame, so the announcement is left to say whether any of
+    // those writes was a change.
+    announceState();
+  };
+
+  // What a travel would do right now, said in two lists because they are two
+  // different facts: `ways` is where one WOULD go — there is a slide that way
+  // and the one on screen lets go of it — and `held` is where there is a slide
+  // that way and this one holds on to the user (preventNav, a `required` step
+  // still unanswered). A way out leading nowhere is not there; a way out being
+  // held is there and says no, which is why it stays visible and explainable.
+  //
+  // Painted rather than rendered, and on the followers too: only slides go in
+  // this box, so the chevrons, the counters and the bars that go with it are
+  // written AROUND it — in CSS off these attributes
+  // ([data-slide-ways~="right"]), or through useSlideContainer, which watches
+  // them. Nothing is told, everything is read: it is what lets them sit
+  // anywhere, and what lets a container nobody drives still be followed.
+  const paintWays = currentElement => {
+    const ways = [];
+    const held = [];
+    for (const direction of Object.keys(DIRECTIONS)) {
+      const {
+        dx,
+        dy
+      } = DIRECTIONS[direction];
+      if (!mapAxes?.includes(dx ? "x" : "y")) {
+        // Not an axis this map has: a row has no up and no down, and saying so
+        // would be saying it about every row on the page.
+        continue;
+      }
+      if (!areaTowards(dx, dy)) {
+        continue;
+      }
+      const forward = dx > 0 || dy > 0;
+      const isHeld = currentElement?.hasAttribute(forward ? "data-prevent-nav-next" : "data-prevent-nav-previous");
+      (isHeld ? held : ways).push(direction);
+    }
+    for (const element of travelPainters()) {
+      if (ways.length) {
+        element.setAttribute(SLIDE_WAYS_ATTRIBUTE, ways.join(" "));
       } else {
-        element.removeAttribute("data-slide-travel-toward");
+        element.removeAttribute(SLIDE_WAYS_ATTRIBUTE);
       }
+      if (held.length) {
+        element.setAttribute(SLIDE_HELD_ATTRIBUTE, held.join(" "));
+      } else {
+        element.removeAttribute(SLIDE_HELD_ATTRIBUTE);
+      }
+    }
+  };
+
+  // The news, as opposed to the state. Everything painted above IS the state:
+  // it is what anything arriving later reads, and what CSS draws with. What an
+  // attribute cannot say is WHEN it changed — and watching it is the wrong way
+  // to ask, because a write is not a change: `data-slide-travel-toward` is
+  // written on every frame of a gesture with the same value in it, and every
+  // watcher would be woken sixty times a second for nothing. So the box says it
+  // itself, once, and only when something is actually different.
+  //
+  // Said to its followers as well as to itself, exactly as the painting is: a
+  // frame drawn around the box hears what the box is doing without knowing its
+  // id, and a row of tabs beside it listens on the box by id. Not bubbling, like
+  // every other navi event — what is announced is about THIS box, and a box
+  // inside another must not be heard as the one around it.
+  const announcedRef = useRef(null);
+  const announceState = () => {
+    const containerEl = containerRef.current;
+    if (!containerEl) {
+      return;
+    }
+    const state = readSlideContainerState(containerEl);
+    const announced = announcedRef.current;
+    if (announced && sameSlideContainerState(announced, state)) {
+      return;
+    }
+    announcedRef.current = state;
+    for (const element of travelPainters()) {
+      dispatchCustomEvent(element, SLIDE_STATE_EVENT, {
+        ...state
+      });
     }
   };
 
@@ -51113,8 +51598,8 @@ const SlideContainer = ({
         sign,
         target
       }) => {
-        const areaBack = axis === "x" ? areaTowards(-1, 0) : areaTowards(0, -1);
-        const areaOn = axis === "x" ? areaTowards(1, 0) : areaTowards(0, 1);
+        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
@@ -51125,6 +51610,24 @@ 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
@@ -51792,7 +52295,14 @@ const SlideMove = ({
     label
   } = DIRECTIONS[direction];
   const forward = dx > 0 || dy > 0;
-  const locked = forward ? locks?.preventNavNext : locks?.preventNavPrevious;
+  // The same fact, read from wherever this way out is written. Inside a slide it
+  // comes down as context — the slide holding the user is this button's
+  // ancestor. Written AROUND the box (only slides go in it, so a chevron pinned
+  // to the edge of a full-screen surface has to be), it is not, so it is read
+  // off the box this button already names to ask for the travel: one prop, and
+  // the way out behaves the same on either side of the box.
+  const slides = useSlideContainer(rest.commandFor);
+  const locked = (forward ? locks?.preventNavNext : locks?.preventNavPrevious) || slides.held(direction);
   return jsx(SlideNavButton, {
     command: command,
     locked: locked,
@@ -54345,6 +54855,7 @@ const css$E = /* css */`
     }
   }
 
+  ${surfaceTextCss}
   ${popupCss}
 `;
 
@@ -55842,6 +56353,7 @@ const css$D = /* css */`
     }
   }
 
+  ${surfaceTextCss}
   ${popupCss}
 `;
 
@@ -65962,6 +66474,20 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`
       pointer-events: none;
       user-select: none;
 
+      /* The value the picker draws itself is the control's own text, at the
+         control's font size: it keeps the control line, snapped to the pixel
+         like the field around it. A caller's "ui" is the caller's own drawing
+         of the control, and it is written on the page's line, as the number,
+         so each text it holds keeps a line relative to its own size. The
+         control line is a length (--navi-control-line-height), and inherited
+         it would arrive as the control's pixels: a 14px label under an 18px
+         picker's 23px line carries ~5px of leading above and below that no
+         glyph occupies and nothing on screen explains. Same reason a popup
+         takes the number — see .navi_popup in popup.jsx. */
+      &[data-picker-facade] {
+        line-height: var(--navi-line-height);
+      }
+
       &[navi-placeholder] {
         color: var(--picker-placeholder-color);
         font-style: var(--picker-placeholder-font-style);
@@ -66101,6 +66627,16 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`
       --x-corner-bottom-left-radius: initial;
 
       display: contents;
+      /* What opens from a control is a page of its own, not part of that
+         control's type scale: it is written at the control font by name,
+         rather than by inheriting the size the picker itself is drawn at. A
+         caller who sizes a picker to the façade it holds (so the padding, the
+         corners and the chevron the picker draws in em land on the text the
+         caller actually wrote) would otherwise take the popup down with it:
+         its title, and everything in it that does not state a size of its
+         own. Same reason the popup is written on the page's line rather than
+         the control's — see .navi_popup in popup.jsx. */
+      font-size: var(--navi-control-font-size);
       text-align: initial; /* Don't inherit picker text align */
     }
 
@@ -66504,6 +67040,12 @@ const PickerButton = props => {
             }
           }), variant === "headless" || ui === "default" ? null : jsx(Text, {
             className: "navi_picker_value"
+            // Tells the caller's own drawing of the control from the value
+            // the picker draws itself, so each is written on its own line
+            // (see .navi_picker_value in the CSS above).
+            ,
+
+            "data-picker-facade": ui === undefined ? undefined : ""
             // A button's label is not a placeholder, however empty the
             // picker behind it is.
             ,
@@ -78693,8 +79235,8 @@ const StepList = ({
     }
     const rootElement = rootRef.current;
     const read = () => {
-      const currentArea = containerElement.getAttribute("data-slide-current");
-      const towardArea = containerElement.getAttribute("data-slide-travel-toward");
+      const currentArea = containerElement.getAttribute(SLIDE_CURRENT_ATTRIBUTE);
+      const towardArea = containerElement.getAttribute(SLIDE_TOWARD_ATTRIBUTE);
       setContainerCurrent(currentArea ?? undefined);
       const currentIdx = currentArea === null ? -1 : indexOf(currentArea);
       if (currentIdx === -1) {
@@ -78718,13 +79260,12 @@ const StepList = ({
       rootElement.style.setProperty("--step-list-pos-dx", dx);
     };
     read();
-    const observer = new MutationObserver(read);
-    observer.observe(containerElement, {
-      attributes: true,
-      attributeFilter: ["data-slide-current", "data-slide-travel-toward"]
-    });
+    // Read off the container, and re-read when it says something has changed:
+    // a write is not a change, and the attribute the halo follows is written on
+    // every frame of a gesture with the same value in it.
+    containerElement.addEventListener(SLIDE_STATE_EVENT, read);
     return () => {
-      observer.disconnect();
+      containerElement.removeEventListener(SLIDE_STATE_EVENT, read);
     };
     // width: the dots move when the room does, and the written positions are
     // pixels of those dots.
@@ -79555,5 +80096,5 @@ const UserSvg = () => jsx("svg", {
   })
 });
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
+export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createI18n, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, formatDatetime, formatDay, formatDayRelative, formatMonth, formatNumber, formatTime, formatTimeRelative, getNowHours, getNowHoursRoundedToStep, interpolateText, isCellSelected, isColumnSelected, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markErrorAsDisplayedBy, moveArrayItemByIndex, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useOrderedColumns, usePopupMode, useRouteStatus, useRunOnMount, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
 //# sourceMappingURL=jsenv_navi.js.map