@loadbare/app 0.15.0 → 0.17.0

package/dist/hub/lb-apply.js

@@ -25,31 +25,28 @@
  * Every custom element landing places is told so once the landing is done,
  * and every one it removes is told so once it is gone — see lb-lifecycle.
  *
- * A `rows` query is placed by its order: the one the URL carries for it, or
- * the one the server declared, or, with neither, the order its rows arrived
- * in. Groups are built from the markup's group templates as the order breaks,
- * and every change to a list — a row created, changed, moved or leaving, a
- * group appearing or leaving — is one a stylesheet can see.
+ * A `rows` query is placed by its order: the user's, from the choice its
+ * element's `lb-order` names, or the one the server declared, or, with
+ * neither, the order its rows arrived in. Groups are built from the markup's
+ * group templates as the order breaks, and every change to a list — a row
+ * created, changed, moved or leaving, a group appearing or leaving — is one
+ * a stylesheet can see. A row a filter the user chose does not pass is
+ * hidden.
  *
  * A condition is the one other thing landing moves. An element whose
  * `lb-show` column is off stands in the document inside a template, and
  * landing reaches in there as it reaches everywhere else, so a branch that
  * returns is already current. Nothing but landing reaches in.
  */
-import { AGGREGATES, ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ROW_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_SHOW, ATTR_SUM, KIND_ROW, LIVE_GROUP, LIVE_ROW, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
-import { compareRows, compareValues, isPatch, parseOrder, } from "../core/lb-types.js";
+import { AGGREGATES, ATTR_COLUMN, ATTR_FILTER, ATTR_ORDER, CHOICES_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_COUNT, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_MAX, ATTR_MIN, ATTR_QUERY, ATTR_QUERY_ROW_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_SHOW, ATTR_SUM, KIND_ROW, LIVE_GROUP, LIVE_ROW, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, ATTR_SELECT, ATTR_ROW_SELECTED, } from "../core/lb-constants.js";
+import { compareRows, compareValues, isPatch, parseFilter, parseOrder, passes, readAs, } from "../core/lb-types.js";
 import { attachPlaced, detachRemoved, LEAVING, PARKED, placed, upgradeAbsent, } from "./lb-lifecycle.js";
 /** A DocumentFragment's nodeType. Tier 3 has no `Node` global to read it from. */
 const FRAGMENT_NODE = 11;
 /** An Element's nodeType, for the same reason. */
 const ELEMENT_NODE = 1;
-/**
- * What a group's heading and aggregates stop at: the rows and groups inside
- * it, live or leaving, which are filled from rows of their own.
- */
-const SCAFFOLD_STOP = `${LIVE_ROW}, ${LIVE_GROUP}, ${LEAVING}`;
-/** An element carrying any aggregate. */
-const AGGREGATE = AGGREGATES.map((name) => `[${name}]`).join(", ");
+/** A Text node's nodeType, for the same reason. */
+const TEXT_NODE = 3;
 /**
  * The input types whose state is not their `value`, or cannot be set. A
  * checkbox's state is `checked`, and it is a control by its own rule.
@@ -133,9 +130,29 @@ function land(el, value) {
         return;
     }
     else if (!el.localName.includes("-")) {
-        el.textContent = value;
+        setText(el, String(value));
     }
-    el.setAttribute(ATTR_COLUMN_VALUE, value);
+    setStamp(el, ATTR_COLUMN_VALUE, String(value));
+}
+/**
+ * Set an element's text, unless it already holds exactly that text. Writing
+ * the same text again replaces the text node, which is two mutations and a
+ * style check for nothing.
+ */
+function setText(el, text) {
+    const only = el.firstChild;
+    const same = only
+        ? only === el.lastChild &&
+            only.nodeType === TEXT_NODE &&
+            only.data === text
+        : text === "";
+    if (!same)
+        el.textContent = text;
+}
+/** Set an attribute, unless it already has that value. */
+function setStamp(el, name, value) {
+    if (el.getAttribute(name) !== value)
+        el.setAttribute(name, value);
 }
 /**
  * Whether an element under `root` belongs to root's query, rather than to a
@@ -250,38 +267,160 @@ function present(el, on) {
     parked.setAttribute(ATTR_SHOW, el.getAttribute(ATTR_SHOW));
     el.replaceWith(parked);
     parked.content.append(el);
+    parkedIn.set(el, parked);
 }
+/** The template each absent element was last put in. */
+const parkedIn = new WeakMap();
 /**
- * Fill from one row: every `lb-column` and `lb-show` in root's query.
+ * Put a live row's element in the document or take it out, the element
+ * itself being known. Its template, while it is in one, decides first, as it
+ * does when landing finds both.
+ */
+function presentPlaced(el, on) {
+    const parked = parkedIn.get(el);
+    if (parked && el.parentNode === parked.content)
+        present(parked, on);
+    present(el, on);
+}
+function addPlace(map, name, el) {
+    const list = map.get(name);
+    if (list)
+        list.push(el);
+    else
+        map.set(name, [el]);
+}
+/**
+ * Note an element among the places: where its `lb-column` lands, and what
+ * its `lb-show` decides. A template holding an absent branch decides for the
+ * branch it holds, and is noted as that branch's.
+ */
+function note(places, el) {
+    const column = el.getAttribute(ATTR_COLUMN);
+    if (column !== null)
+        addPlace(places.columns, column, el);
+    const show = el.getAttribute(ATTR_SHOW);
+    if (show === null)
+        return;
+    if (el.localName === "template") {
+        const branch = el.content.firstElementChild;
+        if (branch)
+            parkedIn.set(branch, el);
+        return;
+    }
+    addPlace(places.shows, show, el);
+}
+function noPlaces() {
+    return { columns: new Map(), shows: new Map() };
+}
+/**
+ * The places in root's query, found by searching: root's own `lb-column`
+ * when `self`, and every one below it short of `stop`, absent branches
+ * included.
+ */
+function search(root, self, stop) {
+    const places = noPlaces();
+    if (self && root.hasAttribute(ATTR_COLUMN)) {
+        addPlace(places.columns, root.getAttribute(ATTR_COLUMN), root);
+    }
+    for (const el of below(root, `[${ATTR_COLUMN}], [${ATTR_SHOW}]`, stop)) {
+        note(places, el);
+    }
+    return places;
+}
+function kids(el) {
+    return el.localName === "template"
+        ? el.content.children
+        : el.children;
+}
+/**
+ * Where every place below a row template's root lies, worked out once for
+ * the template and followed in each copy of it. The rule is search()'s: a
+ * nested query's own attributes are this row's and what is inside it is not,
+ * and template content is entered only for an absent branch.
+ */
+function compile(row) {
+    const paths = [];
+    const walk = (el, path) => {
+        const children = kids(el);
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            const at = [...path, i];
+            if (child.hasAttribute(ATTR_COLUMN) || child.hasAttribute(ATTR_SHOW)) {
+                paths.push(at);
+            }
+            if (child.hasAttribute(ATTR_QUERY))
+                continue;
+            if (child.localName === "template" && !child.hasAttribute(ATTR_SHOW)) {
+                continue;
+            }
+            walk(child, at);
+        }
+    };
+    walk(row, []);
+    return paths;
+}
+/**
+ * A live row's places, by its template's paths: its root's own `lb-column`,
+ * and the element at the end of each path. Followed before anything lands,
+ * while the copy is as the template made it.
+ */
+function placesBy(row, paths) {
+    const places = noPlaces();
+    if (row.hasAttribute(ATTR_COLUMN)) {
+        addPlace(places.columns, row.getAttribute(ATTR_COLUMN), row);
+    }
+    for (const path of paths) {
+        let el = row;
+        for (const i of path)
+            el = kids(el)[i];
+        note(places, el);
+    }
+    return places;
+}
+/** Whether two column values are the same value. */
+function same(a, b) {
+    if (a === b)
+        return true;
+    // Loadbare does not read a non-atomic value, but one may still arrive.
+    return (typeof a === "object" &&
+        typeof b === "object" &&
+        a !== null &&
+        b !== null &&
+        JSON.stringify(a) === JSON.stringify(b));
+}
+/**
+ * Land a row on its places: each column's value where it lands, and the
+ * conditions it decides.
  *
- * A live row is its own row, so its root counts when it carries
- * `lb-column`: `<option>`'s content model is text, so an option row has to
- * be the column it displays. An element a `row` lands on is not its own
- * ancestor, so its own `lb-column` reads from the row around it and is left
- * alone here.
+ * Only null and false are off. A string is never read, so "false" is on, and
+ * the query spells a condition as a boolean or a null.
  */
