@jsenv/navi 0.29.322 → 0.29.324

package/dist/jsenv_navi.js

@@ -7,7 +7,7 @@ export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, scrollIntoViewThroughScrollables, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, keepTouchRefusable, isPressDrivenClick, waitForTap, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, dragSourceThatStoodDown, markDragSource, refuseDragTo, startDragTo, installPanZoom, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, isTouchDrivenEvent, scrollIntoViewScoped, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, releaseWheelGesture, getScrollIntoViewScopedOffsets, wheelGestureIsTakenFrom, claimWheelGesture, initFocusGroup, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, isPressDisputedByDrag, canScroll, measureWidestChildRow, performTabNavigation, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } 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 { isValidElement, createContext, render, h, toChildArray, options, cloneElement, Fragment as Fragment$1 } from "preact";
+import { isValidElement, createContext, render, h, toChildArray, options, cloneElement, createElement, Fragment as Fragment$1 } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, useState, useEffect, useMemo, useId } from "preact/hooks";
 import { humanizeI18n, setRuntimeLangSource, formatDuration, formatMonth, formatDay, resolveTimeRangePrecision, formatDatePlaceholder, toDate, getRelativeDay, formatDayRelative, formatMonthPlaceholder, formatWeekPlaceholder, formatDatetimePlaceholder, formatDatetime, toTimeOfDay, formatTimeOfDay, formatTime, formatMinuteDuration, formatSecondDuration, formatHourDuration, formatTimeRelative, formatNumber, interpolateText, installInterpolateJsx } from "@jsenv/humanize";
 export { createI18n, formatDatetime, formatDay, formatDayRelative, formatDuration, formatHourDuration, formatMinuteDuration, formatMonth, formatNumber, formatSecondDuration, formatTime, formatTimeOfDay, formatTimeRange, formatTimeRelative, interpolateText } from "@jsenv/humanize";
@@ -31648,8 +31648,26 @@ const resolveExplicitTarget = (element) => {
   }
   return undefined;
 };
