@jsenv/navi 0.29.140 → 0.29.142

package/dist/jsenv_navi.js

@@ -5,7 +5,7 @@
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, initFocusGroup, scrollIntoViewScoped, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
-export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
+export { chainEvent, clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { isValidElement, h, Fragment, createContext, render, toChildArray, options, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, useState, useEffect, useMemo, useId } from "preact/hooks";
@@ -30465,7 +30465,16 @@ const anyMatchingRouteSignal = (routes) => {
  * @param {Element} element The element asking — the command's source, and the
  *   anchor a popup opens on unless `anchor` says otherwise.
  * @param {string} command
- * @param {Event} event What the user did.
+ * @param {Event} event What caused this. Mandatory: it is what makes a command
+ *   traceable back to its origin — the debug panel groups everything a gesture
+ *   set off under it, and the gates below read it to know whether the default
+ *   was already prevented and which mouse button was pressed. When nothing was
+ *   handed over — a timer firing, an action settling, a signal changing — build
+ *   a `CustomEvent` that names what happened and chain it to whatever preceded
+ *   it, rather than leaving the origin unsaid:
+ *     const expiredEvent = new CustomEvent("session_expired");
+ *     chainEvent(expiredEvent, causeEvent); // when something did precede it
+ *     triggerNaviCommand(dialogEl, "--navi-open", expiredEvent);
  * @param {object} [options]
  * @param {boolean} [options.optional] No suitable target is not a warning.
  * @param {any} [options.value] What the command is about, carried to whoever
@@ -30482,6 +30491,11 @@ const triggerNaviCommand = (
   event,
   { optional, value, anchor } = {},
 ) => {
+  if (!event) {
+    throw new Error(
+      `"${command}" triggered without an event: it is mandatory, a command must say what caused it. Pass the gesture, or a CustomEvent naming the cause when no gesture did — see triggerNaviCommand's jsdoc.`,
+    );
+  }
   const naviCommand =
     NAVI_COMMANDS[command] || NAVI_COMMANDS[commandName(command)];
   if (!naviCommand) {
@@ -33597,6 +33611,12 @@ const GROUP_DEFAULTS = {
  *
  * **Filtering**: `childControlFilter` can exclude certain child types from aggregation
  * (e.g. ignoring buttons inside a selectable list).
+ *
+ * **Aggregating**: `aggregateChildStates(children, fallbackState, stateNow)` — what the
+ * children add up to. `fallbackState` is the empty of the declared `stateType`;
+ * `stateNow` is what the group is worth as it is asked, which an aggregate reads to
+ * answer for children that are not there (a selectable list whose selected row is not
+ * drawn).
  */
 const useUIGroupStateController = (
   props,
@@ -33753,16 +33773,22 @@ const useUIGroupStateController = (
       // taking that for an answer is how a value handed to it evaporates on
       // the way in, and how that emptiness then travels back up to whoever
       // handed it (a picker showing its row as unanswered).
-      const aggregateGroupUIState = (whenNobodyCanAnswer) => {
+      //
+      // `stateNow` is what the group is worth as it is asked: what it keeps
+      // when there is nobody to ask, and what an aggregate reads to answer for
+      // what its children do not say — a selection whose row is not drawn (see
+      // ListSelectable) lives there and nowhere else.
+      const aggregateGroupUIState = (stateNow) => {
         const someChildCanAnswer = childUIStateControllerArray.some(
           shouldPropagateStateToChild,
         );
         if (!someChildCanAnswer) {
-          return whenNobodyCanAnswer;
+          return stateNow;
         }
         const aggChildState = resolvedAggregateChildStates(
           childUIStateControllerArray,
           fallbackState,
+          stateNow,
         );
         if (aggChildState !== undefined) {
           return aggChildState;
@@ -34286,8 +34312,6 @@ const useUIGroupStateController = (
     // ── update: runs every render after the first ─────────────────────────
     (s) => {
       const { controller } = s;
-      const prevValue = controller.value;
-      const prevHasValueProp = controller.hasValueProp;
       const prevDefaultValue = controller.defaultValue;
       controller.props = props;
       controller.ref = ref;
@@ -34305,10 +34329,14 @@ const useUIGroupStateController = (
         controller.placeChildrenUIState(groupUIState, propagateDownEvent);
         controller.syncInternalState(groupUIState);
       };
-      if (
-        hasValueProp &&
-        (!prevHasValueProp || !compareTwoJsValues(value, prevValue))
-      ) {
+      // A controlled group goes on showing the value it is given. A child
+      // answering for itself moves what the group is worth — that is what
+      // `uiAction` reports — but the value stays the owner's, so the test is
+      // against what the children are showing, not against the value handed
+      // down last time. A popup reopened on another subject hands down the very
+      // same empty value it did before, and the selection left inside it from
+      // the previous opening is what has to go.
+      if (hasValueProp && !compareTwoJsValues(value, controller.uiState)) {
         placeChildrenFrom(value);
       }
       if (
@@ -61346,23 +61374,22 @@ const ListSelectable = props => {
     focusGroupDirection,
     focusGroupWrap
   } = props;
-  // What the list holds, which is not the same as what its rows say. A list
-  // draws the rows it needs and no more: the selected one may be scrolled out
-  // of the window, or filtered out of the view. Aggregating over the rows that
-  // happen to be mounted would then lose the selection — a row that is not
-  // there cannot say it is not selected.
-  const selectionRef = useRef(undefined);
-  if (selectionRef.current === undefined) {
-    selectionRef.current = Object.hasOwn(props, "value") ? props.value : props.defaultValue;
-  }
+  // `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) => {
-    const kept = selectionRef.current;
+  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)) : [];
@@ -61371,13 +61398,10 @@ const ListSelectable = props => {
           stillSelected.push(child.uiState);
         }
       }
-      const values = stillSelected.length === 0 ? fallbackState : stillSelected;
-      selectionRef.current = values;
-      return values;
+      return stillSelected.length === 0 ? fallbackState : stillSelected;
     }
     for (const child of children) {
       if (child.uiState !== undefined) {
-        selectionRef.current = child.uiState;
         return child.uiState;
       }
     }
@@ -61385,7 +61409,6 @@ const ListSelectable = props => {
     // deselected; if it is not, the list keeps what it holds.
     const keptIsDrawn = children.some(child => child.props.value === kept);
     if (keptIsDrawn) {
-      selectionRef.current = undefined;
       return undefined;
     }
     return kept;
@@ -61984,12 +62007,9 @@ const ListVirtualContext = createContext(null);
 // that returning a component of one's own — instead of a bare <List.Item> —
 // works the same way.
 const ListRowContext = createContext(null);
-// The slot a child of the list stands in — which one it is, and where it sits
-// among its siblings (see ListDeclaredChildren). A row takes its place in the
-// collection by slot, and hears through this context that its slot moved: a
-// context subscriber is re-rendered even when preact skipped the component
-// that holds it, which is what lets a row nobody rebuilt follow the list all
-// the same.
+// The slot a child of the list stands in, by id (see ListDeclaredChildren). A
+// row takes its place in the collection by slot: the place is then the list's
+// to move, and the row's to follow — see createListVirtual.
 const ListSlotContext = createContext(null);
 const css$x = /* css */`
   @layer navi {
@@ -64947,9 +64967,7 @@ const ListItemUI = props => {
   // registered the row, decided it is inside the render window, and placed its
   // separator. All that is left here is to draw it.
   const row = useContext(ListRowContext);
-  // Where this row was declared, when it was declared one by one (see
-  // ListDeclaredChildren).
-  const slot = useContext(ListSlotContext);
+  const slotId = useContext(ListSlotContext);
   // There is no standalone match/matchScore/highlight prop — participation
   // in a matching system (search, filter…) only goes through `matchInfo`
   // (e.g. useSearchText's getItemMatchInfo(item): { match, matchScore,
@@ -64975,18 +64993,20 @@ const ListItemUI = props => {
   // Where a row sits is where it was declared, full stop: a list is written in
   // the order it reads. Its slot is what says that — a search that reorders
   // rows reorders the rows it declares, and the slots follow. A row drawn by a
-  // run already knows its place; the run gave it.
+  // run already knows its place; the run gave it. The place is taken in the
+  // name of this very component (idDefault, not the row's id): two components
+  // may stand for the same row for a moment, one leaving as the other arrives,
+  // and the one leaving must give back its own place, not the newcomer's.
   if (!row) {
     if (props.filtered) {
-      virtual.drop(props.id);
+      virtual.drop(idDefault);
     } else {
-      props.index = virtual.take(props.id, 1, slot ? slot.id : props.id);
+      props.index = virtual.take(idDefault, 1, slotId);
     }
   }
-  const rowId = props.id;
   useLayoutEffect(() => {
     return () => {
-      virtual.drop(rowId);
+      virtual.drop(idDefault);
     };
   }, []);
   // Every row that is drawn registers itself, whether it was declared one by
@@ -65355,9 +65375,10 @@ List.Item = ListItem;
 // So the places are read off the walk instead of off the renders: the list
 // names a slot for each of its children and declares them here, in order,
 // before any of them renders (see ListDeclaredChildren). A child then takes
-// its place BY SLOT and keeps it for as long as its slot stands — whether it
-// renders again or not — while a child whose slot the walk no longer names
-// loses its place in that same render, so nothing removed is ever counted.
+// its place BY SLOT, and the place is a signal: it moves when what stands
+// before it changes — a row filtered out, a run taking in rows, a slot added
+// or moved — and the child follows, rendered again for it whether or not
+// anything else would have rendered it.
 const createListVirtual = () => {
   const totalSignal = signal(0);
   // Bumped whenever a run takes in rows. The list itself has to hear about it:
@@ -65369,100 +65390,108 @@ const createListVirtual = () => {
   // an attribute: what is drawn is from before, and the app may want to say so
   // without taking anything away.
   const refreshingSignal = signal(0);
-  // Where the walk put each slot: the slot it lives in (a group walks its own
-  // rows, inside the slot the list gave the group) and its rank among the
-  // slots declared with it.
-  const slotById = new Map();
-  // What stands in a slot once it has rendered: the row, or the run of rows,
-  // that took the place, and how many rows of the collection it stands for.
+  // The slots each walk declared, in order, by the slot the walk stands in
+  // (null for the list's own children). Together they are a tree: a group's
+  // rows live inside the group's slot.
+  const slotIdsByParent = new Map();
+  // Who took a place — a row, or a run of rows — and how many rows of the
+  // collection it stands for. The place itself is a signal, see take.
   const ownerById = new Map();
-  const placeByOwner = new Map();
-  // The owners in the order their slots put them, and how many rows they stand
-  // for together: kept so that a child declared after all the others — a whole
-  // first render, and anything the list gains at its end — is placed without
-  // going over the others again.
-  const orderedOwnerIds = [];
-  let rowTotal = 0;
+  // The owners standing in each slot, in the order they took their place.
+  // One, as a rule; a child that renders several rows keeps them in the order
+  // they first rendered, which is all it can be told.
+  const ownerIdsBySlot = new Map();
   const locatorByOwner = new Map();
-  const pathCache = new Map();
-  // Tells two owners sharing a slot apart (several rows inside one child of
-  // the list), in the order they first took a place.
-  let sequence = 0;
+  // The slots as the tree reads, first to last, and where each stands in it.
+  // Rebuilt once a walk has changed the tree, read to place the owners.
+  const slotWalk = [];
+  const rankBySlot = new Map();
+  let rowTotal = 0;
+  // Owners have left and the others have not been moved up yet. Done on the
+  // next ask rather than on the spot: rows leave many at a time (a search, a
+  // list unmounting), and moving the others up once is enough.
   let placesStale = false;
-
-  // Whatever the slot held is gone with it, and so is whatever its own walk
-  // declared inside it.
-  const dropSlot = slotId => {
-    slotById.delete(slotId);
-    for (const [ownerId, owner] of ownerById) {
-      if (owner.slotId === slotId) {
-        ownerById.delete(ownerId);
-        placeByOwner.delete(ownerId);
+  // Where the last slot holding an owner stands: an owner arriving at or after
+  // it is placed at the end without going over the others — a whole first
+  // render, rows arriving in order, costs each row nothing but itself.
+  let rankOwnedLast = -1;
+  const rebuildWalk = () => {
+    slotWalk.length = 0;
+    rankBySlot.clear();
+    const visit = parentSlotId => {
+      const slotIds = slotIdsByParent.get(parentSlotId);
+      if (!slotIds) {
+        return;
       }
-    }
-    for (const [otherSlotId, slot] of slotById) {
-      if (slot.parentId === slotId) {
-        dropSlot(otherSlotId);
+      for (const slotId of slotIds) {
+        rankBySlot.set(slotId, slotWalk.length);
+        slotWalk.push(slotId);
+        visit(slotId);
       }
-    }
-  };
-  // Where a slot sits, said as the ranks of the slots it lives in, outermost
-  // first: comparing two of them keeps a group's rows inside their group and
-  // the groups where the list declared them.
-  const pathOf = slotId => {
-    const pathCached = pathCache.get(slotId);
-    if (pathCached) {
-      return pathCached;
-    }
-    const slot = slotById.get(slotId);
-    if (!slot) {
-      return null;
-    }
-    let path;
-    if (slot.parentId === null) {
-      path = [slot.order];
-    } else {
-      const parentPath = pathOf(slot.parentId);
-      path = parentPath === null ? [slot.order] : [...parentPath, slot.order];
-    }
-    pathCache.set(slotId, path);
-    return path;
+    };
+    visit(null);
   };
-  // The places, all of them, from the order the slots are in. Done in one go
-  // rather than owner by owner: a place is a sum of what stands before it, so
-  // there is nothing to hand out one at a time — and nothing changes it but a
-  // slot moving or a child taking a different number of rows.
+  // Every place, in one go: a place is the sum of what stands before it, so
+  // there is nothing to hand out one at a time. Writing a place that did not
+  // change wakes nobody — a signal ignores a value equal to its own.
   const refreshPlaces = () => {
     placesStale = false;
-    const owners = [...ownerById.entries()];
-    owners.sort(([, leftOwner], [, rightOwner]) => {
-      const comparison = comparePath(pathOf(leftOwner.slotId), pathOf(rightOwner.slotId));
-      if (comparison !== 0) {
-        return comparison;
-      }
-      return leftOwner.sequence - rightOwner.sequence;
-    });
-    orderedOwnerIds.length = 0;
     let index = 0;
-    for (const [ownerId, owner] of owners) {
-      orderedOwnerIds.push(ownerId);
-      placeByOwner.set(ownerId, index);
-      index += owner.rowCount;
+    let rank = 0;
+    rankOwnedLast = -1;
+    while (rank < slotWalk.length) {
+      const ownerIds = ownerIdsBySlot.get(slotWalk[rank]);
+      if (ownerIds) {
+        for (const ownerId of ownerIds) {
+          const owner = ownerById.get(ownerId);
+          owner.placeSignal.value = index;
+          index += owner.rowCount;
+        }
+        rankOwnedLast = rank;
+      }
+      rank++;
     }
     rowTotal = index;
-    totalSignal.value = rowTotal;
+    totalSignal.value = index;
   };
-  // Whether nothing that has taken a place stands after this one.
-  const standsLast = owner => {
-    if (orderedOwnerIds.length === 0) {
-      return true;
+  const addToSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      ownerIds.push(ownerId);
+    } else {
+      ownerIdsBySlot.set(slotId, [ownerId]);
+    }
+  };
+  const removeFromSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (!ownerIds) {
+      return;
     }
-    const lastOwner = ownerById.get(orderedOwnerIds[orderedOwnerIds.length - 1]);
-    const comparison = comparePath(pathOf(lastOwner.slotId), pathOf(owner.slotId));
-    if (comparison !== 0) {
-      return comparison < 0;
+    const index = ownerIds.indexOf(ownerId);
+    if (index !== -1) {
+      ownerIds.splice(index, 1);
+    }
+    if (ownerIds.length === 0) {
+      ownerIdsBySlot.delete(slotId);
+    }
+  };
+  // A slot the walk no longer names: whatever stood in it is gone, and so is
+  // whatever a walk inside it had declared.
+  const dropSlot = slotId => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      for (const ownerId of ownerIds) {
+        ownerById.delete(ownerId);
+      }
+      ownerIdsBySlot.delete(slotId);
+    }
+    const childSlotIds = slotIdsByParent.get(slotId);
+    if (childSlotIds) {
+      slotIdsByParent.delete(slotId);
+      for (const childSlotId of childSlotIds) {
+        dropSlot(childSlotId);
+      }
     }
-    return lastOwner.sequence < owner.sequence;
   };
   const virtual = {
     totalSignal,
@@ -65486,40 +65515,30 @@ const createListVirtual = () => {
     renderSkeleton: undefined,
     // The children a walk stands over, in order — said in one call, before any
     // of them renders, so that what a child asks next is answered against the
-    // whole picture and not against the children that happened to render first.
+    // whole picture and not against the children that happened to render
+    // first. Said again on every render of the walk, and heard only when
+    // something moved.
     declareSlots: (parentSlotId, slotIds) => {
-      const slotIdSet = new Set(slotIds);
-      for (const [slotId, slot] of slotById) {
-        if (slot.parentId === parentSlotId && !slotIdSet.has(slotId)) {
-          dropSlot(slotId);
-          pathCache.clear();
-          placesStale = true;
-        }
+      const slotIdsPrevious = slotIdsByParent.get(parentSlotId);
+      if (slotIdsPrevious && sameSlotIds(slotIdsPrevious, slotIds)) {
+        return;
       }
-      let order = 0;
-      for (const slotId of slotIds) {
-        const slot = slotById.get(slotId);
-        if (!slot) {
-          // A slot nothing stands in yet moves nobody: the child that takes it
-          // says so itself, when it renders.
-          slotById.set(slotId, {
-            parentId: parentSlotId,
-            order
-          });
-        } else if (slot.order !== order) {
-          slot.order = order;
-          pathCache.clear();
-          placesStale = true;
+      if (slotIdsPrevious) {
+        const slotIdSet = new Set(slotIds);
+        for (const slotId of slotIdsPrevious) {
+          if (!slotIdSet.has(slotId)) {
+            dropSlot(slotId);
+          }
         }
-        order++;
-      }
-      // Now, rather than when the first child asks: the walk has just said
-      // where everything stands, so every place can be settled once instead of
-      // once per child.
-      if (placesStale) {
-        refreshPlaces();
       }
+      slotIdsByParent.set(parentSlotId, slotIds);
+      rebuildWalk();
+      refreshPlaces();
     },
+    // Whether something has taken this slot for its own: what it renders
+    // inside is then its to place (a run draws its groups with their rows
+    // already placed), and no walk inside it has anything to declare.
+    slotHasOwner: slotId => ownerIdsBySlot.has(slotId),
     // Whether any run of rows lives in this list: what makes a render window
     // mean anything (see List's renderBudget).
     hasRuns: () => locatorByOwner.size > 0,
@@ -65539,127 +65558,129 @@ const createListVirtual = () => {
       }
       return null;
     },
-    // The place the slot's rows start at. Asked again on every render of the
-    // child and answered with the same number for as long as nothing moved —
-    // and answered at all for a child that does not ask again, which is the
-    // point of taking by slot.
+    // The place the owner's rows start at — read from a signal, so that the
+    // owner is rendered again when it moves (see createListVirtual). Asked on
+    // every render, and answered without a second look for as long as the
+    // owner stands in the same slot for the same number of rows.
     take: (ownerId, rowCount, slotId) => {
-      const previous = ownerById.get(ownerId);
-      if (previous && previous.slotId === slotId && previous.rowCount === rowCount) {
+      let owner = ownerById.get(ownerId);
+      if (owner) {
+        if (owner.slotId !== slotId || owner.rowCount !== rowCount) {
+          removeFromSlot(owner.slotId, ownerId);
+          addToSlot(slotId, ownerId);
+          owner.slotId = slotId;
+          owner.rowCount = rowCount;
+          placesStale = true;
+        }
         if (placesStale) {
           refreshPlaces();
         }
-        return placeByOwner.get(ownerId);
+        return owner.placeSignal.value;
+      }
+      if (placesStale) {
+        refreshPlaces();
+      }
+      const rank = rankBySlot.get(slotId);
+      addToSlot(slotId, ownerId);
+      if (rank !== undefined && rank >= rankOwnedLast) {
+        owner = {
+          slotId,
+          rowCount,
+          placeSignal: signal(rowTotal)
+        };
+        ownerById.set(ownerId, owner);
+        rowTotal += rowCount;
+        rankOwnedLast = rank;
+        totalSignal.value = rowTotal;
+        return owner.placeSignal.value;
       }
-      const owner = {
+      owner = {
         slotId,
         rowCount,
-        sequence: previous ? previous.sequence : sequence++
+        placeSignal: signal(0)
       };
       ownerById.set(ownerId, owner);
-      if (!previous && !placesStale && standsLast(owner)) {
-        orderedOwnerIds.push(ownerId);
-        placeByOwner.set(ownerId, rowTotal);
-        rowTotal += rowCount;
-        totalSignal.value = rowTotal;
-        return placeByOwner.get(ownerId);
-      }
-      placesStale = true;
       refreshPlaces();
-      return placeByOwner.get(ownerId);
+      return owner.placeSignal.value;
     },
-    // The child stands for no row of the collection any more: it was filtered
-    // out by a search, or it is gone.
+    // The owner stands for no row of the collection: it was filtered out by a
+    // search, or it is gone.
     drop: ownerId => {
-      if (!ownerById.delete(ownerId)) {
+      const owner = ownerById.get(ownerId);
+      if (!owner) {
         return;
       }
-      placeByOwner.delete(ownerId);
-      refreshPlaces();
+      ownerById.delete(ownerId);
+      removeFromSlot(owner.slotId, ownerId);
+      if (placesStale) {
+        return;
+      }
+      placesStale = true;
+      queueMicrotask(() => {
+        if (placesStale) {
+          refreshPlaces();
+        }
+      });
     }
   };
   return virtual;
 };
-// The walk that gives the list's children their places. It names a slot for
-// each of them — after the child's key when it has one, after its position
-// otherwise, which is how preact itself tells unkeyed children apart — and says
-// the whole set to the list's virtual before any of them renders.
+const sameSlotIds = (left, right) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+  let index = 0;
+  while (index < left.length) {
+    if (left[index] !== right[index]) {
+      return false;
+    }
+    index++;
+  }
+  return true;
+};
+
+// The walk that gives the list's children their places: a slot for each of
+// them, declared to the list's virtual all at once before any child renders,
+// and handed to the child through a provider of its own — which is what lets
+// the row reach it however deep the caller buried it in components of theirs.
 //
-// Wrapping each child in its own provider is what makes a slot reach the row
-// inside it, however deep the caller buried it, and what wakes a row whose slot
-// moved: the value it holds is the same object for as long as the child stays
-// where it was.
+// A slot is named the way preact tells the child apart: by key when it has
+// one, by position otherwise, and inside the array it was given in — a nested
+// array is one child to preact, so what follows the array keeps its name
+// however many rows the array holds. A child preact would not render (null,
+// a boolean) has no slot: it is not there.
 const ListDeclaredChildren = ({
   children
 }) => {
   const virtual = useContext(ListVirtualContext);
-  const parentSlot = useContext(ListSlotContext);
-  const parentSlotId = parentSlot ? parentSlot.id : null;
-  const slotsRef = useRef(new Map());
-  const slotsPrevious = slotsRef.current;
-  const childArray = flattenChildren(children);
-  const slots = new Map();
-  const slotIds = [];
-  let index = 0;
-  for (const child of childArray) {
-    const childKey = child && child.key !== undefined && child.key !== null ? `k${child.key}` : `i${index}`;
-    let slotId = parentSlotId === null ? childKey : `${parentSlotId}/${childKey}`;
-    if (slots.has(slotId)) {
-      // Two children answering to the same key: preact cannot tell them apart
-      // either, but a slot each is what keeps them both on screen.
-      slotId = `${slotId}#${index}`;
-    }
-    const slotPrevious = slotsPrevious.get(slotId);
-    slots.set(slotId, slotPrevious && slotPrevious.order === index ? slotPrevious : {
-      id: slotId,
-      order: index
-    });
-    slotIds.push(slotId);
-    index++;
+  const parentSlotId = useContext(ListSlotContext);
+  if (parentSlotId !== null && virtual.slotHasOwner(parentSlotId)) {
+    return children;
   }
-  slotsRef.current = slots;
+  const slotIds = [];
+  const declared = [];
+  declareChildren(children, parentSlotId === null ? "" : `${parentSlotId}/`, slotIds, declared);
   virtual.declareSlots(parentSlotId, slotIds);
   return jsx(Fragment$1, {
-    children: childArray.map((child, childIndex) => {
-      const slotId = slotIds[childIndex];
-      return jsx(ListSlotContext.Provider, {
-        value: slots.get(slotId),
-        children: child
-      }, slotId);
-    })
+    children: declared
   });
 };
-// The children as preact will diff them: nested arrays flattened, and a child
-// that renders nothing still holding its position — a conditional child must
-// not move the ones after it as it comes and goes.
-const flattenChildren = (children, flat = []) => {
-  if (Array.isArray(children)) {
-    for (const child of children) {
-      flattenChildren(child, flat);
-    }
-    return flat;
-  }
-  flat.push(children);
-  return flat;
-};
-
-// Two slots compared by where they sit (see pathOf). A slot no walk declared
-// sorts after them all: it stands nowhere the list knows of.
-const comparePath = (leftPath, rightPath) => {
-  if (leftPath === null) {
-    return rightPath === null ? 0 : 1;
-  }
-  if (rightPath === null) {
-    return -1;
-  }
-  let depth = 0;
-  while (depth < leftPath.length && depth < rightPath.length) {
-    if (leftPath[depth] !== rightPath[depth]) {
-      return leftPath[depth] - rightPath[depth];
+const declareChildren = (children, prefix, slotIds, declared) => {
+  const childArray = Array.isArray(children) ? children : [children];
+  let index = 0;
+  for (const child of childArray) {
+    if (Array.isArray(child)) {
+      declareChildren(child, `${prefix}${index}/`, slotIds, declared);
+    } else if (child !== null && child !== undefined && child !== false && child !== true) {
+      const slotId = child.key === undefined || child.key === null ? `${prefix}i${index}` : `${prefix}k${child.key}`;
+      slotIds.push(slotId);
+      declared.push(jsx(ListSlotContext.Provider, {
+        value: slotId,
+        children: child
+      }, slotId));
     }
-    depth++;
+    index++;
   }
-  return leftPath.length - rightPath.length;
 };
 const VISIBILITY_HIDDEN_STYLE = {
   visibility: "hidden"
@@ -65795,7 +65816,7 @@ const ListItems = ({
 }) => {
   const ownerId = useId();
   const virtual = useContext(ListVirtualContext);
-  const slot = useContext(ListSlotContext);
+  const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
   const store = useItemStore({
@@ -65817,7 +65838,7 @@ const ListItems = ({
       skeletonRow.rowMinHeight = `${virtualItemSize}px`;
     }
   }
-  const runStart = virtual.take(ownerId, store.rowCount, slot ? slot.id : ownerId);
+  const runStart = virtual.take(ownerId, store.rowCount, slotId);
   const runEnd = runStart + store.rowCount;
   const getItemAt = index => store.getItem(index);
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;