-export function applyRow(root, row, liveRow = false, stop) {
+function fill(places, row) {
     for (const [column, value] of Object.entries(row)) {
-        const selector = `[${ATTR_COLUMN}="${column}"]`;
-        const columns = below(root, selector, stop);
-        if (liveRow && root.matches(selector))
-            columns.unshift(root);
-        for (const el of columns)
+        for (const el of places.columns.get(column) ?? [])
             land(el, value);
-        // Only null and false are off. A string is never read, so "false" is on,
-        // and the query spells a condition as a boolean or a null.
-        //
-        // Never the root's own: a row template's root carries none, and the
-        // element a row lands on reads its condition from the row around it.
         const on = value !== null && value !== false;
-        for (const el of below(root, `[${ATTR_SHOW}="${column}"]`, stop)) {
-            present(el, on);
-        }
-        for (const el of below(root, `[${ATTR_SHOW}="${SHOW_NOT}${column}"]`, stop)) {
-            present(el, !on);
+        for (const el of places.shows.get(column) ?? [])
+            presentPlaced(el, on);
+        for (const el of places.shows.get(`${SHOW_NOT}${column}`) ?? []) {
+            presentPlaced(el, !on);
         }
     }
 }
+/**
+ * Fill from one row: every `lb-column` and `lb-show` in root's query.
+ *
+ * With `self`, root's own `lb-column` counts, as a live row's does:
+ * `<option>`'s content model is text, so an option row has to be the column
+ * it displays. An element a `row` lands on is not its own ancestor, so its
+ * own `lb-column` reads from the row around it and is left alone here. Root's
+ * own `lb-show` never counts.
+ *
+ * `stop` passes over everything matching it and inside it.
+ */
+export function applyRow(root, row, self = false, stop) {
+    fill(search(root, self, stop), row);
+}
 /**
  * A row naming every column root's query shows, each null: what landing it
  * leaves is root as it stands with no row. Absent branches are counted, so a
@@ -308,34 +447,40 @@ export function templateIn(el) {
     const template = within(el, `template:not([${ATTR_SHOW}])`).find((t) => t !== el);
     return template ?? null;
 }
+/** What can take focus, before asking whether it can be operated. */
+const FOCUSABLE = `a[href], button, input:not([type="hidden"]), select, textarea, ` +
+    `summary, [tabindex]:not([tabindex="-1"]), ` +
+    `[contenteditable]:not([contenteditable="false"])`;
 /**
- * The live rows of the element's query, in document order. A row of a nested
- * query is that query's. An element a `row` query landed on carries a key and
- * is not a live row, so a `row` shown in a table's head or foot is not one of
- * the table's rows.
+ * Focus the first element in `root` the user can operate: not disabled, not
+ * in a closed dialog, not inert, not hidden, and one that took the focus
+ * when asked. Nothing in a `<template>` is a candidate, so an absent
+ * `lb-show` branch is passed over.
  */
-function liveRows(el) {
-    return [...el.querySelectorAll(LIVE_ROW)].filter((row) => inScope(el, row));
-}
-/**
- * The live rows already showing, by the key each carries. Two live rows with
- * one key are a mistake nothing downstream can recover from: only one of them
- * would ever be matched, and the other would stay until the page goes.
- */
-function showing(el) {
-    const rows = new Map();
-    for (const row of liveRows(el)) {
-        const key = row.getAttribute(ATTR_KEY_VALUE);
-        if (rows.has(key)) {
-            console.error(`lb-hub: <${el.localName}> shows two rows with the key '${key}'`);
-        }
-        rows.set(key, row);
+export function focusIn(root) {
+    const doc = root.ownerDocument;
+    for (const el of root.querySelectorAll(FOCUSABLE)) {
+        if (el.matches(":disabled"))
+            continue;
+        if (el.closest(`dialog:not([open]), [inert], [hidden]`))
+            continue;
+        if (el.checkVisibility?.() === false)
+            continue;
+        el.focus();
+        if (doc.activeElement === el)
+            return;
     }
-    return rows;
 }
 const lists = new WeakMap();
 /** Elements already told their group templates outrun their order. */
 const warned = new WeakSet();
+/**
+ * What a group's heading and aggregates stop at: the rows and groups inside
+ * it, live or leaving, which are filled from rows of their own.
+ */
+const SCAFFOLD_STOP = `${LIVE_ROW}, ${LIVE_GROUP}, ${LEAVING}`;
+/** An element carrying any aggregate. */
+const AGGREGATE = AGGREGATES.map((name) => `[${name}]`).join(", ");
 /**
  * The template a group's contents go in front of: the first `<template>` in
  * the content outside any nested `lb-query`, and not one holding an absent
@@ -348,6 +493,16 @@ function slotIn(root) {
     }
     return null;
 }
+/**
+ * The aggregates in root's scaffolding: root itself when `self`, and every
+ * one below it that is not inside a row or a group of its own.
+ */
+function aggregatesIn(root, self) {
+    const found = below(root, AGGREGATE, SCAFFOLD_STOP);
+    if (self && root.matches(AGGREGATE))
+        found.unshift(root);
+    return found;
+}
 /**
  * The list an element holds, found from its first template the first time
  * rows land on it, and kept after that: once groups exist, their slots are
@@ -373,24 +528,37 @@ function listFor(el, template) {
         top: template,
         levels,
         rowTemplate: at,
-        data: new Map(),
-        groupOf: new WeakMap(),
+        byKey: new Map(),
         root: {
             id: "",
             nodes: [],
             slot: template,
             children: [],
             rows: [],
-            placed: true,
+            heads: [],
+            aggregates: aggregatesIn(el, false),
+            hidden: false,
         },
     };
     // Live rows already in the markup, as a page rendered ahead of its data
     // ships them, are the list's from the start, in the order they stand.
     if (levels.length === 0) {
-        for (const row of liveRows(el)) {
-            list.data.set(row, {});
-            list.groupOf.set(row, list.root);
-            list.root.rows.push(row);
+        for (const row of el.querySelectorAll(LIVE_ROW)) {
+            if (!inScope(el, row))
+                continue;
+            const key = row.getAttribute(ATTR_KEY_VALUE);
+            if (list.byKey.has(key)) {
+                console.error(`lb-hub: <${el.localName}> shows two rows with the key '${key}'`);
+            }
+            const entry = {
+                key,
+                el: row,
+                places: search(row, true),
+                data: {},
+                hidden: false,
+            };
+            list.byKey.set(key, entry);
+            list.root.rows.push(entry);
         }
     }
     lists.set(el, list);
@@ -402,74 +570,36 @@ function rowsUnder(group) {
         ? group.children.flatMap(rowsUnder)
         : group.rows;
 }
-/** A group's identity among its siblings: its column and its value there. */
-function groupId(column, value) {
-    return `${column}\u0000${JSON.stringify(value ?? null)}`;
-}
 /**
- * Make an attribute's change one a stylesheet sees, even when it is removed
- * and added again in one landing: the style is computed between the two.
+ * A new live row for a key, copied from the row template: upgraded, stamped
+ * with its key, its places found by the template's paths, and no values yet.
+ * It is in no document until it is placed.
  */
-function restamp(el, name, on, value = "") {
-    const had = el.hasAttribute(name);
-    if (had)
-        el.removeAttribute(name);
-    if (!on)
-        return;
-    if (had)
-        void el.ownerDocument.defaultView?.getComputedStyle(el).animationName;
-    el.setAttribute(name, value);
-}
-/**
- * Take nodes out of the document once whatever their stylesheet started on
- * them has finished: at once when nothing is running. Asking for the running
- * animations computes the style, so an animation keyed to the leaving stamp
- * just set is among them.
- */
-function depart(nodes) {
-    const running = [];
-    for (const node of nodes) {
-        if (node.nodeType !== ELEMENT_NODE)
-            continue;
-        const el = node;
-        running.push(...(el.getAnimations?.({ subtree: true }) ?? []));
-    }
-    const go = () => {
-        for (const node of nodes)
-            node.remove();
-        detachRemoved(nodes);
+function create(list, doc, key) {
+    const template = list.rowTemplate.content.firstElementChild;
+    list.paths ??= compile(template);
+    // Imported rather than cloned: template content belongs to a document with
+    // no custom element definitions, so a clone would not upgrade until
+    // inserted, and a form-associated control would be filled as if it were
+    // not one.
+    const el = doc.importNode(template, true);
+    upgradeAbsent(el, doc);
+    placed(el);
+    el.setAttribute(ATTR_ROW_LIVE, "");
+    el.setAttribute(ATTR_KEY_VALUE, key);
+    const entry = {
+        key,
+        el,
+        places: placesBy(el, list.paths),
+        data: {},
+        hidden: false,
     };
-    if (running.length === 0)
-        go();
-    else
-        void Promise.allSettled(running.map((a) => a.finished)).then(go);
-}
-/** Mark an element as leaving: no longer live, and taking no input. */
-function leaving(el, live, stamp) {
-    el.removeAttribute(live);
-    el.removeAttribute(ATTR_ROW_REQUESTED);
-    el.setAttribute(stamp, "");
-    el.setAttribute("inert", "");
+    list.byKey.set(key, entry);
+    return entry;
 }
-/** A live row the answer took away: it leaves, and the list forgets it. */
-function leaveRow(list, row) {
-    list.data.delete(row);
-    const group = list.groupOf.get(row);
-    if (group)
-        group.rows = group.rows.filter((r) => r !== row);
-    leaving(row, ATTR_ROW_LIVE, ATTR_ROW_LEAVING);
-    depart([row]);
-}
-/** A group with no rows left, and every group inside it, leave. */
-function leaveGroup(group) {
-    for (const child of group.children)
-        leaveGroup(child);
-    for (const node of group.nodes) {
-        if (node.nodeType === ELEMENT_NODE) {
-            leaving(node, ATTR_GROUP_LIVE, ATTR_GROUP_LEAVING);
-        }
-    }
-    depart(group.nodes);
+/** A group's identity among its siblings: its column and its value there. */
+function groupId(column, value) {
+    return `${column}\u0000${JSON.stringify(value ?? null)}`;
 }
 /** A new group, cloned from the group template for its level and stamped. */
 function makeGroup(doc, template, id, term, value) {
@@ -478,6 +608,8 @@ function makeGroup(doc, template, id, term, value) {
     upgradeAbsent(fragment, doc);
     const slot = slotIn(fragment);
     const nodes = [...fragment.childNodes];
+    const heads = [];
+    const aggregates = [];
     for (const node of nodes) {
         if (node.nodeType !== ELEMENT_NODE || node === slot)
             continue;
@@ -492,169 +624,195 @@ function makeGroup(doc, template, id, term, value) {
         else {
             el.setAttribute(ATTR_GROUP_VALUE, String(value));
         }
+        // A heading's own column is filled, as a live row's is, unless it holds
+        // the group's contents, which filling it would replace.
+        heads.push(search(el, !el.contains(slot), SCAFFOLD_STOP));
+        aggregates.push(...aggregatesIn(el, true));
     }
-    return { id, nodes, slot, children: [], rows: [], placed: false };
+    return {
+        id,
+        nodes,
+        slot,
+        children: [],
+        rows: [],
+        heads,
+        aggregates,
+        hidden: false,
+    };
 }
 /**
- * Which entries of a sequence of old positions keep their place: the run
- * already in order that keeps the most rows whose values did not change,
- * and then the most rows. Everything else moves, so the row that moves is the
- * one whose values put it somewhere else, never a neighbour it passed, and a
- * list landed again unchanged moves nothing. -1 is a row with no old
- * position here.
+ * Put a sequence of items in the document in the order given, in front of
+ * `end`, where `old` is the order they stood in. The run they share at the
+ * start and the run they share at the end stay where they are, and what lies
+ * between goes in as one fragment. An item not in `old` is new, and one in
+ * `old` that is not given has gone somewhere else, or is leaving.
  */
-function inPlace(positions, changed) {
-    // Heaviest increasing run, by a running maximum over old positions. An
-    // unchanged row outweighs every changed row together.
-    const size = positions.length;
-    const heavy = size + 1;
-    // Indexed by old position, which may run past the rows placed now: rows
-    // that left the group in this landing kept theirs.
-    const span = Math.max(0, ...positions) + 1;
-    const tree = Array.from({ length: span + 1 }, () => ({ weight: 0, at: -1 }));
-    const best = new Array(size).fill(0);
-    const before = new Array(size).fill(-1);
-    let top = { weight: 0, at: -1 };
-    for (let i = 0; i < size; i++) {
-        const p = positions[i];
-        if (p < 0)
-            continue;
-        let prior = { weight: 0, at: -1 };
-        for (let k = p; k > 0; k -= k & -k) {
-            if (tree[k].weight > prior.weight)
-                prior = tree[k];
-        }
-        best[i] = prior.weight + (changed[i] ? 1 : heavy);
-        before[i] = prior.at;
-        const here = { weight: best[i], at: i };
-        for (let k = p + 1; k <= span; k += k & -k) {
-            if (here.weight > tree[k].weight)
-                tree[k] = here;
-        }
-        if (here.weight > top.weight)
-            top = here;
+function placeRun(old, next, end, nodesOf) {
+    const most = Math.min(old.length, next.length);
+    let start = 0;
+    while (start < most && old[start] === next[start])
+        start++;
+    let tail = 0;
+    while (tail < most - start &&
+        old[old.length - 1 - tail] === next[next.length - 1 - tail]) {
+        tail++;
     }
-    const keep = new Set();
-    for (let i = top.at; i >= 0; i = before[i])
-        keep.add(i);
-    return keep;
-}
-/**
- * Put a row in front of `ref`. A row already in the document leaves a copy
- * of itself behind, leaving, and is moved rather than taken out and put
- * back, where the browser can, so the control the user is in keeps focus.
- */
-function moveRow(row, ref, moved) {
-    const parent = ref.parentNode;
-    if (!parent)
-        return;
-    if (row.parentNode) {
-        const copy = row.cloneNode(true);
-        copy.removeAttribute(ATTR_ROW_CREATED);
-        copy.removeAttribute(ATTR_ROW_CHANGED);
-        copy.removeAttribute(ATTR_ROW_MOVED);
-        leaving(copy, ATTR_ROW_LIVE, ATTR_ROW_LEAVING);
-        row.parentNode.insertBefore(copy, row);
-        moved.add(row);
-        if (parent.moveBefore && row.isConnected && ref.isConnected) {
-            try {
-                parent.moveBefore(row, ref);
-                depart([copy]);
-                return;
-            }
-            catch {
-                // Fall back to inserting, which the browser always allows.
-            }
-        }
-        parent.insertBefore(row, ref);
-        depart([copy]);
+    const middle = next.slice(start, next.length - tail);
+    if (middle.length === 0)
         return;
-    }
-    parent.insertBefore(row, ref);
+    const ref = tail > 0 ? nodesOf(next[next.length - tail])[0] : end;
+    const fragment = ref.ownerDocument.createDocumentFragment();
+    for (const item of middle)
+        fragment.append(...nodesOf(item));
+    ref.parentNode.insertBefore(fragment, ref);
 }
 /**
- * Place a list's live rows in the order given: groups made where the order
- * breaks and gone where it no longer does, and each row moved only when it
- * is out of place. Groups never move. Their order follows the leading terms,
- * so it changes only when the order does, and then every group at that level
- * is made again.
+ * Place a list's live rows in the order given, with groups made where the
+ * order breaks, kept while their run goes on, and gone where it no longer
+ * does. What leaves is returned, to leave once everything is placed.
  */
-function arrange(list, doc, desired, terms, changed) {
-    const moved = new Set();
+function arrange(list, doc, order, terms) {
     const retired = [];
-    const placeRows = (group, rows) => {
-        const was = new Map();
-        group.rows.forEach((row, i) => {
-            if (list.groupOf.get(row) === group && list.data.has(row))
-                was.set(row, i);
-        });
-        const keep = inPlace(rows.map((row) => was.get(row) ?? -1), rows.map((row) => changed.has(row)));
-        let ref = group.slot;
-        for (let i = rows.length - 1; i >= 0; i--) {
-            const row = rows[i];
-            if (!keep.has(i))
-                moveRow(row, ref, moved);
-            ref = row;
-        }
-        group.rows = rows;
-        for (const row of rows)
-            list.groupOf.set(row, group);
-    };
-    const visit = (parent, level, rows) => {
+    const visit = (parent, level, entries) => {
         if (level === list.levels.length) {
-            placeRows(parent, rows);
+            placeRun(parent.rows, entries, parent.slot, (entry) => [entry.el]);
+            parent.rows = entries;
             return;
         }
         const term = terms[level];
         const runs = [];
-        for (const row of rows) {
-            const value = term ? list.data.get(row)[term.column] : null;
+        for (const entry of entries) {
+            const value = term ? entry.data[term.column] : null;
             const id = groupId(term?.column ?? "", value);
             const last = runs.at(-1);
             if (last?.id === id)
-                last.rows.push(row);
+                last.entries.push(entry);
             else
-                runs.push({ id, value, rows: [row] });
+                runs.push({ id, value, entries: [entry] });
         }
-        // Groups a level keeps must still be in the order the runs are in.
-        // When they are not, the order changed, and every one is made again.
-        const at = new Map(runs.map((run, i) => [run.id, i]));
-        let last = -1;
-        let kept = true;
+        // Each group already here goes on with the first run that has its id.
+        const pool = new Map();
         for (const child of parent.children) {
-            const i = at.get(child.id);
-            if (i === undefined)
-                continue;
-            if (i < last)
-                kept = false;
-            last = i;
+            pool.set(child.id, [...(pool.get(child.id) ?? []), child]);
         }
-        const existing = new Map(kept ? parent.children.map((child) => [child.id, child]) : []);
-        const next = runs.map((run) => existing.get(run.id) ??
+        const next = runs.map((run) => pool.get(run.id)?.shift() ??
             makeGroup(doc, list.levels[level], run.id, term, run.value));
-        for (const child of parent.children) {
-            if (!next.includes(child))
-                retired.push(child);
+        for (const left of pool.values())
+            retired.push(...left);
+        placeRun(parent.children, next, parent.slot, (group) => group.nodes);
+        parent.children = next;
+        runs.forEach((run, i) => visit(next[i], level + 1, run.entries));
+    };
+    visit(list.root, 0, order);
+    return retired;
+}
+/**
+ * The rows that moved: rows whose values changed, and which now stand
+ * somewhere else among the rows whose values did not. A neighbour a moved
+ * row passed did not move, and neither did a row whose new values left it
+ * where it was.
+ */
+function movedRows(before, after, changed) {
+    const moved = new Set();
+    if (changed.size === 0)
+        return moved;
+    const stayed = new Set(before);
+    // For each changed row, the nearest unchanged row on either side of it.
+    const anchors = (rows) => {
+        const around = new Map();
+        const kept = rows.filter((row) => stayed.has(row));
+        let last = null;
+        for (const row of kept) {
+            if (changed.has(row))
+                around.set(row, [last, null]);
+            else
+                last = row;
         }
-        let ref = parent.slot;
-        for (let i = next.length - 1; i >= 0; i--) {
-            const group = next[i];
-            if (!group.placed) {
-                for (const node of group.nodes)
-                    ref.parentNode.insertBefore(node, ref);
-                group.placed = true;
-            }
-            ref = group.nodes[0] ?? group.slot;
+        last = null;
+        for (const row of kept.reverse()) {
+            if (changed.has(row))
+                around.get(row)[1] = last;
+            else
+                last = row;
         }
-        parent.children = next;
-        runs.forEach((run, i) => visit(next[i], level + 1, run.rows));
+        return around;
     };
-    visit(list.root, 0, desired);
-    // Only now, when every row that was in them has gone to its new place.
-    for (const group of retired)
-        leaveGroup(group);
+    const was = anchors(before);
+    for (const [row, [prior, following]] of anchors(after)) {
+        const [p, f] = was.get(row);
+        if (p !== prior || f !== following)
+            moved.add(row);
+    }
     return moved;
 }
+/** Mark an element as leaving: no longer live, and taking no input. */
+function leaving(el, live, stamp) {
+    el.removeAttribute(live);
+    el.removeAttribute(ATTR_ROW_REQUESTED);
+    el.setAttribute(stamp, "");
+    el.setAttribute("inert", "");
+}
+/** A group whose rows are all gone, and every group inside it, leave. */
+function leaveGroup(group, nodes) {
+    for (const child of group.children)
+        leaveGroup(child, nodes);
+    for (const node of group.nodes) {
+        if (node.nodeType === ELEMENT_NODE) {
+            leaving(node, ATTR_GROUP_LIVE, ATTR_GROUP_LEAVING);
+        }
+    }
+    nodes.push(...group.nodes);
+}
+/**
+ * Take nodes out of the document once whatever their stylesheet started on
+ * them has finished: at once when nothing is running. Asking for the running
+ * animations computes the style, so it is asked once, after everything a
+ * landing writes, and an animation keyed to the leaving stamp is among them.
+ */
+function depart(nodes) {
+    const running = [];
+    for (const node of nodes) {
+        if (node.nodeType !== ELEMENT_NODE)
+            continue;
+        const el = node;
+        running.push(...(el.getAnimations?.({ subtree: true }) ?? []));
+    }
+    const go = () => {
+        for (const node of nodes)
+            node.remove();
+        detachRemoved(nodes);
+    };
+    if (running.length === 0)
+        go();
+    else
+        void Promise.allSettled(running.map((a) => a.finished)).then(go);
+}
+/**
+ * The stamps of what happened to rows, set together: a stamp a row already
+ * carries is taken off first and put back after the style has been computed
+ * once for all of them, so an animation keyed to it plays again.
+ */
+class Stamps {
+    again = [];
+    set(el, name, on) {
+        const had = el.hasAttribute(name);
+        if (had)
+            el.removeAttribute(name);
+        if (!on)
+            return;
+        if (had)
+            this.again.push([el, name]);
+        else
+            el.setAttribute(name, "");
+    }
+    done(doc) {
+        if (this.again.length === 0)
+            return;
+        void doc.defaultView?.getComputedStyle(this.again[0][0]).animationName;
+        for (const [el, name] of this.again)
+            el.setAttribute(name, "");
+    }
+}
 /** A plain decimal number, as JSON or Postgres writes one. */
 const DECIMAL = /^[+-]?\d+(\.\d+)?$/;
 function decimalOf(value) {
@@ -684,7 +842,7 @@ const reported = new Set();
  * keeps up to two places more. Null and empty values are left out, as SQL
  * leaves them out; a value that is not a number is left out and reported.
  */
-function aggregateOf(name, column, rows) {
+function aggregateOf(name, column, rows, type) {
     if (name === ATTR_COUNT)
         return rows.length;
     const values = rows
@@ -694,7 +852,7 @@ function aggregateOf(name, column, rows) {
         return null;
     if (name === ATTR_MIN || name === ATTR_MAX) {
         const sign = name === ATTR_MIN ? 1 : -1;
-        return values.reduce((a, b) => (sign * compareValues(b, a) < 0 ? b : a));
+        return values.reduce((a, b) => sign * compareValues(readAs(b, type), readAs(a, type)) < 0 ? b : a);
     }
     const decimals = [];
     for (const value of values) {
@@ -723,39 +881,43 @@ function aggregateOf(name, column, rows) {
         text = text.slice(0, -1);
     return text.endsWith(".") ? text.slice(0, -1) : text;
 }
-/**
- * Set every aggregate in `root` from rows: the root itself when `self`, and
- * every element below it that is not inside a row or a group of its own.
- */
-function aggregate(root, rows, self) {
-    const found = below(root, AGGREGATE, SCAFFOLD_STOP);
-    if (self && root.matches(AGGREGATE))
-        found.unshift(root);
-    for (const el of found) {
+/** Set each aggregate element from rows, each column read as its type. */
+function aggregate(elements, rows, types) {
+    for (const el of elements) {
         const name = AGGREGATES.find((a) => el.hasAttribute(a));
-        land(el, aggregateOf(name, el.getAttribute(name) ?? "", rows));
+        const column = el.getAttribute(name) ?? "";
+        land(el, aggregateOf(name, column, rows, types[column]));
     }
 }
+/** Show or hide an element for a filter, saying so only when it changes. */
+function hide(el, hidden) {
+    if (el.hasAttribute("hidden") !== hidden)
+        el.toggleAttribute("hidden", hidden);
+}
 /**
- * Fill each group's heading from its first row, and set each group's
- * aggregates from its rows, all the way down.
+ * Finish a group and everything under it, from the rows it shows: each
+ * heading filled from the first, each aggregate set from all of them, and a
+ * group hidden when a filter hides every row in it. The rows it shows are
+ * returned.
  */
-function finish(list, group) {
-    for (const child of group.children)
-        finish(list, child);
-    const rows = rowsUnder(group);
-    const data = rows.map((row) => list.data.get(row));
-    for (const node of group.nodes) {
-        if (node.nodeType !== ELEMENT_NODE || node === group.slot)
-            continue;
-        const el = node;
-        // A heading's own column is filled, as a live row's is, unless it holds
-        // the group's contents, which filling it would replace.
-        if (data[0]) {
-            applyRow(el, data[0], !el.contains(group.slot), SCAFFOLD_STOP);
+function finish(group, types) {
+    const rows = group.children.length > 0
+        ? group.children.flatMap((child) => finish(child, types))
+        : group.rows.filter((entry) => !entry.hidden).map((entry) => entry.data);
+    const hidden = rows.length === 0 && rowsUnder(group).length > 0;
+    if (hidden !== group.hidden) {
+        group.hidden = hidden;
+        for (const node of group.nodes) {
+            if (node.nodeType === ELEMENT_NODE && node !== group.slot) {
+                hide(node, hidden);
+            }
         }
-        aggregate(el, data, true);
     }
+    if (rows[0])
+        for (const head of group.heads)
+            fill(head, rows[0]);
+    aggregate(group.aggregates, rows, types);
+    return rows;
 }
 /** The order to place rows by, or none when it cannot be read. */
 function termsOf(el, order) {
@@ -767,154 +929,228 @@ function termsOf(el, order) {
         return [];
     }
 }
+/** The user's choice in a column of `lb-choices`, when one is made. */
+function choiceIn(choices, column) {
+    const value = choices?.[column];
+    return value === null || value === undefined || value === ""
+        ? undefined
+        : String(value);
+}
+/** The columns an element's `lb-filter` names. */
+function filtered(el) {
+    return (el.getAttribute(ATTR_FILTER) ?? "")
+        .split(",")
+        .map((column) => column.trim())
+        .filter((column) => column !== "");
+}
+/**
+ * The order an element's rows are placed by: the user's, from the column of
+ * `lb-choices` its `lb-order` names, else the one the server declared.
+ */
+function orderFor(el, options) {
+    const column = el.getAttribute(ATTR_ORDER);
+    const chosen = column ? choiceIn(options.choices, column) : undefined;
+    return chosen ?? options.order;
+}
+/**
+ * Whether a row passes every filter the user chose for the element: for each
+ * column its `lb-filter` names, the filter in the column of `lb-choices` of
+ * the same name.
+ */
+function filterFor(el, choices, types) {
+    const filters = [];
+    for (const column of filtered(el)) {
+        const text = choiceIn(choices, column);
+        const terms = text === undefined ? [] : parseFilter(text);
+        if (terms.length > 0)
+            filters.push([column, terms]);
+    }
+    return (row) => filters.every(([column, terms]) => passes(row[column], terms, types[column]));
+}
+/**
+ * Hide or show a row for a filter. A selection hidden is a selection
+ * abandoned, as it is for `lb-show`.
+ */
+function filterRow(entry, hidden) {
+    if (entry.hidden === hidden)
+        return;
+    entry.hidden = hidden;
+    hide(entry.el, hidden);
+    if (!hidden)
+        return;
+    for (const box of [entry.el, ...entry.el.querySelectorAll(`[${ATTR_SELECT}]`)]) {
+        if (box.hasAttribute(ATTR_SELECT))
+            select(box, false);
+    }
+}
 /** Whether a row's columns as landed differ from what they were. */
 function differs(before, after) {
-    if (!before)
-        return false;
-    return Object.entries(after).some(([column, value]) => JSON.stringify(before[column]) !== JSON.stringify(value));
+    return Object.entries(after).some(([column, value]) => !same(before[column], value));
 }
 /**
  * Land rows through a row template.
  *
+ * Two loops do the work, on rows in no document. The creation loop makes a
+ * live row for each key not yet shown, with its key and no values. The
+ * landing loop lands each arriving row's values on its live row, as a `row`
+ * lands, passing over a column that already shows its value. Then every live
+ * row is placed by the order in one fragment, and the browser styles once.
+ *
  * All rows decide membership: a row whose key did not arrive leaves. A patch
  * disturbs only what it names — a row it did not mention keeps its contents,
  * and keeps its place unless a row the patch named now sorts around it.
  *
- * Every live row is placed by the order. With none, all rows show in the
- * order they arrived, and a patch's new rows go last. A row moves only when
- * the order put it somewhere else, so landing the same rows again moves
- * nothing.
+ * With no order, all rows show in the order they arrived, and a patch's new
+ * rows go last. A row that stands where it stood is not touched, so landing
+ * the same rows again moves nothing. A row a filter the user chose does not
+ * pass is `hidden`.
  */
 export function applyRows(el, template, keyColumn, result, options = {}) {
     const list = listFor(el, template);
     if (!list)
         return;
-    const shown = showing(el);
+    const doc = el.ownerDocument;
     const host = el;
     const whole = !isPatch(result);
-    const landed = new Map();
-    const touched = new Map();
+    const shown = rowsUnder(list.root);
+    const focused = focusedRow(list, doc);
     // What a request did is said by this landing alone.
-    for (const row of shown.values())
-        row.removeAttribute(ATTR_ROW_REQUESTED);
-    const upsert = (data) => {
+    for (const entry of shown)
+        entry.el.removeAttribute(ATTR_ROW_REQUESTED);
+    // The rows arriving, by key.
+    const arriving = new Map();
+    for (const data of whole ? result : (result.rows ?? [])) {
         if (data[keyColumn] === undefined) {
             console.error(`lb-hub: a row for <${el.localName}> has no '${keyColumn}' column`);
-            return;
+            continue;
         }
         // The key is stored on the row as an attribute and read back from
         // there, so it is compared as the string the attribute holds.
         const key = String(data[keyColumn]);
-        if (landed.has(key)) {
+        if (arriving.has(key)) {
             console.error(`lb-hub: two rows for <${el.localName}> have the key '${key}'; ` +
                 `the last one shows`);
-            landed.delete(key);
-        }
-        let row = shown.get(key);
-        const fresh = row === undefined;
-        if (!row) {
-            // Imported rather than cloned: template content belongs to a document
-            // with no custom element definitions, so a clone would not upgrade
-            // until inserted, and a form-associated control would be filled as if
-            // it were not one.
-            row = el.ownerDocument.importNode(list.rowTemplate.content.firstElementChild, true);
-            upgradeAbsent(row, el.ownerDocument);
-            placed(row);
-            row.setAttribute(ATTR_ROW_LIVE, "");
-            row.setAttribute(ATTR_KEY_VALUE, key);
-            shown.set(key, row);
-        }
-        landed.set(key, row);
-        const before = list.data.get(row);
-        const prior = touched.get(row);
-        touched.set(row, {
-            fresh: prior?.fresh ?? fresh,
-            changed: (prior?.changed ?? false) || differs(before, data),
-        });
-        list.data.set(row, { ...before, ...data });
-        // Fill before insertion, on a row already upgraded, which is the same
-        // thing that makes a first landing and a refresh one operation
-        // everywhere else.
-        applyRow(row, data, true);
-    };
-    if (Array.isArray(result)) {
-        for (const data of result)
-            upsert(data);
-        for (const [key, row] of shown) {
-            if (!landed.has(key))
-                leaveRow(list, row);
+            arriving.delete(key);
         }
+        arriving.set(key, data);
     }
-    else {
-        for (const data of result.rows ?? [])
-            upsert(data);
-        for (const key of result.drop ?? []) {
-            const row = shown.get(String(key));
-            if (row)
-                leaveRow(list, row);
-        }
+    const dropped = whole
+        ? []
+        : (result.drop ?? []).map((key) => String(key));
+    for (const key of dropped)
+        arriving.delete(key);
+    const gone = whole
+        ? shown.filter((entry) => !arriving.has(entry.key))
+        : dropped.flatMap((key) => list.byKey.get(key) ?? []);
+    // The creation loop.
+    const created = new Set();
+    for (const key of arriving.keys()) {
+        if (!list.byKey.has(key))
+            created.add(create(list, doc, key));
+    }
+    // The landing loop. A row whose values arrive as it already shows them is
+    // left as it is, so a control the user has typed into and not committed
+    // keeps what was typed. A row whose values changed is filled whole.
+    const changed = new Set();
+    for (const [key, data] of arriving) {
+        const entry = list.byKey.get(key);
+        const fresh = created.has(entry);
+        if (!fresh && differs(entry.data, data))
+            changed.add(entry);
+        if (fresh || options.refill || changed.has(entry))
+            fill(entry.places, data);
+        entry.data = { ...entry.data, ...data };
+    }
+    for (const entry of gone) {
+        list.byKey.delete(entry.key);
+        leaving(entry.el, ATTR_ROW_LIVE, ATTR_ROW_LEAVING);
     }
-    const terms = termsOf(el, options.order);
+    // The order the rows arrived in for all rows, and for a patch the order
+    // already showing with what is new after it. A sort keeps rows that
+    // compare equal in this order.
+    const stayed = shown.filter((entry) => list.byKey.get(entry.key) === entry);
+    let order = whole
+        ? [...arriving.keys()].map((key) => list.byKey.get(key))
+        : [...stayed, ...created];
+    const terms = termsOf(el, orderFor(el, options));
     if (list.levels.length > terms.length && !warned.has(el)) {
         warned.add(el);
         console.warn(`lb-hub: <${el.localName}> has ${list.levels.length} group ` +
             `template(s) and an order of ${terms.length} term(s); a level with ` +
             `no term shows its rows as one group`);
     }
-    // Before sorting: the order the rows arrived in for all rows, and for a
-    // patch the order already showing, with what is new after it. A sort keeps
-    // rows that compare equal in this order.
-    const live = new Set(list.data.keys());
-    let base;
-    if (whole) {
-        base = [...landed.values()].filter((row) => live.has(row));
+    if (terms.length > 0) {
+        order = order
+            .map((entry, i) => ({ entry, i }))
+            .sort((a, b) => compareRows(a.entry.data, b.entry.data, terms, options.types) ||
+            a.i - b.i)
+            .map(({ entry }) => entry);
     }
-    else {
-        base = rowsUnder(list.root).filter((row) => live.has(row));
-        const seen = new Set(base);
-        for (const row of landed.values()) {
-            if (!seen.has(row) && live.has(row))
-                base.push(row);
-        }
-    }
-    const desired = terms.length === 0
-        ? base
-        : base
-            .map((row, i) => ({ row, i, data: list.data.get(row) }))
-            .sort((a, b) => compareRows(a.data, b.data, terms) || a.i - b.i)
-            .map(({ row }) => row);
-    const moved = arrange(list, el.ownerDocument, desired, terms, new Set([...touched].filter(([, t]) => t.changed).map(([row]) => row)));
-    for (const [row, { fresh, changed }] of touched) {
-        if (!list.data.has(row))
-            continue;
-        const went = moved.has(row);
-        restamp(row, ATTR_ROW_CREATED, fresh);
-        restamp(row, ATTR_ROW_CHANGED, changed);
-        restamp(row, ATTR_ROW_MOVED, went);
+    const passing = filterFor(el, options.choices, options.types ?? {});
+    for (const entry of order)
+        filterRow(entry, !passing(entry.data));
+    const moved = movedRows(stayed, order, changed);
+    const retired = arrange(list, doc, order, terms);
+    refocus(list, focused);
+    const stamps = new Stamps();
+    for (const key of arriving.keys()) {
+        const entry = list.byKey.get(key);
+        const fresh = created.has(entry);
+        const went = moved.has(entry);
+        stamps.set(entry.el, ATTR_ROW_CREATED, fresh);
+        stamps.set(entry.el, ATTR_ROW_CHANGED, changed.has(entry));
+        stamps.set(entry.el, ATTR_ROW_MOVED, went);
         const requested = went
             ? REQUESTED_MOVED
             : fresh
                 ? REQUESTED_CREATED
-                : changed
+                : changed.has(entry)
                     ? REQUESTED_CHANGED
                     : null;
         if (options.requested && requested) {
-            row.setAttribute(ATTR_ROW_REQUESTED, requested);
+            entry.el.setAttribute(ATTR_ROW_REQUESTED, requested);
         }
     }
-    for (const row of moved) {
-        if (!touched.has(row))
-            restamp(row, ATTR_ROW_MOVED, true);
-    }
-    finish(list, list.root);
-    aggregate(el, rowsUnder(list.root).map((row) => list.data.get(row)), false);
-    // Counted from the DOM rather than from either branch above, so all rows
-    // and a patch report the same fact the same way. Only here is the count
-    // known: the server answers with rows and says nothing about how many
-    // survived reconciliation.
-    el.setAttribute(ATTR_QUERY_ROW_COUNT, String(liveRows(el).length));
+    stamps.done(doc);
+    const rows = finish(list.root, options.types ?? {});
+    // Counted from what the hub holds, which is what the rows show.
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length));
+    const departing = gone.map((entry) => entry.el);
+    for (const group of retired)
+        leaveGroup(group, departing);
+    if (departing.length > 0)
+        depart(departing);
     host.lbRowsLanded?.();
 }
+function focusedRow(list, doc) {
+    const active = doc.activeElement;
+    const row = active?.closest(LIVE_ROW);
+    if (!active || !row)
+        return null;
+    const entry = list.byKey.get(row.getAttribute(ATTR_KEY_VALUE));
+    return entry?.el === row ? { entry, active } : null;
+}
+/**
+ * Keep the focus where the user had it once rows are placed: on the same
+ * element, scrolled into view, when its row still shows; otherwise on the
+ * first element the user can operate in the first row showing.
+ */
+function refocus(list, focused) {
+    if (!focused)
+        return;
+    const { entry, active } = focused;
+    const doc = active.ownerDocument;
+    if (list.byKey.get(entry.key) === entry && !entry.hidden) {
+        if (doc.activeElement === active || !active.isConnected)
+            return;
+        active.focus({ preventScroll: true });
+        active.scrollIntoView?.({ block: "nearest" });
+        return;
+    }
+    const first = rowsUnder(list.root).find((row) => !row.hidden);
+    if (first)
+        focusIn(first.el);
+}
 /** Land one response item on one element that names its query. */
 function landItem(el, item, options = {}) {
     const template = lists.get(el)?.top ?? templateIn(el);
@@ -927,7 +1163,7 @@ function landItem(el, item, options = {}) {
         applyRow(el, row);
         const key = row[item.key];
         if (key !== undefined && key !== null) {
-            el.setAttribute(ATTR_KEY_VALUE, String(key));
+            setStamp(el, ATTR_KEY_VALUE, String(key));
         }
         return;
     }
@@ -951,13 +1187,23 @@ function keptFor(root) {
 export function keptAnswer(root, query) {
     return kept.get(root)?.answers.get(query);
 }
-/** The order a query's rows are placed by: the user's, else the server's. */
-function orderOf(state, item) {
-    return state.orderFor?.(item.query) ?? item.order;
+/**
+ * How a query's rows land: by its order, its column types, and the user's
+ * choices. The order and types are the kept answer's, since only the answer
+ * that loads the page carries them.
+ */
+function rowsOptions(state, item) {
+    const declared = state.answers.get(item.query) ?? item;
+    return {
+        order: declared.order,
+        types: declared.types,
+        choices: state.answers.get(CHOICES_QUERY)?.row,
+    };
 }
 /**
  * Drop what landing kept for a root. The hub calls it when it replaces the
- * page, since another page's query of the same name is another query.
+ * page, since another page's query of the same name is another query, and
+ * the user's choices were for the page they were made on.
  */
 export function forget(root) {
     kept.delete(root);
@@ -981,21 +1227,64 @@ function patched(rows, key, patch) {
  * Keep an answer as all of the query's rows. A patch is applied to the
  * answer already kept; with none, it is not the whole of anything, and
  * nothing is kept.
+ *
+ * A query's order and column types arrive with the answer that loads the
+ * page, and every answer after it, all rows or a patch, keeps them.
  */
 function keep(answers, item) {
+    const before = answers.get(item.query);
+    const declared = {
+        ...(before?.order !== undefined && { order: before.order }),
+        ...(before?.types !== undefined && { types: before.types }),
+    };
     if (!item.patch) {
-        answers.set(item.query, item);
+        answers.set(item.query, { ...declared, ...item });
         return;
     }
-    const before = answers.get(item.query);
     if (!before)
         return;
     const { patch: _, ...whole } = item;
     answers.set(item.query, {
+        ...declared,
         ...whole,
         rows: patched(before.rows ?? [], item.key, item.patch),
     });
 }
+/** The columns of `lb-choices` an answer to it changes. */
+function chosen(state, item) {
+    const before = state.answers.get(CHOICES_QUERY)?.row ?? {};
+    const after = item.row ?? {};
+    const columns = new Set();
+    for (const column of new Set([...Object.keys(before), ...Object.keys(after)])) {
+        if (choiceIn(before, column) !== choiceIn(after, column))
+            columns.add(column);
+    }
+    return columns;
+}
+/** Whether an element's order or filter reads any of the columns. */
+function reads(el, columns) {
+    const order = el.getAttribute(ATTR_ORDER);
+    return ((order !== null && columns.has(order)) ||
+        filtered(el).some((column) => columns.has(column)));
+}
+/**
+ * Place again the rows of every element whose order or filter reads a choice
+ * that changed. Each lands its query's kept answer again, whole, so it shows
+ * what a round trip carrying the choice would have, and the server is asked
+ * for nothing.
+ */
+function rechoose(root, state, columns) {
+    for (const [query, item] of state.answers) {
+        if (item.kind === KIND_ROW)
+            continue;
+        for (const el of everywhere(root, `[${ATTR_QUERY}="${query}"]`)) {
+            if (!state.landed.has(el) || el.closest(LEAVING))
+                continue;
+            if (reads(el, columns))
+                landItem(el, item, rowsOptions(state, item));
+        }
+    }
+}
 /**
  * Fill every element that names a kept query and has had nothing land on it.
  * Filling one can build more — a live row holding a picker of its own — so
@@ -1010,7 +1299,7 @@ function fillArrivals(root, state) {
                 if (landed.has(el) || el.closest(LEAVING))
                     continue;
                 landed.add(el);
-                landItem(el, item, { order: orderOf(state, item) });
+                landItem(el, item, { ...rowsOptions(state, item), refill: true });
                 filled = true;
             }
         }
@@ -1019,43 +1308,32 @@ function fillArrivals(root, state) {
 /**
  * Land response items. Every answer arrives through here, and is kept for
  * `root`, so that what arrives after it is filled from it — see forget().
- * Once everything has landed, each custom element placed since the last
- * landing is attached.
+ * An answer to `lb-choices` places again the rows its choices change. Once
+ * everything has landed, each custom element placed since the last landing
+ * is attached.
  */
 export function applyResponse(root, items, options = {}) {
     const state = keptFor(root);
-    if (options.orderFor)
-        state.orderFor = options.orderFor;
     for (const item of items) {
+        const choices = item.query === CHOICES_QUERY ? chosen(state, item) : new Set();
         keep(state.answers, item);
         const targets = everywhere(root, `[${ATTR_QUERY}="${item.query}"]`).filter((el) => !el.closest(LEAVING));
-        if (targets.length === 0) {
-            if (!options.quiet?.includes(item.query)) {
-                console.warn(`lb-hub: nothing names '${item.query}', skipping`);
-            }
-            continue;
+        if (targets.length === 0 &&
+            !item.query.startsWith(LB_RESERVED_PREFIX) &&
+            !options.quiet?.includes(item.query)) {
+            console.warn(`lb-hub: nothing names '${item.query}', skipping`);
         }
         for (const el of targets) {
             state.landed.add(el);
             landItem(el, item, {
-                order: orderOf(state, item),
+                ...rowsOptions(state, item),
                 requested: options.requested,
             });
         }
+        if (choices.size > 0)
+            rechoose(root, state, choices);
     }
     fillArrivals(root, state);
     attachPlaced();
 }
-/**
- * Land a query's kept answer again, as all of its rows: what the hub does
- * when the user's order for it changes and the rows themselves have not.
- * False when no answer is kept.
- */
-export function reland(root, query) {
-    const item = keptAnswer(root, query);
-    if (!item)
-        return false;
-    applyResponse(root, [item]);
-    return true;
-}
 //# sourceMappingURL=lb-apply.js.map