@loadbare/app 0.26.0 → 0.27.0

package/dist/hub/lb-apply.js

@@ -3,8 +3,8 @@
  * Landing: rows from response items onto the elements that name their query.
  * `applyRows` fills a row template; `applyRow` fills one element.
  */
-import { ATTR_COLUMN, ATTR_FILTER, FILTERS_COLUMN_QUERY, FILTERS_QUERY, SORT_COLUMN_ORDER, SORT_COLUMN_QUERY, SORT_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_KEY_VALUE, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_ROW_COUNT, ATTR_MANUAL, MANUAL_FILTER, MANUAL_ORDER, ATTR_QUERY_UNPLACED_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_ROW_UNPLACED, ATTR_SHOW, ATTR_URL_PARM, KIND_ROW, LIVE_ROW, ORDER_DESCENDING, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, } from "../core/lb-constants.js";
-import { compareRows, isPatch, parseFilter, parseOrder, passes, oneRow, } from "../core/lb-types.js";
+import { AGGREGATE_COUNT, AGGREGATE_MAX, AGGREGATE_MIN, AGGREGATE_SUM, ATTR_AGGREGATE, ATTR_COLUMN, ATTR_FILTER, FILTERS_COLUMN_QUERY, FILTERS_QUERY, SORT_COLUMN_ORDER, SORT_COLUMN_QUERY, SORT_QUERY, LB_RESERVED_PREFIX, ATTR_COLUMN_VALUE, ATTR_GROUP, ATTR_GROUP_COLUMN, ATTR_GROUP_LEAVING, ATTR_GROUP_LIVE, ATTR_GROUP_VALUE, ATTR_KEY_VALUE, ATTR_QUERY, ATTR_QUERY_ORDER, ATTR_QUERY_ROW_COUNT, ATTR_MANUAL, MANUAL_FILTER, MANUAL_ORDER, ATTR_QUERY_UNPLACED_COUNT, ATTR_ROW_CHANGED, ATTR_ROW_CREATED, ATTR_ROW_LEAVING, ATTR_ROW_LIVE, ATTR_ROW_MOVED, ATTR_ROW_REQUESTED, ATTR_ROW_UNPLACED, ATTR_SHOW, ATTR_URL_PARM, KIND_ROW, LIVE_GROUP, LIVE_ROW, ORDER_DESCENDING, REQUESTED_CHANGED, REQUESTED_CREATED, REQUESTED_MOVED, SHOW_NOT, } from "../core/lb-constants.js";
+import { compareRows, compareValues, isPatch, parseFilter, parseOrder, passes, readAs, oneRow, } 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;
@@ -204,6 +204,7 @@ function setText(el, 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);
@@ -222,10 +223,14 @@ function setStamp(el, name, 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;
@@ -252,15 +257,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;
@@ -332,7 +337,8 @@ function addPlace(map, name, el) {
  */
 function note(places, el) {
     const column = el.getAttribute(ATTR_COLUMN);
-    if (column !== null) {
+    // An aggregate's column is the one it totals, which no row lands on.
+    if (column !== null && !el.hasAttribute(ATTR_AGGREGATE)) {
         addPlace(places.columns, column, el);
     }
     if (el.hasAttribute(ATTR_URL_PARM))
@@ -358,7 +364,7 @@ const PLACE = `[${ATTR_COLUMN}], [${ATTR_SHOW}], [${ATTR_URL_PARM}]`;
  * count, as the row is its own. Its own `lb-show` never does.
  */
 function noteRoot(places, root) {
-    if (root.hasAttribute(ATTR_COLUMN)) {
+    if (root.hasAttribute(ATTR_COLUMN) && !root.hasAttribute(ATTR_AGGREGATE)) {
         addPlace(places.columns, root.getAttribute(ATTR_COLUMN), root);
     }
     if (root.hasAttribute(ATTR_URL_PARM))
@@ -369,11 +375,11 @@ function noteRoot(places, root) {
  * when `self`, and every one below it short of `stop`, absent branches
  * included.
  */
-function search(root, self) {
+function search(root, self, stop) {
     const places = noPlaces();
     if (self)
         noteRoot(places, root);
-    for (const el of below(root, PLACE))
+    for (const el of below(root, PLACE, stop))
         note(places, el);
     return places;
 }
@@ -462,9 +468,11 @@ function fill(places, row) {
  * 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) {
-    const places = search(root, self);
+export function applyRow(root, row, self = false, stop) {
+    const places = search(root, self, stop);
     fill(places, row);
     link(places, row);
 }
@@ -537,7 +545,7 @@ function link(places, row) {
  */
 export function blankRow(root) {
     const row = {};
-    for (const el of below(root, `[${ATTR_COLUMN}]`)) {
+    for (const el of below(root, `[${ATTR_COLUMN}]:not([${ATTR_AGGREGATE}])`)) {
         row[el.getAttribute(ATTR_COLUMN)] = null;
     }
     for (const el of below(root, `[${ATTR_SHOW}]`)) {
@@ -581,45 +589,108 @@ export function focusIn(root) {
     }
 }
 const lists = new WeakMap();
+/** Elements already told their group templates outrun their order. */
+const warned = new WeakSet();
 /**
- * The list an element holds, found from its row template the first time
- * rows land on it, and kept after that.
+ * 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 = `[${ATTR_AGGREGATE}]`;
+/**
+ * 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 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
+ * 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,
-        rowTemplate: template,
+        levels,
+        rowTemplate: at,
         byKey: new Map(),
-        rows: [],
         unentered: [],
+        root: {
+            id: "",
+            nodes: [],
+            slot: template,
+            children: [],
+            rows: [],
+            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.
-    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}'`);
+    if (levels.length === 0) {
+        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: {},
+                placed: {},
+                hidden: false,
+                unplaced: false,
+            };
+            list.byKey.set(key, entry);
+            list.root.rows.push(entry);
         }
-        const entry = {
-            key,
-            el: row,
-            places: search(row, true),
-            data: {},
-            placed: {},
-            hidden: false,
-            unplaced: false,
-        };
-        list.byKey.set(key, entry);
-        list.rows.push(entry);
     }
     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 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.
@@ -652,11 +723,11 @@ function create(list, doc, key) {
 }
 /**
  * Put the rows not yet entered after every row: immediately after the list's
- * row template, which the rows land in front of, so placing them never moves
- * these.
+ * first template, which the rows and groups land in front of, so placing
+ * them never moves these.
  */
 function standLast(list) {
-    let at = list.top;
+    let at = list.root.slot;
     for (const row of list.unentered) {
         if (at.nextElementSibling !== row)
             at.after(row);
@@ -665,7 +736,7 @@ function standLast(list) {
 }
 /** Stamp a list's count: the rows it shows, and its rows not yet entered. */
 function recount(el, list) {
-    const showing = list.rows.filter((entry) => !entry.hidden);
+    const showing = rowsUnder(list.root).filter((entry) => !entry.hidden);
     setStamp(el, ATTR_QUERY_ROW_COUNT, String(showing.length + list.unentered.length));
 }
 /**
@@ -730,6 +801,121 @@ function nameRadios(row, key) {
         el.setAttribute("name", `${name}-${key}`);
     }
 }
+/** 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) {
+    // Imported rather than cloned, for the reason a live row is.
+    const fragment = doc.importNode(template.content, true);
+    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;
+        const el = node;
+        placed(el);
+        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));
+        }
+        // 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: [],
+        heads,
+        aggregates,
+        hidden: false,
+    };
+}
+/**
+ * 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 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 middle = next.slice(start, next.length - tail);
+    if (middle.length === 0)
+        return;
+    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, 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, order, terms) {
+    const retired = [];
+    const visit = (parent, level, entries) => {
+        if (level === list.levels.length) {
+            placeRun(parent.rows, entries, parent.slot, (entry) => [entry.el]);
+            parent.rows = entries;
+            return;
+        }
+        const term = terms[level];
+        const runs = [];
+        for (const entry of entries) {
+            const value = term ? entry.placed[term.column] : null;
+            const id = groupId(term?.column ?? "", value);
+            const last = runs.at(-1);
+            if (last?.id === id)
+                last.entries.push(entry);
+            else
+                runs.push({ id, value, entries: [entry] });
+        }
+        // Each group already here goes on with the first run that has its id.
+        const pool = new Map();
+        for (const child of parent.children) {
+            pool.set(child.id, [...(pool.get(child.id) ?? []), child]);
+        }
+        const next = runs.map((run) => pool.get(run.id)?.shift() ??
+            makeGroup(doc, list.levels[level], run.id, term, run.value));
+        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.
+
 /**
  * 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
@@ -769,35 +955,6 @@ function movedRows(before, after, changed) {
     }
     return moved;
 }
-/**
- * Put a list's live rows in the order given, in front of the row template.
- * 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.
- */
-function placeRows(list, next) {
-    const old = list.rows;
-    const end = list.top;
-    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 middle = next.slice(start, next.length - tail);
-    if (middle.length === 0) {
-        list.rows = next;
-        return;
-    }
-    const ref = tail > 0 ? next[next.length - tail].el : end;
-    const fragment = ref.ownerDocument.createDocumentFragment();
-    for (const item of middle)
-        fragment.append(item.el);
-    ref.parentNode.insertBefore(fragment, ref);
-    list.rows = next;
-}
 /** Mark an element as leaving: no longer live, and taking no input. */
 function leaving(el, live, stamp) {
     el.removeAttribute(live);
@@ -805,6 +962,17 @@ function leaving(el, live, stamp) {
     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
@@ -855,11 +1023,121 @@ class Stamps {
             el.setAttribute(name, "");
     }
 }
+/** 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, type) {
+    if (name === AGGREGATE_COUNT && column === "")
+        return rows.length;
+    const values = rows
+        .map((row) => row[column])
+        .filter((v) => v !== null && v !== undefined && v !== "");
+    // As SQL's count(column): the values that are not null.
+    if (name === AGGREGATE_COUNT)
+        return values.length;
+    if (values.length === 0)
+        return null;
+    if (name === AGGREGATE_MIN || name === AGGREGATE_MAX) {
+        const sign = name === AGGREGATE_MIN ? 1 : -1;
+        return values.reduce((a, b) => sign * compareValues(readAs(b, type), readAs(a, type)) < 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: ${ATTR_AGGREGATE}="${name}" ${ATTR_COLUMN}="${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 === AGGREGATE_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 each aggregate element from rows, each column read as its type. */
+function aggregate(elements, rows, types) {
+    for (const el of elements) {
+        const name = el.getAttribute(ATTR_AGGREGATE) ?? "";
+        const column = el.getAttribute(ATTR_COLUMN) ?? "";
+        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);
 }
+/**
+ * Finish a group and everything under it, from the rows it shows: each
+ * heading filled and linked from the first, as it was when last placed by
+ * the order,
+ * 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(group, types) {
+    const shown = group.children.length > 0
+        ? group.children.flatMap((child) => finish(child, types))
+        : group.rows.filter((entry) => !entry.hidden);
+    const rows = shown.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);
+            }
+        }
+    }
+    if (shown[0]) {
+        for (const head of group.heads) {
+            fill(head, shown[0].placed);
+            link(head, shown[0].placed);
+        }
+    }
+    aggregate(group.aggregates, rows, types);
+    return shown;
+}
 /** The order to place rows by, or none when it cannot be read. */
 function termsOf(el, order) {
     try {
@@ -876,7 +1154,7 @@ function orderText(terms) {
         .map((term) => (term.descending ? ORDER_DESCENDING : "") + term.column)
         .join(",");
 }
-/** The user's choice in a column of `lb-choices`, when one is made. */
+/** The filter in a column of the query's `lb-filters` row, when one is made. */
 function choiceIn(choices, column) {
     const value = choices?.[column];
     return value === null || value === undefined || value === ""
@@ -928,7 +1206,8 @@ function differs(before, after) {
     return Object.entries(after).some(([column, value]) => !same(before[column], value));
 }
 /**
- * Land rows through a row template: a live row per key, placed by the order.
+ * Land rows through a row template: a live row per key, placed by the order,
+ * with groups built from the markup's group templates where the order breaks.
  * A patch disturbs only what it names — rows it leaves out keep their
  * contents and their place.
  */
@@ -939,7 +1218,7 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     const doc = options.doc ?? el.ownerDocument;
     const host = el;
     const whole = !isPatch(result);
-    const shown = list.rows;
+    const shown = rowsUnder(list.root);
     const focused = focusedRow(list, doc);
     // What a request did is said by this landing alone.
     for (const entry of shown)
@@ -999,6 +1278,12 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     // compare equal in this order.
     const stayed = shown.filter((entry) => list.byKey.get(entry.key) === entry);
     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`);
+    }
     const sort = (entries) => terms.length === 0
         ? entries
         : entries
@@ -1016,10 +1301,11 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     let order;
     let out = new Set();
     if (manual.order) {
-        // What already shows stays where it stands, and what is new goes last.
+        // What already shows stays where it stands, and what is new goes last
+        // in the group it belongs to.
         for (const entry of created)
             entry.placed = entry.data;
-        order = [...stayed, ...created];
+        order = heldOrder(stayed, created, groupTerms(list, terms));
         out = movedRows(order, sort(order), touched);
     }
     else {
@@ -1033,12 +1319,15 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         const kept = manual.filter && touched.has(entry) && !entry.hidden && fails;
         const hides = fails && !kept;
         filterRow(entry, hides);
-        entry.placed = entry.data;
+        // A row stands in the group it was placed in until it is placed again.
+        const moves = manual.order && regrouped(entry, list, terms);
+        if (!moves)
+            entry.placed = entry.data;
         // A row nobody sees stands nowhere the user would notice.
-        entry.unplaced = !hides && (out.has(entry) || kept);
+        entry.unplaced = !hides && (out.has(entry) || kept || moves);
     }
     const moved = movedRows(stayed, order, changed);
-    placeRows(list, order);
+    const retired = arrange(list, doc, order, terms);
     refocus(list, focused);
     const stamps = new Stamps();
     for (const key of arriving.keys()) {
@@ -1068,7 +1357,7 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         if (entry.unplaced)
             unplaced++;
     }
-    const rows = list.rows.filter((entry) => !entry.hidden);
+    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 + list.unentered.length));
     standLast(list);
@@ -1078,6 +1367,8 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     else
         setStamp(el, ATTR_QUERY_ORDER, orderText(terms));
     const departing = gone.map((entry) => entry.el);
+    for (const group of retired)
+        leaveGroup(group, departing);
     if (departing.length > 0)
         depart(departing);
     host.lbRowsLanded?.();
@@ -1090,6 +1381,39 @@ function manualOf(el) {
         filter: sides.includes(MANUAL_FILTER),
     };
 }
+/** The order's terms a list's groups break on, outermost first. */
+function groupTerms(list, terms) {
+    return terms.slice(0, list.levels.length);
+}
+/** The group a row's columns put it in, as one string. */
+function groupOf(row, terms) {
+    return terms.map((term) => groupId(term.column, row[term.column])).join("\u0001");
+}
+/** Whether a row's columns now put it in another group than it stands in. */
+function regrouped(entry, list, terms) {
+    const by = groupTerms(list, terms);
+    return groupOf(entry.data, by) !== groupOf(entry.placed, by);
+}
+/**
+ * The rows of a list the user is working in: those showing where they
+ * stand, and each new one after the last row of its group, or last of all
+ * when its group shows no row.
+ */
+function heldOrder(stayed, created, by) {
+    const order = [...stayed];
+    for (const entry of created) {
+        const group = groupOf(entry.placed, by);
+        let at = order.length;
+        if (by.length > 0) {
+            while (at > 0 && groupOf(order[at - 1].placed, by) !== group)
+                at--;
+            if (at === 0)
+                at = order.length;
+        }
+        order.splice(at, 0, entry);
+    }
+    return order;
+}
 function focusedRow(list, doc) {
     const active = doc.activeElement;
     const row = active?.closest(LIVE_ROW);
@@ -1115,7 +1439,7 @@ function refocus(list, focused) {
         active.scrollIntoView?.({ block: "nearest" });
         return;
     }
-    const first = list.rows.find((row) => !row.hidden);
+    const first = rowsUnder(list.root).find((row) => !row.hidden);
     if (first)
         focusIn(first.el);
 }