@loadbare/app 0.12.0 → 0.13.0

package/dist/hub/lb-apply.js

@@ -24,17 +24,34 @@
  * shipped inside an absent branch has not upgraded, so it is filled again
  * once it has, and places its rows itself.
  *
+ * 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 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 { ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_KEY_VALUE, ATTR_QUERY, ATTR_QUERY_ROW_COUNT, ATTR_ROW_LIVE, ATTR_SHOW, KIND_ROW, LIVE_ROW, SHOW_NOT, } from "../core/lb-constants.js";
-import { isPatch, } from "../core/lb-types.js";
+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, } from "../core/lb-constants.js";
+import { compareRows, compareValues, isPatch, parseOrder, } from "../core/lb-types.js";
 /** The template holding an absent branch — see ATTR_SHOW. */
 const PARKED = `template[${ATTR_SHOW}]`;
 /** 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;
+/** A row or a group on its way out. */
+const LEAVING = `[${ATTR_ROW_LEAVING}], [${ATTR_GROUP_LEAVING}]`;
+/**
+ * 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 input types whose state is not their `value`, or cannot be set. */
 const UNLANDED_INPUTS = ["checkbox", "radio", "file"];
 /**
@@ -110,10 +127,14 @@ function land(el, value) {
  * up from an element inside it stops at the top of that content, which has
  * no parent, and the template it stands for was in scope already.
  */
