@jsenv/navi 0.29.116 → 0.29.118

package/dist/jsenv_navi.js

@@ -26618,6 +26618,49 @@ const RouteUI = ({
   return element;
 };
 
+/**
+ * Where a route movement is heading, said before its first picture is taken.
+ *
+ * A view transition pairs, across its two pictures, whatever wears the same
+ * name on both — and a name is read off the DOM as it stands when the
+ * transition starts. So whoever names an element for a movement between two
+ * pages (the bar under the current tab of a <Nav>, which glides from one tab
+ * to the next) has to decide whether this movement is one it takes part in
+ * before that reading: on a page the row is not on, its bar must leave with the
+ * page, unnamed.
+ *
+ * Everything that decision needs is on the page itself, except one thing:
+ * where the movement goes. That is what is published here, by whoever starts
+ * the movement — route_transition.jsx for a relation between two pages,
+ * route_travel.jsx for a row a finger pushes — before their transition starts.
+ * The navigation's own announcement (before_routing.js) cannot stand in for
+ * it: a travel a finger sets off starts its transition first and navigates
+ * from inside it.
+ *
+ * Only one movement plays at a time (one view transition per document), which
+ * is what lets both say it in one place. Taken down by the one that put it up,
+ * and by it alone: a movement ending after another has replaced it must not
+ * wipe what the new one stands on.
+ */
+
+
+const [publishDestination, observeTransitionDestination] = createPubSub();
+
+let destinationOwner = null;
+
+const holdTransitionDestination = (owner, url) => {
+  destinationOwner = owner;
+  publishDestination(new URL(url, window.location.href).href);
+};
+
+const releaseTransitionDestination = (owner) => {
+  if (owner !== destinationOwner) {
+    return;
+  }
+  destinationOwner = null;
+  publishDestination(null);
+};
+
 /**
  * The window two pages are seen through while one replaces the other, measured
  * once and published for the length of the movement.
@@ -27498,6 +27541,7 @@ const rebuildWatcher = () => {
     }
     beginTransition({
       page: pages[index],
+      url: navigationUrl,
       // Which way it plays: what the navigation itself said first — the link
       // being pressed is where the way the app is being walked is known — then
       // the relation, and forward for a navigation that asked for a movement
@@ -27518,11 +27562,12 @@ const rebuildWatcher = () => {
 
 // What plays when no relation matched (see defineRouteDefaultTransition), what
 // the navigation now landing asked for on its own (see readNavigationRequest),
-// and whether it found an answer already — a relation's transition, a "none",
-// a RouteTravel travel. The last two are read at the start of every
-// navigation, so they are always about the latest one.
+// where it goes, and whether it found an answer already — a relation's
+// transition, a "none", a RouteTravel travel. The last three are read at the
+// start of every navigation, so they are always about the latest one.
 let defaultTransition = null;
 let navigationRequest = null;
+let navigationUrl = null;
 let navigationAnimated = false;
 
 // The two ends of every navigation, watched from here on. The picture of the
@@ -27534,6 +27579,7 @@ let navigationAnimated = false;
 observeBeforeRouting(details => {
   navigationAnimated = false;
   navigationRequest = readNavigationRequest(details);
+  navigationUrl = details.url;
   if (relations.length === 0 && !defaultTransition && !navigationRequest) {
     return;
   }
@@ -27541,9 +27587,11 @@ observeBeforeRouting(details => {
 });
 observeAfterRouting(() => {
   const request = navigationRequest;
+  const url = navigationUrl;
   // Read here and dropped here: a request answers for the navigation it was
   // made on, and the next one is back to the relations.
   navigationRequest = null;
+  navigationUrl = null;
   if (!navigationAnimated && (request || defaultTransition)) {
     const {
       type,
@@ -27552,6 +27600,7 @@ observeAfterRouting(() => {
     if (type !== "none") {
       beginTransition({
         page: null,
+        url,
         // A default has no direction: nothing says which of two arbitrary
         // pages is before the other, and the attribute is then worn empty —
         // present for whoever keys on "one of ours is playing", silent on the
@@ -27599,6 +27648,7 @@ const findRelation = (fromPage, toPage) => {
 let currentTransition = null;
 const beginTransition = ({
   page,
+  url,
   direction,
   type,
   duration
@@ -27615,6 +27665,9 @@ const beginTransition = ({
   }
   const transition = {};
   currentTransition = transition;
+  // Said before the picture is taken: whoever names something for a movement
+  // between two pages decides on it now (see transition_destination.js).
+  holdTransitionDestination(transition, url);
   documentElement.setAttribute(TRANSITION_ATTRIBUTE, direction);
   if (type) {
     documentElement.setAttribute(TRANSITION_TYPE_ATTRIBUTE, type);
@@ -27719,6 +27772,7 @@ const beginTransition = ({
       documentElement.removeAttribute(TRANSITION_TYPE_ATTRIBUTE);
       documentElement.removeAttribute(TRANSITION_TARGET_ATTRIBUTE);
       releaseTransitionWindow(transition);
+      releaseTransitionDestination(transition);
       if (restoreDuration) {
         restoreDuration();
       }
@@ -28380,8 +28434,12 @@ const RouteTravel = ({
     travelRef.current = travel;
     // Taken before the picture is: the browser reads the name off the DOM as it
     // stands when the transition starts, and this box is only a picture of its
-    // own for as long as it is the one travelling.
+    // own for as long as it is the one travelling. Where it travels to is said
+    // 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);
+    holdTransitionDestination(travel, page.route.buildUrl(page.params));
     document.documentElement.setAttribute(TRAVEL_ATTRIBUTE, direction);
     document.documentElement.setAttribute(TRAVEL_AXIS_ATTRIBUTE, axis);
     if (scrub) {
@@ -28737,6 +28795,7 @@ const RouteTravel = ({
       document.documentElement.removeAttribute(DRAGGED_ATTRIBUTE);
       document.documentElement.removeAttribute(TURNED_ATTRIBUTE);
       releaseTransitionWindow(travel);
+      releaseTransitionDestination(travel);
     }
   };
 
@@ -29628,7 +29687,11 @@ registerNaviCommand("--navi-void", (source) => {
   };
 });
 
-registerNaviCommand("--navi-update", (source, event) => {
+// "--navi-update:smooth" asks the control to be SEEN moving to the value — a
+// wheel scrolls to it rather than swapping its digits — so a shortcut under
+// two wheels shows which one it changed, and by how much. The value itself is
+// set at once either way; only the drawing is concerned.
+registerNaviCommand("--navi-update", (source, event, { argument }) => {
   const target =
     resolveExplicitTarget(source) || resolveFirstParentControl(source);
   if (!target) {
@@ -29645,6 +29708,7 @@ registerNaviCommand("--navi-update", (source, event) => {
           const commandValue = resolveCommandValue(source, event);
           dispatchRequestSetUIState(target, commandValue, {
             event,
+            behavior: argument,
           });
         },
       });
@@ -38719,8 +38783,7 @@ const BinderItemContext = createContext(null);
 
 /**
  * What a <Link> learns from the <Nav> around it: where to draw the bar that
- * says "you are here", the name under which the browser is to recognise that
- * bar from one page to the next, and — for a row of tabs that are slides — which
+ * says "you are here", and — for a row of tabs that are slides — which
  * <SlideContainer> they are about and which of its slides is on screen (see
  * nav.jsx).
  */
@@ -39416,14 +39479,7 @@ const LinkPlain = props => {
   // around this link.
   const currentIndicatorAsked = currentIndicator ?? nav?.currentIndicator;
   const currentIndicatorPosition = currentIndicatorAsked === true ? "bottom" : currentIndicatorAsked;
-  const currentIndicatorEl = currentIndicatorPosition === "left" || currentIndicatorPosition === "right" || currentIndicatorPosition === "top" || currentIndicatorPosition === "bottom" ? jsx(LinkCurrentIndicator
-  // Only the bar one can actually see carries the row's name, because a
-  // name belongs to one element at a time and every tab holds a bar. The
-  // browser then has the same thing in two places from one page to the
-  // next, and moves it — which is the whole of "the bar slides".
-  , {
-    viewTransitionName: innerCurrent ? nav?.indicatorName : null
-  }) : null;
+  const currentIndicatorEl = currentIndicatorPosition === "left" || currentIndicatorPosition === "right" || currentIndicatorPosition === "top" || currentIndicatorPosition === "bottom" ? jsx(LinkCurrentIndicator, {}) : null;
   const {
     onClick,
     preventDefault
@@ -39542,14 +39598,12 @@ const LinkPlain = props => {
     children: [startIconEl, innerChildren, endIconEl]
   });
 };
-const LinkCurrentIndicator = ({
-  viewTransitionName
-}) => {
+
+// Named by the <Nav> around the link when the link is current, from its CSS:
+// that is what makes the bar glide from one tab to the next (see nav.jsx).
+const LinkCurrentIndicator = () => {
   return jsx("span", {
-    className: "navi_current_indicator",
-    style: viewTransitionName ? {
-      viewTransitionName
-    } : undefined
+    className: "navi_current_indicator"
   });
 };
 markAsOutsideTextFlow(LinkCurrentIndicator);
@@ -39559,6 +39613,9 @@ installImportMetaCssBuild(import.meta);/**
  * https://dribbble.com/search/tabs
  */
 let navCount = 0;
+// Worn by a nav of routes while a route movement between two of its tabs is
+// pictured (see markIndicatorTakesPart, and the CSS below for what it decides).
+const BETWEEN_TABS_ATTRIBUTE = "data-nav-between-tabs";
 const css$V = /* css */`
   @layer navi {
     .navi_nav {
@@ -39638,6 +39695,30 @@ const css$V = /* css */`
     }
   }
 
