@jsenv/navi 0.29.493 → 0.29.495

package/dist/jsenv_navi.js

@@ -6,7 +6,7 @@ import { installImportMetaCssBuild, coarsePointerSignal, windowHeightSignal, win
 import { createPubSub, createIterableWeakSet, elementIsFocusable, getScrollContainer, dispatchInternalCustomEvent, dispatchCustomEvent, findEvent, mergeOneStyle, findFocusable, getElementSignature, chainEvent, isTouchDrivenEvent, getKeyboardEventDefaultAction, isPressDrivenClick, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, createValueEffect, findFocusDelegateTarget, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, getScrollContainerSet, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, keepTouchRefusable, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, createInternalCustomEvent, activeElementSignal, normalizeStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, trapScrollInside, scrollIntoViewScoped, isPressDisputedByDrag, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, isScrollable, resolveOklchLightness, contrastColor, overflowGoesToViewport, parsePositionArea, snapToPixel, trapFocusInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, setVirtualKeyboardOverlaysContent, subscribeVirtualKeyboardGeometryChange, getVirtualKeyboardOverlayHeight } from "@jsenv/dom";
 export { chainEvent, clickIsSuppressed, contrastColor, createDragGestureController, dragAfterIntent, findEvent, markDragSource, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
-import { useState, useLayoutEffect, useErrorBoundary, useContext, useMemo, useRef, useReducer, useEffect, useCallback, useId } from "preact/hooks";
+import { useState, useLayoutEffect, useErrorBoundary, useContext, useMemo, useRef, useReducer, useEffect, useCallback } from "preact/hooks";
 import { options, isValidElement, createContext, render as render$1, h, toChildArray, createRef, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatMinuteDuration, formatTime, formatSecondDuration, formatHourDuration, formatTimeRelative, pluralCategory, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatByteSize, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatList, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText, pluralCategory } from "@jsenv/humanize";
@@ -13457,13 +13457,13 @@ const writePressWritesHere = (pressWrites) => {
   }
 };
 
-// Preact's own useId() (see preact/hooks) returns "P<mask0>-<mask1>", where the
-// mask is derived from render order within the nearest root/async boundary:
-// stable across re-renders of the same mount, but not across two mounts on the
-// same page, and not across two documents.
-const PREACT_GENERATED_ID_REGEX = /^P\d+-\d+/;
-const isLikelyPreactGeneratedId = (id) => {
-  return PREACT_GENERATED_ID_REGEX.test(id);
+// An id made up at render names one mount: navi's own ("navi_<n>", see
+// useGeneratedId) counts mounts in the document, and preact's useId(), which
+// an app may hand a component, gives "P<mask0>-<mask1>" from the render order.
+// Neither names the same component in two mounts or two documents.
+const GENERATED_ID_REGEX = /^(?:navi_\d+|P\d+-\d+)/;
+const isGeneratedId = (id) => {
+  return GENERATED_ID_REGEX.test(id);
 };
 
 /**
@@ -13487,7 +13487,7 @@ const dropGeneratedIdKeys = (state) => {
   }
   let stateWithoutGeneratedIdKeys = state;
   for (const key of Object.keys(state)) {
-    if (!isLikelyPreactGeneratedId(key)) {
+    if (!isGeneratedId(key)) {
       continue;
     }
     if (stateWithoutGeneratedIdKeys === state) {
@@ -14776,10 +14776,10 @@ const useNavStateBasic = (
 
   let effectiveType = type;
   // A push bakes the key into a history entry of its own, and an id naming a
-  // render position (see isLikelyPreactGeneratedId) can be claimed by two
+  // render position (see isGeneratedId) can be claimed by two
   // mounts of this same page. A replace keeps the key on the entry the document
   // is already on, where the id at least names one render.
-  if (type === "push" && isLikelyPreactGeneratedId(id)) {
+  if (type === "push" && isGeneratedId(id)) {
     effectiveType = "replace";
   }
 
@@ -14895,7 +14895,7 @@ const useNavStateBasic = (
  *   - "push": creates a new history entry — pressing the back button removes it and calls onLeave.
  *   - "replace": updates the current history entry — no extra history entry is created.
  *   Silently downgraded to "replace" (with a dev-only console.warn) when `id`
- *   looks auto-generated (e.g. preact's own useId()) — an unstable id baked
+ *   looks auto-generated (navi's own, or preact's useId()) — an unstable id baked
  *   into a pushed history entry won't survive a reload correctly, and could
  *   even collide with a different component's own auto-generated id. Pass a
  *   stable, explicit id to actually get "push" behavior.
@@ -29677,7 +29677,8 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
    * - `DELETE: async ({ id }) => [id, null]`
    *
    * `ownerId` may also be `{ [uniqueKey]: value }` when the owner is known by an alternate key.
-   * The property is `null` until a callback provides data; setting it to `null` clears it.
+   * The property is `undefined` until an answer speaks for the owner (its row, or a
+   * callback), `null` when that answer holds none; setting it to `null` clears it.
    * Mutations apply directly to the owner's signal, so the parent GET is never rerun; an
    * owner the store does not hold yet is left alone, its child comes with its next read.
    *
@@ -29733,7 +29734,10 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       for (const childSetup of childSetupCallbackSet) {
         childSetup(childItem);
       }
-      const childSignal = signal(null);
+      // `undefined` until something answers for this owner, `null` once an
+      // answer says it holds none: a screen tells « not read yet » from
+      // « nothing » as it does with an action's data.
+      const childSignal = signal(undefined);
       // The child keeps its identity while its props change, so the owner's
       // getter also reads this version, bumped by each change in place:
       // whichever way the props came in — the owner's row, a write of this
@@ -29742,7 +29746,10 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
       // Returns whether the child changed — what the store asks a relation
       // (see assign in array_signal_store.js).
       const applyProps = (props) => {
-        if (!props) {
+        if (props === undefined) {
+          return false;
+        }
+        if (props === null) {
           if (childSignal.peek() === null) {
             return false;
           }
@@ -29764,7 +29771,7 @@ ${name}.many("${propertyName}") source location: ${declarationSite}`,
           }
         }
         if (childSignal.peek() !== childItem) {
-          childSignal.value = childItem; // first activation: null → childItem
+          childSignal.value = childItem; // first activation
           return true;
         }
         if (changed) {
@@ -33639,7 +33646,12 @@ const Box = props => {
     mount,
     ...computeProps
   } = props;
-  const parentBoxFlow = useContext(BoxFlowContext);
+  // The flow of the nearest Box above in the component tree, which lays this
+  // box out unless a plain element sits between the two in the DOM: the box
+  // then reads that element's flow once mounted (see readDomParentFlow).
+  const contextBoxFlow = useContext(BoxFlowContext);
+  const [domParentFlow, setDomParentFlow] = useState(null);
+  const parentBoxFlow = domParentFlow && domParentFlow.contextBoxFlow === contextBoxFlow ? domParentFlow.flow : contextBoxFlow;
   // Which interactions this box answers, and with what. Read here rather than
   // on the control, so a swipe or a hold can be declared on anything — a row, a
   // card, a block of text — and reach the control it belongs to (which is what
@@ -33686,7 +33698,17 @@ const Box = props => {
     childForwardedProps,
     styleDeps
   } = computed;
-  const syncBox = useCallback(computed.syncBox, styleDeps);
+  const verifyParentFlow = parentBoxFlow === contextBoxFlow && FLOW_STYLING_ITS_CHILDREN_SET.has(contextBoxFlow) && readsParentFlow(computeProps);
+  const syncBox = useCallback(verifyParentFlow ? boxEl => {
+    const flow = readDomParentFlow(boxEl);
+    if (flow !== contextBoxFlow) {
+      setDomParentFlow({
+        contextBoxFlow,
+        flow
+      });
+    }
+    return computed.syncBox(boxEl);
+  } : computed.syncBox, styleDeps);
   const finalRef = useComposeElementRef(syncBox, ref);
   useInteractionsEffect(finalRef, interactionsRef);
   let innerChildren = children;
@@ -33991,6 +34013,13 @@ const computeBox = (props, parentBoxFlow) => {
       const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext);
       const cssVar = readCSSVarName(styleContext.styleCSSVars[name]);
       if (cssVar) {
+        if (name === "color" && value === "inherit") {
+          // A token set to `inherit` takes the token of the parent element
+          // (a list's white for its selected items), never the parent's color.
+          // `color: currentColor` IS `color: inherit`, and a token carries it.
+          addCSSVar("currentColor", cssVar, stylesTarget);
+          return true;
+        }
         addCSSVar(mergedValue, cssVar, stylesTarget);
         if (name === "borderRadius" && value === "inherit") {
           // "inherit" cannot be expressed via a CSS variable — a var() reference
@@ -34302,6 +34331,47 @@ const declaresSomething = value => {
   }
   return true;
 };
+// The flows the styles of a child branch on (see expandX, selfAlignX… in
+// box_style_util.js): under any other the child writes the same styles
+// whatever its parent is.
+const FLOW_STYLING_ITS_CHILDREN_SET = new Set(["flex-x", "flex-y", "inline-flex-x", "inline-flex-y", "grid", "inline-grid"]);
+const PARENT_FLOW_PROP_NAMES = ["expand", "expandX", "expandY", "selfAlignX", "selfAlignY"];
+const readsParentFlow = props => {
+  for (const name of PARENT_FLOW_PROP_NAMES) {
+    if (props[name]) {
+      return true;
+    }
+  }
+  return false;
+};
+// A Box parent says its flow on its element; a plain element is read from its
+// computed style, which only a box mounted under one pays for.
+const readDomParentFlow = boxEl => {
+  let parent = boxEl.parentElement;
+  while (parent) {
+    const flowAttribute = parent.getAttribute("navi-box-flow");
+    if (flowAttribute) {
+      return flowAttribute;
+    }
+    const {
+      display,
+      flexDirection
+    } = window.getComputedStyle(parent);
+    if (display === "contents") {
+      parent = parent.parentElement;
+      continue;
+    }
+    if (display === "flex" || display === "inline-flex") {
+      const axis = flexDirection.startsWith("column") ? "y" : "x";
+      return `${display}-${axis}`;
+    }
+    if (display === "grid" || display === "inline-grid") {
+      return display;
+    }
+    return "block";
+  }
+  return undefined;
+};
 const isScrollingOverflow = value => value === "auto" || value === "scroll";
 const mayHoldComponent = children => {
   if (children === null || children === undefined) {
@@ -45314,17 +45384,22 @@ document.body.addEventListener(
  * on screen. A registry keyed by id then holds the newcomer, and loses the
  * first control when the newcomer leaves. navi renders on the client only, so
  * a counter is all the uniqueness needs.
+ *
+ * Held in a ref, not in useState: @preact/signals' shouldComponentUpdate
+ * skips the render of a component holding hook state whose props did not
+ * change, so an id kept as state would change when its caller renders.
  */
 
 
 let generatedIdCount = 0;
 
 const useGeneratedId = () => {
-  const [id] = useState(() => {
+  const idRef = useRef(null);
+  if (idRef.current === null) {
     generatedIdCount++;
-    return `navi_${generatedIdCount}`;
-  });
-  return id;
+    idRef.current = `navi_${generatedIdCount}`;
+  }
+  return idRef.current;
 };
 
 /**
@@ -59788,7 +59863,7 @@ const Expandable = props => {
   const rootRef = ref || defaultRef;
   const uiRef = useRef();
   const contentContainerRef = useRef();
-  const contentId = useId();
+  const contentId = useGeneratedId();
   const isColumn = layout === "column";
   const closedContentSized = isColumn && mount === "always";
   // Only the two directions the layout has room for: a column layout reveals
@@ -61428,7 +61503,7 @@ const ButtonConfirm = ({
   // it is elsewhere by then, and pulling it back would take it from whatever
   // the person moved to.
   const restoreFocusRef = useRef(false);
-  const questionId = `${useId()}_question`;
+  const questionId = `${useGeneratedId()}_question`;
   const cancel = restoreFocus => {
     restoreFocusRef.current = restoreFocus;
     setAsking(false);
@@ -62213,7 +62288,7 @@ const ControlSwap = props => {
   const activeSide = sides[activeIndex];
   const capRefs = [useRef(), useRef()];
   const slotRefs = [useRef(), useRef()];
-  const slotIdPrefix = useId();
+  const slotIdPrefix = useGeneratedId();
   const activeNameRef = useRef(floor.name);
   activeNameRef.current = activeSide.name;
   const swapTo = (name, event, pressedCapIndex = null) => {
@@ -63063,7 +63138,7 @@ const InputCheckboxFieldInterface = props => {
   // setting's name — which are its label and its accessible name: a mode one
   // toggles is a checkbox, not a button writing a signal on each press.
   const hasLabel = variant === "button" && children !== undefined && children !== null && children !== false;
-  const labelId = useId();
+  const labelId = useGeneratedId();
   const boxRef = useRef();
   useAccentColorAttributes(boxRef, accentColor, {
     elementSelector: ".navi_checkbox_accent_probe"
@@ -74208,7 +74283,7 @@ const PopupTitleContext = createContext(null);
 const PopupTitle = props => {
   import.meta.css = [css$E, "@jsenv/navi/src/layout/popup_title.jsx"];
   const registerTitle = useContext(PopupTitleContext);
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const id = props.id || `popup_title_${idDefault}`;
   useLayoutEffect(() => {
     if (!registerTitle) {
@@ -77513,7 +77588,7 @@ const usePopoverProps = props => {
   // open, two separate invocations of openEffect that don't otherwise share
   // any scope, hence the ref.
   const disarmBackdropHideRef = useRef(null);
-  const defaultId = useId();
+  const defaultId = useGeneratedId();
   const id = rest.id || defaultId;
   const backdropId = `${id}-backdrop`;
   const debugPopup = useDebugPopup();
@@ -79103,10 +79178,10 @@ const PickerCustom = props => {
   // before computing popupId below, so two Pickers without an explicit id never collide.
   // Captured before the fallback chain below overwrites props.id — needed to
   // know whether the id actually came from the caller (stable) or from
-  // useId()/ControlIdContext (a generated id names one mount: a reload, or a
+  // useGeneratedId()/ControlIdContext (a generated id names one mount: a reload, or a
   // return to this page, generates another), see pickerNavType below.
   const hasExplicitId = Boolean(props.id);
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const controlId = useContext(ControlIdContext);
   props.id = props.id || controlId || idDefault;
   // Given no value, the picker holds what the control in its popup holds (see
@@ -79207,7 +79282,7 @@ const PickerCustom = props => {
     const debugPopup = useDebugPopup();
     // In "dialog" mode with a stable, caller-provided id, enterExpanded()
     // pushes a history entry so the back button closes it. Every other case
-    // (popover mode, or a dialog whose id was auto-generated via useId()/
+    // (popover mode, or a dialog whose id was auto-generated via useGeneratedId()/
     // ControlIdContext) replaces the current history state instead — a
     // generated id names one mount, so pushing it would either leave an entry
     // nothing reads or, worse, collide with a different component's own
@@ -82084,7 +82159,7 @@ const ListSelectable = props => {
   const Next = useNextResolver();
   import.meta.css = [css$x, "@jsenv/navi/src/control/list/list_selectable.jsx"];
   // we allow ourselves to auto-generate a name
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `listbox_${defaultName}`;
   const {
     ref,
@@ -82433,7 +82508,7 @@ const ListItemSelectableResolver = props => {
 };
 const ListItemSelectable = props => {
   const Next = useNextResolver();
-  const defaultId = useId();
+  const defaultId = useGeneratedId();
   // Whether the caller SAYS anything about this row's selection. Passing
   // `checked: undefined` is not the same as not passing it: a control with the
   // key present calls itself controlled, and a controlled row is one the list
@@ -83423,7 +83498,7 @@ const ListUI = props => {
   } = props;
   // Remembered by name, and a name made up at render (see ListFirstResolver)
   // names no list a later mount would recognize.
-  const rememberScroll = !scrollResetOnNavigation && !isLikelyPreactGeneratedId(rest.id);
+  const rememberScroll = !scrollResetOnNavigation && !isGeneratedId(rest.id);
   // Where the list was when its screen was left, when this is the way back
   // (see scroll_restoration.js). Read once: `defaultScrolled` is held by
   // reference, and a place read again each render would be a list moved each
@@ -83733,7 +83808,7 @@ const ListFirstResolver = props => {
   const Next = useNextResolver();
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   props.id = props.id || idDefault;
   const listItemsRef = useRef(null);
   if (!listItemsRef.current) {
@@ -87147,7 +87222,7 @@ const ListItemUI = props => {
   if (identityMatters && props.id === undefined) {
     console.warn("ListItem is missing an explicit id prop. Provide a stable id so pointed/selected state survives search reordering.");
   }
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   props.id = props.id || idDefault;
   const listItems = useContext(ListItemsContext);
   const groupId = useContext(ListGroupContext);
@@ -87960,7 +88035,7 @@ const useRunItems = (store, {
   renderSkeleton,
   renderError
 }) => {
-  const ownerId = useId();
+  const ownerId = useGeneratedId();
   // Dev only: the group `groupOfMissing` put an item not held in, by rank,
   // checked against `groupBy` once the item lands.
   const missingGroupCheckRef = useRef(null);
@@ -88515,7 +88590,7 @@ const ListRunSkeletonItem = ({
 }) => {
   const listItems = useContext(ListItemsContext);
   const groupId = useContext(ListGroupContext);
-  const entryId = useId();
+  const entryId = useGeneratedId();
   listItems.draw(entryId, {
     ownerId: runItem.ownerId,
     place: runItem.index,
@@ -89247,7 +89322,7 @@ const ListItemGroup = ({
   children,
   ...rest
 }) => {
-  const groupId = useId();
+  const groupId = useGeneratedId();
   const listItems = useContext(ListItemsContext);
   const group = listItems.group(groupId);
   useLayoutEffect(() => {
@@ -93470,7 +93545,7 @@ const Spin = ({
   } else {
     compareValues ??= compareValuesDefault;
   }
-  const id = useId();
+  const id = useGeneratedId();
   // What the group around it says, when there is one: how big the whole thing
   // is written is said once, on the group, and every spin in it follows.
   const group = useContext(SpinGroupContext);
@@ -94688,7 +94763,7 @@ const TimeRangeSpin = ({
   endTimeProps,
   ...rest
 }) => {
-  const startId = useId();
+  const startId = useGeneratedId();
   return jsxs(ControlGroup, {
     flex: true,
     alignY: "center",
@@ -94781,7 +94856,7 @@ const css$q = /* css */`.navi_checkbox_group {
 const CheckboxGroup = props => {
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `checkbox_group_${defaultName}`;
   const checkboxGroup = jsx(CheckboxGroupInterface, {
     ...props
@@ -95546,7 +95621,7 @@ const css$o = /* css */`.navi_radio_group {
 const RadioGroup = props => {
   const refDefault = useRef(null);
   props.ref = props.ref || refDefault;
-  const defaultName = useId();
+  const defaultName = useGeneratedId();
   props.name = props.name || `radio_group_${defaultName}`;
   const radioGroup = jsx(RadioGroupInterface, {
     ...props
@@ -95884,7 +95959,7 @@ const SplitButton = props => {
   if (popupProps.positionArea === undefined && mode === "popover") {
     popupProps.positionArea = "bottom-end";
   }
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const idResolved = id || idDefault;
   const menuId = `${idResolved}_menu`;
   const rootRef = useRef(null);
@@ -96639,12 +96714,18 @@ const buildMatchInfo = (searchText, items, matchFn) => {
  *   needed. `data.role === "presentation"` keeps it out entirely.
  *   Returns the visible rank (position among visible items), or -1 when hidden
  *   or filtered.
+ *   An item rendered without an index keeps the position it has, and a new one
+ *   goes last: for a host that cannot know the order at render and gives it
+ *   afterwards with setOrder.
  *   Signals and onChange are deferred to a microtask so multiple items updating
  *   in one commit cause only one notification.
  *
  *   getTrackedItemByIndex(index): synchronous O(1) lookup of a visible item by
  *   its visible rank. Returns undefined when index is out of range.
  *
+ *   setOrder(ids): gives each tracked item its position from its rank in
+ *   `ids`.
+ *
  *   peekItems(): the items as they stand right now, without waiting for the
  *   deferred notification — what a sibling rendering after the items must read
  *   to paint them in the same commit.
@@ -96925,8 +97006,14 @@ const createItemTracker = (onChange) => {
   // that determines this item's position among siblings.
   // Returns the item's visible rank among non-hidden items, or -1 when hidden.
   const useTrackItem = (data) => {
-    const { id, index } = data;
+    const { id } = data;
     const key = keyForId(id);
+    let { index } = data;
+    if (index === undefined) {
+      index = keyToExplicitOrder.has(key)
+        ? keyToExplicitOrder.get(key)
+        : Infinity;
+    }
 
     syncItem(key, index, data);
     notify();
@@ -96944,6 +97031,24 @@ const createItemTracker = (onChange) => {
     return keyToOrderedIndex.get(key) ?? -1;
   };
 
+  const setOrder = (ids) => {
+    let changed = false;
+    for (let i = 0; i < ids.length; i++) {
+      const key = idToKey.get(ids[i]);
+      if (key === undefined || !allRegistrations.has(key)) {
+        continue;
+      }
+      if (keyToExplicitOrder.get(key) === i) {
+        continue;
+      }
+      syncItem(key, i, allRegistrations.get(key));
+      changed = true;
+    }
+    if (changed) {
+      notify();
+    }
+  };
+
   const getTrackedItemByIndex = (index) => {
     const key = orderedKeys[index];
     if (key === undefined) {
@@ -96977,6 +97082,7 @@ const createItemTracker = (onChange) => {
   return {
     useTrackItem,
     getTrackedItemByIndex,
+    setOrder,
     peekItems,
     itemsSignal,
     visibleItemsSignal,
@@ -97374,8 +97480,8 @@ const getNumericRange = items => {
 
 // Wheel.Item registers its {value, label} here so WheelUI knows the full ordered
 // list of items regardless of how children are wrapped (providers, fragments…).
-// indexRef gives each item its position: WheelUI resets it to 0 every render and
-// each item reads-and-increments it as it renders, in document order.
+// The position comes after the commit, from the marker each item leaves where it
+// stands (see WheelUI).
 const WheelItemTrackerContext = createContext(null);
 
 // Lets a WheelGroup push shared presentation (glass, orientation) down to every
@@ -97997,15 +98103,21 @@ function WheelUI(props) {
   // (children may be wrapped). This ordered list is the source of truth for the
   // whole wheel — the rendered rows are a small recycled window over it.
   const tracker = useItemTracker();
-  const indexRef = useRef(0);
-  indexRef.current = 0;
-  const trackerContextRef = useRef(null);
-  if (!trackerContextRef.current) {
-    trackerContextRef.current = {
-      tracker,
-      indexRef
-    };
-  }
+  // The order is read from the markers the items leave in the DOM, not from the
+  // order they render in: an item whose props did not change may skip a render
+  // (signals' shouldComponentUpdate), and a render count would then rank the
+  // ones that did render first.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const ids = [];
+    for (const marker of el.querySelectorAll("[data-navi-wheel-item]")) {
+      ids.push(marker.getAttribute("data-navi-wheel-item"));
+    }
+    tracker.setOrder(ids);
+  });
   const trackedItems = tracker.itemsSignal.value;
   const trackedItemsRef = useRef(trackedItems);
   trackedItemsRef.current = trackedItems;
@@ -98805,7 +98917,7 @@ function WheelUI(props) {
         className: "navi_wheel_pane",
         "data-side": "start"
       }), jsx(WheelItemTrackerContext.Provider, {
-        value: trackerContextRef.current,
+        value: tracker,
         children: jsx(ControlFacadeChildrenWrapper, {
           facadeController: facadeController,
           children: children
@@ -98918,9 +99030,10 @@ const WheelWindow = ({
  * Wheel.Item — a value in a Wheel. Must be used inside <Wheel>.
  *
  * Registration only: it records its {value, label, itemProps} with the wheel and
- * renders NOTHING. The wheel is virtualized — it renders a small recycled window
- * of rows and fills each from this tracked data — so the value list is the source
- * of truth, not a per-item DOM node. Selection lives on the wheel's value.
+ * renders no row, only a hidden marker the wheel reads its position from. The
+ * wheel is virtualized — it renders a small recycled window of rows and fills
+ * each from this tracked data — so the value list is the source of truth, not a
+ * per-item DOM node. Selection lives on the wheel's value.
  *
  * @type {import("preact").FunctionComponent<{
  *   value: any,
@@ -98934,19 +99047,20 @@ const WheelItem = ({
   children,
   ...rest
 }) => {
-  const idDefault = useId();
+  const idDefault = useGeneratedId();
   const resolvedId = id || idDefault;
   // Wheel.Item must live inside a Wheel, so the context is always present.
-  const trackerContext = useContext(WheelItemTrackerContext);
-  const index = trackerContext.indexRef.current++;
-  trackerContext.tracker.useTrackItem({
+  const tracker = useContext(WheelItemTrackerContext);
+  tracker.useTrackItem({
     id: resolvedId,
-    index,
     value,
     label: children,
     itemProps: rest
   });
-  return null;
+  return jsx("span", {
+    hidden: true,
+    "data-navi-wheel-item": resolvedId
+  });
 };
 Wheel.Item = WheelItem;
 
@@ -99532,7 +99646,7 @@ const TimeRangeWheel = ({
   ...rest
 }) => {
   import.meta.css = [css$j, "@jsenv/navi/src/control/wheel/wheel_time.jsx"];
-  const startId = useId();
+  const startId = useGeneratedId();
   const startRef = useRef(null);
   const endRef = useRef(null);
   const endHourList = useMemo(() => resolveHourList(hours), [hours ? hours.min : undefined, hours ? hours.max : undefined, hours]);
@@ -102520,7 +102634,7 @@ const useIsInTableHead = () => useContext(TableSectionContext) === "head";
 const Table = props => {
   installTableCss();
   const tableDefaultRef = useRef();
-  const tableDefaultId = `table-${useId()}`;
+  const tableDefaultId = `table-${useGeneratedId()}`;
   const {
     id = tableDefaultId,
     selection = [],