-function inScope(root, el) {
+function inScope(root, el, stop) {
+    if (stop && el !== root && el.matches(stop))
+        return false;
     for (let node = el.parentElement; node && node !== root;) {
         if (node.hasAttribute(ATTR_QUERY))
             return false;
+        if (stop && node.matches(stop))
+            return false;
         node = node.parentElement;
     }
     return true;
@@ -140,15 +161,15 @@ export function within(root, selector) {
  * stale or with its rows empty. A template holding one is in root's query by
  * the ordinary rule, and its content is searched as if it stood there.
  */
-function below(root, selector) {
+function below(root, selector, stop) {
     const found = [];
     for (const el of root.querySelectorAll(selector)) {
-        if (inScope(root, el))
+        if (inScope(root, el, stop))
             found.push(el);
     }
     for (const parked of root.querySelectorAll(PARKED)) {
-        if (inScope(root, parked)) {
-            found.push(...below(parked.content, selector));
+        if (inScope(root, parked, stop)) {
+            found.push(...below(parked.content, selector, stop));
         }
     }
     return found;
@@ -201,10 +222,10 @@ function present(el, on) {
  * ancestor, so its own `lb-column` reads from the row around it and is left
  * alone here.
  */
-export function applyRow(root, row, liveRow = false) {
+export function applyRow(root, row, liveRow = false, stop) {
     for (const [column, value] of Object.entries(row)) {
         const selector = `[${ATTR_COLUMN}="${column}"]`;
-        const columns = below(root, selector);
+        const columns = below(root, selector, stop);
         if (liveRow && root.matches(selector))
             columns.unshift(root);
         for (const el of columns)
@@ -215,10 +236,10 @@ export function applyRow(root, row, liveRow = false) {
         // 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}"]`)) {
+        for (const el of below(root, `[${ATTR_SHOW}="${column}"]`, stop)) {
             present(el, on);
         }
-        for (const el of below(root, `[${ATTR_SHOW}="${SHOW_NOT}${column}"]`)) {
+        for (const el of below(root, `[${ATTR_SHOW}="${SHOW_NOT}${column}"]`, stop)) {
             present(el, !on);
         }
     }
@@ -258,30 +279,467 @@ function showing(el) {
     }
     return rows;
 }
+const lists = new WeakMap();
+/** Elements already told their group templates outrun their order. */
+const warned = new WeakSet();
+/**
+ * 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
+ * branch.
+ */
+function slotIn(root) {
+    for (const t of root.querySelectorAll(`template:not([${ATTR_SHOW}])`)) {
+        if (inScope(root, t))
+            return t;
+    }
+    return null;
+}
+/**
+ * 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
+ * templates too, and they come first in the document.
+ */
+function listFor(el, template) {
+    const found = lists.get(el);
+    if (found)
+        return found;
+    const levels = [];
+    let at = template;
+    while (at.hasAttribute(ATTR_GROUP)) {
+        levels.push(at);
+        const next = slotIn(at.content);
+        if (!next) {
+            console.error(`lb-hub: a group template in <${el.localName}> holds no nested ` +
+                `template for its contents`);
+            return null;
+        }
+        at = next;
+    }
+    const list = {
+        top: template,
+        levels,
+        rowTemplate: at,
+        data: new Map(),
+        groupOf: new WeakMap(),
+        root: {
+            id: "",
+            nodes: [],
+            slot: template,
+            children: [],
+            rows: [],
+            placed: true,
+        },
+    };
+    // 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);
+        }
+    }
+    lists.set(el, list);
+    return list;
+}
+/** The live rows of a group and everything under it, in order. */
+function rowsUnder(group) {
+    return group.children.length > 0
+        ? 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.
+ */
+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();
+    };
+    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", "");
+}
+/** 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 new group, cloned from the group template for its level and stamped. */
+function makeGroup(doc, template, id, term, value) {
+    // Imported rather than cloned, for the reason a live row is.
+    const fragment = doc.importNode(template.content, true);
+    const slot = slotIn(fragment);
+    const nodes = [...fragment.childNodes];
+    for (const node of nodes) {
+        if (node.nodeType !== ELEMENT_NODE || node === slot)
+            continue;
+        const el = node;
+        el.setAttribute(ATTR_GROUP_LIVE, "");
+        if (term)
+            el.setAttribute(ATTR_GROUP_COLUMN, term.column);
+        if (value === null || value === undefined) {
+            el.removeAttribute(ATTR_GROUP_VALUE);
+        }
+        else {
+            el.setAttribute(ATTR_GROUP_VALUE, String(value));
+        }
+    }
+    return { id, nodes, slot, children: [], rows: [], placed: 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.
+ */
+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;
+    }
+    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]);
+        return;
+    }
+    parent.insertBefore(row, 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.
+ */
+function arrange(list, doc, desired, terms, changed) {
+    const moved = new Set();
+    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) => {
+        if (level === list.levels.length) {
+            placeRows(parent, rows);
+            return;
+        }
+        const term = terms[level];
+        const runs = [];
+        for (const row of rows) {
+            const value = term ? list.data.get(row)[term.column] : null;
+            const id = groupId(term?.column ?? "", value);
+            const last = runs.at(-1);
+            if (last?.id === id)
+                last.rows.push(row);
+            else
+                runs.push({ id, value, rows: [row] });
+        }
+        // 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;
+        for (const child of parent.children) {
+            const i = at.get(child.id);
+            if (i === undefined)
+                continue;
+            if (i < last)
+                kept = false;
+            last = i;
+        }
+        const existing = new Map(kept ? parent.children.map((child) => [child.id, child]) : []);
+        const next = runs.map((run) => existing.get(run.id) ??
+            makeGroup(doc, list.levels[level], run.id, term, run.value));
+        for (const child of parent.children) {
+            if (!next.includes(child))
+                retired.push(child);
+        }
+        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;
+        }
+        parent.children = next;
+        runs.forEach((run, i) => visit(next[i], level + 1, run.rows));
+    };
+    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);
+    return moved;
+}
+/** A plain decimal number, as JSON or Postgres writes one. */
+const DECIMAL = /^[+-]?\d+(\.\d+)?$/;
+function decimalOf(value) {
+    const text = typeof value === "number" ? String(value) : value;
+    if (typeof text !== "string" || !DECIMAL.test(text.trim()))
+        return null;
+    const [whole, fraction = ""] = text.trim().split(".");
+    return { digits: BigInt(whole + fraction), scale: fraction.length };
+}
+function rescale(d, scale) {
+    return d.digits * 10n ** BigInt(scale - d.scale);
+}
+function decimalText(digits, scale) {
+    const negative = digits < 0n;
+    const text = (negative ? -digits : digits)
+        .toString()
+        .padStart(scale + 1, "0");
+    const whole = text.slice(0, text.length - scale);
+    const fraction = scale > 0 ? `.${text.slice(text.length - scale)}` : "";
+    return `${negative ? "-" : ""}${whole}${fraction}`;
+}
+/** Aggregates already warned about, so a bad value is reported once. */
+const reported = new Set();
+/**
+ * One aggregate over rows. A sum and an average are exact, carried as
+ * decimals with as many places as the most precise value, and an average
+ * 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) {
+    if (name === ATTR_COUNT)
+        return rows.length;
+    const values = rows
+        .map((row) => row[column])
+        .filter((v) => v !== null && v !== undefined && v !== "");
+    if (values.length === 0)
+        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));
+    }
+    const decimals = [];
+    for (const value of values) {
+        const d = decimalOf(value);
+        if (d)
+            decimals.push(d);
+        else if (!reported.has(`${name}:${column}`)) {
+            reported.add(`${name}:${column}`);
+            console.warn(`lb-hub: ${name}="${column}" left out ${JSON.stringify(value)}, ` +
+                `which is not a number`);
+        }
+    }
+    if (decimals.length === 0)
+        return null;
+    const scale = Math.max(...decimals.map((d) => d.scale));
+    const sum = decimals.reduce((total, d) => total + rescale(d, scale), 0n);
+    if (name === ATTR_SUM)
+        return decimalText(sum, scale);
+    // An average, rounded half away from zero at two places past the values',
+    // which are then dropped while they are zeros.
+    const scaled = sum * 100n;
+    const n = BigInt(decimals.length);
+    const sign = scaled < 0n ? -1n : 1n;
+    let text = decimalText((2n * scaled + sign * n) / (2n * n), scale + 2);
+    for (let i = 0; i < 2 && text.endsWith("0"); i++)
+        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) {
+        const name = AGGREGATES.find((a) => el.hasAttribute(a));
+        land(el, aggregateOf(name, el.getAttribute(name) ?? "", rows));
+    }
+}
+/**
+ * Fill each group's heading from its first row, and set each group's
+ * aggregates from its rows, all the way down.
+ */
+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);
+        }
+        aggregate(el, data, true);
+    }
+}
+/** The order to place rows by, or none when it cannot be read. */
+function termsOf(el, order) {
+    try {
+        return parseOrder(order ?? "");
+    }
+    catch (err) {
+        console.error(`lb-hub: <${el.localName}> ${err.message}`);
+        return [];
+    }
+}
+/** 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));
+}
 /**
  * Land rows through a row template.
  *
- * All rows decide membership and order: every row is placed in the order
- * given, and a row whose key did not arrive is gone. A patch disturbs only
- * what it names — a row it did not mention keeps its contents and its
- * position.
+ * 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.
  *
- * A custom element that carries `lbPlaceRow` decides where a row goes,
- * because only it knows whether it sorts or groups. Without it a row lands
- * immediately before the template, so rows accumulate in the order they
- * arrive and the template stays put as the insertion marker.
+ * 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.
  */
