@jsenv/navi 0.29.343 → 0.29.345

package/dist/dev/jsenv_navi.js

@@ -66030,452 +66030,666 @@ const cssVars = vars => {
 };
 const lengthValue = value => typeof value === "number" ? `${value}px` : value;
 
-/*
- * useItemTracker() — hook that creates a stable item tracker for the lifetime
- * of the host component.
- *
- * USAGE:
- * ```jsx
- * function ListControlled({ items }) {
- *   const tracker = useItemTracker({
- *     onChange: () => console.log("items changed"),
- *   });
- *
- *   return (
- *     <ul>
- *       {items.map((item, i) => (
- *         <Row key={item.id} id={item.id} index={i} hidden={item.hidden} value={item.value} tracker={tracker} />
- *       ))}
- *       <Count tracker={tracker} />
- *     </ul>
- *   );
- * }
- *
- * function Row({ id, index, hidden, value, tracker }) {
- *   const visibleIndex = tracker.useTrackItem({ id, index, hidden, value });
- *   if (visibleIndex === -1) return null;
- *   return <li>{value}</li>;
- * }
- *
- * function Count({ tracker }) {
- *   const count = tracker.visibleCountSignal.value; // re-renders only when count changes
- *   return <span>{count} items</span>;
- * }
- * ```
- *
- * INTERNALS:
- *   - registrations: Map key → data, contains only visible items
- *   - idToKey: Map id → key, stable across renders
- *   - orderedKeys: number[] of visible item keys sorted by explicit order
- *   - keyToOrderedIndex: Map key → orderedKeys index, gives O(1) indexOf equivalent
- *   - keyToExplicitOrder: Map key → explicitly passed index, used to maintain sort order
- *   - allItemsSignal: signal(array), all items including hidden, ordered by explicit index
- *   - visibleItemsSignal: signal(array), non-hidden items only
- *   - countSignal: signal(number), count of all items including hidden
- *   - visibleCountSignal: signal(number), updated in microtask batch, only when count changes
- *   - propSignals: Map propName → signal(array), updated in microtask batch with element equality
- *   - onChangeRef: holds the latest onChange callback, called once per microtask batch
- *
- *   useTrackItem(id, data, index): registers the item with an explicitly provided index
- *   that determines its position among siblings. The caller (e.g. items.map) knows the
- *   correct order and passes it directly — no render-sequence deduction needed.
- *   Returns the visible rank (position among non-hidden items), or -1 when hidden.
- *   Signals and onChange are deferred to a microtask so multiple items updating
- *   in one commit cause only one notification.
- *
- *   getTrackedItemByIndex(index): synchronous O(1) lookup of a visible item by
- *   its visible rank. Returns undefined when index is out of range.
- *
- *   peekItems(): the items as they stand right now, without waiting for the
- *   deferred notification — what a sibling rendering after the items must read
- *   to paint them in the same commit.
- */
-
-const useItemTracker = ({ onChange } = {}) => {
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const trackerRef = useRef(null);
-  let tracker = trackerRef.current;
-  if (!tracker) {
-    trackerRef.current = tracker = createItemTracker((items) => {
-      onChangeRef.current?.(items);
-    });
+const ListItemHeaderOrFooterResolver = props => {
+  const Next = useNextResolver();
+  if (props.header) {
+    return renderResolver(ListItemHeader, props);
   }
-  // When code in useLayoutEffect of the caller wants to run the tracker must be in sync
-  // without this layout effect the tracker might not have been synced yet and preact would call layout effect
-  // before we had time to sync
-  useLayoutEffect(() => {
-    tracker._flushSync();
+  if (props.footer) {
+    return renderResolver(ListItemFooter, props);
+  }
+  return jsx(Next, {
+    ...props
+  });
+};
+const ListItemHeader = props => {
+  const Next = useNextResolver();
+  const {
+    ref
+  } = props;
+  useDisplayedLayoutEffect(ref, headerEl => {
+    const listContainerEl = headerEl.closest(".navi_list_container");
+    const rect = headerEl.getBoundingClientRect();
+    listContainerEl.style.setProperty("--list-header-height", `${rect.height}px`);
+    listContainerEl.style.setProperty("--list-header-width", `${rect.width}px`);
+  }, []);
+  return jsx(Next, {
+    ...props,
+    header: undefined,
+    role: "presentation",
+    baseClassName: "navi_list_item_header"
+  });
+};
+const ListItemFooter = props => {
+  const Next = useNextResolver();
+  const {
+    ref
+  } = props;
+  useDisplayedLayoutEffect(ref, footerEl => {
+    const listContainerEl = footerEl.closest(".navi_list_container");
+    const rect = footerEl.getBoundingClientRect();
+    listContainerEl.style.setProperty("--list-footer-height", `${rect.height}px`);
+    listContainerEl.style.setProperty("--list-footer-width", `${rect.width}px`);
+  }, []);
+  return jsx(Next, {
+    ...props,
+    footer: undefined,
+    role: "presentation",
+    baseClassName: "navi_list_item_footer"
   });
-  return tracker;
 };
 
-const createItemTracker = (onChange) => {
-  const registrations = new Map(); // key → data (visible items only)
-  const idToKey = new Map(); // id → insertion key (stable, auto-incremented)
-  let keyCounter = 0;
-  // orderedKeys: visible item keys sorted by their explicitly provided index.
-  const orderedKeys = []; // number[]
-  // keyToOrderedIndex: O(1) equivalent of orderedKeys.indexOf(key).
-  const keyToOrderedIndex = new Map(); // key → index in orderedKeys
-  const allKeys = new Set(); // all registered keys including hidden
-  const keyToExplicitOrder = new Map(); // key → explicitly passed index
-
-  const allRegistrations = new Map(); // key → data (all items including hidden)
-  const allOrderedKeys = []; // all item keys sorted by explicit order
-  const keyToAllOrderedIndex = new Map(); // key → index in allOrderedKeys
-
-  const itemsSignal = signal([]);
-  const visibleItemsSignal = signal([]);
-  const countSignal = signal(0);
-  const visibleCountSignal = signal(0);
-  const noMatchCountSignal = signal(0);
-
-  let notifyScheduled = false;
-  const runNotify = () => {
-    batch(() => {
-      let someChange = false;
+// Everything the list knows about its rows, in one place: how many the
+// collection has and where each child's rows start (the places), which rows
+// are drawn and which of those mount and show (the rows), and what each says
+// about itself (the items). Two clocks. Places and "is anything standing
+// above me" answer synchronously, in the middle of a render pass — a row asks
+// about the rows before it, and those have rendered already. The items and
+// the counts settle once per frame (a microtask): many rows change in one
+// commit, and what reads them wants one notification.
+//
+// Why places are read off the walk and not off the renders: a child knows how
+// many rows it stands for but not what was declared before it, and it cannot
+// deduce that from when it renders — a render is free to skip it. A child that
+// draws from signals and whose props are all referentially === the previous
+// ones does not render again (@preact/signals installs a shouldComponentUpdate
+// that says so), which is what any child nobody rebuilt this frame is — and
+// children numbered as they render would then slide up into the place of the
+// one that was skipped. So 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 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.
+//
+// Why "first" is a signal too: only the row itself knows, once it renders,
+// that it renders nothing (filtered out by a search), and the rows after it
+// may have been handed back unchanged. The first mounted row of a scope is
+// kept as a signal each of them reads; when it leaves, they are rendered again.
 
-      const newCount = allKeys.size;
-      const countModified = countSignal.peek() !== newCount;
-      if (countModified) {
-        countSignal.value = newCount;
-        someChange = true;
-      }
+const UNGROUPED = Symbol("ungrouped");
 
-      // Build allItems and visibleItems in a single pass over allOrderedKeys.
-      // Visible items are those without data.hidden or data.filtered — same
-      // relative order as orderedKeys (syncItem already excludes both from
-      // orderedKeys; this must match or consumers relying on visibleCountSignal
-      // for virtual-scroll accounting, e.g. list.jsx's filler sizing, would
-      // count filtered-out items as if they still took up space).
-      const prevAllItems = itemsSignal.peek();
-      const prevVisibleItems = visibleItemsSignal.peek();
-      let allItemsChanged = prevAllItems.length !== allOrderedKeys.length;
-      let visibleItemsChanged = false;
-      const allItems = [];
-      const visibleItems = [];
-      let newNoMatchCount = 0;
-      for (let i = 0; i < allOrderedKeys.length; i++) {
-        const key = allOrderedKeys[i];
-        const item = allRegistrations.get(key);
-        allItems.push(item);
-        // Compare by reference: catches any prop change (id, selected, disabled, …)
-        if (!allItemsChanged && item !== prevAllItems[i]) {
-          allItemsChanged = true;
-        }
-        if (item.match === false) {
-          newNoMatchCount++;
-        }
-        if (!item.hidden && !item.filtered) {
-          const visibleIdx = visibleItems.length;
-          visibleItems.push(item);
-          if (!visibleItemsChanged && item !== prevVisibleItems[visibleIdx]) {
-            visibleItemsChanged = true;
-          }
-        }
-      }
+const createListRows = () => {
+  const totalSignal = signal(0);
+  // Bumped whenever a run takes in rows. The list itself has to hear about it:
+  // rows arriving outside the render window change nothing it can see (nothing
+  // registers, nothing is drawn), and yet they are what it may have been
+  // waiting for — the row it was told to open on, for one.
+  const pagesSignal = signal(0);
+  // How many runs are re-reading rows they already show. The list wears it as
+  // an attribute: what is drawn is from before, and the app may want to say so
+  // without taking anything away.
+  const refreshingSignal = signal(0);
+  // 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();
+  // 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();
+  // 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;
+  // 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 newVisibleCount = visibleItems.length;
-      const visibleCountModified =
-        visibleCountSignal.peek() !== newVisibleCount;
-      if (visibleCountModified) {
-        visibleCountSignal.value = newVisibleCount;
-        someChange = true;
-      }
-      if (allItemsChanged) {
-        itemsSignal.value = allItems;
-        someChange = true;
-      }
-      if (visibleItemsChanged) {
-        visibleItemsSignal.value = visibleItems;
-        someChange = true;
-      }
-      const noMatchCountModified =
-        noMatchCountSignal.peek() !== newNoMatchCount;
-      if (noMatchCountModified) {
-        noMatchCountSignal.value = newNoMatchCount;
-        someChange = true;
+  const rebuildWalk = () => {
+    slotWalk.length = 0;
+    rankBySlot.clear();
+    const visit = (parentSlotId) => {
+      const slotIds = slotIdsByParent.get(parentSlotId);
+      if (!slotIds) {
+        return;
       }
-      if (someChange) {
-        onChange?.();
+      for (const slotId of slotIds) {
+        rankBySlot.set(slotId, slotWalk.length);
+        slotWalk.push(slotId);
+        visit(slotId);
       }
-    });
+    };
+    visit(null);
   };
-
-  const notify = () => {
-    if (notifyScheduled) {
-      return;
-    }
-    notifyScheduled = true;
-    queueMicrotask(() => {
-      if (!notifyScheduled) {
-        return; // was already flushed synchronously
+  // 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;
+    let index = 0;
+    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;
       }
-      notifyScheduled = false;
-      runNotify();
-    });
+      rank++;
+    }
+    rowTotal = index;
+    totalSignal.value = index;
+    // A run's edges are places too (see refreshFirst).
+    markStale(UNGROUPED);
   };
-
-  const _flushSync = () => {
-    if (!notifyScheduled) {
+  const addToSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (ownerIds) {
+      ownerIds.push(ownerId);
+    } else {
+      ownerIdsBySlot.set(slotId, [ownerId]);
+    }
+    warnIfEveryRowInOneSlot(slotId);
+  };
+  // Rows that all stand in the same slot keep the order they first mounted in:
+  // the walk is over the children the list is given, and a component holding
+  // them is one child however many rows it renders. Everything about a place
+  // then stops following what the caller writes — a search reordering the rows
+  // moves nothing. Said once, and only for the shape that can be nothing else:
+  // the list's whole content is one child, and several rows came out of it.
+  let everyRowInOneSlotWarned = false;
+  const warnIfEveryRowInOneSlot = (slotId) => {
+    if (everyRowInOneSlotWarned) {
       return;
     }
-    notifyScheduled = false;
-    runNotify();
+    const rootSlotIds = slotIdsByParent.get(null);
+    if (!rootSlotIds || rootSlotIds.length !== 1 || rootSlotIds[0] !== slotId) {
+      return;
+    }
+    if (ownerIdsBySlot.get(slotId).length < 2) {
+      return;
+    }
+    everyRowInOneSlotWarned = true;
+    console.warn(
+      `List: every row stands in the same slot, so they keep the order they first rendered in — reordering them (a search, a sort) will not move them. The list's rows must be its own children: give it the rows (or a <List.Items>), not a component rendering them.`,
+    );
   };
-
-  // Insert key into orderedKeys at the correct position based on explicitOrder.
-  // Uses binary search for O(log n) insertion.
-  const insertKey = (key, explicitOrder) => {
-    let lo = 0;
-    let hi = orderedKeys.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (keyToExplicitOrder.get(orderedKeys[mid]) <= explicitOrder) {
-        lo = mid + 1;
-      } else {
-        hi = mid;
-      }
+  const removeFromSlot = (slotId, ownerId) => {
+    const ownerIds = ownerIdsBySlot.get(slotId);
+    if (!ownerIds) {
+      return;
     }
-    orderedKeys.splice(lo, 0, key);
-    for (let i = lo; i < orderedKeys.length; i++) {
-      keyToOrderedIndex.set(orderedKeys[i], i);
+    const index = ownerIds.indexOf(ownerId);
+    if (index !== -1) {
+      ownerIds.splice(index, 1);
+    }
+    if (ownerIds.length === 0) {
+      ownerIdsBySlot.delete(slotId);
     }
   };
-
-  const insertAllKey = (key, explicitOrder) => {
-    let lo = 0;
-    let hi = allOrderedKeys.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (keyToExplicitOrder.get(allOrderedKeys[mid]) <= explicitOrder) {
-        lo = mid + 1;
-      } else {
-        hi = mid;
+  // 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);
     }
-    allOrderedKeys.splice(lo, 0, key);
-    for (let i = lo; i < allOrderedKeys.length; i++) {
-      keyToAllOrderedIndex.set(allOrderedKeys[i], i);
+    const childSlotIds = slotIdsByParent.get(slotId);
+    if (childSlotIds) {
+      slotIdsByParent.delete(slotId);
+      for (const childSlotId of childSlotIds) {
+        dropSlot(childSlotId);
+      }
     }
   };
 
-  const removeAllKey = (key) => {
-    const idx = keyToAllOrderedIndex.get(key);
-    if (idx !== undefined) {
-      allOrderedKeys.splice(idx, 1);
-      keyToAllOrderedIndex.delete(key);
-      for (let i = idx; i < allOrderedKeys.length; i++) {
-        keyToAllOrderedIndex.set(allOrderedKeys[i], i);
-      }
+  // ---- the rows drawn ----
+  // rowId → { ownerId, place, groupId, data, mounted, visible, item }
+  const rowById = new Map();
+  // groupId → { firstSignal, countSignal, noMatchCountSignal }
+  const groupById = new Map();
+  // ownerId → { from, to }, for the runs (see declareWindow).
+  const windowByOwner = new Map();
+  // The first place something stands at, outside any group: the mounted rows
+  // and the rows a run holds above its window. Per group, the group's first
+  // mounted row.
+  const firstStandingSignal = signal(-1);
+  // The scopes whose first row left: recounted on the next ask, or at the end
+  // of the frame, whichever comes first. A row mounting before the first one
+  // moves it at once, no recount needed — the first can only ever move up.
+  const staleScopes = new Set();
+  const scopeOf = (groupId) => (groupId === undefined ? UNGROUPED : groupId);
+  const groupOf = (groupId) => {
+    let group = groupById.get(groupId);
+    if (!group) {
+      group = {
+        firstSignal: signal(-1),
+        countSignal: signal(0),
+        noMatchCountSignal: signal(0),
+      };
+      groupById.set(groupId, group);
     }
+    return group;
   };
-
-  // Register or update an item. data.hidden controls visibility.
-  // explicitOrder is the caller-provided index that determines sort position.
-  const syncItem = (key, index, data) => {
-    if (data.role === "presentation") {
-      registrations.delete(key);
-      const idx = keyToOrderedIndex.get(key);
-      if (idx !== undefined) {
-        orderedKeys.splice(idx, 1);
-        keyToOrderedIndex.delete(key);
-        for (let i = idx; i < orderedKeys.length; i++) {
-          keyToOrderedIndex.set(orderedKeys[i], i);
-        }
+  const firstSignalOf = (scope) =>
+    scope === UNGROUPED ? firstStandingSignal : groupOf(scope).firstSignal;
+  const refreshFirst = (scope) => {
+    staleScopes.delete(scope);
+    let first = -1;
+    const consider = (place) => {
+      if (place !== undefined && (first === -1 || place < first)) {
+        first = place;
       }
-      keyToExplicitOrder.delete(key);
-      allRegistrations.delete(key);
-      removeAllKey(key);
-      allKeys.delete(key);
-      return;
-    }
-
-    // Maintain allRegistrations and allOrderedKeys for all non-presentation items.
-    allRegistrations.set(key, data);
-    allKeys.add(key);
-    const currentAllIdx = keyToAllOrderedIndex.get(key);
-    const previousOrder = keyToExplicitOrder.get(key);
-    keyToExplicitOrder.set(key, index);
-    if (currentAllIdx === undefined) {
-      insertAllKey(key, index);
-    } else if (previousOrder !== index) {
-      allOrderedKeys.splice(currentAllIdx, 1);
-      keyToAllOrderedIndex.delete(key);
-      for (let i = currentAllIdx; i < allOrderedKeys.length; i++) {
-        keyToAllOrderedIndex.set(allOrderedKeys[i], i);
+    };
+    for (const row of rowById.values()) {
+      if (row.mounted && scopeOf(row.groupId) === scope) {
+        consider(row.place);
       }
-      insertAllKey(key, index);
     }
-
-    if (data.filtered || data.hidden) {
-      registrations.delete(key);
-      const idx = keyToOrderedIndex.get(key);
-      if (idx !== undefined) {
-        orderedKeys.splice(idx, 1);
-        keyToOrderedIndex.delete(key);
-        for (let i = idx; i < orderedKeys.length; i++) {
-          keyToOrderedIndex.set(orderedKeys[i], i);
+    if (scope === UNGROUPED) {
+      for (const [ownerId, window] of windowByOwner) {
+        const owner = ownerById.get(ownerId);
+        if (!owner) {
+          continue;
+        }
+        const start = owner.placeSignal.peek();
+        if (window.from > start) {
+          consider(start);
+        }
+        if (window.to < start + owner.rowCount) {
+          consider(window.to);
         }
       }
-      return;
-    }
-
-    registrations.set(key, data);
-    const currentIdx = keyToOrderedIndex.get(key);
-    if (currentIdx === undefined) {
-      insertKey(key, index);
-      return;
     }
-    if (previousOrder === index) {
+    firstSignalOf(scope).value = first;
+  };
+  const markStale = (scope) => {
+    if (staleScopes.has(scope)) {
       return;
     }
-    orderedKeys.splice(currentIdx, 1);
-    keyToOrderedIndex.delete(key);
-    for (let i = currentIdx; i < orderedKeys.length; i++) {
-      keyToOrderedIndex.set(orderedKeys[i], i);
+    staleScopes.add(scope);
+    queueMicrotask(() => {
+      if (staleScopes.has(scope)) {
+        refreshFirst(scope);
+      }
+    });
+  };
+  const leaveFirst = (row) => {
+    const scope = scopeOf(row.groupId);
+    if (firstSignalOf(scope).peek() === row.place) {
+      markStale(scope);
     }
-    insertKey(key, index);
   };
 
-  const unregisterKey = (key) => {
-    registrations.delete(key);
-    const idx = keyToOrderedIndex.get(key);
-    if (idx !== undefined) {
-      orderedKeys.splice(idx, 1);
-      keyToOrderedIndex.delete(key);
-      for (let i = idx; i < orderedKeys.length; i++) {
-        keyToOrderedIndex.set(orderedKeys[i], i);
+  // ---- the items, settled once per frame ----
+  const itemsSignal = signal([]);
+  const visibleItemsSignal = signal([]);
+  const countSignal = signal(0);
+  const visibleCountSignal = signal(0);
+  const noMatchCountSignal = signal(0);
+  let notifyScheduled = false;
+  const runNotify = () => {
+    batch(() => {
+      const itemRows = [];
+      for (const row of rowById.values()) {
+        if (row.item) {
+          itemRows.push(row);
+        }
+      }
+      itemRows.sort(compareRowPlaces);
+      const items = [];
+      const visibleItems = [];
+      let noMatchCount = 0;
+      const countByGroup = new Map();
+      const noMatchCountByGroup = new Map();
+      const prevItems = itemsSignal.peek();
+      const prevVisibleItems = visibleItemsSignal.peek();
+      let itemsChanged = prevItems.length !== itemRows.length;
+      let visibleItemsChanged = false;
+      for (const row of itemRows) {
+        const item = row.data;
+        // Compared by reference: any prop change (selected, disabled, …) is a
+        // new props object.
+        if (!itemsChanged && item !== prevItems[items.length]) {
+          itemsChanged = true;
+        }
+        items.push(item);
+        const noMatch = item.match === false;
+        if (noMatch) {
+          noMatchCount++;
+        }
+        if (row.groupId !== undefined) {
+          countByGroup.set(
+            row.groupId,
+            (countByGroup.get(row.groupId) || 0) + 1,
+          );
+          if (noMatch) {
+            noMatchCountByGroup.set(
+              row.groupId,
+              (noMatchCountByGroup.get(row.groupId) || 0) + 1,
+            );
+          }
+        }
+        if (row.visible) {
+          if (
+            !visibleItemsChanged &&
+            item !== prevVisibleItems[visibleItems.length]
+          ) {
+            visibleItemsChanged = true;
+          }
+          visibleItems.push(item);
+        }
+      }
+      if (visibleItems.length !== prevVisibleItems.length) {
+        visibleItemsChanged = true;
       }
+      let someChange = false;
+      if (countSignal.peek() !== items.length) {
+        countSignal.value = items.length;
+        someChange = true;
+      }
+      if (visibleCountSignal.peek() !== visibleItems.length) {
+        visibleCountSignal.value = visibleItems.length;
+        someChange = true;
+      }
+      if (itemsChanged) {
+        itemsSignal.value = items;
+        someChange = true;
+      }
+      if (visibleItemsChanged) {
+        visibleItemsSignal.value = visibleItems;
+        someChange = true;
+      }
+      if (noMatchCountSignal.peek() !== noMatchCount) {
+        noMatchCountSignal.value = noMatchCount;
+        someChange = true;
+      }
+      for (const [groupId, group] of groupById) {
+        group.countSignal.value = countByGroup.get(groupId) || 0;
+        group.noMatchCountSignal.value = noMatchCountByGroup.get(groupId) || 0;
+      }
+      if (someChange && listRows.onChange) {
+        listRows.onChange();
+      }
+    });
+  };
+  const notify = () => {
+    if (notifyScheduled) {
+      return;
     }
-    keyToExplicitOrder.delete(key);
-    allRegistrations.delete(key);
-    removeAllKey(key);
-    allKeys.delete(key);
+    notifyScheduled = true;
+    queueMicrotask(() => {
+      if (!notifyScheduled) {
+        return;
+      }
+      notifyScheduled = false;
+      runNotify();
+    });
   };
 
-  const keyForId = (id) => {
-    if (!idToKey.has(id)) {
-      idToKey.set(id, keyCounter++);
-    }
-    return idToKey.get(id);
-  };
-
-  // Register an item. data.hidden controls visibility.
-  // explicitOrder is the caller-provided index (e.g. from items.map((item, i) => ...))
-  // that determines this item's position among siblings.
-  // Returns the item's visible rank among non-hidden items, or -1 when hidden.
-  const useTrackItem = (data) => {
-    const { id, index } = data;
-    const key = keyForId(id);
-
-    syncItem(key, index, data);
-    notify();
-
-    useLayoutEffect(() => {
-      return () => {
-        unregisterKey(key);
-        notify();
-      };
-    }, []);
-
-    if (data.filtered || data.hidden || data.role === "presentation") {
-      return -1;
-    }
-    return keyToOrderedIndex.get(key) ?? -1;
-  };
-
-  const getTrackedItemByIndex = (index) => {
-    const key = orderedKeys[index];
-    if (key === undefined) {
-      return undefined;
-    }
-    return registrations.get(key);
-  };
-
-  // The items as they stand right now, notification pending or not — same
-  // content as itemsSignal, minus the wait.
-  //
-  // Items register during their own render, while the signal is only updated
-  // on a deferred microtask (see notify): a sibling rendering after them would
-  // otherwise paint from an empty list and correct itself a frame later. That
-  // frame is visible whenever the painted size feeds a layout decision — a
-  // dialog sizing itself on its content measures the empty version and shifts
-  // once the real one lands. Reading this instead makes the first paint the
-  // right one. Callers must still subscribe to itemsSignal to re-render on
-  // LATER changes; this is the value to display, not the notification.
-  const peekItems = () => {
-    if (!notifyScheduled) {
-      return itemsSignal.peek();
-    }
-    const items = [];
-    for (const key of allOrderedKeys) {
-      items.push(allRegistrations.get(key));
-    }
-    return items;
-  };
-
-  return {
-    useTrackItem,
-    getTrackedItemByIndex,
-    peekItems,
+  const listRows = {
+    totalSignal,
+    pagesSignal,
+    refreshingSignal,
+    // The rows that are items, in place order — every one drawn, and the ones
+    // that show — and what the search made of them. Written once per frame.
     itemsSignal,
     visibleItemsSignal,
     countSignal,
     visibleCountSignal,
     noMatchCountSignal,
-    _flushSync,
+    // Called once per frame in which the items changed. Set by the list.
+    onChange: null,
+    // What a run needs to know about the list it lives in: how many rows the
+    // list is willing to draw at once, which end it opens on, and how much
+    // room one row is given — a row whose content has not arrived must take
+    // exactly that, or the rows drawn would not reach where the list says they
+    // are.
+    renderBudget: 0,
+    scrolled: "start",
+    // The list is on its way somewhere: what the window frames is not what it
+    // is about to frame, so a run must not fetch for it (see holdWindow).
+    holdPending: false,
+    // Called by a run just before rows land in it: what is on screen must not
+    // move because something arrived above it. Set by the list itself.
+    captureAnchor: () => {},
+    horizontal: false,
+    virtualItemSizeSignal: null,
+    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. Said again on every render of the walk, and heard only when
+    // something moved.
+    declareSlots: (parentSlotId, slotIds) => {
+      const slotIdsPrevious = slotIdsByParent.get(parentSlotId);
+      if (slotIdsPrevious && sameSlotIds(slotIdsPrevious, slotIds)) {
+        return;
+      }
+      if (slotIdsPrevious) {
+        const slotIdSet = new Set(slotIds);
+        for (const slotId of slotIdsPrevious) {
+          if (!slotIdSet.has(slotId)) {
+            dropSlot(slotId);
+          }
+        }
+      }
+      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,
+    setRowLocator: (ownerId, locate) => {
+      locatorByOwner.set(ownerId, locate);
+    },
+    dropRowLocator: (ownerId) => {
+      locatorByOwner.delete(ownerId);
+    },
+    // Where the row named by that id sits, asked of whoever holds it.
+    locateRow: (id) => {
+      for (const locate of locatorByOwner.values()) {
+        const index = locate(id);
+        if (index !== null) {
+          return index;
+        }
+      }
+      return null;
+    },
+    // The place the owner's rows start at — read from a signal, so that the
+    // owner is rendered again when it moves (see the top of this file). 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) => {
+      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 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;
+      }
+      owner = { slotId, rowCount, placeSignal: signal(0) };
+      ownerById.set(ownerId, owner);
+      refreshPlaces();
+      return owner.placeSignal.value;
+    },
+    // The owner stands for no row of the collection: it was filtered out by a
+    // search, or it is gone.
+    drop: (ownerId) => {
+      const owner = ownerById.get(ownerId);
+      if (!owner) {
+        return;
+      }
+      ownerById.delete(ownerId);
+      removeFromSlot(owner.slotId, ownerId);
+      windowByOwner.delete(ownerId);
+      if (placesStale) {
+        return;
+      }
+      placesStale = true;
+      queueMicrotask(() => {
+        if (placesStale) {
+          refreshPlaces();
+        }
+      });
+    },
+
+    // ---- the rows drawn ----
+
+    // A run says which of its rows it draws. The others stand: rows above the
+    // window are above every row drawn, whether or not any of the drawn ones
+    // mounts (see refreshFirst).
+    declareWindow: (ownerId, from, to) => {
+      const window = windowByOwner.get(ownerId);
+      if (window && window.from === from && window.to === to) {
+        return;
+      }
+      windowByOwner.set(ownerId, { from, to });
+      markStale(UNGROUPED);
+    },
+    // A row says what it is, where it renders: its place, the group it is
+    // in, and its data — from which follows whether it mounts at all
+    // (filtered out), whether it shows (hidden keeps the room, not the
+    // content), and whether it is an item (a group wrapper, a skeleton, are
+    // rows of the list but items of nobody). Said in the name of the
+    // component, not of the item id: two components may stand for one item for
+    // a moment, one leaving as the other arrives.
+    draw: (rowId, { ownerId, place, groupId, data }) => {
+      const mounted = !data.filtered;
+      const visible = mounted && !data.hidden;
+      const item = !data.skeleton && data.role !== "presentation";
+      let row = rowById.get(rowId);
+      if (row) {
+        if (
+          row.mounted &&
+          (row.place !== place || row.groupId !== groupId || !mounted)
+        ) {
+          leaveFirst(row);
+        }
+        row.ownerId = ownerId;
+        row.place = place;
+        row.groupId = groupId;
+        row.data = data;
+        row.mounted = mounted;
+        row.visible = visible;
+        row.item = item;
+      } else {
+        row = { ownerId, place, groupId, data, mounted, visible, item };
+        rowById.set(rowId, row);
+      }
+      if (mounted) {
+        const firstSignal = firstSignalOf(scopeOf(groupId));
+        const first = firstSignal.peek();
+        if (first === -1 || place < first) {
+          firstSignal.value = place;
+        }
+      }
+      notify();
+    },
+    // The row is gone. A declared row is its own owner and gives its place
+    // back with it; a run's row leaves the run's places alone.
+    erase: (rowId) => {
+      const row = rowById.get(rowId);
+      if (!row) {
+        return;
+      }
+      rowById.delete(rowId);
+      if (row.mounted) {
+        leaveFirst(row);
+      }
+      if (row.ownerId === rowId) {
+        listRows.drop(rowId);
+      }
+      notify();
+    },
+    // Whether nothing of the list stands above this row: in its group, no
+    // other row of the group mounts before it; outside groups, no row mounts
+    // before it and no run has rows above its window before it. Answered from
+    // a signal, so a row rendered from a kept vnode is rendered again when the
+    // row before it leaves or comes back.
+    isFirst: (rowId) => {
+      const row = rowById.get(rowId);
+      const scope = scopeOf(row.groupId);
+      if (staleScopes.has(scope)) {
+        refreshFirst(scope);
+      }
+      return firstSignalOf(scope).value === row.place;
+    },
+    // What a group knows about its rows: how many, and how many of them the
+    // search left out (see ListItemGroup).
+    group: (groupId) => groupOf(groupId),
+    dropGroup: (groupId) => {
+      groupById.delete(groupId);
+      staleScopes.delete(groupId);
+    },
+    // Written when a frame's rows have settled (see notify); the value to act
+    // on is peeked from wherever the change is heard.
+    flushSync: () => {
+      if (!notifyScheduled) {
+        return;
+      }
+      notifyScheduled = false;
+      runNotify();
+    },
   };
+  return listRows;
 };
-
-const ListItemHeaderOrFooterResolver = props => {
-  const Next = useNextResolver();
-  if (props.header) {
-    return renderResolver(ListItemHeader, props);
+const sameSlotIds = (left, right) => {
+  if (left.length !== right.length) {
+    return false;
   }
-  if (props.footer) {
-    return renderResolver(ListItemFooter, props);
+  let index = 0;
+  while (index < left.length) {
+    if (left[index] !== right[index]) {
+      return false;
+    }
+    index++;
   }
-  return jsx(Next, {
-    ...props
-  });
+  return true;
 };
-const ListItemHeader = props => {
-  const Next = useNextResolver();
-  const {
-    ref
-  } = props;
-  useDisplayedLayoutEffect(ref, headerEl => {
-    const listContainerEl = headerEl.closest(".navi_list_container");
-    const rect = headerEl.getBoundingClientRect();
-    listContainerEl.style.setProperty("--list-header-height", `${rect.height}px`);
-    listContainerEl.style.setProperty("--list-header-width", `${rect.width}px`);
-  }, []);
-  return jsx(Next, {
-    ...props,
-    header: undefined,
-    role: "presentation",
-    baseClassName: "navi_list_item_header"
-  });
-};
-const ListItemFooter = props => {
-  const Next = useNextResolver();
-  const {
-    ref
-  } = props;
-  useDisplayedLayoutEffect(ref, footerEl => {
-    const listContainerEl = footerEl.closest(".navi_list_container");
-    const rect = footerEl.getBoundingClientRect();
-    listContainerEl.style.setProperty("--list-footer-height", `${rect.height}px`);
-    listContainerEl.style.setProperty("--list-footer-width", `${rect.width}px`);
-  }, []);
-  return jsx(Next, {
-    ...props,
-    footer: undefined,
-    role: "presentation",
-    baseClassName: "navi_list_item_footer"
-  });
+
+// Rows in place order; a row with no place (a declared row filtered out) last.
+const compareRowPlaces = (left, right) => {
+  if (left.place === undefined) {
+    return right.place === undefined ? 0 : 1;
+  }
+  if (right.place === undefined) {
+    return -1;
+  }
+  return left.place - right.place;
 };
 
 // What a row may say it is waiting on, all of them about the row as a thing
@@ -67283,8 +67497,10 @@ const applySearchHighlight = (el, highlight) => {
 };
 
 installImportMetaCssBuild(import.meta);
-const ListItemTrackerContext = createContext(null);
-const GroupItemTrackerContext = createContext(null);
+const ListRowsContext = createContext(null);
+// The group a row is declared in, by id (see ListItemGroup): what its count
+// and its separator are scoped to.
+const ListGroupContext = createContext(undefined);
 const PendingScrollRefContext = createContext(null);
 // Controls how List.Item behaves when match=false (set via List searchNoMatchMode prop):
 //   "remove"              — remove from DOM (default)
@@ -67323,20 +67539,15 @@ const SeparatorContext = createContext(null);
 // Set by <List itemTransition>: each row then gets a view-transition-name of
 // its own, so a change wrapped in a view transition animates row by row.
 const ItemTransitionContext = createContext(false);
-// What the list knows about the collection as a whole: how many rows it has,
-// which of them it actually holds, and where each child's rows start. Filled in
-// by the children as they render (see createListVirtual), read by everything
-// that must reserve room for what is not rendered.
-const ListVirtualContext = createContext(null);
 // Set around each row a run of items renders (see ListItems): which row of the
-// collection it is, and where it stands among the rows the list holds. Carried
-// by context rather than injected into whatever vnode renderItem returned, so
-// that returning a component of one's own — instead of a bare <List.Item> —
-// works the same way.
+// collection it is, where it stands among the rows the list holds, and which
+// run it belongs to. Carried by context rather than injected into whatever
+// vnode renderItem returned, so 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, 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.
+// to move, and the row's to follow — see list_rows.js.
 const ListSlotContext = createContext(null);
 const css$x = /* css */`@layer navi {
   .navi_list_container {
@@ -67827,7 +68038,7 @@ const ListUI = props => {
     overflow,
     overflowX,
     overflowY,
-    virtual,
+    listRows,
     ...rest
   } = props;
   const scrollBoxPaddingProps = {};
@@ -67896,16 +68107,19 @@ const ListUI = props => {
       observer.disconnect();
     };
   }, [lockSize]);
-  const tracker = useItemTracker({
-    onChange: () => {
-      onListVisibleItemsChange?.(tracker.visibleItemsSignal.peek());
-    }
+  listRows.onChange = () => {
+    onListVisibleItemsChange?.(listRows.visibleItemsSignal.peek());
+  };
+  // Code in a layout effect of the list reads the rows as they stand after
+  // the commit; the rows settle on a microtask, which preact does not wait for.
+  useLayoutEffect(() => {
+    listRows.flushSync();
   });
   // What the runs ask for and stand for: the steady budget, whatever the
   // window of the first paint draws — a run asking for the rows of the first
   // picture and then for the rest is two round trips for one opening.
-  virtual.renderBudget = renderBudgetAfterPaint;
-  virtual.scrolled = scrolled ?? defaultScrolled;
+  listRows.renderBudget = renderBudgetAfterPaint;
+  listRows.scrolled = scrolled ?? defaultScrolled;
   const {
     virtualItemSizeSignal,
     renderWindow,
@@ -67914,11 +68128,10 @@ const ListUI = props => {
     captureAnchor
   } = useListScrollSync({
     ref,
-    tracker,
+    listRows,
     renderBudget,
     renderBudgetSteady: renderBudgetAfterPaint,
     virtualItemSize,
-    virtual,
     scrolled,
     defaultScrolled,
     onScrolledChange,
@@ -67937,28 +68150,28 @@ const ListUI = props => {
     if (props.renderBudget === undefined || renderBudgetWarnedRef.current) {
       return;
     }
-    if (virtual.hasRuns() || tracker.itemsSignal.peek().length === 0) {
+    if (listRows.hasRuns() || listRows.itemsSignal.peek().length === 0) {
       return;
     }
     renderBudgetWarnedRef.current = true;
     console.warn(`List: renderBudget=${renderBudget} has no effect here. The render window frames the rows a run draws (<List.Items itemsAction>); items declared one by one (<List.Item>) are all rendered. Move the items to <List.Items> to cap the number of DOM nodes, or drop the prop.`);
   });
-  virtual.captureAnchor = captureAnchor;
-  virtual.virtualItemSizeSignal = virtualItemSizeSignal;
-  virtual.horizontal = Boolean(horizontal);
-  virtual.renderSkeleton = renderSkeleton;
+  listRows.captureAnchor = captureAnchor;
+  listRows.virtualItemSizeSignal = virtualItemSizeSignal;
+  listRows.horizontal = Boolean(horizontal);
+  listRows.renderSkeleton = renderSkeleton;
 
   // A row is addressed by id from outside (--navi-scroll, --navi-select): the
-  // ones drawn have registered themselves with the tracker, and the ones a run
+  // ones drawn have said so (see list_rows.js), and the ones a run
   // holds without drawing are known only to that run (see List.Items' row
   // locator). Both answer here, so a row is reachable whether or not the
   // window happens to frame it.
   const getItemById = itemId => {
-    const itemDrawn = tracker.itemsSignal.peek().find(item => item.id === itemId);
+    const itemDrawn = listRows.itemsSignal.peek().find(item => item.id === itemId);
     if (itemDrawn) {
       return itemDrawn;
     }
-    const rowIndex = virtual.locateRow(itemId);
+    const rowIndex = listRows.locateRow(itemId);
     if (rowIndex === null) {
       return undefined;
     }
@@ -67967,13 +68180,13 @@ const ListUI = props => {
       index: rowIndex
     };
   };
-  const noMatchCount = tracker.noMatchCountSignal.value;
+  const noMatchCount = listRows.noMatchCountSignal.value;
   // What the list stands for, which is not always what it holds: a run saying
   // it covers 60 rows is not an empty list while it waits for the first of
   // them (see List.Items).
   // eslint-disable-next-line no-unused-expressions
-  virtual.pagesSignal.value;
-  const itemCount = tracker.countSignal.value || virtual.totalSignal.value;
+  listRows.pagesSignal.value;
+  const itemCount = listRows.countSignal.value || listRows.totalSignal.value;
   const allNoMatch = noMatchCount > 0 && noMatchCount === itemCount;
   const searching = Boolean(searchText);
   const fallbackDisabled = fallback !== undefined && !fallback;
@@ -68071,7 +68284,7 @@ const ListUI = props => {
     expand: expand,
     "navi-nothing-to-display": nothingToDisplay ? "" : undefined,
     "navi-loading": loading ? "" : undefined,
-    "navi-refreshing": virtual.refreshingSignal.value ? "" : undefined,
+    "navi-refreshing": listRows.refreshingSignal.value ? "" : undefined,
     "navi-error": error ? "" : undefined,
     styleCSSVars: LIST_STYLE_CSS_VARS,
     pseudoClasses: LIST_PSEUDO_CLASSES,
@@ -68107,9 +68320,8 @@ const ListUI = props => {
       spacing: spacing,
       columns: columns,
       itemColumns: itemColumns,
-      tracker: tracker,
+      listRows: listRows,
       renderWindow: renderWindow,
-      virtual: virtual,
       pendingScrollRef: pendingScrollRef,
       overflow: overflow,
       overflowX: overflowX,
@@ -68130,11 +68342,11 @@ const ListFirstResolver = props => {
   props.ref = props.ref || refDefault;
   const idDefault = useId();
   props.id = props.id || idDefault;
-  const virtualRef = useRef(null);
-  if (!virtualRef.current) {
-    virtualRef.current = createListVirtual();
+  const listRowsRef = useRef(null);
+  if (!listRowsRef.current) {
+    listRowsRef.current = createListRows();
   }
-  props.virtual = virtualRef.current;
+  props.listRows = listRowsRef.current;
   const parallelGuard = useParallelGuard(props.parallelGuard ?? PARALLEL_GUARD_DEFAULT);
   return jsx(ParallelGuardContext.Provider, {
     value: parallelGuard,
@@ -68160,9 +68372,8 @@ const ListContent = ({
   spacing,
   columns,
   itemColumns,
-  tracker,
+  listRows,
   renderWindow,
-  virtual,
   pendingScrollRef,
   overflow,
   overflowX,
@@ -68216,9 +68427,8 @@ const ListContent = ({
           columns: columns,
           itemColumns: itemColumns,
           ...listProps,
-          tracker: tracker,
+          listRows: listRows,
           renderWindow: renderWindow,
-          virtual: virtual,
           children: children
         })
       })
@@ -68242,11 +68452,10 @@ const LIST_STYLE_CSS_VARS = {
 const LIST_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-void", ":-navi-expanded"];
 const useListScrollSync = ({
   ref,
-  tracker,
+  listRows,
   renderBudget,
   renderBudgetSteady,
   virtualItemSize,
-  virtual,
   scrolled,
   defaultScrolled,
   onScrolledChange,
@@ -68256,7 +68465,7 @@ const useListScrollSync = ({
 }) => {
   const debugScroll = useDebugScroll();
   const virtualItemSizeSignal = useVirtualItemSizeSignal(ref, virtualItemSize, horizontal, {
-    virtual,
+    listRows,
     renderBudget,
     scrolledWanted: scrolled ?? defaultScrolled
   });
@@ -68281,7 +68490,7 @@ const useListScrollSync = ({
     ref,
     scrollerElResolved,
     renderBudget,
-    totalSignal: virtual.totalSignal,
+    totalSignal: listRows.totalSignal,
     virtualItemSizeSignal,
     horizontal
   });
@@ -68306,7 +68515,7 @@ const useListScrollSync = ({
     anchorRef.current = captureScrollAnchor({
       scrollerEl: getScroller(),
       listEl: getListEl(),
-      items: tracker.visibleItemsSignal.peek(),
+      items: listRows.visibleItemsSignal.peek(),
       horizontal
     });
   };
@@ -68338,7 +68547,7 @@ const useListScrollSync = ({
       start,
       end
     } = renderWindowRef.current;
-    const total = virtual.totalSignal.peek();
+    const total = listRows.totalSignal.peek();
     let framedStart = start;
     let framedEnd = start + renderBudget;
     if (total > 0 && framedEnd > total) {
@@ -68382,19 +68591,19 @@ const useListScrollSync = ({
   // jumped.
   const holdWindow = () => {
     if (startPlaceRef.current.userTookOver) {
-      virtual.holdPending = false;
+      listRows.holdPending = false;
       return;
     }
     // Held somewhere it has not reached yet: what the window frames right now
     // is not what it will frame, so nothing should be fetched for it.
-    virtual.holdPending = scrolledWanted !== "start" && scrolledWanted !== undefined;
-    const total = virtual.totalSignal.peek();
+    listRows.holdPending = scrolledWanted !== "start" && scrolledWanted !== undefined;
+    const total = listRows.totalSignal.peek();
     if (total <= renderBudget) {
       // The whole collection is what the list draws: wherever in it the list is
       // held, the window is already its place. Nowhere to move to means nothing
       // to wait for — a hold left standing here is a list that never asks for
       // anything again.
-      virtual.holdPending = false;
+      listRows.holdPending = false;
       return;
     }
     const half = Math.floor(renderBudget / 2);
@@ -68404,7 +68613,7 @@ const useListScrollSync = ({
     } else if (typeof scrolledWanted === "number") {
       wantedStart = scrolledWanted - half;
     } else if (scrolledWanted && scrolledWanted.id !== undefined) {
-      const rowIndex = virtual.locateRow(scrolledWanted.id);
+      const rowIndex = listRows.locateRow(scrolledWanted.id);
       if (rowIndex !== null) {
         wantedStart = rowIndex - half;
       } else if (typeof scrolledWanted.index === "number") {
@@ -68431,14 +68640,14 @@ const useListScrollSync = ({
       end
     } = renderWindowRef.current;
     if (wantedStart === start && end - start === renderBudget) {
-      virtual.holdPending = false;
+      listRows.holdPending = false;
       return;
     }
     renderWindowRef.current = {
       start: wantedStart,
       end: wantedStart + renderBudget
     };
-    virtual.holdPending = false;
+    listRows.holdPending = false;
   };
   const pendingScrollRef = useRef();
   const scrollToItem = (item, {
@@ -68449,7 +68658,7 @@ const useListScrollSync = ({
     if (!item) {
       return;
     }
-    const items = tracker.itemsSignal.peek();
+    const items = listRows.itemsSignal.peek();
     const itemCount = items.length;
     if (itemCount === 0) {
       return;
@@ -68578,7 +68787,7 @@ const useListScrollSync = ({
       return;
     }
     hasBeenDisplayedRef.current = true;
-    const items = tracker.itemsSignal.peek();
+    const items = listRows.itemsSignal.peek();
     const firstSelected = items.find(i => {
       if (i.selected) {
         return true;
@@ -68663,7 +68872,7 @@ const useListScrollSync = ({
           scrollValues: savedScroll,
           scrollerEl: listScrollContainerEl,
           listEl: getListEl(),
-          tracker,
+          listRows,
           virtualItemSizeSignal,
           renderWindowRef,
           horizontal
@@ -68680,7 +68889,7 @@ const useListScrollSync = ({
       });
       return undefined;
     }
-    const visibleItems = tracker.visibleItemsSignal.peek();
+    const visibleItems = listRows.visibleItemsSignal.peek();
     const topItems = visibleItems.slice(0, renderBudget);
     const topMatchScoresKey = topItems.map(i => `${i.id}:${i.matchInfo?.matchScore ?? ""}`).join(",");
     const currentTopMatchScore = topMatchScoresKeyRef.current;
@@ -68718,7 +68927,7 @@ const useListScrollSync = ({
     if (scrolledWanted === "start" || scrolledWanted === undefined || startPlaceRef.current.userTookOver || !ref.current) {
       return;
     }
-    if (virtual.totalSignal.peek() === 0 || virtualItemSizeSignal.peek() === 0) {
+    if (listRows.totalSignal.peek() === 0 || virtualItemSizeSignal.peek() === 0) {
       return;
     }
     // Coming back to a named row: it has to be on screen to be put back where
@@ -68730,13 +68939,13 @@ const useListScrollSync = ({
       // Only whoever holds the rows can say where that one sits: the list
       // itself knows the rows it has drawn, and this one is precisely the one
       // it has not drawn yet.
-      const rowIndex = virtual.locateRow(scrolledWanted.id);
+      const rowIndex = listRows.locateRow(scrolledWanted.id);
       if (rowIndex === null) {
         // Not there yet. Where it stood is enough to be roughly right in the
         // meantime — the scrollbar lands near its final place instead of at the
         // top, and the exact position is taken once the row itself can be
         // measured.
-        if (virtual.pagesSignal.peek() === 0) {
+        if (listRows.pagesSignal.peek() === 0) {
           if (typeof scrolledWanted.index === "number") {
             const rowPosition = scrolledWanted.index * virtualItemSizeSignal.peek();
             anchorRef.current = null;
@@ -68853,7 +69062,7 @@ const useListScrollSync = ({
     const position = captureScrollAnchor({
       scrollerEl: getScroller(),
       listEl: getListEl(),
-      items: tracker.visibleItemsSignal.peek(),
+      items: listRows.visibleItemsSignal.peek(),
       horizontal
     });
     if (!position) {
@@ -68941,7 +69150,7 @@ const useListScrollSync = ({
       anchorRef.current = null;
       return;
     }
-    const items = tracker.visibleItemsSignal.peek();
+    const items = listRows.visibleItemsSignal.peek();
     const itemNow = items.find(i => i.id === anchor.id);
     if (!itemNow) {
       anchorRef.current = null;
@@ -68963,7 +69172,7 @@ const useListScrollSync = ({
       const windowSize = end - start;
       const startShifted = start + indexShift;
       let startWanted = startShifted < 0 ? 0 : startShifted;
-      const total = virtual.totalSignal.peek();
+      const total = listRows.totalSignal.peek();
       // Same normalization as the scroll listener: a window running past the
       // last row slides back instead of framing fewer rows than its budget
       // allows — every row that fits in it must stay rendered.
@@ -69021,7 +69230,7 @@ const useListScrollSync = ({
   const windowSlidRef = useRef(false);
   const budgetWarnedRef = useRef(false);
   const evaluateWindow = reason => {
-    const total = virtual.totalSignal.peek();
+    const total = listRows.totalSignal.peek();
     if (total <= renderBudget) {
       return;
     }
@@ -69043,7 +69252,7 @@ const useListScrollSync = ({
         },
         scrollerEl,
         listEl,
-        tracker,
+        listRows,
         virtualItemSizeSignal,
         renderWindowRef,
         horizontal
@@ -69725,12 +69934,12 @@ const getScrollInfo = ({
   scrollValues,
   scrollerEl,
   listEl,
-  tracker,
+  listRows,
   virtualItemSizeSignal,
   renderWindowRef,
   horizontal
 }) => {
-  const items = tracker.itemsSignal.peek();
+  const items = listRows.itemsSignal.peek();
   const viewportRect = getScrollerViewportRect(scrollerEl);
   const listRect = listEl.getBoundingClientRect();
   let hitEl = null;
@@ -69855,7 +70064,7 @@ const measureItemSize = (listEl, horizontal) => {
   };
 };
 const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
-  virtual,
+  listRows,
   renderBudget,
   scrolledWanted
 }) => {
@@ -69915,7 +70124,7 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
   // size is for, and a list drawing every row it has would pay a layout on
   // each of its renders for a number nothing reads.
   const sizeAlreadyKnown = virtualSizeSignal.peek() !== 0;
-  const rowsHeldOffScreen = virtual.totalSignal.peek() > renderBudget;
+  const rowsHeldOffScreen = listRows.totalSignal.peek() > renderBudget;
   if (!virtualItemSizeProp && sizeAlreadyKnown && rowsHeldOffScreen && ref.current) {
     const listEl = ref.current.querySelector(".navi_list");
     const measure = listEl ? measureItemSize(listEl, horizontal) : null;
@@ -69931,7 +70140,7 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
     // screen, and a list held somewhere (placeWhereHeld) before it knows where
     // that is. A list drawing every row it has, opening at its start, would
     // pay a layout in every commit for a number nobody reads.
-    const sizeRead = virtual.totalSignal.peek() > renderBudget || scrolledWanted !== undefined && scrolledWanted !== "start";
+    const sizeRead = listRows.totalSignal.peek() > renderBudget || scrolledWanted !== undefined && scrolledWanted !== "start";
     if (!sizeRead) {
       return undefined;
     }
@@ -69983,9 +70192,8 @@ const useVirtualItemSizeSignal = (ref, virtualItemSizeProp = 0, horizontal, {
 // item after each commit and writes to the signal, causing only the fillers to
 // re-render.
 const UnorderedList = ({
-  tracker,
+  listRows,
   renderWindow,
-  virtual,
   fallback,
   fallbackShown,
   searchFallback,
@@ -70035,17 +70243,14 @@ const UnorderedList = ({
           value: separator ?? null,
           children: jsx(ItemTransitionContext.Provider, {
             value: Boolean(itemTransition),
-            children: jsx(ListItemTrackerContext.Provider, {
-              value: tracker,
-              children: jsx(ListVirtualContext.Provider, {
-                value: virtual,
-                children: jsx(ListRowContext.Provider, {
-                  value: null,
-                  children: jsx(ListItemColumnsContext.Provider, {
-                    value: columns ? null : itemColumns || null,
-                    children: jsx(ListDeclaredChildren, {
-                      children: children
-                    })
+            children: jsx(ListRowsContext.Provider, {
+              value: listRows,
+              children: jsx(ListRowContext.Provider, {
+                value: null,
+                children: jsx(ListItemColumnsContext.Provider, {
+                  value: columns ? null : itemColumns || null,
+                  children: jsx(ListDeclaredChildren, {
+                    children: children
                   })
                 })
               })
@@ -70096,8 +70301,8 @@ const VirtualFiller = ({
   edge,
   itemCount
 }) => {
-  const virtual = useContext(ListVirtualContext);
-  const sizeToFill = itemCount * virtual.virtualItemSizeSignal.value;
+  const listRows = useContext(ListRowsContext);
+  const sizeToFill = itemCount * listRows.virtualItemSizeSignal.value;
   if (!sizeToFill) {
     return null;
   }
@@ -70161,22 +70366,12 @@ const ListItemRowResolver = props => {
       ...props
     });
   }
-  // eslint-disable-next-line no-unused-vars
-  const {
-    id,
-    index,
-    item,
-    rowMinHeight,
-    rowMinWidth,
-    ...rowProps
-  } = row;
   return jsx(Next, {
-    ...rowProps,
     ...props,
     id: props.id || row.id,
     index: row.index,
-    minHeight: props.minHeight === undefined ? rowMinHeight : props.minHeight,
-    minWidth: props.minWidth === undefined ? rowMinWidth : props.minWidth
+    minHeight: props.minHeight === undefined ? row.rowMinHeight : props.minHeight,
+    minWidth: props.minWidth === undefined ? row.rowMinWidth : props.minWidth
   });
 };
 const ListItemPresentationResolver = props => {
@@ -70250,12 +70445,11 @@ const ListItemUI = props => {
   }
   const idDefault = useId();
   props.id = props.id || idDefault;
-  const tracker = useContext(ListItemTrackerContext);
-  const virtual = useContext(ListVirtualContext);
+  const listRows = useContext(ListRowsContext);
+  const groupId = useContext(ListGroupContext);
   const searchNoMatchMode = useContext(SearchNoMatchModeContext);
   // The run this row belongs to, when it comes from one (see ListItems): it
-  // registered the row, decided it is inside the render window, and placed its
-  // separator. All that is left here is to draw it.
+  // gave the row its place and decided it is inside the render window.
   const row = useContext(ListRowContext);
   const slotId = useContext(ListSlotContext);
   // There is no standalone match/matchScore/highlight prop — participation
@@ -70263,7 +70457,7 @@ const ListItemUI = props => {
   // (e.g. useSearchText's getItemMatchInfo(item): { match, matchScore,
   // matchRanges }), so there is exactly one way to wire it up.
   const matchInfo = props.matchInfo;
-  // Expose match on the tracked item: the tracker counts non-matching items via
+  // Expose match on the row: the list counts non-matching rows via
   // `item.match === false` (drives noMatchCount → allNoMatch → the searchFallback
   // / hide-when-empty behavior). Without this a matchInfo-based search would
   // filter items out but never register them as "no match".
@@ -70289,68 +70483,47 @@ const ListItemUI = props => {
   // and the one leaving must give back its own place, not the newcomer's.
   if (!row) {
     if (props.filtered) {
-      virtual.drop(idDefault);
+      listRows.drop(idDefault);
     } else {
-      props.index = virtual.take(idDefault, 1, slotId);
+      props.index = listRows.take(idDefault, 1, slotId);
     }
   }
+  // Every row that renders says so, whether it was declared one by one or
+  // drawn by a run: what it is (its value, whether it is selected) and whether
+  // it mounts at all are written where it renders, in one place.
+  listRows.draw(idDefault, {
+    ownerId: row ? row.ownerId : idDefault,
+    place: props.index,
+    groupId,
+    data: props
+  });
   useLayoutEffect(() => {
     return () => {
-      virtual.drop(idDefault);
+      listRows.erase(idDefault);
     };
   }, []);
-  // Every row that is drawn registers itself, whether it was declared one by
-  // one or drawn by a run: what it says about itself (its value, whether it is
-  // selected) is written where it is drawn, in one place.
-  const item = props;
-  tracker.useTrackItem(item);
-  const groupTracker = useContext(GroupItemTrackerContext);
-  const groupVisibleIndex = groupTracker ? groupTracker.useTrackItem(item) : null;
   const separator = useContext(SeparatorContext);
   if (props.filtered) {
     return null;
   }
-  // html-hidden items: excluded from virtual scroll accounting but always in DOM
-  if (props.hidden) {
-    // Its separator stays too, and stays invisible with it: the point of
-    // keeping a row that matches nothing is that nothing moves, and a divider
-    // that leaves takes its own height away.
-    if (!separator || props.index === 0) {
-      return jsx(ListItemReal, {
-        ...props
-      });
-    }
-    return jsxs(Fragment, {
-      children: [cloneElement(resolveSeparatorVnode(separator, props.index - 1), {
-        style: VISIBILITY_HIDDEN_STYLE
-      }), jsx(ListItemReal, {
-        ...props
-      })]
-    });
-  }
-  if (row) {
-    return jsx(ListItemReal, {
-      ...props
-    });
-  }
-  const index = props.index;
   const listItemVnode = jsx(ListItemReal, {
     ...props
   });
-  // "Am I the first visible item?" is answered by the place the list handed
-  // out (virtual.take above), not by the tracker's visibleIndex: during a
-  // reorder render pass (items resorted by search score) the other items still
-  // carry stale keyToExplicitOrder values, the binary search reads them, no
-  // item comes out at 0 and a spurious separator appears at the top. Inside a
-  // group, each group has its own tracker and its items do not reorder, so
-  // groupVisibleIndex is reliable.
-  const isFirstInList = groupVisibleIndex === null ? index === 0 : groupVisibleIndex === 0;
-  if (!separator || isFirstInList) {
+  // The separator a row wears is the one at the gap above it: none when
+  // nothing of the list stands above it (see list_rows.js).
+  if (!separator || listRows.isFirst(idDefault)) {
     return listItemVnode;
   }
-  // separatorIndex is only used as the function-form argument (gap index)
-  const separatorIndex = groupVisibleIndex === null ? index : groupVisibleIndex;
-  const separatorVnode = resolveSeparatorVnode(separator, separatorIndex - 1);
+  // The gap index, only used as the function-form argument.
+  let separatorVnode = resolveSeparatorVnode(separator, props.index - 1);
+  if (props.hidden) {
+    // A row kept in the DOM but hidden keeps its separator, hidden with it:
+    // the point of keeping a row that matches nothing is that nothing moves,
+    // and a divider that leaves takes its own height away.
+    separatorVnode = cloneElement(separatorVnode, {
+      style: VISIBILITY_HIDDEN_STYLE
+    });
+  }
   return jsxs(Fragment, {
     children: [separatorVnode, listItemVnode]
   });
@@ -70671,346 +70844,45 @@ const ListItem = /*#__PURE__*/createComponentResolver([ListItemFirstResolver, Li
   pure: true
 });
 
-// Everything the list knows about the collection while its children are being
-// rendered: how many rows it has in total, which of them are actually held, and
-// where each child's rows start.
-//
-// A child knows how many rows it stands for but not what was declared before
-// it, and it cannot deduce that from when it renders: a render is free to skip
-// it. A child that draws from signals and whose props are all referentially
-// === the previous ones does not render again (@preact/signals installs a
-// shouldComponentUpdate that says so), which is what any child nobody rebuilt
-// this frame is — and children numbered as they render would then slide up
-// into the place of the one that was skipped.
+// The walk that gives the list's children their places: a slot for each of
+// them, declared to the list's rows 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.
 //
-// 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 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:
-  // rows arriving outside the render window change nothing it can see (nothing
-  // registers, nothing is drawn), and yet they are what it may have been
-  // waiting for — the row it was told to open on, for one.
-  const pagesSignal = signal(0);
-  // How many runs are re-reading rows they already show. The list wears it as
-  // an attribute: what is drawn is from before, and the app may want to say so
-  // without taking anything away.
-  const refreshingSignal = signal(0);
-  // 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();
-  // 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();
-  // 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;
-  // 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 slotId of slotIds) {
-        rankBySlot.set(slotId, slotWalk.length);
-        slotWalk.push(slotId);
-        visit(slotId);
-      }
-    };
-    visit(null);
-  };
-  // 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;
-    let index = 0;
-    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 = index;
-  };
-  const addToSlot = (slotId, ownerId) => {
-    const ownerIds = ownerIdsBySlot.get(slotId);
-    if (ownerIds) {
-      ownerIds.push(ownerId);
-    } else {
-      ownerIdsBySlot.set(slotId, [ownerId]);
-    }
-    warnIfEveryRowInOneSlot(slotId);
-  };
-  // Rows that all stand in the same slot keep the order they first mounted in:
-  // the walk is over the children the list is given, and a component holding
-  // them is one child however many rows it renders. Everything about a place
-  // then stops following what the caller writes — a search reordering the rows
-  // moves nothing. Said once, and only for the shape that can be nothing else:
-  // the list's whole content is one child, and several rows came out of it.
-  let everyRowInOneSlotWarned = false;
-  const warnIfEveryRowInOneSlot = slotId => {
-    if (everyRowInOneSlotWarned) {
-      return;
-    }
-    const rootSlotIds = slotIdsByParent.get(null);
-    if (!rootSlotIds || rootSlotIds.length !== 1 || rootSlotIds[0] !== slotId) {
-      return;
-    }
-    if (ownerIdsBySlot.get(slotId).length < 2) {
-      return;
-    }
-    everyRowInOneSlotWarned = true;
-    console.warn(`List: every row stands in the same slot, so they keep the order they first rendered in — reordering them (a search, a sort) will not move them. The list's rows must be its own children: give it the rows (or a <List.Items>), not a component rendering them.`);
-  };
-  const removeFromSlot = (slotId, ownerId) => {
-    const ownerIds = ownerIdsBySlot.get(slotId);
-    if (!ownerIds) {
-      return;
-    }
-    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);
-      }
-    }
-  };
-  const virtual = {
-    totalSignal,
-    pagesSignal,
-    refreshingSignal,
-    // What a run needs to know about the list it lives in: how many rows the
-    // list is willing to draw at once, which end it opens on, and how much
-    // room one row is given — a row whose content has not arrived must take
-    // exactly that, or the rows drawn would not reach where the list says they
-    // are.
-    renderBudget: 0,
-    scrolled: "start",
-    // The list is on its way somewhere: what the window frames is not what it
-    // is about to frame, so a run must not fetch for it (see holdWindow).
-    holdPending: false,
-    // Called by a run just before rows land in it: what is on screen must not
-    // move because something arrived above it. Set by the list itself.
-    captureAnchor: () => {},
-    horizontal: false,
-    virtualItemSizeSignal: null,
-    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. Said again on every render of the walk, and heard only when
-    // something moved.
-    declareSlots: (parentSlotId, slotIds) => {
-      const slotIdsPrevious = slotIdsByParent.get(parentSlotId);
-      if (slotIdsPrevious && sameSlotIds(slotIdsPrevious, slotIds)) {
-        return;
-      }
-      if (slotIdsPrevious) {
-        const slotIdSet = new Set(slotIds);
-        for (const slotId of slotIdsPrevious) {
-          if (!slotIdSet.has(slotId)) {
-            dropSlot(slotId);
-          }
-        }
-      }
-      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,
-    setRowLocator: (ownerId, locate) => {
-      locatorByOwner.set(ownerId, locate);
-    },
-    dropRowLocator: ownerId => {
-      locatorByOwner.delete(ownerId);
-    },
-    // Where the row named by that id sits, asked of whoever holds it.
-    locateRow: id => {
-      for (const locate of locatorByOwner.values()) {
-        const index = locate(id);
-        if (index !== null) {
-          return index;
-        }
-      }
-      return null;
-    },
-    // 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) => {
-      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 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;
-      }
-      owner = {
-        slotId,
-        rowCount,
-        placeSignal: signal(0)
-      };
-      ownerById.set(ownerId, owner);
-      refreshPlaces();
-      return owner.placeSignal.value;
-    },
-    // The owner stands for no row of the collection: it was filtered out by a
-    // search, or it is gone.
-    drop: ownerId => {
-      const owner = ownerById.get(ownerId);
-      if (!owner) {
-        return;
-      }
-      ownerById.delete(ownerId);
-      removeFromSlot(owner.slotId, ownerId);
-      if (placesStale) {
-        return;
-      }
-      placesStale = true;
-      queueMicrotask(() => {
-        if (placesStale) {
-          refreshPlaces();
-        }
-      });
-    }
-  };
-  return virtual;
-};
-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.
-//
-// 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 parentSlotId = useContext(ListSlotContext);
-  if (parentSlotId !== null && virtual.slotHasOwner(parentSlotId)) {
-    return children;
-  }
-  const slotIds = [];
-  const declared = [];
-  declareChildren(children, parentSlotId === null ? "" : `${parentSlotId}/`, slotIds, declared);
-  virtual.declareSlots(parentSlotId, slotIds);
-  return jsx(Fragment, {
-    children: declared
-  });
-};
-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));
+// 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 listRows = useContext(ListRowsContext);
+  const parentSlotId = useContext(ListSlotContext);
+  if (parentSlotId !== null && listRows.slotHasOwner(parentSlotId)) {
+    return children;
+  }
+  const slotIds = [];
+  const declared = [];
+  declareChildren(children, parentSlotId === null ? "" : `${parentSlotId}/`, slotIds, declared);
+  listRows.declareSlots(parentSlotId, slotIds);
+  return jsx(Fragment, {
+    children: declared
+  });
+};
+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));
     }
     index++;
   }
@@ -71152,7 +71024,7 @@ const ListItems = ({
   onRequestStateChange
 }) => {
   const ownerId = useId();
-  const virtual = useContext(ListVirtualContext);
+  const listRows = useContext(ListRowsContext);
   const slotId = useContext(ListSlotContext);
   const renderWindow = useContext(RenderWindowContext);
   const separator = useContext(SeparatorContext);
@@ -71164,10 +71036,9 @@ const ListItems = ({
   // row at the same index, in the same refreshing state: everything the
   // function is given.
   const rowVnodesRef = useRef(null);
-  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem || rowVnodesRef.current.separator !== separator) {
+  if (!rowVnodesRef.current || rowVnodesRef.current.renderItem !== renderItem) {
     rowVnodesRef.current = {
       renderItem,
-      separator,
       byItem: new Map()
     };
   }
@@ -71179,7 +71050,7 @@ const ListItems = ({
     memoryBudget,
     onRequestStateChange
   });
-  const renderRowSkeleton = renderSkeleton === undefined ? virtual.renderSkeleton : renderSkeleton;
+  const renderRowSkeleton = renderSkeleton === undefined ? listRows.renderSkeleton : renderSkeleton;
   // A row on its way takes the room the list reserves for it: anything else
   // and the rows drawn stop short of where the scroll says they are. Read
   // where a row is actually missing, and not before: the size settles after
@@ -71191,9 +71062,9 @@ const ListItems = ({
       return skeletonRow;
     }
     skeletonRow = {};
-    const virtualItemSize = virtual.virtualItemSizeSignal.value;
+    const virtualItemSize = listRows.virtualItemSizeSignal.value;
     if (virtualItemSize) {
-      if (virtual.horizontal) {
+      if (listRows.horizontal) {
         skeletonRow.rowMinWidth = `${virtualItemSize}px`;
       } else {
         skeletonRow.rowMinHeight = `${virtualItemSize}px`;
@@ -71201,7 +71072,7 @@ const ListItems = ({
     }
     return skeletonRow;
   };
-  const runStart = virtual.take(ownerId, store.rowCount, slotId);
+  const runStart = listRows.take(ownerId, store.rowCount, slotId);
   const runEnd = runStart + store.rowCount;
   // The two ways to count the same row. The list numbers its rows from its own
   // first one, whatever draws it; the store numbers the collection's, straight
@@ -71216,6 +71087,7 @@ const ListItems = ({
   const windowFrom = renderWindow.start > runStart ? renderWindow.start : runStart;
   const windowTo = renderWindow.end < runEnd ? renderWindow.end : runEnd;
   store.forget(rankOf(windowFrom), rankOf(windowTo));
+  listRows.declareWindow(ownerId, windowFrom, windowTo);
 
   // The row answers to its own id when the item carries one — that is what
   // addresses it from outside (--navi-select, --navi-scroll, startAt) — and
@@ -71225,7 +71097,7 @@ const ListItems = ({
   // Where a row named from outside actually sits. Only the run can answer:
   // rows it holds but does not draw are nowhere else — a list only knows the
   // rows it has drawn (they register themselves, see ListItemUI).
-  virtual.setRowLocator(ownerId, id => {
+  listRows.setRowLocator(ownerId, id => {
     let found = null;
     store.eachHeld((item, rank) => {
       const rowIndex = rowOf(rank);
@@ -71237,8 +71109,8 @@ const ListItems = ({
   });
   useLayoutEffect(() => {
     return () => {
-      virtual.dropRowLocator(ownerId);
-      virtual.drop(ownerId);
+      listRows.dropRowLocator(ownerId);
+      listRows.drop(ownerId);
     };
   }, []);
 
@@ -71264,7 +71136,7 @@ const ListItems = ({
   let askStart = missingStart;
   let askEnd = missingEnd;
   if (missingStart !== -1) {
-    const rowsPerPage = pageSize || virtual.renderBudget;
+    const rowsPerPage = pageSize || listRows.renderBudget;
     const holeSize = missingEnd - missingStart + 1;
     if (holeSize < rowsPerPage) {
       // Which way the page grows: away from the rows already held, which is
@@ -71339,13 +71211,9 @@ const ListItems = ({
     }, `${ownerId}_group_${group.key}`));
     group = null;
   };
-  // Which group a row belongs to, or undefined when it belongs to none. Asked
-  // before the row is pushed as well as while pushing it: a row opening a
-  // group is the one row that must not wear a separator (see below).
+  // Which group a row belongs to, or undefined when it belongs to none.
   const groupKeyOf = (item, rowIndex) => groupBy && item !== undefined ? groupBy(item, rowIndex) : undefined;
-  const opensGroup = groupKey => groupKey !== undefined && (!group || group.key !== groupKey);
-  const pushRow = (rowNode, item, rowIndex) => {
-    const groupKey = groupKeyOf(item, rowIndex);
+  const pushRow = (rowNode, item, rowIndex, groupKey) => {
     if (groupKey === undefined) {
       closeGroup();
       rows.push(rowNode);
@@ -71383,7 +71251,7 @@ const ListItems = ({
       rows.push(jsx("li", {
         className: "navi_list_failed_rows",
         style: {
-          "--size-to-fill": `${failedRowCount * virtual.virtualItemSizeSignal.value}px`
+          "--size-to-fill": `${failedRowCount * listRows.virtualItemSizeSignal.value}px`
         },
         children: renderError ? renderError({
           error: store.failure.error,
@@ -71400,78 +71268,70 @@ const ListItems = ({
     }
     const item = getItemAt(rowIndex);
     const key = item === undefined ? `${ownerId}_skeleton_${rowIndex}` : idOf(item, rowIndex);
+    const groupKey = groupKeyOf(item, rowIndex);
+    if (item === undefined) {
+      // A row on its way never reaches ListItemUI (see ListItemSkeletonResolver):
+      // it is stood among the rows that mount, and given its separator, here.
+      let rowVnode;
+      if (renderRowSkeleton === false) {
+        // The row must still take its room: without it the rows below would
+        // climb up and slide back down as the answer arrives.
+        rowVnode = jsx(ListItem, {
+          skeleton: true,
+          style: VISIBILITY_HIDDEN_STYLE
+        });
+      } else if (renderRowSkeleton) {
+        rowVnode = renderRowSkeleton(rowIndex);
+      } else {
+        rowVnode = jsx(ListItem, {
+          skeleton: true
+        });
+      }
+      if (rowVnode) {
+        pushRow(jsx(ListRunSkeletonRow, {
+          row: {
+            id: key,
+            index: rowIndex,
+            ownerId,
+            ...getSkeletonRow()
+          },
+          separator: separator,
+          children: rowVnode
+        }, key), item, rowIndex, groupKey);
+      }
+      rowIndex++;
+      continue;
+    }
     let rowVnode;
     let rowContextValue;
-    let rowKept = null;
-    if (item !== undefined) {
-      const rowVnodeKept = rowVnodesByItem.get(item);
-      if (rowVnodeKept && rowVnodeKept.rowIndex === rowIndex && rowVnodeKept.refreshing === renderItemState.refreshing) {
-        rowVnode = rowVnodeKept.vnode;
-        rowContextValue = rowVnodeKept.rowContextValue;
-        rowKept = rowVnodeKept;
-      } else {
-        rowVnode = renderItem(item, rowIndex, renderItemState);
-        // Kept with the vnode, for the same reason: a context value that is a
-        // fresh object on every render forces every consumer of it to render,
-        // which is the row's own chain — the vnode handed back unchanged would
-        // then buy nothing.
-        rowContextValue = {
-          id: key,
-          index: rowIndex,
-          item
-        };
-        rowKept = {
-          vnode: rowVnode,
-          rowContextValue,
-          rowIndex,
-          refreshing: renderItemState.refreshing,
-          separatorVnode: null
-        };
-        rowVnodesByItem.set(item, rowKept);
-      }
-    } else if (renderRowSkeleton === false) {
-      // The row must still take its room: without it the rows below would
-      // climb up and slide back down as the answer arrives.
-      rowVnode = jsx(ListItem, {
-        skeleton: true,
-        style: VISIBILITY_HIDDEN_STYLE
-      });
-    } else if (renderRowSkeleton) {
-      rowVnode = renderRowSkeleton(rowIndex);
+    const rowVnodeKept = rowVnodesByItem.get(item);
+    if (rowVnodeKept && rowVnodeKept.rowIndex === rowIndex && rowVnodeKept.refreshing === renderItemState.refreshing) {
+      rowVnode = rowVnodeKept.vnode;
+      rowContextValue = rowVnodeKept.rowContextValue;
     } else {
-      rowVnode = jsx(ListItem, {
-        skeleton: true
+      rowVnode = renderItem(item, rowIndex, renderItemState);
+      // Kept with the vnode, for the same reason: a context value that is a
+      // fresh object on every render forces every consumer of it to render,
+      // which is the row's own chain — the vnode handed back unchanged would
+      // then buy nothing.
+      rowContextValue = {
+        id: key,
+        index: rowIndex,
+        item,
+        ownerId
+      };
+      rowVnodesByItem.set(item, {
+        vnode: rowVnode,
+        rowContextValue,
+        rowIndex,
+        refreshing: renderItemState.refreshing
       });
     }
     if (rowVnode) {
-      // The first row of a group wears no separator: the gap it sits at is the
-      // one between two groups, and that gap is the group wrapper's own — it
-      // is a row of the list like any other and draws its separator itself
-      // (see ListItemUI). Drawn here it would land inside the group instead,
-      // as a hairline under the label.
-      const drawSeparator = separator && rowIndex > 0 && !opensGroup(groupKeyOf(item, rowIndex));
-      if (drawSeparator) {
-        // Kept with the row too: a separator built again is a separator
-        // rendered again.
-        let separatorVnode = rowKept ? rowKept.separatorVnode : null;
-        if (!separatorVnode) {
-          separatorVnode = cloneElement(resolveSeparatorVnode(separator, rowIndex - 1), {
-            key: `${key}_separator`
-          });
-          if (rowKept) {
-            rowKept.separatorVnode = separatorVnode;
-          }
-        }
-        pushRow(separatorVnode, item, rowIndex);
-      }
       pushRow(jsx(ListRowContext.Provider, {
-        value: item === undefined ? {
-          id: key,
-          index: rowIndex,
-          ...getSkeletonRow()
-        } : rowContextValue,
+        value: rowContextValue,
         children: rowVnode
-      }, key), item, rowIndex);
+      }, key), item, rowIndex, groupKey);
     }
     rowIndex++;
   }
@@ -71485,6 +71345,44 @@ const ListItems = ({
   return rows;
 };
 
+// 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
+// rows here, and wears the separator of the gap above it the way a real row
+// does there.
+const SKELETON_ROW_DATA = {
+  skeleton: true
+};
+const ListRunSkeletonRow = ({
+  row,
+  separator,
+  children
+}) => {
+  const listRows = useContext(ListRowsContext);
+  const groupId = useContext(ListGroupContext);
+  const rowId = useId();
+  listRows.draw(rowId, {
+    ownerId: row.ownerId,
+    place: row.index,
+    groupId,
+    data: SKELETON_ROW_DATA
+  });
+  useLayoutEffect(() => {
+    return () => {
+      listRows.erase(rowId);
+    };
+  }, []);
+  const rowVnode = jsx(ListRowContext.Provider, {
+    value: row,
+    children: children
+  });
+  if (!separator || listRows.isFirst(rowId)) {
+    return rowVnode;
+  }
+  return jsxs(Fragment, {
+    children: [resolveSeparatorVnode(separator, row.index - 1), rowVnode]
+  });
+};
+
 // What is drawn where rows were asked for and never came: the sentence and the
 // way out, in the row itself — the rest of the list is fine, so replacing all
 // of it (List's own `error`) would be a lie.
@@ -71639,7 +71537,7 @@ const useItemStore = ({
   // where the hole is, and cleared by a retry — which is what makes the same
   // range askable again (see the request memory just above).
   const [failure, setFailure] = useState(null);
-  const virtual = useContext(ListVirtualContext);
+  const listRows = useContext(ListRowsContext);
   // The rows are there, which is what the list waits for to place itself on the
   // row it is held at (see placeWhereHeld). Said from an effect: a signal read
   // during this very render must not be written during it.
@@ -71648,12 +71546,12 @@ const useItemStore = ({
       return;
     }
     itemsHeldRef.current = true;
-    virtual.pagesSignal.value = virtual.pagesSignal.peek() + 1;
+    listRows.pagesSignal.value = listRows.pagesSignal.peek() + 1;
   });
   // Before the first answer a run does not know how many rows it stands for.
   // It stands for a windowful of them: a list that is about to be filled looks
   // like rows on their way, not like an empty list.
-  const rowCount = pages.count ?? count ?? virtual.renderBudget;
+  const rowCount = pages.count ?? count ?? listRows.renderBudget;
   // A run that never received anything has nothing to keep on screen: asking
   // again is its first ask, not a refresh.
   if (staleRef.current && pages.count === undefined) {
@@ -71663,9 +71561,9 @@ const useItemStore = ({
     if (!refreshing) {
       return null;
     }
-    virtual.refreshingSignal.value = virtual.refreshingSignal.peek() + 1;
+    listRows.refreshingSignal.value = listRows.refreshingSignal.peek() + 1;
     return () => {
-      virtual.refreshingSignal.value = virtual.refreshingSignal.peek() - 1;
+      listRows.refreshingSignal.value = listRows.refreshingSignal.peek() - 1;
     };
   }, [refreshing]);
 
@@ -71764,7 +71662,7 @@ const useItemStore = ({
       // how many rows there are, so it asks for the rows the list would open
       // on — counting back from the end when that is where it opens, the way
       // an HTTP range does.
-      const budget = virtual.renderBudget;
+      const budget = listRows.renderBudget;
       let start = missingStart;
       let end = missingEnd;
       let around;
@@ -71775,11 +71673,11 @@ const useItemStore = ({
       // The list is held on a row nothing on screen leads to: the rows it holds
       // do not contain it, so no window it could draw will ever bring it. Only
       // asking for it by name does.
-      const wanted = virtual.scrolled;
+      const wanted = listRows.scrolled;
       const askingAroundWantedRow = revalidating &&
       // Only while the hold stands: once the user has taken the list over,
       // the reading position is where they are, not where it opened.
-      virtual.holdPending && wanted && typeof wanted === "object" && wanted.id !== undefined && virtual.locateRow(wanted.id) === null;
+      listRows.holdPending && wanted && typeof wanted === "object" && wanted.id !== undefined && listRows.locateRow(wanted.id) === null;
       if (askingAroundWantedRow) {
         around = wanted.id;
         // Where it stood when it was written down is enough to frame the ask;
@@ -71802,7 +71700,7 @@ const useItemStore = ({
           around = firstHeld.id;
         }
       } else if (pages.count === undefined) {
-        const scrolled = virtual.scrolled;
+        const scrolled = listRows.scrolled;
         if (scrolled === "end") {
           // Counting back from the end, the way an HTTP range does: a list
           // opening on its last rows asks for them before it knows how many
@@ -71833,7 +71731,7 @@ const useItemStore = ({
         // way somewhere the window does not frame yet, `count` that it knows
         // how many rows it stands for.
         const debugAsk = outcome => {
-          debugScroll(`ask ${start}-${end}: ${outcome}`, `(revalidating=${revalidating} holdPending=${virtual.holdPending} count=${pages.count})`);
+          debugScroll(`ask ${start}-${end}: ${outcome}`, `(revalidating=${revalidating} holdPending=${listRows.holdPending} count=${pages.count})`);
         };
         if (start === -1) {
           // Nothing missing and nothing to revalidate: the run has what it
@@ -71841,7 +71739,7 @@ const useItemStore = ({
           debugAsk("nothing missing");
           return;
         }
-        if (virtual.holdPending && pages.count !== undefined && !askingAroundWantedRow) {
+        if (listRows.holdPending && pages.count !== undefined && !askingAroundWantedRow) {
           // The one ask a hold lets through: the row the list is held on is
           // what would lift the hold, and nothing else is going to bring it.
           debugAsk("held on a row not reached yet");
@@ -71932,7 +71830,7 @@ const useItemStore = ({
           const pageCount = Array.isArray(page) ? pageItems.length : page.count ?? pageStart + pageItems.length;
           // Before the rows land: what is on screen has to stay where it is,
           // and the DOM still shows the state to hold onto.
-          virtual.captureAnchor();
+          listRows.captureAnchor();
           if (revalidating) {
             // The rows held stood for a composition that has moved on; the
             // ones outside the window are forgotten and asked for again if the
@@ -71954,7 +71852,7 @@ const useItemStore = ({
               replace: revalidating
             });
           }
-          virtual.pagesSignal.value = virtual.pagesSignal.peek() + 1;
+          listRows.pagesSignal.value = listRows.pagesSignal.peek() + 1;
           setPageVersion(version => version + 1);
         };
         const failed = error => {
@@ -72022,10 +71920,16 @@ const ListItemGroup = ({
   ...rest
 }) => {
   const groupId = useId();
-  const groupTracker = useItemTracker();
+  const listRows = useContext(ListRowsContext);
+  const group = listRows.group(groupId);
+  useLayoutEffect(() => {
+    return () => {
+      listRows.dropGroup(groupId);
+    };
+  }, []);
   const searchNoMatchMode = useContext(SearchNoMatchModeContext);
-  const groupItemCount = groupTracker.countSignal.value;
-  const groupNoMatchCount = groupTracker.noMatchCountSignal.value;
+  const groupItemCount = group.countSignal.value;
+  const groupNoMatchCount = group.noMatchCountSignal.value;
   // Every row of this group failed the search: the label has nothing left to
   // title. "remove" empties the group on its own (and hiddenWhileEmpty takes it
   // out of the flow), "muted" keeps the rows readable so the label stays useful
@@ -72069,8 +71973,8 @@ const ListItemGroup = ({
       className: "navi_list_item_group_list",
       role: "group",
       "aria-labelledby": groupId,
-      children: jsx(GroupItemTrackerContext.Provider, {
-        value: groupTracker,
+      children: jsx(ListGroupContext.Provider, {
+        value: groupId,
         children: jsx(ListDeclaredChildren, {
           children: children
         })
@@ -78032,414 +77936,812 @@ const SplitButton = props => {
   });
 };
 
-// What the Picker's popup answers to — Picker's own popup props, named here so
-// a caller reaches all of them through the split button (see picker.jsx's JSDoc
-// for what each one says).
-const POPUP_PROP_SET = new Set(["mode", "popupLayer", "popupTestId", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMinWidth", "dialogMinHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdrop", "backdropVariant", "backdropColor", "backdropFilter", "pointerInteractionOutsideEffect", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
-const splitPopupProps = props => {
-  const popupProps = {};
-  const boxProps = {};
-  for (const key of Object.keys(props)) {
-    if (POPUP_PROP_SET.has(key)) {
-      popupProps[key] = props[key];
+// What the Picker's popup answers to — Picker's own popup props, named here so
+// a caller reaches all of them through the split button (see picker.jsx's JSDoc
+// for what each one says).
+const POPUP_PROP_SET = new Set(["mode", "popupLayer", "popupTestId", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMinWidth", "dialogMinHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdrop", "backdropVariant", "backdropColor", "backdropFilter", "pointerInteractionOutsideEffect", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
+const splitPopupProps = props => {
+  const popupProps = {};
+  const boxProps = {};
+  for (const key of Object.keys(props)) {
+    if (POPUP_PROP_SET.has(key)) {
+      popupProps[key] = props[key];
+    } else {
+      boxProps[key] = props[key];
+    }
+  }
+  return [popupProps, boxProps];
+};
+
+/**
+ * applySearch — matches value against searchText.
+ *
+ * Accent-insensitive: "gue" matches "Guérin", "e" matches "é".
+ * Case-insensitive: "bob" matches "Bob", with a score bonus for case-exact matches.
+ * Multi-word: if searchText contains spaces, each word must appear somewhere in
+ * the value for it to match. Ranges for all words are returned.
+ *
+ * Score table:
+ *
+ *   Situation                                Score
+ *   ───────────────────────────────────────  ───────────────────────────
+ *   phrase at start of value                 1
+ *   multi-word, one word at start (all match)  0.75
+ *   phrase / word at word boundary           0.625
+ *   phrase / words mid-word                  0.5
+ *   + case-exact bonus                       +0.125
+ *   multi-word partial: score × (matched/total)
+ *
+ * matchRanges: [start, end] pairs (exclusive end) for CSS Highlight API.
+ * Intended to be passed to useSearch as the matchFn parameter.
+ */
+const applySearch = (searchText, value) => {
+  if (!searchText) {
+    return { match: true, matchScore: 0, matchRanges: [] };
+  }
+  if (searchText.length > 100) {
+    searchText = searchText.slice(0, 100);
+  }
+  const str = String(value);
+  const foldedStr = foldAccents(str).toLowerCase();
+  const { foldedSearch, words, originalWords } = getSearchInfo(searchText);
+
+  // Try exact phrase match first (gives best score).
+  const phraseRanges = [];
+  let phraseIdx = foldedStr.indexOf(foldedSearch);
+  while (phraseIdx !== -1) {
+    phraseRanges.push([phraseIdx, phraseIdx + foldedSearch.length]);
+    phraseIdx = foldedStr.indexOf(foldedSearch, phraseIdx + 1);
+  }
+  if (phraseRanges.length > 0) {
+    const atStart = foldedStr.startsWith(foldedSearch);
+    const atWordBoundary = phraseRanges.some(([start]) =>
+      isWordBoundary(foldedStr, start),
+    );
+    const caseExact = str.includes(searchText);
+    let baseScore;
+    if (atStart) {
+      baseScore = SCORE_PHRASE_AT_START;
+    } else if (atWordBoundary) {
+      baseScore = SCORE_AT_WORD_BOUNDARY;
+    } else {
+      baseScore = SCORE_MID_WORD;
+    }
+    const matchScore = baseScore + (caseExact ? SCORE_BONUS_CASE_EXACT : 0);
+    return { match: true, matchScore, matchRanges: mergeRanges(phraseRanges) };
+  }
+
+  // Multi-word OR: split on whitespace, any word matching contributes to the score.
+  // Items where all words match rank higher than partial matches.
+  // Note: words always has at least 1 element here (searchText is non-empty and
+  // foldedSearch.split filters empty strings). This path also handles the case
+  // where searchText has trailing/leading spaces: the phrase match above tries
+  // the literal (e.g. "tc " in "tc adapter"), and if that fails we fall through
+  // here to try each word individually (e.g. "tc" matches "tca").
+  const matchRanges = [];
+  let matchedWordCount = 0;
+  let anyWordAtStart = false;
+  let anyWordAtWordBoundary = false;
+  let allMatchedWordsExact = true;
+  for (let w = 0; w < words.length; w++) {
+    const word = words[w];
+    const originalWord = originalWords[w];
+    let idx = foldedStr.indexOf(word);
+    if (idx === -1) {
+      continue;
+    }
+    matchedWordCount++;
+    let wordHasExactMatch = false;
+    while (idx !== -1) {
+      matchRanges.push([idx, idx + word.length]);
+      if (idx === 0) {
+        anyWordAtStart = true;
+        anyWordAtWordBoundary = true;
+      } else if (isWordBoundary(foldedStr, idx)) {
+        anyWordAtWordBoundary = true;
+      }
+      if (str.slice(idx, idx + word.length) === originalWord) {
+        wordHasExactMatch = true;
+      }
+      idx = foldedStr.indexOf(word, idx + 1);
+    }
+    if (!wordHasExactMatch) {
+      allMatchedWordsExact = false;
+    }
+  }
+  if (matchedWordCount === 0) {
+    return tryAcronymMatch(foldedStr, str, searchText);
+  }
+  const wordRatio = matchedWordCount / words.length;
+  let baseScore;
+  if (anyWordAtStart) {
+    baseScore = SCORE_MULTI_WORD_AT_START;
+  } else if (anyWordAtWordBoundary) {
+    baseScore = SCORE_AT_WORD_BOUNDARY;
+  } else {
+    baseScore = SCORE_MID_WORD;
+  }
+  const matchScore =
+    (baseScore + (allMatchedWordsExact ? SCORE_BONUS_CASE_EXACT : 0)) *
+    wordRatio;
+  return { match: true, matchScore, matchRanges: mergeRanges(matchRanges) };
+};
+
+// Returns true when position idx in str is at a word boundary,
+// meaning it is either the start of the string or the preceding character
+// is not a Unicode letter or digit.
+const isWordBoundary = (str, idx) => {
+  if (idx === 0) {
+    return true;
+  }
+  return !/[\p{L}\p{N}]/u.test(str[idx - 1]);
+};
+
+// Strip diacritics for accent-insensitive matching.
+// NFC normalization first ensures precomposed characters (é → single code unit),
+// so the folded string has the same length as the NFC source — ranges computed
+// on the folded string map 1:1 to positions in the original string.
+const foldAccents = (str) => {
+  return str
+    .normalize("NFC")
+    .normalize("NFD")
+    .replace(/\p{Mn}/gu, "");
+};
+
+const SCORE_PHRASE_AT_START = 1;
+const SCORE_MULTI_WORD_AT_START = 0.75;
+const SCORE_AT_WORD_BOUNDARY = 0.625;
+const SCORE_MID_WORD = 0.5;
+const SCORE_ACRONYM = 0.4;
+const SCORE_BONUS_CASE_EXACT = 0.125;
+
+// Acronym match: each char of searchText (spaces stripped) must be the first
+// letter of a word in value, in order (greedy subsequence on word-starts).
+// e.g. "TC" matches "Total Count" highlighting the T and C.
+const tryAcronymMatch = (foldedStr, str, searchText) => {
+  const acronymChars = foldAccents(searchText).toLowerCase().replace(/\s/g, "");
+  if (acronymChars.length < 2) {
+    // Single-char acronym is too ambiguous — skip.
+    return { match: false, matchScore: 0, matchRanges: [] };
+  }
+  const wordStarts = [];
+  for (let i = 0; i < foldedStr.length; i++) {
+    if (isWordBoundary(foldedStr, i)) {
+      wordStarts.push(i);
+    }
+  }
+  const matchedPositions = [];
+  let wordIdx = 0;
+  const originalAcronym = searchText.replace(/\s/g, "");
+  for (let si = 0; si < acronymChars.length; si++) {
+    const ch = acronymChars[si];
+    let found = false;
+    while (wordIdx < wordStarts.length) {
+      const pos = wordStarts[wordIdx];
+      wordIdx++;
+      if (foldedStr[pos] === ch) {
+        matchedPositions.push(pos);
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      return { match: false, matchScore: 0, matchRanges: [] };
+    }
+  }
+  const atStart = matchedPositions[0] === 0;
+  const caseExact = matchedPositions.every(
+    (p, i) => str[p] === originalAcronym[i],
+  );
+  const baseScore = atStart ? SCORE_ACRONYM + 0.05 : SCORE_ACRONYM;
+  const matchScore = baseScore + (caseExact ? SCORE_BONUS_CASE_EXACT : 0);
+  const matchRanges = matchedPositions.map((p) => [p, p + 1]);
+  return { match: true, matchScore, matchRanges };
+};
+
+// LRU cache for pre-computed search info, avoids recomputing foldAccents/toLowerCase
+// for the same searchText across all items in a list render.
+const searchCache = new Map();
+const SEARCH_CACHE_MAX_SIZE = 20;
+const getSearchInfo = (searchText) => {
+  if (searchCache.has(searchText)) {
+    const cached = searchCache.get(searchText);
+    searchCache.delete(searchText);
+    searchCache.set(searchText, cached);
+    return cached;
+  }
+  const foldedSearch = foldAccents(searchText).toLowerCase();
+  const words = foldedSearch.split(/\s+/).filter(Boolean);
+  const originalWords = searchText.split(/\s+/).filter(Boolean);
+  const info = { foldedSearch, words, originalWords };
+  searchCache.set(searchText, info);
+  if (searchCache.size > SEARCH_CACHE_MAX_SIZE) {
+    searchCache.delete(searchCache.keys().next().value);
+  }
+  return info;
+};
+
+// Merge overlapping or adjacent [start, end] ranges (sorted by start).
+const mergeRanges = (ranges) => {
+  if (ranges.length < 2) {
+    return ranges;
+  }
+  const sorted = [...ranges].sort((a, b) => a[0] - b[0]);
+  const merged = [sorted[0]];
+  for (let i = 1; i < sorted.length; i++) {
+    const last = merged[merged.length - 1];
+    const current = sorted[i];
+    if (current[0] <= last[1]) {
+      if (current[1] > last[1]) {
+        last[1] = current[1];
+      }
+    } else {
+      merged.push(current);
+    }
+  }
+  return merged;
+};
+
+/**
+ * createSearch — builds a matchFn compatible with useSearch that searches
+ * across multiple named fields of an item, each with its own DOM selector
+ * and optional priority weight.
+ *
+ * Usage:
+ * ```js
+ * const searchPerson = createSearch({
+ *   name: {
+ *     getter: (item) => item.name,
+ *     domSelector: ".name",
+ *   },
+ *   address: {
+ *     getter: (item) => item.address,
+ *     domSelector: ".address",
+ *     priority: 1.5,
+ *   },
+ * });
+ *
+ * const [orderedItems, getItemMatchInfo] = useSearch(search, items, searchPerson);
+ * // getItemMatchInfo(item).matchRanges is { ".name": [[start,end],…], ".address": [[start,end],…] }
+ * // Pass the whole thing: <ListItem matchInfo={getItemMatchInfo(item)} />
+ * // — ListItem handles the per-selector object format for matchRanges.
+ * ```
+ *
+ * Each field config:
+ *   - getter(item): string — extracts the text to search
+ *   - domSelector: string — CSS selector used by ListItem to find the target element
+ *   - priority?: number — multiplier applied to the field's score (default 1)
+ *   - matchFn?: function — custom match function (searchText, fieldValue) => { match, matchScore, matchRanges }
+ *                          defaults to applySearch
+ */
+const createSearch = (fields) => {
+  return (searchText, item) => {
+    if (!searchText) {
+      return { match: true, matchScore: 0, matchRanges: {} };
+    }
+    let totalScore = 0;
+    const matchRanges = {};
+    for (const [
+      ,
+      { getter, domSelector, priority = 1, matchFn = applySearch },
+    ] of Object.entries(fields)) {
+      const fieldValue = getter(item);
+      const result = matchFn(searchText, fieldValue);
+      if (result.match && result.matchRanges.length > 0) {
+        totalScore += result.matchScore * priority;
+        matchRanges[domSelector] = result.matchRanges;
+      }
+    }
+    if (totalScore === 0) {
+      return { match: false, matchScore: 0, matchRanges: {} };
+    }
+    return { match: true, matchScore: totalScore, matchRanges };
+  };
+};
+
+/**
+ * useSearch — reorders items so matched ones come first (sorted by score desc),
+ * followed by non-matched items in their natural order. No item is hidden.
+ * Returns [orderedItems, getItemMatchInfo].
+ *   - orderedItems: all items, reordered
+ *   - getItemMatchInfo(item): { match, matchScore, matchRanges } — pass the
+ *     whole thing straight to <ListItem matchInfo={getItemMatchInfo(item)} />,
+ *     there is no need to destructure the three fields by hand.
+ *
+ * When searchText is empty, natural order is preserved and all items match with score 0.
+ *
+ * To filter (hide non-matching items), pass filtered={!getItemMatchInfo(item).match}
+ * to each ListItem. The list's matchFallback will be shown when all items are hidden.
+ */
+const useSearchText = (searchText, items, matchFn = applySearch) => {
+  if (typeof searchText !== "string" && searchText !== undefined) {
+    throw new TypeError(
+      "useSearchText: searchText must be a string or undefined",
+    );
+  }
+  if (items === undefined) {
+    throw new TypeError("useSearch: items is undefined");
+  }
+  const { orderedItems, matchInfoMap } = useMemo(() => {
+    const { scoreEntries, nonMatched, matchInfoMap } = buildMatchInfo(
+      searchText,
+      items,
+      matchFn,
+    );
+    const orderedItems = [];
+    for (const [, bucket] of scoreEntries) {
+      for (const { item } of bucket) {
+        orderedItems.push(item);
+      }
+    }
+    for (const { item } of nonMatched) {
+      orderedItems.push(item);
+    }
+    return { orderedItems, matchInfoMap };
+  }, [items, searchText, matchFn]);
+
+  // The same function for as long as the map is the same: a `renderItem`
+  // reading it is stable only if this is, and a run keeps the rows it drew
+  // only for a stable `renderItem` (see List.Items).
+  const getItemMatchInfo = useCallback(
+    (item) => matchInfoMap.get(item),
+    [matchInfoMap],
+  );
+
+  return [orderedItems, getItemMatchInfo];
+};
+
+const buildMatchInfo = (searchText, items, matchFn) => {
+  // scoreEntries: [score, bucket][] kept sorted desc by score.
+  // New distinct score values are inserted via bisect — O(1) in practice
+  // since there are very few distinct scores (today just 0 and 1).
+  const scoreEntries = []; // [score, bucket][]
+  const nonMatched = [];
+
+  for (const item of items) {
+    const result = matchFn(searchText, item);
+    if (!result.match) {
+      nonMatched.push({
+        item,
+        matchScore: result.matchScore,
+        matchRanges: result.matchRanges,
+      });
+      continue;
+    }
+    const score = result.matchScore;
+    // Find existing bucket or insert a new entry in desc order.
+    let lo = 0;
+    let hi = scoreEntries.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (scoreEntries[mid][0] > score) {
+        lo = mid + 1;
+      } else if (scoreEntries[mid][0] < score) {
+        hi = mid;
+      } else {
+        lo = mid;
+        hi = mid; // exact match — found the bucket
+      }
+    }
+    if (lo < scoreEntries.length && scoreEntries[lo][0] === score) {
+      scoreEntries[lo][1].push({ item, matchRanges: result.matchRanges });
     } else {
-      boxProps[key] = props[key];
+      scoreEntries.splice(lo, 0, [
+        score,
+        [{ item, matchRanges: result.matchRanges }],
+      ]);
     }
   }
-  return [popupProps, boxProps];
+
+  const matchInfoMap = new Map();
+  for (const [score, bucket] of scoreEntries) {
+    for (const { item, matchRanges } of bucket) {
+      matchInfoMap.set(item, { match: true, matchScore: score, matchRanges });
+    }
+  }
+  for (const { item, matchScore, matchRanges } of nonMatched) {
+    matchInfoMap.set(item, { match: false, matchScore, matchRanges });
+  }
+
+  return { scoreEntries, nonMatched, matchInfoMap };
 };
 
-/**
- * applySearch — matches value against searchText.
+/*
+ * useItemTracker() — hook that creates a stable item tracker for the lifetime
+ * of the host component.
  *
- * Accent-insensitive: "gue" matches "Guérin", "e" matches "é".
- * Case-insensitive: "bob" matches "Bob", with a score bonus for case-exact matches.
- * Multi-word: if searchText contains spaces, each word must appear somewhere in
- * the value for it to match. Ranges for all words are returned.
+ * USAGE:
+ * ```jsx
+ * function ListControlled({ items }) {
+ *   const tracker = useItemTracker({
+ *     onChange: () => console.log("items changed"),
+ *   });
  *
- * Score table:
+ *   return (
+ *     <ul>
+ *       {items.map((item, i) => (
+ *         <Row key={item.id} id={item.id} index={i} hidden={item.hidden} value={item.value} tracker={tracker} />
+ *       ))}
+ *       <Count tracker={tracker} />
+ *     </ul>
+ *   );
+ * }
  *
- *   Situation                                Score
- *   ───────────────────────────────────────  ───────────────────────────
- *   phrase at start of value                 1
- *   multi-word, one word at start (all match)  0.75
- *   phrase / word at word boundary           0.625
- *   phrase / words mid-word                  0.5
- *   + case-exact bonus                       +0.125
- *   multi-word partial: score × (matched/total)
+ * function Row({ id, index, hidden, value, tracker }) {
+ *   const visibleIndex = tracker.useTrackItem({ id, index, hidden, value });
+ *   if (visibleIndex === -1) return null;
+ *   return <li>{value}</li>;
+ * }
  *
- * matchRanges: [start, end] pairs (exclusive end) for CSS Highlight API.
- * Intended to be passed to useSearch as the matchFn parameter.
+ * function Count({ tracker }) {
+ *   const count = tracker.visibleCountSignal.value; // re-renders only when count changes
+ *   return <span>{count} items</span>;
+ * }
+ * ```
+ *
+ * INTERNALS:
+ *   - registrations: Map key → data, contains only visible items
+ *   - idToKey: Map id → key, stable across renders
+ *   - orderedKeys: number[] of visible item keys sorted by explicit order
+ *   - keyToOrderedIndex: Map key → orderedKeys index, gives O(1) indexOf equivalent
+ *   - keyToExplicitOrder: Map key → explicitly passed index, used to maintain sort order
+ *   - allItemsSignal: signal(array), all items including hidden, ordered by explicit index
+ *   - visibleItemsSignal: signal(array), non-hidden items only
+ *   - countSignal: signal(number), count of all items including hidden
+ *   - visibleCountSignal: signal(number), updated in microtask batch, only when count changes
+ *   - propSignals: Map propName → signal(array), updated in microtask batch with element equality
+ *   - onChangeRef: holds the latest onChange callback, called once per microtask batch
+ *
+ *   useTrackItem(id, data, index): registers the item with an explicitly provided index
+ *   that determines its position among siblings. The caller (e.g. items.map) knows the
+ *   correct order and passes it directly — no render-sequence deduction needed.
+ *   Returns the visible rank (position among non-hidden items), or -1 when hidden.
+ *   Signals and onChange are deferred to a microtask so multiple items updating
+ *   in one commit cause only one notification.
+ *
+ *   getTrackedItemByIndex(index): synchronous O(1) lookup of a visible item by
+ *   its visible rank. Returns undefined when index is out of range.
+ *
+ *   peekItems(): the items as they stand right now, without waiting for the
+ *   deferred notification — what a sibling rendering after the items must read
+ *   to paint them in the same commit.
  */
-const applySearch = (searchText, value) => {
-  if (!searchText) {
-    return { match: true, matchScore: 0, matchRanges: [] };
-  }
-  if (searchText.length > 100) {
-    searchText = searchText.slice(0, 100);
-  }
-  const str = String(value);
-  const foldedStr = foldAccents(str).toLowerCase();
-  const { foldedSearch, words, originalWords } = getSearchInfo(searchText);
 
-  // Try exact phrase match first (gives best score).
-  const phraseRanges = [];
-  let phraseIdx = foldedStr.indexOf(foldedSearch);
-  while (phraseIdx !== -1) {
-    phraseRanges.push([phraseIdx, phraseIdx + foldedSearch.length]);
-    phraseIdx = foldedStr.indexOf(foldedSearch, phraseIdx + 1);
-  }
-  if (phraseRanges.length > 0) {
-    const atStart = foldedStr.startsWith(foldedSearch);
-    const atWordBoundary = phraseRanges.some(([start]) =>
-      isWordBoundary(foldedStr, start),
-    );
-    const caseExact = str.includes(searchText);
-    let baseScore;
-    if (atStart) {
-      baseScore = SCORE_PHRASE_AT_START;
-    } else if (atWordBoundary) {
-      baseScore = SCORE_AT_WORD_BOUNDARY;
-    } else {
-      baseScore = SCORE_MID_WORD;
-    }
-    const matchScore = baseScore + (caseExact ? SCORE_BONUS_CASE_EXACT : 0);
-    return { match: true, matchScore, matchRanges: mergeRanges(phraseRanges) };
+const useItemTracker = ({ onChange } = {}) => {
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const trackerRef = useRef(null);
+  let tracker = trackerRef.current;
+  if (!tracker) {
+    trackerRef.current = tracker = createItemTracker((items) => {
+      onChangeRef.current?.(items);
+    });
   }
+  // When code in useLayoutEffect of the caller wants to run the tracker must be in sync
+  // without this layout effect the tracker might not have been synced yet and preact would call layout effect
+  // before we had time to sync
+  useLayoutEffect(() => {
+    tracker._flushSync();
+  });
+  return tracker;
+};
+
+const createItemTracker = (onChange) => {
+  const registrations = new Map(); // key → data (visible items only)
+  const idToKey = new Map(); // id → insertion key (stable, auto-incremented)
+  let keyCounter = 0;
+  // orderedKeys: visible item keys sorted by their explicitly provided index.
+  const orderedKeys = []; // number[]
+  // keyToOrderedIndex: O(1) equivalent of orderedKeys.indexOf(key).
+  const keyToOrderedIndex = new Map(); // key → index in orderedKeys
+  const allKeys = new Set(); // all registered keys including hidden
+  const keyToExplicitOrder = new Map(); // key → explicitly passed index
+
+  const allRegistrations = new Map(); // key → data (all items including hidden)
+  const allOrderedKeys = []; // all item keys sorted by explicit order
+  const keyToAllOrderedIndex = new Map(); // key → index in allOrderedKeys
+
+  const itemsSignal = signal([]);
+  const visibleItemsSignal = signal([]);
+  const countSignal = signal(0);
+  const visibleCountSignal = signal(0);
+  const noMatchCountSignal = signal(0);
+
+  let notifyScheduled = false;
+  const runNotify = () => {
+    batch(() => {
+      let someChange = false;
+
+      const newCount = allKeys.size;
+      const countModified = countSignal.peek() !== newCount;
+      if (countModified) {
+        countSignal.value = newCount;
+        someChange = true;
+      }
+
+      // Build allItems and visibleItems in a single pass over allOrderedKeys.
+      // Visible items are those without data.hidden or data.filtered — same
+      // relative order as orderedKeys (syncItem already excludes both from
+      // orderedKeys; this must match or consumers relying on visibleCountSignal
+      // would count filtered-out items as if they still took up space).
+      const prevAllItems = itemsSignal.peek();
+      const prevVisibleItems = visibleItemsSignal.peek();
+      let allItemsChanged = prevAllItems.length !== allOrderedKeys.length;
+      let visibleItemsChanged = false;
+      const allItems = [];
+      const visibleItems = [];
+      let newNoMatchCount = 0;
+      for (let i = 0; i < allOrderedKeys.length; i++) {
+        const key = allOrderedKeys[i];
+        const item = allRegistrations.get(key);
+        allItems.push(item);
+        // Compare by reference: catches any prop change (id, selected, disabled, …)
+        if (!allItemsChanged && item !== prevAllItems[i]) {
+          allItemsChanged = true;
+        }
+        if (item.match === false) {
+          newNoMatchCount++;
+        }
+        if (!item.hidden && !item.filtered) {
+          const visibleIdx = visibleItems.length;
+          visibleItems.push(item);
+          if (!visibleItemsChanged && item !== prevVisibleItems[visibleIdx]) {
+            visibleItemsChanged = true;
+          }
+        }
+      }
+
+      const newVisibleCount = visibleItems.length;
+      const visibleCountModified =
+        visibleCountSignal.peek() !== newVisibleCount;
+      if (visibleCountModified) {
+        visibleCountSignal.value = newVisibleCount;
+        someChange = true;
+      }
+      if (allItemsChanged) {
+        itemsSignal.value = allItems;
+        someChange = true;
+      }
+      if (visibleItemsChanged) {
+        visibleItemsSignal.value = visibleItems;
+        someChange = true;
+      }
+      const noMatchCountModified =
+        noMatchCountSignal.peek() !== newNoMatchCount;
+      if (noMatchCountModified) {
+        noMatchCountSignal.value = newNoMatchCount;
+        someChange = true;
+      }
+      if (someChange) {
+        onChange?.();
+      }
+    });
+  };
 
-  // Multi-word OR: split on whitespace, any word matching contributes to the score.
-  // Items where all words match rank higher than partial matches.
-  // Note: words always has at least 1 element here (searchText is non-empty and
-  // foldedSearch.split filters empty strings). This path also handles the case
-  // where searchText has trailing/leading spaces: the phrase match above tries
-  // the literal (e.g. "tc " in "tc adapter"), and if that fails we fall through
-  // here to try each word individually (e.g. "tc" matches "tca").
-  const matchRanges = [];
-  let matchedWordCount = 0;
-  let anyWordAtStart = false;
-  let anyWordAtWordBoundary = false;
-  let allMatchedWordsExact = true;
-  for (let w = 0; w < words.length; w++) {
-    const word = words[w];
-    const originalWord = originalWords[w];
-    let idx = foldedStr.indexOf(word);
-    if (idx === -1) {
-      continue;
+  const notify = () => {
+    if (notifyScheduled) {
+      return;
     }
-    matchedWordCount++;
-    let wordHasExactMatch = false;
-    while (idx !== -1) {
-      matchRanges.push([idx, idx + word.length]);
-      if (idx === 0) {
-        anyWordAtStart = true;
-        anyWordAtWordBoundary = true;
-      } else if (isWordBoundary(foldedStr, idx)) {
-        anyWordAtWordBoundary = true;
+    notifyScheduled = true;
+    queueMicrotask(() => {
+      if (!notifyScheduled) {
+        return; // was already flushed synchronously
       }
-      if (str.slice(idx, idx + word.length) === originalWord) {
-        wordHasExactMatch = true;
+      notifyScheduled = false;
+      runNotify();
+    });
+  };
+
+  const _flushSync = () => {
+    if (!notifyScheduled) {
+      return;
+    }
+    notifyScheduled = false;
+    runNotify();
+  };
+
+  // Insert key into orderedKeys at the correct position based on explicitOrder.
+  // Uses binary search for O(log n) insertion.
+  const insertKey = (key, explicitOrder) => {
+    let lo = 0;
+    let hi = orderedKeys.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (keyToExplicitOrder.get(orderedKeys[mid]) <= explicitOrder) {
+        lo = mid + 1;
+      } else {
+        hi = mid;
       }
-      idx = foldedStr.indexOf(word, idx + 1);
     }
-    if (!wordHasExactMatch) {
-      allMatchedWordsExact = false;
+    orderedKeys.splice(lo, 0, key);
+    for (let i = lo; i < orderedKeys.length; i++) {
+      keyToOrderedIndex.set(orderedKeys[i], i);
     }
-  }
-  if (matchedWordCount === 0) {
-    return tryAcronymMatch(foldedStr, str, searchText);
-  }
-  const wordRatio = matchedWordCount / words.length;
-  let baseScore;
-  if (anyWordAtStart) {
-    baseScore = SCORE_MULTI_WORD_AT_START;
-  } else if (anyWordAtWordBoundary) {
-    baseScore = SCORE_AT_WORD_BOUNDARY;
-  } else {
-    baseScore = SCORE_MID_WORD;
-  }
-  const matchScore =
-    (baseScore + (allMatchedWordsExact ? SCORE_BONUS_CASE_EXACT : 0)) *
-    wordRatio;
-  return { match: true, matchScore, matchRanges: mergeRanges(matchRanges) };
-};
-
-// Returns true when position idx in str is at a word boundary,
-// meaning it is either the start of the string or the preceding character
-// is not a Unicode letter or digit.
-const isWordBoundary = (str, idx) => {
-  if (idx === 0) {
-    return true;
-  }
-  return !/[\p{L}\p{N}]/u.test(str[idx - 1]);
-};
-
-// Strip diacritics for accent-insensitive matching.
-// NFC normalization first ensures precomposed characters (é → single code unit),
-// so the folded string has the same length as the NFC source — ranges computed
-// on the folded string map 1:1 to positions in the original string.
-const foldAccents = (str) => {
-  return str
-    .normalize("NFC")
-    .normalize("NFD")
-    .replace(/\p{Mn}/gu, "");
-};
-
-const SCORE_PHRASE_AT_START = 1;
-const SCORE_MULTI_WORD_AT_START = 0.75;
-const SCORE_AT_WORD_BOUNDARY = 0.625;
-const SCORE_MID_WORD = 0.5;
-const SCORE_ACRONYM = 0.4;
-const SCORE_BONUS_CASE_EXACT = 0.125;
+  };
 
-// Acronym match: each char of searchText (spaces stripped) must be the first
-// letter of a word in value, in order (greedy subsequence on word-starts).
-// e.g. "TC" matches "Total Count" highlighting the T and C.
-const tryAcronymMatch = (foldedStr, str, searchText) => {
-  const acronymChars = foldAccents(searchText).toLowerCase().replace(/\s/g, "");
-  if (acronymChars.length < 2) {
-    // Single-char acronym is too ambiguous — skip.
-    return { match: false, matchScore: 0, matchRanges: [] };
-  }
-  const wordStarts = [];
-  for (let i = 0; i < foldedStr.length; i++) {
-    if (isWordBoundary(foldedStr, i)) {
-      wordStarts.push(i);
-    }
-  }
-  const matchedPositions = [];
-  let wordIdx = 0;
-  const originalAcronym = searchText.replace(/\s/g, "");
-  for (let si = 0; si < acronymChars.length; si++) {
-    const ch = acronymChars[si];
-    let found = false;
-    while (wordIdx < wordStarts.length) {
-      const pos = wordStarts[wordIdx];
-      wordIdx++;
-      if (foldedStr[pos] === ch) {
-        matchedPositions.push(pos);
-        found = true;
-        break;
+  const insertAllKey = (key, explicitOrder) => {
+    let lo = 0;
+    let hi = allOrderedKeys.length;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (keyToExplicitOrder.get(allOrderedKeys[mid]) <= explicitOrder) {
+        lo = mid + 1;
+      } else {
+        hi = mid;
       }
     }
-    if (!found) {
-      return { match: false, matchScore: 0, matchRanges: [] };
+    allOrderedKeys.splice(lo, 0, key);
+    for (let i = lo; i < allOrderedKeys.length; i++) {
+      keyToAllOrderedIndex.set(allOrderedKeys[i], i);
     }
-  }
-  const atStart = matchedPositions[0] === 0;
-  const caseExact = matchedPositions.every(
-    (p, i) => str[p] === originalAcronym[i],
-  );
-  const baseScore = atStart ? SCORE_ACRONYM + 0.05 : SCORE_ACRONYM;
-  const matchScore = baseScore + (caseExact ? SCORE_BONUS_CASE_EXACT : 0);
-  const matchRanges = matchedPositions.map((p) => [p, p + 1]);
-  return { match: true, matchScore, matchRanges };
-};
+  };
 
-// LRU cache for pre-computed search info, avoids recomputing foldAccents/toLowerCase
-// for the same searchText across all items in a list render.
-const searchCache = new Map();
-const SEARCH_CACHE_MAX_SIZE = 20;
-const getSearchInfo = (searchText) => {
-  if (searchCache.has(searchText)) {
-    const cached = searchCache.get(searchText);
-    searchCache.delete(searchText);
-    searchCache.set(searchText, cached);
-    return cached;
-  }
-  const foldedSearch = foldAccents(searchText).toLowerCase();
-  const words = foldedSearch.split(/\s+/).filter(Boolean);
-  const originalWords = searchText.split(/\s+/).filter(Boolean);
-  const info = { foldedSearch, words, originalWords };
-  searchCache.set(searchText, info);
-  if (searchCache.size > SEARCH_CACHE_MAX_SIZE) {
-    searchCache.delete(searchCache.keys().next().value);
-  }
-  return info;
-};
+  const removeAllKey = (key) => {
+    const idx = keyToAllOrderedIndex.get(key);
+    if (idx !== undefined) {
+      allOrderedKeys.splice(idx, 1);
+      keyToAllOrderedIndex.delete(key);
+      for (let i = idx; i < allOrderedKeys.length; i++) {
+        keyToAllOrderedIndex.set(allOrderedKeys[i], i);
+      }
+    }
+  };
 
-// Merge overlapping or adjacent [start, end] ranges (sorted by start).
-const mergeRanges = (ranges) => {
-  if (ranges.length < 2) {
-    return ranges;
-  }
-  const sorted = [...ranges].sort((a, b) => a[0] - b[0]);
-  const merged = [sorted[0]];
-  for (let i = 1; i < sorted.length; i++) {
-    const last = merged[merged.length - 1];
-    const current = sorted[i];
-    if (current[0] <= last[1]) {
-      if (current[1] > last[1]) {
-        last[1] = current[1];
+  // Register or update an item. data.hidden controls visibility.
+  // explicitOrder is the caller-provided index that determines sort position.
+  const syncItem = (key, index, data) => {
+    if (data.role === "presentation") {
+      registrations.delete(key);
+      const idx = keyToOrderedIndex.get(key);
+      if (idx !== undefined) {
+        orderedKeys.splice(idx, 1);
+        keyToOrderedIndex.delete(key);
+        for (let i = idx; i < orderedKeys.length; i++) {
+          keyToOrderedIndex.set(orderedKeys[i], i);
+        }
+      }
+      keyToExplicitOrder.delete(key);
+      allRegistrations.delete(key);
+      removeAllKey(key);
+      allKeys.delete(key);
+      return;
+    }
+
+    // Maintain allRegistrations and allOrderedKeys for all non-presentation items.
+    allRegistrations.set(key, data);
+    allKeys.add(key);
+    const currentAllIdx = keyToAllOrderedIndex.get(key);
+    const previousOrder = keyToExplicitOrder.get(key);
+    keyToExplicitOrder.set(key, index);
+    if (currentAllIdx === undefined) {
+      insertAllKey(key, index);
+    } else if (previousOrder !== index) {
+      allOrderedKeys.splice(currentAllIdx, 1);
+      keyToAllOrderedIndex.delete(key);
+      for (let i = currentAllIdx; i < allOrderedKeys.length; i++) {
+        keyToAllOrderedIndex.set(allOrderedKeys[i], i);
       }
-    } else {
-      merged.push(current);
+      insertAllKey(key, index);
     }
-  }
-  return merged;
-};
 
-/**
- * createSearch — builds a matchFn compatible with useSearch that searches
- * across multiple named fields of an item, each with its own DOM selector
- * and optional priority weight.
- *
- * Usage:
- * ```js
- * const searchPerson = createSearch({
- *   name: {
- *     getter: (item) => item.name,
- *     domSelector: ".name",
- *   },
- *   address: {
- *     getter: (item) => item.address,
- *     domSelector: ".address",
- *     priority: 1.5,
- *   },
- * });
- *
- * const [orderedItems, getItemMatchInfo] = useSearch(search, items, searchPerson);
- * // getItemMatchInfo(item).matchRanges is { ".name": [[start,end],…], ".address": [[start,end],…] }
- * // Pass the whole thing: <ListItem matchInfo={getItemMatchInfo(item)} />
- * // — ListItem handles the per-selector object format for matchRanges.
- * ```
- *
- * Each field config:
- *   - getter(item): string — extracts the text to search
- *   - domSelector: string — CSS selector used by ListItem to find the target element
- *   - priority?: number — multiplier applied to the field's score (default 1)
- *   - matchFn?: function — custom match function (searchText, fieldValue) => { match, matchScore, matchRanges }
- *                          defaults to applySearch
- */
-const createSearch = (fields) => {
-  return (searchText, item) => {
-    if (!searchText) {
-      return { match: true, matchScore: 0, matchRanges: {} };
-    }
-    let totalScore = 0;
-    const matchRanges = {};
-    for (const [
-      ,
-      { getter, domSelector, priority = 1, matchFn = applySearch },
-    ] of Object.entries(fields)) {
-      const fieldValue = getter(item);
-      const result = matchFn(searchText, fieldValue);
-      if (result.match && result.matchRanges.length > 0) {
-        totalScore += result.matchScore * priority;
-        matchRanges[domSelector] = result.matchRanges;
+    if (data.filtered || data.hidden) {
+      registrations.delete(key);
+      const idx = keyToOrderedIndex.get(key);
+      if (idx !== undefined) {
+        orderedKeys.splice(idx, 1);
+        keyToOrderedIndex.delete(key);
+        for (let i = idx; i < orderedKeys.length; i++) {
+          keyToOrderedIndex.set(orderedKeys[i], i);
+        }
       }
+      return;
     }
-    if (totalScore === 0) {
-      return { match: false, matchScore: 0, matchRanges: {} };
+
+    registrations.set(key, data);
+    const currentIdx = keyToOrderedIndex.get(key);
+    if (currentIdx === undefined) {
+      insertKey(key, index);
+      return;
     }
-    return { match: true, matchScore: totalScore, matchRanges };
+    if (previousOrder === index) {
+      return;
+    }
+    orderedKeys.splice(currentIdx, 1);
+    keyToOrderedIndex.delete(key);
+    for (let i = currentIdx; i < orderedKeys.length; i++) {
+      keyToOrderedIndex.set(orderedKeys[i], i);
+    }
+    insertKey(key, index);
   };
-};
 
-/**
- * useSearch — reorders items so matched ones come first (sorted by score desc),
- * followed by non-matched items in their natural order. No item is hidden.
- * Returns [orderedItems, getItemMatchInfo].
- *   - orderedItems: all items, reordered
- *   - getItemMatchInfo(item): { match, matchScore, matchRanges } — pass the
- *     whole thing straight to <ListItem matchInfo={getItemMatchInfo(item)} />,
- *     there is no need to destructure the three fields by hand.
- *
- * When searchText is empty, natural order is preserved and all items match with score 0.
- *
- * To filter (hide non-matching items), pass filtered={!getItemMatchInfo(item).match}
- * to each ListItem. The list's matchFallback will be shown when all items are hidden.
- */
-const useSearchText = (searchText, items, matchFn = applySearch) => {
-  if (typeof searchText !== "string" && searchText !== undefined) {
-    throw new TypeError(
-      "useSearchText: searchText must be a string or undefined",
-    );
-  }
-  if (items === undefined) {
-    throw new TypeError("useSearch: items is undefined");
-  }
-  const { orderedItems, matchInfoMap } = useMemo(() => {
-    const { scoreEntries, nonMatched, matchInfoMap } = buildMatchInfo(
-      searchText,
-      items,
-      matchFn,
-    );
-    const orderedItems = [];
-    for (const [, bucket] of scoreEntries) {
-      for (const { item } of bucket) {
-        orderedItems.push(item);
+  const unregisterKey = (key) => {
+    registrations.delete(key);
+    const idx = keyToOrderedIndex.get(key);
+    if (idx !== undefined) {
+      orderedKeys.splice(idx, 1);
+      keyToOrderedIndex.delete(key);
+      for (let i = idx; i < orderedKeys.length; i++) {
+        keyToOrderedIndex.set(orderedKeys[i], i);
       }
     }
-    for (const { item } of nonMatched) {
-      orderedItems.push(item);
+    keyToExplicitOrder.delete(key);
+    allRegistrations.delete(key);
+    removeAllKey(key);
+    allKeys.delete(key);
+  };
+
+  const keyForId = (id) => {
+    if (!idToKey.has(id)) {
+      idToKey.set(id, keyCounter++);
     }
-    return { orderedItems, matchInfoMap };
-  }, [items, searchText, matchFn]);
+    return idToKey.get(id);
+  };
 
-  // The same function for as long as the map is the same: a `renderItem`
-  // reading it is stable only if this is, and a run keeps the rows it drew
-  // only for a stable `renderItem` (see List.Items).
-  const getItemMatchInfo = useCallback(
-    (item) => matchInfoMap.get(item),
-    [matchInfoMap],
-  );
+  // Register an item. data.hidden controls visibility.
+  // explicitOrder is the caller-provided index (e.g. from items.map((item, i) => ...))
+  // that determines this item's position among siblings.
+  // Returns the item's visible rank among non-hidden items, or -1 when hidden.
+  const useTrackItem = (data) => {
+    const { id, index } = data;
+    const key = keyForId(id);
 
-  return [orderedItems, getItemMatchInfo];
-};
+    syncItem(key, index, data);
+    notify();
 
-const buildMatchInfo = (searchText, items, matchFn) => {
-  // scoreEntries: [score, bucket][] kept sorted desc by score.
-  // New distinct score values are inserted via bisect — O(1) in practice
-  // since there are very few distinct scores (today just 0 and 1).
-  const scoreEntries = []; // [score, bucket][]
-  const nonMatched = [];
+    useLayoutEffect(() => {
+      return () => {
+        unregisterKey(key);
+        notify();
+      };
+    }, []);
 
-  for (const item of items) {
-    const result = matchFn(searchText, item);
-    if (!result.match) {
-      nonMatched.push({
-        item,
-        matchScore: result.matchScore,
-        matchRanges: result.matchRanges,
-      });
-      continue;
-    }
-    const score = result.matchScore;
-    // Find existing bucket or insert a new entry in desc order.
-    let lo = 0;
-    let hi = scoreEntries.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if (scoreEntries[mid][0] > score) {
-        lo = mid + 1;
-      } else if (scoreEntries[mid][0] < score) {
-        hi = mid;
-      } else {
-        lo = mid;
-        hi = mid; // exact match — found the bucket
-      }
+    if (data.filtered || data.hidden || data.role === "presentation") {
+      return -1;
     }
-    if (lo < scoreEntries.length && scoreEntries[lo][0] === score) {
-      scoreEntries[lo][1].push({ item, matchRanges: result.matchRanges });
-    } else {
-      scoreEntries.splice(lo, 0, [
-        score,
-        [{ item, matchRanges: result.matchRanges }],
-      ]);
+    return keyToOrderedIndex.get(key) ?? -1;
+  };
+
+  const getTrackedItemByIndex = (index) => {
+    const key = orderedKeys[index];
+    if (key === undefined) {
+      return undefined;
     }
-  }
+    return registrations.get(key);
+  };
 
-  const matchInfoMap = new Map();
-  for (const [score, bucket] of scoreEntries) {
-    for (const { item, matchRanges } of bucket) {
-      matchInfoMap.set(item, { match: true, matchScore: score, matchRanges });
+  // The items as they stand right now, notification pending or not — same
+  // content as itemsSignal, minus the wait.
+  //
+  // Items register during their own render, while the signal is only updated
+  // on a deferred microtask (see notify): a sibling rendering after them would
+  // otherwise paint from an empty list and correct itself a frame later. That
+  // frame is visible whenever the painted size feeds a layout decision — a
+  // dialog sizing itself on its content measures the empty version and shifts
+  // once the real one lands. Reading this instead makes the first paint the
+  // right one. Callers must still subscribe to itemsSignal to re-render on
+  // LATER changes; this is the value to display, not the notification.
+  const peekItems = () => {
+    if (!notifyScheduled) {
+      return itemsSignal.peek();
     }
-  }
-  for (const { item, matchScore, matchRanges } of nonMatched) {
-    matchInfoMap.set(item, { match: false, matchScore, matchRanges });
-  }
+    const items = [];
+    for (const key of allOrderedKeys) {
+      items.push(allRegistrations.get(key));
+    }
+    return items;
+  };
 
-  return { scoreEntries, nonMatched, matchInfoMap };
+  return {
+    useTrackItem,
+    getTrackedItemByIndex,
+    peekItems,
+    itemsSignal,
+    visibleItemsSignal,
+    countSignal,
+    visibleCountSignal,
+    noMatchCountSignal,
+    _flushSync,
+  };
 };
 
 installImportMetaCssBuild(import.meta);