+// The control around the source that a command can be about: one holding a
+// value of its own. A popup is a control root too (it answers interactions,
+// carries a callout), but it has no host of its own — asked for one, it
+// answers with the first control INSIDE it, which for a field sending
+// --navi-update from a picker's popup is that very field: the command then
+// sets the field to what it already holds, which fires the command again,
+// without end. Such a surface is walked past, up to the picker or the form.
 const resolveFirstParentControl = (el) => {
-  return getParentControl(el);
+  let parentControl = getParentControl(el);
+  while (parentControl && !ownsControlHost(parentControl)) {
+    parentControl = getParentControl(parentControl);
+  }
+  return parentControl;
+};
+const ownsControlHost = (controlRoot) => {
+  const controlHost = findControlHost(controlRoot);
+  return (
+    Boolean(controlHost) &&
+    controlHost.closest("[navi-control]") === controlRoot
+  );
 };
 const resolveFirstChildControl = (el) => {
   let startEl;
@@ -33840,19 +33858,27 @@ const writeInSignal = (signal, value, { history }) => {
 // is open (`?seat=<gameId>` over a list of cards), and closed is the signal
 // holding none of their values — `undefined`, which a state signal reads as
 // its default.
+//
+// A popup without a `value` reads anything the signal holds — save `false`,
+// `null` and `undefined` — as open: a single sheet bound to `?open=<id>` is
+// open on whichever id the address names, and the id is the popup's content
+// to read, not its to write. Opening writes `true` only into a signal that
+// reads closed; closing writes `false` where the signal held `true`, so a
+// boolean signal keeps its boolean, and `undefined` for anything else.
 const writeOpenedInSignal = (signal, opened, event, popupValue) => {
-  if (readOpened(signal.peek(), popupValue) === opened) {
+  const signalValue = signal.peek();
+  if (readOpened(signalValue, popupValue) === opened) {
     // The signal already says so, meaning this open/close IS what it asked
     // for: a back press that took the popup out of the url, the application
     // writing it. Nothing to write back — and nothing to go back to either,
     // since the navigation navBack would undo is the one that asked for this.
     return;
   }
-  const closedValue = popupValue === undefined ? false : undefined;
   if (opened) {
     signal.value = popupValue === undefined ? true : popupValue;
     return;
   }
+  const closedValue = readClosedValue(signalValue);
   if (
     signal.options?.getHistory?.() === "push" &&
     // Nothing of this document behind: the popup was opened by the url itself
@@ -33873,10 +33899,15 @@ const writeOpenedInSignal = (signal, opened, event, popupValue) => {
 };
 const readOpened = (signalValue, popupValue) => {
   if (popupValue === undefined) {
-    return signalValue;
+    return (
+      signalValue !== undefined && signalValue !== null && signalValue !== false
+    );
   }
   return signalValue === popupValue;
 };
+const readClosedValue = (openSignalValue) => {
+  return openSignalValue === true ? false : undefined;
+};
 
 /**
  * Keeps an open controller in sync with where the caller says the popup should
@@ -33918,6 +33949,13 @@ const useOpenPropsEffectOnOpenController = (
     : signal
       ? readOpened(signal.value, value)
       : props.open;
+  // What the signal holds while it reads open — `true`, the popup's `value`,
+  // or the id a single sheet is open on. Put back when a close is refused,
+  // since by then the signal has been written closed.
+  const openSignalValueRef = useRef(undefined);
+  if (signal && open) {
+    openSignalValueRef.current = signal.value;
+  }
   // Assigned on every render, like openEffect, so it always closes over the
   // latest prop: a popup that opens or closes on its own (Escape, backdrop, a
   // --navi-close command) writes what happened where the caller keeps it, so
@@ -33998,10 +34036,11 @@ const useOpenPropsEffectOnOpenController = (
     // request already reads in the signal, and with a `value` what the
     // signal holds may be another popup's, which the write would erase.
     if (signal && openController.opened !== open) {
-      const opened = openController.opened;
       writeInSignal(
         signal,
-        value === undefined ? opened : opened ? value : undefined,
+        openController.opened
+          ? openSignalValueRef.current
+          : readClosedValue(signal.peek()),
         { history: "replace" },
       );
     }
@@ -34379,6 +34418,21 @@ const resolveAutoAnimationKind = (anchor, parsedPositionArea) => {
  */
 const OUTSIDE_REGION_ATTRIBUTE = "data-navi-popup-outside";
 
+/**
+ * `data-navi-popup-inside` is the other direction: a box of the PAGE the
+ * caller says belongs to a popup, so a press on it is not outside that popup
+ * even though it lies beyond the border box — a card whose press is what
+ * fills the one panel of a board. Its value names the popup by `id`, the way
+ * `commandfor` does (several ids, space separated), because the exemption is
+ * one popup's: a menu open beside the board still closes on the same press.
+ *
+ * Unlike the outside marker it answers for its whole subtree: the outside
+ * marker carves free space out of a surface whose controls stay surface, this
+ * one adds a whole thing — the card, its count, its buttons — to the popup's
+ * own ground, and nothing in it is a dismissal.
+ */
+const INSIDE_ATTRIBUTE = "data-navi-popup-inside";
+
 /**
  * What a press landing on a region the caller declared as not-its-surface
  * does: exactly what the same press on the backdrop would do.
@@ -34503,6 +34557,14 @@ const armOutsidePressClose = (
     ) {
       return;
     }
+    if (
+      popupEl.id &&
+      pointerDownEvent.target.closest?.(
+        `[${INSIDE_ATTRIBUTE}~="${CSS.escape(popupEl.id)}"]`,
+      )
+    ) {
+      return;
+    }
     // Real DOM containment wins over the rectangle below — an element
     // genuinely inside the popup (`overflow: visible`, a negative margin, an
     // absolutely-positioned child) can be painted outside its border box, and
@@ -36486,6 +36548,46 @@ const acknowledgeOwnAction = (controller) => {
   controller.acknowledgeUIState();
 };
 
+// What a group of checkboxes or radios is worth is a claim about values, and
+// a value whose box is not there cannot be contradicted by that box: a row
+// scrolled out of a virtualized list, a filtered-out option, a whole page being
+// parked while a route action reruns — its children leave one at a time, and
+// each partial reading would otherwise be taken for the answer and written
+// into whatever the group is bound to (an array signal emptied down to `[]`
+// by its own unmount). `kept` is what the group holds as it is asked; a value
+// in it stays until a DRAWN child carrying that value says otherwise.
+//
+// Read off the group rather than remembered here on purpose: a value put ON
+// the group (a `value` prop, a signal, a reopened popup) replaces the whole
+// selection, and a private memory would go on holding the rows it could not
+// see being unselected.
+const keptAndCheckedChildUIStates = (children, fallbackState, kept) => {
+  const drawnValues = new Set(children.map((child) => child.props.value));
+  const values = Array.isArray(kept)
+    ? kept.filter((value) => !drawnValues.has(value))
+    : [];
+  for (const child of children) {
+    if (child.uiState !== undefined) {
+      values.push(child.uiState);
+    }
+  }
+  return values.length === 0 ? undefined : values;
+};
+const keptOrFirstDefinedChildUIState = (children, fallbackState, kept) => {
+  for (const child of children) {
+    if (child.uiState !== undefined) {
+      return child.uiState;
+    }
+  }
+  // No drawn child claims it. If the child that held it IS drawn, it was really
+  // deselected; if it is not, the group keeps what it holds.
+  const keptIsDrawn = children.some((child) => child.props.value === kept);
+  if (keptIsDrawn) {
+    return undefined;
+  }
+  return kept;
+};
+
 // Default aggregate/distribute implementations keyed by controlType or stateType.
 // Looked up in useUIGroupStateController to fill in omitted aggregateChildStates /
 // distributeChildUIState. If neither a default nor an explicit impl is found for a
@@ -36494,7 +36596,7 @@ const GROUP_DEFAULTS = {
   radio_group: {
     childControlFilter: (child) =>
       child.controlType === "input" && child.controlHostProps?.type === "radio",
-    aggregateChildStates: firstDefinedChildUIState,
+    aggregateChildStates: keptOrFirstDefinedChildUIState,
     distributeChildUIState: (newUIState, childUIStateController) => {
       const childSelected = childUIStateController.props.value === newUIState;
       if (childSelected) {
@@ -36507,16 +36609,7 @@ const GROUP_DEFAULTS = {
     childControlFilter: (child) =>
       child.controlType === "input" &&
       child.controlHostProps?.type === "checkbox",
-    aggregateChildStates: (children) => {
-      const values = [];
-      for (const child of children) {
-        const childUIState = child.uiState;
-        if (childUIState !== undefined) {
-          values.push(childUIState);
-        }
-      }
-      return values.length === 0 ? undefined : values;
-    },
+    aggregateChildStates: keptAndCheckedChildUIStates,
     distributeChildUIState: (newUIState, childUIStateController) => {
       const childSelected =
         Array.isArray(newUIState) &&
@@ -47740,33 +47833,6 @@ const createToggleEvent = open => {
   return toggleEvent;
 };
 
-const NextResolverContext = createContext(null);
-const useNextResolver = () => useContext(NextResolverContext);
-
-/**
- * Creates a renderComponent function that passes props through a chain of resolvers.
- * Each resolver is a Preact component rendered in sequence (hooks are allowed).
- * To pass through to the next resolver, call useNextResolver() and render the
- * returned Next component with the desired props.
- * To terminate the chain early (e.g. render a specialized component), render
- * directly without calling Next.
- *
- * The last entry in the array is the final/target component — it receives null
- * from useNextResolver() indicating it is terminal.
- *
- * Usage:
- *   const renderButton = createComponentResolver([ResolverA, ResolverB, ButtonTarget]);
- *   // Then inside a component render:
- *   renderButton(props)
- *
- * Each position of the chain has a runner of its own, defined once: it renders
- * its resolver under a NextResolverContext holding the runner after it. A
- * resolver that re-renders on its own and renders <Next> therefore resumes at
- * its own position without any bookkeeping — the Next it was given is the one
- * made for it. A chain rendered by the hundred (a list's rows) pays two
- * components per position, the runner and the resolver, so nothing here is a
- * component that merely forwards.
- */
 const createComponentResolver = (resolvers, {
   pure
 } = {}) => {
@@ -47775,13 +47841,10 @@ const createComponentResolver = (resolvers, {
   for (let index = 0; index < resolvers.length; index++) {
     const Resolver = resolvers[index];
     const isLast = index === lastIndex;
-    const Runner = props => jsx(NextResolverContext.Provider, {
-      value: isLast ? null : runners[index + 1],
-      children: jsx(Resolver, {
-        ...props
-      })
-    });
-    Runner.displayName = `${Resolver.displayName || Resolver.name}Runner`;
+    function Runner(props) {
+      return runResolverBody(this, Resolver, props, isLast ? null : runners[index + 1]);
+    }
+    Runner.displayName = Resolver.displayName || Resolver.name;
     runners.push(Runner);
   }
   const FirstRunner = runners[0];
@@ -47812,6 +47875,54 @@ const createComponentResolver = (resolvers, {
   }
   return PureRenderComponent;
 };
+const useNextResolver = () => {
+  if (currentNext === OUTSIDE_RESOLVER_BODY) {
+    throw new Error("useNextResolver() called outside a resolver body: a resolver rendered by another resolver is rendered with renderResolver(Resolver, props), not as a JSX child.");
+  }
+  return currentNext;
+};
+const renderResolver = (Resolver, props) => {
+  if (currentNext === OUTSIDE_RESOLVER_BODY) {
+    throw new Error(`renderResolver(${Resolver.displayName || Resolver.name}) called outside a resolver body: only a resolver can render another one.`);
+  }
+  let SubRunner = subRunnerByResolver.get(Resolver);
+  if (!SubRunner) {
+    SubRunner = function (props) {
+      const {
+        [NEXT_PROP]: next,
+        ...ownProps
+      } = props;
+      return runResolverBody(this, Resolver, ownProps, next);
+    };
+    SubRunner.displayName = Resolver.displayName || Resolver.name;
+    subRunnerByResolver.set(Resolver, SubRunner);
+  }
+  return createElement(SubRunner, {
+    ...props,
+    [NEXT_PROP]: currentNext
+  });
+};
+
+// What useNextResolver() answers: the runner after the one whose body is
+// running, null for the last — and, outside any body, a value that is neither.
+const OUTSIDE_RESOLVER_BODY = Symbol("outside_resolver_body");
+let currentNext = OUTSIDE_RESOLVER_BODY;
+const runResolverBody = (instance, Resolver, props, next) => {
+  const nextBefore = currentNext;
+  currentNext = next;
+  try {
+    return Resolver.call(instance, props);
+  } finally {
+    currentNext = nextBefore;
+  }
+};
+
+// One runner per resolver rendered through renderResolver, made on first use:
+// the same component type on every render, so a resolver picked again is
+// updated in place and another one picked is a remount, like any child.
+const subRunnerByResolver = new WeakMap();
+// Rides on the props of a sub-runner, stripped before the body sees them.
+const NEXT_PROP = "navi-resolver-next";
 function pureShouldComponentUpdate(nextProps) {
   return shallowDiffers(this.props, nextProps);
 }
@@ -48637,9 +48748,7 @@ const ButtonConfirm = ({
 const ButtonRouteResolver = props => {
   const Next = useNextResolver();
   if (props.route) {
-    return jsx(ButtonWithRoute, {
-      ...props
-    });
+    return renderResolver(ButtonWithRoute, props);
   }
   return jsx(Next, {
     ...props
@@ -51237,9 +51346,7 @@ const installInputCss = () => {
 const InputModeResolver = props => {
   const Next = useNextResolver();
   if (props.inputMode === "numeric" || props.inputMode === "decimal") {
-    return jsx(InputModeNumericOrDecimal, {
-      ...props
-    });
+    return renderResolver(InputModeNumericOrDecimal, props);
   }
   return jsx(Next, {
     ...props
@@ -51467,39 +51574,25 @@ const InputTypeResolver = props => {
   // very same "icon while empty, clear button once filled" affordance without
   // pretending to be a search box.
   if (props.clearable && props.type !== "search") {
-    return jsx(InputClearable, {
-      ...props
-    });
+    return renderResolver(InputClearable, props);
   }
   if (props.type === "search") {
-    return jsx(InputSearch, {
-      ...props
-    });
+    return renderResolver(InputSearch, props);
   }
   if (props.type === "email") {
-    return jsx(InputEmail, {
-      ...props
-    });
+    return renderResolver(InputEmail, props);
   }
   if (props.type === "tel") {
-    return jsx(InputTel, {
-      ...props
-    });
+    return renderResolver(InputTel, props);
   }
   if (props.type === "number") {
-    return jsx(InputNumber, {
-      ...props
-    });
+    return renderResolver(InputNumber, props);
   }
   if (props.type === "color") {
-    return jsx(InputColor, {
-      ...props
-    });
+    return renderResolver(InputColor, props);
   }
   if (props.type === "datetime-local") {
-    return jsx(InputDatetimeLocal, {
-      ...props
-    });
+    return renderResolver(InputDatetimeLocal, props);
   }
   return jsx(Next, {
     ...props
@@ -51612,9 +51705,7 @@ const InputDatetimeLocal = props => {
 const InputWithListResolver = props => {
   const Next = useNextResolver();
   if (props["navi-list"]) {
-    return jsx(InputWithList, {
-      ...props
-    });
+    return renderResolver(InputWithList, props);
   }
   return jsx(Next, {
     ...props
@@ -51721,9 +51812,7 @@ const ChevronDownSvg$1 = () => {
 const InputWithSuggestionsResolver = props => {
   const Next = useNextResolver();
   if (props["navi-suggestions"]) {
-    return jsx(InputTextualWithSuggestions, {
-      ...props
-    });
+    return renderResolver(InputTextualWithSuggestions, props);
   }
   return jsx(Next, {
     ...props
@@ -59418,14 +59507,15 @@ const css$E = /* css */`
  *   the focus only leaves it for something that asked by name (`autoFocus` on
  *   that element, which outranks whatever the dialog says).
  * @param {boolean} [props.open] - Controlled open state.
- * @param {import("@preact/signals").Signal<boolean>} [props.signal] - The open
+ * @param {import("@preact/signals").Signal<any>} [props.signal] - The open
  *   state said the way every navi control says it: the dialog opens and closes
  *   to match the signal, and writes into it whenever it opens or closes on its
  *   own (Escape, backdrop, a --navi-close command) — one binding to both drive
  *   the dialog and know where it is, and the state stays where the app put it.
  *   Excludes `open`; `onOpen`/`onClose` still fire. A signal holding `true` at
  *   mount behaves like `defaultOpen`: the dialog was already open, no entrance
- *   plays.
+ *   plays. A signal holding an id (one dialog showing whichever card
+ *   the address names) reads as open, and the dialog leaves the id alone.
  * @param {any} [props.value] - What `signal` holds while THIS dialog is
  *   open, for several of them sharing one signal that says which is open
  *   (`?seat=<gameId>` over a list of cards): open while `signal.value` is this
@@ -61033,14 +61123,15 @@ const css$D = /* css */`
  *   the focus only leaves it for something that asked by name (`autoFocus` on
  *   that element, which outranks whatever the popover says).
  * @param {boolean} [props.open] - Controlled open state.
- * @param {import("@preact/signals").Signal<boolean>} [props.signal] - The open
+ * @param {import("@preact/signals").Signal<any>} [props.signal] - The open
  *   state said the way every navi control says it: the popover opens and closes
  *   to match the signal, and writes into it whenever it opens or closes on its
  *   own (Escape, light dismiss, a --navi-close command) — one binding to both
  *   drive the popover and know where it is, and the state stays where the app
  *   put it. Excludes `open`; `onOpen`/`onClose` still fire. A signal holding
  *   `true` at mount behaves like `defaultOpen`: the popover was already open,
- *   no entrance plays.
+ *   no entrance plays. A signal holding an id (one popover showing whichever card
+ *   the address names) reads as open, and the popover leaves the id alone.
  * @param {any} [props.value] - What `signal` holds while THIS popover is
  *   open, for several of them sharing one signal that says which is open
  *   (`?seat=<gameId>` over a list of cards): open while `signal.value` is this
@@ -62473,9 +62564,7 @@ const css$B = /* css */`.navi_picker_callout_dock > [data-picker-content] {
 const PickerCustomResolver = props => {
   import.meta.css = [css$B, "@jsenv/navi/src/control/picker/picker_custom.jsx"];
   if (props.children === undefined) {
-    return jsx(PickerNative, {
-      ...props
-    });
+    return renderResolver(PickerNative, props);
   }
   if (props.mode === "callout") {
     // A tooltip is an icon one presses, unless told otherwise. Own-property
@@ -62537,14 +62626,12 @@ const PickerCustomResolver = props => {
     // how a field says its value is a JS one, kept beside the DOM (see
     // controller_registry.js) — the same thing type="array"/"object" already
     // say for their shapes.
-    return jsx(PickerCustom, {
+    return renderResolver(PickerCustom, {
       ...props,
       type: "navi_js"
     });
   }
-  return jsx(PickerCustom, {
-    ...props
-  });
+  return renderResolver(PickerCustom, props);
 };
 const PickerNative = props => {
   const Next = useNextResolver();
@@ -63156,9 +63243,9 @@ const PickerCustom = props => {
       });
     }
   }
-  return jsx(PickerContentInsidePopup, {
+  return renderResolver(PickerContentInsidePopup, {
     ...pickerProps,
-    mode: mode
+    mode
   });
 };
 
@@ -64425,14 +64512,10 @@ const createItemTracker = (onChange) => {
 const ListItemHeaderOrFooterResolver = props => {
   const Next = useNextResolver();
   if (props.header) {
-    return jsx(ListItemHeader, {
-      ...props
-    });
+    return renderResolver(ListItemHeader, props);
   }
   if (props.footer) {
-    return jsx(ListItemFooter, {
-      ...props
-    });
+    return renderResolver(ListItemFooter, props);
   }
   return jsx(Next, {
     ...props
@@ -64664,9 +64747,7 @@ const ListSelectableContext = createContext(false);
 const ListSelectableResolver = props => {
   const Next = useNextResolver();
   if (props.selectable) {
-    return jsx(ListSelectable, {
-      ...props
-    });
+    return renderResolver(ListSelectable, props);
   }
   return jsx(ListSelectableContext.Provider, {
     value: false,
@@ -64688,45 +64769,6 @@ const ListSelectable = props => {
     focusGroupDirection,
     focusGroupWrap
   } = props;
-  // `kept` is what the list holds as it is asked, which is not the same as what
-  // its rows say: a list draws the rows it needs and no more, so the selected
-  // one may be scrolled out of the window or filtered out of the view, and a
-  // row that is not there cannot say it is not selected. Reading it off the
-  // group rather than remembering it here is what makes a value put ON the list
-  // (a `value` prop, a signal, a reopened popup) replace the whole selection —
-  // a private memory of its own would go on holding the rows it could not see
-  // being unselected.
-  //
-  // `fallbackState` is the empty of the shape the list declared below
-  // (`stateType`): `[]` for a multiple list, nothing for a single one. Taking
-  // it is what lets an emptied list say "empty" — `undefined` is the word for
-  // "unset", and a bound stateSignal reads that as "nothing decided here, go
-  // back to the default" (see docs/control_value.md), which is how a list
-  // emptied down to its last row puts that row back on reload.
-  const aggregateChildStates = (children, fallbackState, kept) => {
-    if (multiple) {
-      const drawnValues = new Set(children.map(child => child.props.value));
-      const stillSelected = Array.isArray(kept) ? kept.filter(value => !drawnValues.has(value)) : [];
-      for (const child of children) {
-        if (child.uiState !== undefined) {
-          stillSelected.push(child.uiState);
-        }
-      }
-      return stillSelected.length === 0 ? fallbackState : stillSelected;
-    }
-    for (const child of children) {
-      if (child.uiState !== undefined) {
-        return child.uiState;
-      }
-    }
-    // No drawn row claims it. If the row that held it IS drawn, it was really
-    // deselected; if it is not, the list keeps what it holds.
-    const keptIsDrawn = children.some(child => child.props.value === kept);
-    if (keptIsDrawn) {
-      return undefined;
-    }
-    return kept;
-  };
   const [listControlRootProps, listControlProps, childrenWrapperProps] = useControlgroupProps({
     // The defaults of the group this IS (see CheckboxGroup / RadioGroup):
     // what a selectable list shows is a claim about what was accepted, so
@@ -64738,9 +64780,15 @@ const ListSelectable = props => {
     resetOnError: true,
     ...props
   }, {
+    // A list draws the rows it needs and no more, so a selected row may be
+    // scrolled out of the window or filtered out of the view: the default
+    // aggregate of these two groups keeps a value whose row is not drawn
+    // (see GROUP_DEFAULTS in ui_state_controller.js). `stateType` is what
+    // an emptied multiple list says — `[]`, not `undefined`, which a bound
+    // stateSignal reads as "nothing decided here, go back to the default"
+    // (see docs/control_value.md).
     stateType: multiple ? "array" : "",
-    controlType: multiple ? "checkbox_group" : "radio_group",
-    aggregateChildStates
+    controlType: multiple ? "checkbox_group" : "radio_group"
   });
   const uiGroupStateController = getUIStateControllerById(listControlProps.id);
   useFocusGroup(ref, {
@@ -64999,7 +65047,7 @@ const ListItemSelectableResolver = props => {
   const isHeaderOrFooter = Boolean(props.header || props.footer);
   const selectable = props.selectable ?? (isHeaderOrFooter || props.role === "presentation" ? false : listSelectable);
   if (selectable) {
-    return jsx(ListItemSelectable, {
+    return renderResolver(ListItemSelectable, {
       ...props,
       selectable: true
     });
@@ -65942,6 +65990,7 @@ const ListUI = props => {
     ref,
     tracker,
     renderBudget,
+    renderBudgetSteady: renderBudgetAfterPaint,
     virtualItemSize,
     virtual,
     scrolled,
@@ -66269,6 +66318,7 @@ const useListScrollSync = ({
   ref,
   tracker,
   renderBudget,
+  renderBudgetSteady,
   virtualItemSize,
   virtual,
   scrolled,
@@ -67019,31 +67069,36 @@ const useListScrollSync = ({
     }
   });
 
-  // Scroll listener — slides the window as the user scrolls.
-  useLayoutEffect(() => {
-    const listContainerEl = ref.current;
-    if (!listContainerEl) {
-      return undefined;
+  // The window the visible band asks for, decided from geometry: the band's
+  // two edges in row units, from where the scroller's viewport cuts the list
+  // and the row size. What has to be drawn is everything between the edges,
+  // plus what the scroll is about to bring — so the window is judged on the
+  // rows it keeps AHEAD of the band, in the direction the user goes, and moves
+  // once those fall under half a screen. Re-framed, it puts three quarters of
+  // its spare rows ahead and one quarter behind: a window centred on the band
+  // is due to move again as soon as the band has crossed the few rows it kept
+  // ahead, and each move is rows drawn while the user waits for them.
+  // Without a row size there is no geometry to reason on; the row under a
+  // probe stands in for the band, framed the old way.
+  const scrollDirectionRef = useRef(1);
+  const windowSlidRef = useRef(false);
+  useRef(false);
+  const evaluateWindow = reason => {
+    const total = virtual.totalSignal.peek();
+    if (total <= renderBudget) {
+      return;
     }
     const scrollerEl = getScroller();
     const listEl = getListEl();
-    const onScroll = () => {
-      updateCurrentScroll();
-      // Where the user is now is where things must be held from now on.
-      anchorRef.current = null;
-      if (scrolledByListRef.current) {
-        // The window stays where it is — the position it would be re-derived
-        // from was chosen to keep the rows still — but where the list is has
-        // genuinely changed, and whoever keeps that position must hear it.
-        scrolledByListRef.current = false;
-        reportPosition();
-        return;
-      }
-      reportPosition();
-      const total = virtual.totalSignal.peek();
-      if (total <= renderBudget) {
-        return;
-      }
+    if (!scrollerEl || !listEl) {
+      return;
+    }
+    const {
+      start,
+      end
+    } = renderWindowRef.current;
+    const virtualItemSize = virtualItemSizeSignal.peek();
+    if (virtualItemSize === 0) {
       const scrollInfo = getScrollInfo({
         scrollValues: {
           left: scrollerEl.scrollLeft,
@@ -67060,17 +67115,8 @@ const useListScrollSync = ({
         return;
       }
       const {
-        index,
-        reason
+        index
       } = scrollInfo;
-      // Recentering on every row crossed would rebuild the whole window a few
-      // times a second, and a window rebuilt is every row of it rendered
-      // again. It only moves once what is on screen comes near one of its
-      // edges — until then, it already holds what has to be drawn.
-      const {
-        start,
-        end
-      } = renderWindowRef.current;
       const margin = Math.floor(renderBudget / 4);
       const farFromStart = index - start >= margin || start === 0;
       const farFromEnd = end - index > margin || end === total;
@@ -67078,12 +67124,113 @@ const useListScrollSync = ({
         return;
       }
       const half = Math.floor(renderBudget / 2);
-      let newStart = Math.max(0, index - half);
-      let newEnd = Math.min(total, newStart + renderBudget);
-      if (newEnd === total) {
-        newStart = Math.max(0, total - renderBudget);
+      let newStart = index - half < 0 ? 0 : index - half;
+      let newEnd = newStart + renderBudget;
+      if (newEnd > total) {
+        newEnd = total;
+        newStart = total - renderBudget < 0 ? 0 : total - renderBudget;
+      }
+      windowSlidRef.current = true;
+      updateRenderWindow(newStart, newEnd, `${reason}: ${scrollInfo.reason}`);
+      return;
+    }
+    const viewportRect = getScrollerViewportRect(scrollerEl);
+    const listRect = listEl.getBoundingClientRect();
+    const viewportFrom = horizontal ? viewportRect.left : viewportRect.top;
+    const viewportTo = horizontal ? viewportRect.right : viewportRect.bottom;
+    const listFrom = horizontal ? listRect.left : listRect.top;
+    let bandStart = Math.floor((viewportFrom - listFrom) / virtualItemSize);
+    // Exclusive, like the window's end.
+    let bandEnd = Math.ceil((viewportTo - listFrom) / virtualItemSize);
+    if (bandStart < 0) {
+      bandStart = 0;
+    }
+    if (bandEnd > total) {
+      bandEnd = total;
+    }
+    if (bandEnd <= bandStart) {
+      return;
+    }
+    const visibleCount = bandEnd - bandStart;
+    const spare = renderBudget - visibleCount;
+    const behind = spare > 0 ? Math.floor(spare / 4) : 0;
+    const ahead = spare > 0 ? spare - behind : 0;
+    const halfScreen = Math.ceil(visibleCount / 2);
+    const aheadNeeded = halfScreen < ahead / 2 ? halfScreen : Math.floor(ahead / 2);
+    const behindNeeded = halfScreen < behind / 2 ? halfScreen : Math.floor(behind / 2);
+    const forward = scrollDirectionRef.current > 0;
+    const rowsAheadOfBand = forward ? end - bandEnd : bandStart - start;
+    const rowsBehindBand = forward ? bandStart - start : end - bandEnd;
+    const atEdgeAhead = forward ? end === total : start === 0;
+    const atEdgeBehind = forward ? start === 0 : end === total;
+    const coversBand = start <= bandStart && end >= bandEnd;
+    const coversAhead = atEdgeAhead || rowsAheadOfBand >= aheadNeeded;
+    const coversBehind = atEdgeBehind || rowsBehindBand >= behindNeeded;
+    if (coversBand && coversAhead && coversBehind) {
+      return;
+    }
+    let newStart = forward ? bandStart - behind : bandEnd + behind - renderBudget;
+    if (newStart < 0) {
+      newStart = 0;
+    }
+    let newEnd = newStart + renderBudget;
+    if (newEnd > total) {
+      newEnd = total;
+      newStart = total - renderBudget < 0 ? 0 : total - renderBudget;
+    }
+    windowSlidRef.current = true;
+    updateRenderWindow(newStart, newEnd);
+  };
+  // A slide is judged again once its rows are laid out: the scroll had moved
+  // on while the rows were being drawn, or the anchoring of this very commit
+  // moved it, and a window that stops short of the screen's edge with no
+  // scroll event to come would stay short for good. On the next frame, after
+  // the layout this commit's anchoring settles on.
+  useLayoutEffect(() => {
+    if (!windowSlidRef.current) {
+      return undefined;
+    }
+    windowSlidRef.current = false;
+    const frameId = requestAnimationFrame(() => {
+      evaluateWindow("after slide");
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [renderWindow]);
+
+  // Scroll listener — slides the window as the user scrolls.
+  useLayoutEffect(() => {
+    const listContainerEl = ref.current;
+    if (!listContainerEl) {
+      return undefined;
+    }
+    const scrollerEl = getScroller();
+    const onScroll = () => {
+      // Which way the user is going, read before the position is stored: what
+      // the window keeps ahead is ahead of this.
+      const previousScroll = currentScrollRef.current;
+      if (previousScroll) {
+        const delta = horizontal ? scrollerEl.scrollLeft - previousScroll.left : scrollerEl.scrollTop - previousScroll.top;
+        if (delta > 0) {
+          scrollDirectionRef.current = 1;
+        } else if (delta < 0) {
+          scrollDirectionRef.current = -1;
+        }
+      }
+      updateCurrentScroll();
+      // Where the user is now is where things must be held from now on.
+      anchorRef.current = null;
+      if (scrolledByListRef.current) {
+        // The window stays where it is — the position it would be re-derived
+        // from was chosen to keep the rows still — but where the list is has
+        // genuinely changed, and whoever keeps that position must hear it.
+        scrolledByListRef.current = false;
+        reportPosition();
+        return;
       }
-      updateRenderWindow(newStart, newEnd);
+      reportPosition();
+      evaluateWindow("scroll");
     };
     // A page-level scroller does not emit "scroll" on the element itself
     // (document.scrollingElement); the document does.
@@ -70017,8 +70164,11 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   window, which slides as the user scrolls while fillers hold the room of
  *   the rows outside it. Rows declared one by one as `<List.Item>` children
  *   are all drawn, whatever this says — a list with more than a few dozen rows
- *   gives them to a run (see docs/scroll.md, "Many rows"). Below 30 the list
- *   warns: a window shorter than a tall screen shows blank fillers.
+ *   gives them to a run (see docs/scroll.md, "Many rows"). The window keeps
+ *   most of its spare rows ahead of the scroll, and moves once those fall
+ *   under half a screen; it has to be larger than what the scroller shows at
+ *   once, with room for that lookahead — the list warns below 30, and when a
+ *   budget leaves fewer than two rows beyond the screen.
  *
  *   `{ initial, after }` for a list drawn in the click that opens it (a popup):
  *   `initial` rows in the commit the browser paints first — about what a phone
@@ -70140,14 +70290,10 @@ const generateTimeSlots = (min, max, stepSeconds) => {
 const PickerPresetResolver = props => {
   const Next = useNextResolver();
   if (props.type === "navi_time") {
-    return jsx(PickerNaviTime, {
-      ...props
-    });
+    return renderResolver(PickerNaviTime, props);
   }
   if (props.type === "navi_minute") {
-    return jsx(PickerNaviMinute, {
-      ...props
-    });
+    return renderResolver(PickerNaviMinute, props);
   }
   return jsx(Next, {
     ...props
@@ -70945,59 +71091,37 @@ const PencilSvg = () => {
 const PickerTypeResolver = props => {
   const Next = useNextResolver();
   if (props.type === "color") {
-    return jsx(PickerColor, {
-      ...props
-    });
+    return renderResolver(PickerColor, props);
   }
   if (props.type === "datetime") {
-    return jsx(PickerDatetime, {
-      ...props
-    });
+    return renderResolver(PickerDatetime, props);
   }
   if (props.type === "date") {
-    return jsx(PickerDate, {
-      ...props
-    });
+    return renderResolver(PickerDate, props);
   }
   if (props.type === "month") {
-    return jsx(PickerMonth, {
-      ...props
-    });
+    return renderResolver(PickerMonth, props);
   }
   if (props.type === "week") {
-    return jsx(PickerWeek, {
-      ...props
-    });
+    return renderResolver(PickerWeek, props);
   }
   if (props.type === "time") {
-    return jsx(PickerTime, {
-      ...props
-    });
+    return renderResolver(PickerTime, props);
   }
   if (props.type === "duration") {
-    return jsx(PickerDuration, {
-      ...props
-    });
+    return renderResolver(PickerDuration, props);
   }
   if (props.type === "file") {
-    return jsx(PickerFile, {
-      ...props
-    });
+    return renderResolver(PickerFile, props);
   }
   if (props.type === "text") {
-    return jsx(PickerText, {
-      ...props
-    });
+    return renderResolver(PickerText, props);
   }
   if (props.type === "array") {
-    return jsx(PickerArray, {
-      ...props
-    });
+    return renderResolver(PickerArray, props);
   }
   if (props.type === "object") {
-    return jsx(PickerObject, {
-      ...props
-    });
+    return renderResolver(PickerObject, props);
   }
   return jsx(Next, {
     ...props
@@ -84052,7 +84176,7 @@ const css = /* css */`.navi_side_panel {
  * @param {object} props
  * @param {boolean} [props.open] - Controlled open state, forwarded as-is to
  *   `Popup`'s own `open`.
- * @param {import("@preact/signals").Signal<boolean>} [props.signal] - The open
+ * @param {import("@preact/signals").Signal<any>} [props.signal] - The open
  *   state said the way every navi control says it: the panel opens and closes
  *   to match the signal, and writes into it whenever it opens or closes on its
  *   own (Escape, swipe, a --navi-close command) — one binding to both drive
@@ -84126,7 +84250,9 @@ const css = /* css */`.navi_side_panel {
  *   closes the panel on an outside click instead, and also enables trapping
  *   Tab navigation inside the panel (`focusCapture`) — closing on outside
  *   interaction only makes sense paired with not letting focus silently
- *   leave the panel first.
+ *   leave the panel first. A box of the page whose press must not close the
+ *   panel (a card that fills it) names the panel:
+ *   `data-navi-popup-inside={id}` — see docs/popup_backdrop.md.
  * @param {boolean} [props.swipeToClose=true] - Pushing the panel back
  *   towards the edge it is docked to closes it: the panel follows the
  *   pointer and finishes leaving (or comes back to rest) when it is
@@ -84261,6 +84387,7 @@ SidePanel.Foot = SidePanelFoot;
 
 const createSlot = (SlotRenderer = Box) => {
   const slotPropsSignal = signal();
+  let filler = null;
   const Slot = () => {
     const props = slotPropsSignal.value;
     return jsx(SlotRenderer, {
@@ -84269,9 +84396,15 @@ const createSlot = (SlotRenderer = Box) => {
     });
   };
   const SlotFill = props => {
+    const fillerRef = useRef();
+    filler = fillerRef;
     slotPropsSignal.value = props;
     useLayoutEffect(() => {
       return () => {
+        if (filler !== fillerRef) {
+          return;
+        }
+        filler = null;
         slotPropsSignal.value = null;
       };
     }, []);