-export function applyRows(el, template, keyColumn, result) {
+export function applyRows(el, template, keyColumn, result, options = {}) {
+    const list = listFor(el, template);
+    if (!list)
+        return;
     const shown = showing(el);
     const host = el;
     const whole = !isPatch(result);
-    const landed = new Set();
-    const place = (row, data) => {
-        if (host.lbPlaceRow)
-            host.lbPlaceRow(row, data, template);
-        else
-            template.parentElement.insertBefore(row, template);
-    };
+    const landed = new Map();
+    const touched = new Map();
+    // What a request did is said by this landing alone.
+    for (const row of shown.values())
+        row.removeAttribute(ATTR_ROW_REQUESTED);
     const upsert = (data) => {
         if (data[keyColumn] === undefined) {
             console.error(`lb-hub: a row for <${el.localName}> has no '${keyColumn}' column`);
@@ -293,8 +751,8 @@ export function applyRows(el, template, keyColumn, result) {
         if (landed.has(key)) {
             console.error(`lb-hub: two rows for <${el.localName}> have the key '${key}'; ` +
                 `the last one shows`);
+            landed.delete(key);
         }
-        landed.add(key);
         let row = shown.get(key);
         const fresh = row === undefined;
         if (!row) {
@@ -302,47 +760,109 @@ export function applyRows(el, template, keyColumn, result) {
             // 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(template.content.firstElementChild, true);
+            row = el.ownerDocument.importNode(list.rowTemplate.content.firstElementChild, true);
             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. The attributes are already there when the row
         // upgrades, which is the same thing that makes a first landing and a
         // refresh one operation everywhere else.
         applyRow(row, data, true);
-        if (fresh || whole)
-            place(row, data);
     };
     if (Array.isArray(result)) {
         for (const data of result)
             upsert(data);
-        for (const [key, row] of shown)
+        for (const [key, row] of shown) {
             if (!landed.has(key))
-                row.remove();
+                leaveRow(list, row);
+        }
     }
     else {
         for (const data of result.rows ?? [])
             upsert(data);
-        for (const key of result.drop ?? [])
-            shown.get(String(key))?.remove();
+        for (const key of result.drop ?? []) {
+            const row = shown.get(String(key));
+            if (row)
+                leaveRow(list, row);
+        }
+    }
+    const terms = termsOf(el, options.order);
+    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));
     }
+    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 requested = went
+            ? REQUESTED_MOVED
+            : fresh
+                ? REQUESTED_CREATED
+                : changed
+                    ? REQUESTED_CHANGED
+                    : null;
+        if (options.requested && requested) {
+            row.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));
-    // Derived scaffolding — a section heading, an <optgroup> — goes when its
-    // last row does, and only the custom element knows it exists.
     host.lbRowsLanded?.();
 }
 /** Land one response item on one element that names its query. */
-function landItem(el, item) {
-    const template = templateIn(el);
+function landItem(el, item, options = {}) {
+    const template = lists.get(el)?.top ?? templateIn(el);
     if (item.kind === KIND_ROW) {
         const row = item.row ?? {};
         if (template) {
-            applyRows(el, template, item.key, [row]);
+            applyRows(el, template, item.key, [row], options);
             return;
         }
         applyRow(el, row);
@@ -357,7 +877,7 @@ function landItem(el, item) {
     if (!template)
         return;
     const result = item.patch ?? item.rows ?? [];
-    applyRows(el, template, item.key, result);
+    applyRows(el, template, item.key, result, options);
 }
 const kept = new WeakMap();
 function keptFor(root) {
@@ -368,6 +888,14 @@ function keptFor(root) {
     }
     return found;
 }
+/** The answer kept for a query, as all of its rows. */
+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;
+}
 /**
  * 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.
@@ -430,15 +958,16 @@ function waiting(el) {
  * Filling one can build more — a live row holding a picker of its own — so
  * it goes round until a pass finds nothing new.
  */
-function fillArrivals(root, { answers, landed }) {
+function fillArrivals(root, state) {
+    const { answers, landed } = state;
     for (let filled = true; filled;) {
         filled = false;
         for (const [query, item] of answers) {
             for (const el of everywhere(root, `[${ATTR_QUERY}="${query}"]`)) {
-                if (landed.has(el) || waiting(el))
+                if (landed.has(el) || waiting(el) || el.closest(LEAVING))
                     continue;
                 landed.add(el);
-                landItem(el, item);
+                landItem(el, item, { order: orderOf(state, item) });
                 filled = true;
             }
         }
@@ -447,28 +976,41 @@ function fillArrivals(root, { answers, landed }) {
 /**
  * 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().
- *
- * `quiet` names queries that may have nowhere to land without a warning: the
- * hub's own `lb-url` lands wherever a chrome or page names it, and nowhere
- * otherwise.
  */
-export function applyResponse(root, items, quiet = []) {
-    const kept = keptFor(root);
+export function applyResponse(root, items, options = {}) {
+    const state = keptFor(root);
+    if (options.orderFor)
+        state.orderFor = options.orderFor;
     for (const item of items) {
-        keep(kept.answers, item);
-        const targets = everywhere(root, `[${ATTR_QUERY}="${item.query}"]`);
+        keep(state.answers, item);
+        const targets = everywhere(root, `[${ATTR_QUERY}="${item.query}"]`).filter((el) => !el.closest(LEAVING));
         if (targets.length === 0) {
-            if (!quiet.includes(item.query)) {
+            if (!options.quiet?.includes(item.query)) {
                 console.warn(`lb-hub: nothing names '${item.query}', skipping`);
             }
             continue;
         }
         for (const el of targets) {
             if (!waiting(el))
-                kept.landed.add(el);
-            landItem(el, item);
+                state.landed.add(el);
+            landItem(el, item, {
+                order: orderOf(state, item),
+                requested: options.requested,
+            });
         }
     }
-    fillArrivals(root, kept);
+    fillArrivals(root, state);
+}
+/**
+ * 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