@jsenv/navi 0.29.428 → 0.29.430

package/dist/dev/jsenv_navi.js

@@ -30911,14 +30911,14 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
 }
 
 [data-scrollable] {
-  overflow: var(--x-scrollable-overflow, auto);
   scroll-padding: var(--navi-scroll-padding, var(--navi-s));
   --box-header-z-index: var(--navi-z-index-sticky);
   --box-footer-z-index: var(--navi-z-index-sticky);
   isolation: isolate;
+  overflow: auto;
 
   &[data-scrollable-overflow="scroll"] {
-    --x-scrollable-overflow: scroll;
+    overflow: scroll;
   }
 
   & > [data-header] {
@@ -30940,9 +30940,9 @@ import.meta.css = /* css */[`[data-scrollable] > .navi_loading_outline_wrapper,
   }
 
   &:has( > [data-body]) {
-    --x-scrollable-overflow: hidden;
     flex-direction: column;
     display: flex;
+    overflow: hidden;
 
     & > [data-header], & > [data-footer] {
       z-index: auto;
@@ -39814,6 +39814,16 @@ const resolveAfterSend = (target, requester) => {
   }
   return undefined;
 };
+// What follows a send is caused by the send, not by the gesture: the send
+// answered the gesture and may have prevented it (an Enter must not also click
+// the submit button, nor activate the trigger of the popup it closed), and a
+// follow-up judged on that event is refused as a gesture someone cancelled.
+// Chained, so the gesture stays readable behind it.
+const createSentEvent = (event) => {
+  const sentEvent = new CustomEvent("sent", { detail: {} });
+  chainEvent(sentEvent, event);
+  return sentEvent;
+};
 
 registerNaviCommand("--navi-send", (source, event, { requester }) => {
   const expandable = resolveExpandableAround(source);
@@ -39846,7 +39856,9 @@ registerNaviCommand("--navi-send", (source, event, { requester }) => {
           source.getAttribute("data-after-send") ||
           target.getAttribute("data-after-send");
         if (afterSend) {
-          triggerNaviCommand(target, afterSend, event, { optional: true });
+          triggerNaviCommand(target, afterSend, createSentEvent(event), {
+            optional: true,
+          });
         }
         return result;
       },
@@ -39890,7 +39902,9 @@ registerNaviCommand("--navi-send", (source, event, { requester }) => {
         if (!afterSend) {
           return;
         }
-        triggerNaviCommand(source, afterSend, event, { optional: true });
+        triggerNaviCommand(source, afterSend, createSentEvent(event), {
+          optional: true,
+        });
       };
       const {
         result: sent,
@@ -67033,7 +67047,11 @@ const useDialogProps = props => {
     }
     const anchorElement = resolveAnchorElement(event);
     if (!anchorElement) {
-      {
+      // An opening by the caller's state (`open`, `signal`, `navState`) is
+      // told nothing about its cause, and that cause may be the address —
+      // a back to an entry where the dialog was open, nothing pressed — so
+      // a missing anchor there is not something the app could have given.
+      if (event.type !== "open_by_prop") {
         console.warn(`[navi] Dialog has animation="lifting" and no anchor to lift out of, so it simply appears. The anchor is whatever opened it — a <Button command="--navi-open">, the "source" given to triggerNaviCommand — or the "anchor" prop.`);
       }
       applyChange();
@@ -74111,9 +74129,12 @@ const useListScrollSync = ({
   };
   const [renderWindow, setRenderWindow] = useState(() => {
     // Opening somewhere else than the beginning starts by framing there: the
-    // items the list will draw are the items it will ask for.
+    // items the list will draw are the items it will ask for. A named item is
+    // framed where it stood when it was written down, which is where holdWindow
+    // aims before anyone can say where it is.
     const openAt = scrolled ?? defaultScrolled;
-    const start = typeof openAt === "number" ? openAt - itemsAboveOpening(openAt, firstWindowItemCount) : 0;
+    const openIndex = typeof openAt === "number" ? openAt : openAt && typeof openAt === "object" && typeof openAt.index === "number" ? openAt.index : null;
+    const start = openIndex === null ? 0 : openIndex - itemsAboveOpening(openAt, firstWindowItemCount);
     const startClamped = start < 0 ? 0 : start;
     return {
       start: startClamped,
@@ -74240,14 +74261,11 @@ const useListScrollSync = ({
     if (wantedStart < 0) {
       wantedStart = 0;
     }
-    if (wantedStart === start) {
-      listItems.holdPending = false;
-      return;
-    }
-    renderWindowRef.current = {
-      start: wantedStart,
-      end: wantedStart + windowSize
-    };
+    // The window the hold frames goes into the state, not into this render
+    // alone: the next render starts from the state, and once the item stands
+    // inside the window the hold stops framing it — a window left where the
+    // state had it would draw around another place.
+    updateRenderWindow(wantedStart, wantedStart + windowSize, `held on item ${heldItem}`);
     listItems.holdPending = false;
   };
   const pendingScrollRef = useRef();
@@ -74396,6 +74414,13 @@ const useListScrollSync = ({
       return;
     }
     hasBeenDisplayedRef.current = true;
+    const place = startPlaceRef.current;
+    if (!place.userTookOver && place.wanted !== "start" && place.wanted !== undefined) {
+      // Held somewhere: where the list opens is the hold's to say (see
+      // placeWhereHeld). Scrolled here too, the list would go to the top or
+      // the selected item for as long as the hold takes to put it back.
+      return;
+    }
     const items = listItems.itemsSignal.peek();
     const firstSelected = items.find(i => {
       if (i.selected) {
@@ -75098,12 +75123,14 @@ const useListScrollSync = ({
     const spare = budget > screen ? budget - screen : 0;
     const behindSize = countsItems ? Math.floor(spare / 4) : spare / 4;
     const aheadSize = spare - behindSize;
-    if (stage === "steady" && !budgetWarnedRef.current && bandEnd > bandStart) {
-      const twoLines = (countsItems ? 2 : 2 * (bandTo - bandFrom) / (bandEnd - bandStart)) * itemsPerLineNow;
-      if (spare < twoLines) {
-        budgetWarnedRef.current = true;
-        console.warn(`List: renderBudget=${renderBudget.value}${renderBudget.unit} leaves less than two ${itemsPerLineNow > 1 ? "lines of items" : "items"} beyond what the screen shows (${bandEnd - bandStart} items): items will go blank as it scrolls. Give it room for a screen ahead or more — "300%" of the box that scrolls it, say.`);
-      }
+    // Said only when the budget holds nothing past the screen: the blank is
+    // then certain. Past the screen, whether a fling outruns the window is
+    // what the device and the rest of the main thread's work decide, and a
+    // number of items cannot tell it — two one-line items are 76 px, two
+    // cards a whole screen. That is measured on the list, not guessed here.
+    if (stage === "steady" && !budgetWarnedRef.current && bandEnd > bandStart && spare === 0) {
+      budgetWarnedRef.current = true;
+      console.warn(`List: renderBudget=${renderBudget.value}${renderBudget.unit} holds no more than what the screen shows (${bandEnd - bandStart} items on it): the screen goes blank past it as soon as the list scrolls. Give it more than a screen — "150%" of the box that scrolls it, say.`);
     }
     if (!force) {
       const roomAround = readRoomAround({
@@ -78798,7 +78825,8 @@ const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, Li
  *   "Many rows"). The window keeps three quarters of what the screen leaves of
  *   it ahead of the scroll, and moves once that falls under half a screen; it
  *   has to hold more than the screen shows, with room for that lookahead — the
- *   list warns when it leaves less than two items beyond the screen.
+ *   list warns when it holds no more than the screen. How much more is
+ *   measured: fling the list on the slowest device it runs on.
  *
  *   `{ initial, after }` for a list whose first picture is taken as it is
  *   built — drawn in the click that opens a popup, or in the update callback