+  /* The bar under the current tab of a nav made of routes is NAMED: a change
+     played as a view transition then finds it on both pictures and moves it
+     from the tab it was under to the tab it is under, which is all "the bar
+     slides" is. The name is the row's (--nav-indicator-name, absent when the
+     row asked for no slide) and only the bar one can see wears it: every tab
+     holds a bar, and a name belongs to one element at a time. */
+  .navi_nav .navi_link[data-href-current] .navi_current_indicator {
+    view-transition-name: var(--nav-indicator-name);
+  }
+  /* Named for a movement it takes part in, and for that alone. While the PAGES
+     are the ones moving — a route transition, a route travel — a name lifts the
+     bar out of its page's picture into a picture of its own, and a picture of
+     its own is precisely what does not travel: it stands where it was captured,
+     fading, while the row slides away under it. Right when the row is on both
+     sides and the bar has a tab to glide to; wrong anywhere else, where the bar
+     must leave or arrive with its row. So the name is dropped unless the
+     movement goes from a tab of this row to another one of its tabs (see
+     markIndicatorTakesPart). */
+  :root:is([data-navi-route-transition], [data-navi-route-travel])
+    .navi_nav:not([${BETWEEN_TABS_ATTRIBUTE}])
+    .navi_current_indicator {
+    view-transition-name: none;
+  }
+
   .navi_nav {
     display: flex;
     width: fit-content;
@@ -39819,9 +39900,12 @@ const positionOfCurrentIndicator = (currentIndicator, vertical) => {
  *   does so by being NAMED, which is all the browser needs: any change played as
  *   a view transition animates it on the same clock as everything else in that
  *   transition. Inside a `RouteTravel` that means it follows the pages, and the
- *   thumb dragging them, without either of them being told about the other. For
- *   a nav made of slides (`slideContainer`) the bar is one element for the whole
- *   row, and it reads the travel the container publishes.
+ *   thumb dragging them, without either of them being told about the other. It
+ *   is named for a movement between two tabs of the row and for nothing else:
+ *   when the pages move and the row is on one side only, the bar leaves or
+ *   arrives with its row. For a nav made of slides (`slideContainer`) the bar
+ *   is one element for the whole row, and it reads the travel the container
+ *   publishes.
  * @param {string} [props.slideContainer] - the id of a `<SlideContainer>` these
  *   tabs are about: each one says which slide it is (`<Link slide="…">`), the
  *   container says which one is on screen, and pressing a tab travels there.
@@ -39954,16 +40038,47 @@ const Nav = ({
   useLayoutEffect(() => {
     paintIndicatorGeometry();
   });
+
+  // Whether the bar keeps its name for the route movement about to be pictured
+  // (see the CSS above). Written on the DOM as the movement is announced rather
+  // than rendered: rendering is held from a navigation's first word until the
+  // movement's first picture is taken (see rendering_hold.js), so a render
+  // would land on the second picture with the first already taken.
+  useLayoutEffect(() => {
+    const navElement = navRef.current;
+    const markIndicatorTakesPart = destinationUrl => {
+      if (destinationUrl === null) {
+        navElement.removeAttribute(BETWEEN_TABS_ATTRIBUTE);
+        return;
+      }
+      // From a tab of this row: the row still shows the page being left, and
+      // the tab it is on. To a tab of this row: one of its links aims at the
+      // page the movement goes to. A row mounted while the movement plays hears
+      // nothing here and stays unnamed, rightly: its bar is on the second
+      // picture alone, with nothing on the first to glide from.
+      const fromTab = navElement.querySelector("[data-href-current]");
+      let toTab = null;
+      for (const linkElement of navElement.querySelectorAll("a[href]")) {
+        if (linkElement.href === destinationUrl) {
+          toTab = linkElement;
+          break;
+        }
+      }
+      if (fromTab && toTab) {
+        navElement.setAttribute(BETWEEN_TABS_ATTRIBUTE, "");
+      } else {
+        navElement.removeAttribute(BETWEEN_TABS_ATTRIBUTE);
+      }
+    };
+    return observeTransitionDestination(markIndicatorTakesPart);
+  }, []);
   const navContextValue = useMemo(() => ({
     // The bar belongs to the row itself when the tabs are slides, so the
     // links draw none of their own.
     currentIndicator: slideContainer ? undefined : currentIndicator,
-    // Read by the link that is current, and by it alone: a name belongs to
-    // one element at a time, and the bar exists in every tab.
-    indicatorName: currentIndicatorSlides ? indicatorNameRef.current : null,
     slideContainer,
     currentSlideArea
-  }), [currentIndicator, currentIndicatorSlides, slideContainer, currentSlideArea]);
+  }), [currentIndicator, slideContainer, currentSlideArea]);
   children = toChildArray(children);
   return jsxs(Box, {
     as: "nav",
@@ -39993,6 +40108,13 @@ const Nav = ({
     expandY: expandY,
     spacing: spacing,
     ...props,
+    // The name the bar of the current tab wears, handed to the CSS above
+    // rather than to the links: which bar wears it, and when, is decided
+    // there.
+    style: currentIndicatorSlides && !slideContainer ? {
+      ...props.style,
+      "--nav-indicator-name": indicatorNameRef.current
+    } : props.style,
     styleCSSVars: NavStyleCSSVars,
     children: [indicatorPosition && jsx("span", {
       className: "navi_nav_indicator"
@@ -50058,8 +50180,12 @@ const SlideContainer = ({
   // after it — a step that has been answered is not a step to stay on.
   const done = (area, event) => {
     markAnswered(area);
-    if (!moveNext(event)) {
-      movePrevious(event);
+    if (!moveNext(event, {
+      released: true
+    })) {
+      movePrevious(event, {
+        released: true
+      });
     }
   };
 
@@ -50377,6 +50503,7 @@ const SlideContainer = ({
     forward,
     event,
     value,
+    released,
     dx = 0,
     dy = 0
   } = {}) => {
@@ -50391,6 +50518,7 @@ const SlideContainer = ({
         forward,
         event,
         value,
+        released,
         dx,
         dy
       });
@@ -50427,7 +50555,11 @@ const SlideContainer = ({
     // event dispatched by hand: a slide that holds on to the user holds them
     // whatever they press. Read off the slide being LEFT, because that is what
     // has a reason to keep them (an answer still missing, a step not taken).
-    if (currentElement?.hasAttribute(forward ? "data-prevent-nav-next" : "data-prevent-nav-previous")) {
+    // `released` is the slide letting go itself (--navi-done, see Slide): the
+    // one departure the forward hold does not apply to. Said here rather than
+    // by dropping the attribute, which stays the render's to write — a hold
+    // meant to stay (an explicit preventNavNext) is still there on the way back.
+    if (forward ? !released && currentElement?.hasAttribute("data-prevent-nav-next") : currentElement?.hasAttribute("data-prevent-nav-previous")) {
       return false;
     }
     // The focus moves here, while the event that asked for it is still in hand:
@@ -50576,15 +50708,20 @@ const SlideContainer = ({
       dx,
       dy,
       event,
-      value
+      value,
+      released
     } = pendingRollsRef.current.shift();
     if (dx || dy) {
-      move(dx, dy, event, value);
+      move(dx, dy, event, {
+        value,
+        released
+      });
       return;
     }
     goToArea(area, {
       event,
-      value
+      value,
+      released
     });
   }, [noTravel]);
 
@@ -50703,10 +50840,14 @@ const SlideContainer = ({
       return area;
     }
   };
-  const move = (dx, dy, event, value) => goToArea(areaTowards(dx, dy), {
+  const move = (dx, dy, event, {
+    value,
+    released
+  } = {}) => goToArea(areaTowards(dx, dy), {
     forward: dx > 0 || dy > 0,
     event,
     value,
+    released,
     dx,
     dy
   });
@@ -50716,8 +50857,8 @@ const SlideContainer = ({
   // slides are. On a map they mean the same thing, and fall back to the other
   // axis when there is nothing that way — a step onwards, however the screens
   // happen to be arranged.
-  const moveNext = event => vertical ? move(0, 1, event) || move(1, 0, event) : move(1, 0, event) || move(0, 1, event);
-  const movePrevious = event => vertical ? move(0, -1, event) || move(-1, 0, event) : move(-1, 0, event) || move(0, -1, event);
+  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);
 
   // 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.
@@ -51364,7 +51505,9 @@ const SlideContainer = ({
         // (a --navi-right command carries the click that ran it, that click its
         // own mousedown), and the focus transfer reads the whole chain to know
         // where the interaction started.
-        move(dx, dy, e, value);
+        move(dx, dy, e, {
+          value
+        });
       }
       // By name rather than by direction (--navi-go-to-slide): the caller says
       // where, the map says nothing about it.
@@ -51524,11 +51667,6 @@ const Slide = ({
         ,
 
         onnavi_done: e => {
-          // Dropped imperatively rather than left to the re-render this
-          // schedules: moving on happens in this same handler, and the gate it
-          // goes through reads this attribute off the DOM (see goToArea) — a
-          // render is a microtask away, the move is not.
-          e.currentTarget.removeAttribute("data-prevent-nav-next");
           container?.done(slideArea);
           rest.onnavi_done?.(e);
         },
@@ -57182,7 +57320,12 @@ installImportMetaCssBuild(import.meta);const css$B = /* css */`
           --picker-popup-border-radius,
           var(--picker-border-radius)
         );
-        --dialog-border-width: var(--picker-dialog-border-width);
+        /* Explicit fallback, for the same reason as --popover-background-color
+           above: the dialog paints border-width from this var with no fallback
+           of its own, so an unset dialogBorderWidth would leave the var
+           guaranteed-invalid and border-width at its initial "medium" (3px).
+           0px is the dialog's own default. */
+        --dialog-border-width: var(--picker-dialog-border-width, 0px);
         --dialog-border-color: var(--x-picker-border-color);
         /* The picker's own surface is not this one — see the popover branch,
            including why the fallback is spelled out. */
@@ -70558,7 +70701,7 @@ const WheelGroupContext = createContext(null);
  * @param {boolean} [props.glass] - Frost the neighbouring rows so the center reads as a clear "window" (iOS-picker style). Inherited from a WheelGroup.
  * @param {boolean} [props.frameBorder] - Line the center-window edges with a faint frame (off by default; independent of glass). Tune via --wheel-frame-color.
  * @param {boolean|number} [props.zoom] - Make the centered value stand out by size: the neighbours are drawn smaller, so a value grows as it slides into the window and shrinks as it leaves (the centered one keeps its natural size). `true` uses the default ratio (1.3); a number is the ratio itself (1.8 = the center reads 80% bigger than its neighbours). Inherited from a WheelGroup.
- * @param {number} [props.glideSpeed=0.16] - Speed (px/ms) of the programmatic glide used by arrow keys, taps and the navi_scroll "smooth" behavior. Lower = slower, more visible transitions; ≈0.16 covers one 32px row in 200ms.
+ * @param {number} [props.glideSpeed=0.16] - Speed (px/ms) of the programmatic glide used by arrow keys, taps, a value set with `--navi-update:smooth` and the navi_scroll "smooth" behavior. Lower = slower, more visible transitions; ≈0.16 covers one 32px row in 200ms.
  * @param {string} [props.type] - Informative value kind (e.g. "integer", "day"). Used only for rendering hints, like tabular figures for "integer".
  */
 const Wheel = props => {
@@ -71280,6 +71423,23 @@ function WheelUI(props) {
   // faster, so a second press mid-glide reads as accelerating, not restarting.
   const targetPosRef = useRef(null);
   const glideRef = useRef(null);
+  // Who aimed the running glide. A value set from outside (`--navi-update:smooth`)
+  // is already committed by whoever set it: the wheel only catches up with it,
+  // and its arrival must not be reported as a settle — no navi_wheel_settle, no
+  // action. A user input is the opposite: its arrival IS the settle. Written at
+  // every motion start (settle, glideTo).
+  const glideFromOutsideRef = useRef(false);
+  // How the value that just arrived asked to be shown. A set request can say
+  // `behavior: "smooth"` (what `--navi-update:smooth` puts on it); the wheel
+  // then scrolls to the value instead of swapping the digits. Read off the
+  // navi_ui_state_change the controller dispatches — the request may have
+  // reached this wheel through a group distributing to its children, so it is
+  // looked up along the event chain. Consumed by the sync effect below.
+  const pendingBehaviorRef = useRef(null);
+  const onUIStateChange = e => {
+    const setRequest = findEvent(e, "navi_set_ui_state");
+    pendingBehaviorRef.current = setRequest ? setRequest.detail.behavior : null;
+  };
   // The glide loop is bound once (mount effect) but the speed can change live
   // (e.g. a demo control) — read it through a ref so it uses the latest.
   const glideSpeedRef = useRef(glideSpeed);
@@ -71470,11 +71630,11 @@ function WheelUI(props) {
       posRef.current = index * size;
       renderPos(vp);
     }
-    if (!interactive) {
+    centeredIndexRef.current = index;
+    if (!interactive || glideFromOutsideRef.current) {
       return;
     }
     const settleEvent = new CustomEvent("navi_wheel_settle");
-    centeredIndexRef.current = index;
     debugScroll(`settle: committed → ${trackedItemsRef.current[index].value}`);
     requestSelectValue(trackedItemsRef.current[index].value, settleEvent);
     // The value is now stable → commit the action. The wheel runs actionEvent
@@ -71557,13 +71717,21 @@ function WheelUI(props) {
   // Spring stiffness (fraction of remaining distance per ~frame). Scales with the
   // glide speed so slower = gentler chase; clamped so it never crawls or snaps.
   const glideSpringFactor = () => clampNumber(glideSpeedRef.current * 1.4, 0.06, 0.45);
-  const glideTo = (vp, target) => {
+  const glideTo = (vp, target, {
+    fromOutside = false
+  } = {}) => {
     // A discrete glide overrides any fling momentum.
     if (momentumRef.current !== null) {
       cancelAnimationFrame(momentumRef.current);
       momentumRef.current = null;
     }
     targetPosRef.current = target;
+    // A user input anywhere in the movement makes its arrival a user settle;
+    // an outside value re-aiming a glide the user started never takes that
+    // away from them (their tap still has to be answered with a settle).
+    if (glideRef.current === null || !fromOutside) {
+      glideFromOutsideRef.current = fromOutside;
+    }
     if (glideRef.current === null) {
       debugScroll("glide: start");
       glideRef.current = requestAnimationFrame(() => glideStep(vp, performance.now()));
@@ -71579,6 +71747,7 @@ function WheelUI(props) {
   // overshoots only a handful of rows (a picker isn't a free-scrolling list).
   const settle = (vp, velocity) => {
     cancelAnim();
+    glideFromOutsideRef.current = false;
     debugScroll(`settle: momentum start (v=${velocity}px/ms)`);
     // A drag fling: allow the full swipe velocity (see WHEEL_FLING_MAX_VELOCITY)
     // so a hard swipe carries across the list instead of being clipped to a few
@@ -71643,13 +71812,19 @@ function WheelUI(props) {
     glideTo(vp, target);
   };
 
-  // Center value `index` (external value / initial / keyboard / click). Smooth
-  // glides to the nearest copy (glideTargetFor) so a wrap goes the short way.
+  // Center value `index` for a value the wheel did not choose itself (first
+  // display, a value set from outside). "smooth" glides to the nearest copy
+  // (glideTargetFor) so a wrap goes the short way, and arrives silently (see
+  // glideFromOutsideRef); "auto" puts the row in place at once, stopping
+  // whatever was moving so no glide lands on top of it a frame later.
   const centerOnIndex = (vp, index, behavior) => {
     const target = glideTargetFor(vp, index);
     if (behavior === "smooth") {
-      glideTo(vp, target);
+      glideTo(vp, target, {
+        fromOutside: true
+      });
     } else {
+      cancelAnim();
       setPos(vp, target);
     }
   };
@@ -71661,7 +71836,7 @@ function WheelUI(props) {
   const glideToIndex = (vp, index, event) => {
     centeredIndexRef.current = index;
     requestSelectValue(trackedItemsRef.current[index].value, event);
-    centerOnIndex(vp, index, "smooth");
+    glideTo(vp, glideTargetFor(vp, index));
   };
   // Index we are heading to (the target, not the mid-glide visual center).
   const currentTargetIndex = vp => {
@@ -71690,14 +71865,12 @@ function WheelUI(props) {
   // Sync the center with the current value — used on first display and whenever
   // the controlled value changes from outside.
   const syncCenterToSelection = (viewportEl, behavior) => {
-    // A glide or momentum in flight (tap, arrow, fling) is already taking the
-    // wheel to the right row. This runs on every controlled-value re-render, which
-    // lags a frame behind our own centeredIndexRef — so on rapid taps its guard
-    // below would miss and it would snap instantly mid-glide, leaving the wheel
-    // stuck off-center. Let the motion finish: commitSelection settles the value
-    // and the next render is a no-op. A genuine external change made during motion
-    // is honoured once it settles (centeredIndexRef then differs from selection).
-    if (glideRef.current !== null || momentumRef.current !== null) {
+    // A fling in flight reports its own value at every row crossing and commits
+    // on settle: the finger that threw it owns the wheel until then, and a value
+    // arriving meanwhile is re-stated by the next crossing anyway. A glide is
+    // different: its target is re-aimed below (glideTo never restarts the
+    // loop), so a value set from outside mid-glide is where the wheel ends up.
+    if (momentumRef.current !== null) {
       return;
     }
     if (trackedItemsRef.current.length === 0) {
@@ -71739,13 +71912,27 @@ function WheelUI(props) {
     };
   }, []);
 
-  // React to controlled value changes coming from outside.
+  // React to controlled value changes coming from outside. The row is put in
+  // place at once, unless the request asked for "smooth": the value is already
+  // set for whoever reads it, and the wheel scrolls to it so the eye can follow
+  // the change (a shortcut button under two wheels: which one moved, and by how
+  // much). Never on the first centering (no target yet → nothing to glide from,
+  // the displayed effect above handles it), nor under reduced motion.
   useLayoutEffect(() => {
+    const requestedBehavior = pendingBehaviorRef.current;
+    pendingBehaviorRef.current = null;
     const viewportEl = getViewport();
     if (!viewportEl || viewportEl.offsetParent === null) {
       return;
     }
-    syncCenterToSelection(viewportEl, "auto");
+    let behavior = "auto";
+    if (requestedBehavior === "smooth" && centeredIndexRef.current !== null) {
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (!prefersReducedMotion) {
+        behavior = "smooth";
+      }
+    }
+    syncCenterToSelection(viewportEl, behavior);
   });
   useWheelInteractions({
     ref,
@@ -71813,6 +72000,7 @@ function WheelUI(props) {
     children: [jsx(Box, {
       as: "input",
       ...controlHostProps,
+      onnavi_ui_state_change: onUIStateChange,
       tabindex: -1,
       "aria-hidden": "true",
       className: "navi_wheel_input"