@jsenv/navi 0.29.407 → 0.29.408

package/dist/jsenv_navi.js

@@ -12639,7 +12639,8 @@ const useActionBoundToOneParam = (action, paramsSignal) => {
   }, []);
   return [boundAction, getValue(), setValue];
 };
-// used by <details> to just call their action
+// The action bound to the signal, without reading it: the caller is not
+// re-rendered by the params (a control, a <details>).
 const useAction = (action, paramsSignal) => {
   return useBoundAction(action, paramsSignal);
 };
@@ -22377,7 +22378,7 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
   }
 }
 
-[hidden] {
+[hidden]:not([hidden="until-found" i]) {
   display: none !important;
 }
 `, "@jsenv/navi/src/box/box.jsx"];
@@ -41540,7 +41541,14 @@ const useControlProps = (props, {
     persists,
     uiActionInternal
   });
-  const [boundAction] = useActionBoundToOneParam(props.action, uiStateController.uiStateSignal);
+  // What the control draws is what it holds by itself, and this read is what
+  // re-renders it when that changes. A button inheriting the value of the
+  // control around it (a submit in a form, see ownUIStateSignal) draws none of
+  // that value, it only hands it to its action: subscribed to it, every button
+  // of a form would re-render at each change of any of its fields.
+  // eslint-disable-next-line no-unused-expressions
+  uiStateController.ownUIStateSignal.value;
+  const boundAction = useAction(props.action, uiStateController.uiStateSignal);
   const [controlRootProps, controlHostProps] = useInteractiveProps(props, {
     uiStateController,
     boundAction,
@@ -42305,7 +42313,10 @@ const useControlProps = (props, {
       };
     }
   }
-  const uiState = uiStateController.uiStateSignal.peek();
+
+  // Its own, like syncDomState: a button's DOM value is not the value it
+  // inherits from the control around it.
+  const uiState = uiStateController.ownUIStateSignal.peek();
   const domProps = toDomProps(uiState);
   {
     // Same as syncDomState: a field being typed into keeps its own text, so a
@@ -42833,7 +42844,9 @@ const useInteractiveProps = (props, {
     // stop waiting on a run that is still going. What it waits on is the run
     // it started, from navi_action_start to its settlement.
     const runningAction = uiStateController.runningActionSignal.value;
-    const actionStatus = useActionStatus(runningAction || boundAction);
+    // Only whether it runs: the whole status (useActionStatus) reads the params
+    // too, which for a button inheriting its form's value are the form.
+    const actionRunning = (runningAction || boundAction).runningStateSignal.value === RUNNING;
     const networkPolicyReason = useNetworkPolicyReason();
     const {
       disabled,
@@ -42881,7 +42894,7 @@ const useInteractiveProps = (props, {
     // just set stays visible and interactive while the action runs — no
     // loading, no readonly. On failure resetOnError rolls the state back and
     // the error callout says why.
-    const actionLoading = optimistic ? false : actionStatus.loading;
+    const actionLoading = optimistic ? false : actionRunning;
     const loadingResolved = loadingBase || actionLoading;
     const readOnlyResolved = readOnlyBase || actionLoading;
     // Read-only, and what this control opens still opens: reading what is in
@@ -43076,7 +43089,11 @@ const useInteractiveProps = (props, {
       errorEffect: actionErrorEffect,
       errorMapping
     });
-    const dataAction = action === undefined ? undefined : boundAction.callSource;
+    // What the attribute says is that an action is there (see
+    // findClosestControlWithAction); its text is a label. Peeked (toString),
+    // because `.callSource` follows the params — for a button inheriting its
+    // form's value, a re-render at every change of any field.
+    const dataAction = action === undefined ? undefined : String(boundAction);
     Object.assign(controlHostProps, {
       "data-action": dataAction
     });
@@ -51993,30 +52010,9 @@ const ButtonUI = props => {
   } = buttonControlHostProps;
   const loading = basePseudoState[":-navi-loading"];
 
-  // subscribe to document url to re-render and re-compute getHrefTargetInfo
-  useDocumentUrl();
-  const isLink = href !== undefined;
-  let as = "button";
-  let innerTarget;
-  let innerRel;
-  let innerCurrent;
-  if (isLink) {
-    as = "a";
-    const {
-      isSameSite,
-      isCurrent
-    } = getHrefTargetInfo(href);
-    innerTarget = target === undefined ? isSameSite ? undefined : "_blank" : target;
-    innerRel = rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel;
-    innerCurrent = isCurrent;
-  }
-  // For a button that has only an href: nothing else knows it points at the
-  // page one is on. A route says so through `pseudoState`, which Box lays over
-  // this one.
-  buttonControlHostProps.basePseudoState = {
-    ...basePseudoState,
-    ":-navi-href-current": innerCurrent
-  };
+  // Where the href leads next to the page one is on (the target, the rel, the
+  // current state) is resolved above, by ButtonHrefResolver.
+  const as = href === undefined ? "button" : "a";
 
   // Worn as an attribute, like a link's (see link_replace.js): read off the
   // anchor by the click handler, off the source by --navi-nav-to.
@@ -52065,8 +52061,8 @@ const ButtonUI = props => {
     ref: ref,
     as: as,
     href: href,
-    target: innerTarget,
-    rel: innerRel,
+    target: target,
+    rel: rel,
     replace: undefined,
     ...replaceRequest,
     document: undefined,
@@ -52366,6 +52362,49 @@ const ButtonConfirm = ({
   });
 };
 
+const ButtonHrefResolver = props => {
+  const Next = useNextResolver();
+  if (props.href !== undefined) {
+    return renderResolver(ButtonWithHref, props);
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+
+// What the href means next to the page one is on depends on the document url,
+// so a button with an href re-renders at every address write. One without
+// never reaches here: it has nothing to re-compute, and every button on screen
+// would otherwise pay for each write.
+const ButtonWithHref = props => {
+  const Next = useNextResolver();
+  const {
+    href,
+    target,
+    rel,
+    pseudoState
+  } = props;
+  // Read for the subscription: getHrefTargetInfo reads window.location.
+  useDocumentUrl();
+  const {
+    isSameSite,
+    isCurrent
+  } = getHrefTargetInfo(href);
+  return jsx(Next, {
+    ...props,
+    target: target === undefined ? isSameSite ? undefined : "_blank" : target,
+    rel: rel === undefined ? isSameSite ? undefined : "noopener noreferrer" : rel
+    // Under whatever the caller already says: a route knows better whether
+    // it is the page one is on (see button_route.jsx), and a demo can force
+    // the state.
+    ,
+    pseudoState: {
+      ":-navi-href-current": isCurrent,
+      ...pseudoState
+    }
+  });
+};
+
 const ButtonRouteResolver = props => {
   const Next = useNextResolver();
   if (props.route) {
@@ -52620,7 +52659,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
  *   (it wears it itself) and loses the shrink under the finger, which has
  *   nothing left to scale but the interactive area itself.
  */
-const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
+const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonHrefResolver, ButtonUI]);
 
 installImportMetaCssBuild(import.meta);
 const css$O = /* css */`.navi_control_swap {
@@ -69896,12 +69935,28 @@ const css$x = /* css */`@layer navi {
   display: inline-block;
 }
 
+.navi_list_find_stand_in {
+  height: calc(var(--x-find-line-count) * var(--x-find-line-size));
+  color: #0000;
+  line-height: var(--x-find-line-size);
+  white-space: pre;
+  overflow: clip;
+}
+
 .navi_list_container[data-horizontal] {
   --list-max-height: none;
 
   & > .navi_list_scroll_container > .navi_list > .navi_list_virtual_filler {
     width: var(--size-to-fill, 0px);
     height: 100%;
+    display: flex;
+
+    & > .navi_list_find_stand_in {
+      width: calc(var(--x-find-line-count) * var(--x-find-line-size));
+      writing-mode: vertical-lr;
+      flex-shrink: 0;
+      height: auto;
+    }
   }
 }
 
@@ -72399,10 +72454,12 @@ const Fallback = ({
 // settled after the first commit.
 const VirtualFiller = ({
   edge,
-  itemCount
+  itemCount,
+  findChunks
 }) => {
   const listRows = useContext(ListRowsContext);
-  const sizeToFill = itemCount * listRows.virtualItemSizeSignal.value;
+  const virtualItemSize = listRows.virtualItemSizeSignal.value;
+  const sizeToFill = itemCount * virtualItemSize;
   if (!sizeToFill) {
     return null;
   }
@@ -72413,8 +72470,17 @@ const VirtualFiller = ({
     "navi-virtual-filler": edge,
     "aria-hidden": true,
     style: {
-      "--size-to-fill": `${sizeToFill}px`
-    }
+      "--size-to-fill": `${sizeToFill}px`,
+      "--x-find-line-size": findChunks ? `${virtualItemSize}px` : undefined
+    },
+    children: findChunks && findChunks.map(chunk => jsx("div", {
+      className: "navi_list_find_stand_in",
+      hidden: "until-found",
+      style: {
+        "--x-find-line-count": chunk.to - chunk.from
+      },
+      children: chunk.text
+    }, `${chunk.from}_${chunk.to}`))
   });
 };
 
@@ -73047,6 +73113,7 @@ const VISIBILITY_HIDDEN_STYLE = {
  *
  * @type {import("ignore:preact").FunctionComponent<{
  *   renderItem: (item: any, index: number, state: {refreshing: boolean}) => import("ignore:preact").ComponentChildren,
+ *   findText?: (item: any, index: number) => string,
  *   items?: any[],
  *   itemsAction?: (range: {start: number, end: number, limit: number, before?: string, after?: string, around?: string, count?: number, signal: AbortSignal}) => any,
  *   count?: number,
@@ -73065,6 +73132,13 @@ const VISIBILITY_HIDDEN_STYLE = {
  *   the run. `state.refreshing` says the rows drawn are the ones from before
  *   while the run reads the collection again — the list carries
  *   `navi-refreshing` for the same reason.
+ * @param {(item: any, index: number) => string} [props.findText]
+ *   The text of a row as the browser's find in page (Cmd/Ctrl + F) sees it
+ *   while the row is not drawn — without it, find reaches only the rows in the
+ *   render window. The rows held off screen then carry that text where they
+ *   stand, hidden until the browser finds it there: it scrolls to the place,
+ *   and the list draws the row. One line per row. A row the run does not hold
+ *   yet has nothing to be found by.
  * @param {any[]} [props.items]
  *   The collection, when it is held in memory: all of it, in order. Nothing is
  *   ever asked for — `itemsAction`, `count`, `pageSize` and `memoryBudget` have
@@ -73161,12 +73235,19 @@ const createStoreHoldingNothing = rowCount => {
   };
 };
 
+// How many rows share one element of the text a filler carries for find in
+// page (see findText). One element per row would put back the DOM nodes the
+// window saves; one per filler would be revealed whole — every row of it laid
+// out — by the first match found in it.
+const FIND_CHUNK_ROW_COUNT = 64;
+
 // What a run draws: the rows its window frames, a skeleton for each one the
 // store does not hold, and fillers holding the room of the rows outside it.
 // Which rows are held, and fetching the others, is the store's (see
 // useItemStore).
 const useRunRows = (store, {
   renderItem,
+  findText,
   pageSize,
   groupBy,
   renderGroupLabel,
@@ -73374,6 +73455,37 @@ const useRunRows = (store, {
     }
     group.children.push(rowNode);
   };
+  // The text of the rows a filler stands for, cut in chunks aligned on the
+  // run's own ranks: the window sliding changes the chunk at its edge and
+  // leaves the others as they are.
+  const getFindChunks = (from, to) => {
+    if (!findText) {
+      return null;
+    }
+    const chunks = [];
+    let chunkFrom = from;
+    while (chunkFrom < to) {
+      const chunkIndex = Math.floor(rankOf(chunkFrom) / FIND_CHUNK_ROW_COUNT);
+      const alignedTo = rowOf((chunkIndex + 1) * FIND_CHUNK_ROW_COUNT);
+      const chunkTo = alignedTo < to ? alignedTo : to;
+      const lines = [];
+      let lineRowIndex = chunkFrom;
+      while (lineRowIndex < chunkTo) {
+        const item = getItemAt(lineRowIndex);
+        // A row not held has nothing to find, but keeps its line: the rows
+        // after it stay at their place.
+        lines.push(item === undefined ? "" : toFindLine(findText(item, lineRowIndex)));
+        lineRowIndex++;
+      }
+      chunks.push({
+        from: chunkFrom,
+        to: chunkTo,
+        text: lines.join("\n")
+      });
+      chunkFrom = chunkTo;
+    }
+    return chunks;
+  };
   // The room held for this run's own rows that the window leaves out. It
   // belongs to the run and not to the list: a list is not necessarily made of
   // one run, and what sits before or after it (a header, rows given one by
@@ -73381,7 +73493,8 @@ const useRunRows = (store, {
   if (windowFrom > runStart) {
     rows.push(jsx(VirtualFiller, {
       edge: "before",
-      itemCount: windowFrom - runStart
+      itemCount: windowFrom - runStart,
+      findChunks: getFindChunks(runStart, windowFrom)
     }, "navi-list-filler-before"));
   }
   const renderItemState = {
@@ -73483,11 +73596,20 @@ const useRunRows = (store, {
   if (runEnd > windowTo) {
     rows.push(jsx(VirtualFiller, {
       edge: "after",
-      itemCount: runEnd - windowTo
+      itemCount: runEnd - windowTo,
+      findChunks: getFindChunks(windowTo, runEnd)
     }, "navi-list-filler-after"));
   }
   return rows;
 };
+// One row, one line: a line break inside it would push every row below off
+// its place.
+const toFindLine = text => {
+  if (text === undefined || text === null) {
+    return "";
+  }
+  return String(text).replace(/[\r\n]+/g, " ");
+};
 
 // A run's row that has not arrived, standing where the real one will. It never
 // reaches ListItemUI (see ListItemSkeletonResolver), so it is drawn among the
@@ -80867,6 +80989,7 @@ const useWheelInteractions = ({
   attemptInteraction,
   cancelAnim,
   setPos,
+  releaseScrub,
   snapPosToRow,
   getItemSize,
   viewportMain,
@@ -81274,6 +81397,8 @@ const useWheelInteractions = ({
       clearTimeout(settleTimer);
       stopClaimingGesture();
       cancelAnim();
+      // Nothing is left to settle the scrub in progress.
+      releaseScrub();
       document.removeEventListener("pointerdown", onDocumentPointerDown, {
         capture: true
       });
@@ -81439,11 +81564,11 @@ function WheelUI(props) {
     ...props,
     ref: inputRef,
     type: "navi_js",
-    // uiAction fires live (every center-crossing, via setPos live reports);
-    // the committed action must fire only when the wheel stabilizes. "custom"
-    // stops setUIState from auto-firing the action on every value change, so
-    // the live reports are uiAction-only; commitSelection then dispatches the
-    // action explicitly on settle. A caller can still override actionEvent.
+    // An arrow or a tap changes the value at once while the row glides into
+    // place, and the action must wait for the wheel to come to rest. "custom"
+    // stops setUIState from auto-firing the action on every value change;
+    // commitSelection dispatches it explicitly on settle. A caller can still
+    // override actionEvent.
     actionEvent: props.actionEvent ?? "custom"
   }, {
     controlType: "input"
@@ -81539,6 +81664,11 @@ function WheelUI(props) {
   // while our own scroll-driven selection does not scroll a second time. Holds the
   // TARGET so rapid inputs step from it and accumulate. null = nothing pending.
   const centeredIndexRef = useRef(null);
+  // A user scrub moved the wheel onto a row that is not the value yet: set at
+  // the first row it crosses, cleared when it settles (commitSelection), when
+  // an arrow or a tap sets a value at once (glideToIndex), or when it is
+  // dropped (releaseScrub). See setPos.
+  const scrubHoldsRowRef = useRef(false);
   // The wheel does NOT use native scroll. `posRef` is our own virtual scroll
   // position (px, main axis); the list track is translated by -pos. This is the
   // single source of truth, wrapped modulo the real-list extent in loop mode, so
@@ -81588,8 +81718,22 @@ function WheelUI(props) {
     ...style
   };
 
-  // Main-axis size of the viewport, from the orientation.
-  const viewportMain = vp => isHorizontal ? vp.clientWidth : vp.clientHeight;
+  // Main-axis size of the viewport, from the orientation. Cached like the row
+  // size: applyOffset runs right after each window commit, where reading the
+  // box would force a layout at every row crossing. The observer below keeps it
+  // current; 0 (no box yet) is never kept, so the next read measures again.
+  const viewportSizeRef = useRef(0);
+  const measureViewportMain = vp => isHorizontal ? vp.clientWidth : vp.clientHeight;
+  const viewportMain = vp => {
+    if (viewportSizeRef.current > 0) {
+      return viewportSizeRef.current;
+    }
+    const size = measureViewportMain(vp);
+    if (size > 0) {
+      viewportSizeRef.current = size;
+    }
+    return size;
+  };
 
   // Row size (px). Rows are uniform, so one measurement (cached) drives all the
   // geometry — positions are then computed from value indices, not read off the
@@ -81660,6 +81804,21 @@ function WheelUI(props) {
       applyOffset(vp);
     }
   };
+  // Refreshes the cached viewport size (see viewportMain). Read in the observer
+  // callback, where the layout is already clean. A new size moves the center
+  // window, so the offset is re-applied with it.
+  useLayoutEffect(() => {
+    const vp = getViewport();
+    viewportSizeRef.current = 0;
+    const resizeObserver = new ResizeObserver(() => {
+      viewportSizeRef.current = measureViewportMain(vp);
+      applyOffset(vp);
+    });
+    resizeObserver.observe(vp);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isHorizontal]);
 
   // The value index at the center for the current position.
   const centeredIndex = vp => {
@@ -81698,12 +81857,14 @@ function WheelUI(props) {
     posRef.current = clampNumber(posRef.current, 0, (count - 1) * size);
   };
 
-  // `live` (user scrubs: drag, momentum, wheel scroll) reports the value as each
-  // item crosses the center, so uiAction tracks the wheel in real time — like
-  // every other control. The committed action still fires only once it settles
-  // (commitSelection). A programmatic move (centerOnIndex on an external value
-  // sync) omits it, so scrolling the wheel into place doesn't echo the value
-  // back out.
+  // `live` marks a user scrub (drag, momentum, wheel scroll). A scrub moves the
+  // drawing, not the value: the row it reaches is held by the wheel, and only
+  // commitSelection turns it into the value, once the motion settles. Reported
+  // at each crossing, every notch would be a value change for all that is
+  // bound to the wheel — its group, its form, a signal, the address, which
+  // records where a value was put down, not the path the finger took
+  // (navigation.md, "A value written per frame"). A programmatic move
+  // (centerOnIndex) omits `live`: it places the value the wheel already has.
   const setPos = (vp, pos, {
     live = false
   } = {}) => {
@@ -81714,18 +81875,25 @@ function WheelUI(props) {
     renderPos(vp);
     if (live && interactive) {
       const index = centeredIndex(vp);
-      if (index !== centeredIndexRef.current) {
-        const item = trackedItemsRef.current[index];
-        if (item) {
-          // Keep centeredIndexRef in step so the every-render
-          // syncCenterToSelection doesn't read this as an external change and
-          // fight the in-progress motion.
-          centeredIndexRef.current = index;
-          requestSelectValue(item.value, new CustomEvent("navi_wheel_scrub"));
-        }
+      if (index !== centeredIndexRef.current && trackedItemsRef.current[index]) {
+        // In step with the scrub so the next arrow or tap steps from the row
+        // the wheel is on (see currentTargetIndex).
+        centeredIndexRef.current = index;
+        scrubHoldsRowRef.current = true;
       }
     }
   };
+  // The scrub was dropped before it settled (the wheel stopped being
+  // interactive, or its input bindings were torn down): the row it held never
+  // became the value. Forgetting it lets the next sync put the wheel back on
+  // the value.
+  const releaseScrub = () => {
+    if (!scrubHoldsRowRef.current) {
+      return;
+    }
+    scrubHoldsRowRef.current = false;
+    centeredIndexRef.current = null;
+  };
 
   // Returns whether it actually interrupted a motion in flight — lets the caller
   // tell a fresh gesture from one that "caught" a spinning/gliding wheel.
@@ -81761,6 +81929,7 @@ function WheelUI(props) {
       renderPos(vp);
     }
     centeredIndexRef.current = index;
+    scrubHoldsRowRef.current = false;
     if (!interactive || glideFromOutsideRef.current) {
       return;
     }
@@ -81958,6 +82127,7 @@ function WheelUI(props) {
   // inputs accumulate.
   const glideToIndex = (vp, index, event) => {
     centeredIndexRef.current = index;
+    scrubHoldsRowRef.current = false;
     requestSelectValue(trackedItemsRef.current[index].value, event);
     glideTo(vp, glideTargetFor(vp, index));
   };
@@ -81988,12 +82158,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 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) {
+    // A fling in flight, or a scrub holding a row, commits on settle: the finger
+    // owns the wheel until then, and the row it leaves the wheel on overrules a
+    // value arriving meanwhile. 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 || scrubHoldsRowRef.current) {
       return;
     }
     if (trackedItemsRef.current.length === 0) {
@@ -82076,6 +82246,7 @@ function WheelUI(props) {
     attemptInteraction,
     cancelAnim,
     setPos,
+    releaseScrub,
     snapPosToRow,
     getItemSize,
     viewportMain,