@loadbare/app 0.24.0 → 0.26.0

package/dist/hub/lb-apply.js

@@ -1,45 +1,10 @@
 /// <reference lib="dom" />
 /**
- * Landing — see docs/reference/data-binding.md.
- *
- * The hub lands a response item's rows on every element whose `lb-query`
- * names its query. The item says the query's kind and key, so the markup
- * says neither:
- *
- *   kind   row template   the hub
- *   row    no             lands the row on the element itself
- *   row    yes            lands one live row
- *   rows   yes            lands one live row per row
- *   rows   no             lands nothing
- *
- * Filling a live row and filling an element a `row` lands on are the same
- * operation, and the only difference is how much of the page the root
- * covers.
- *
- * An answer is kept after it lands. An element that names a query and
- * arrives after that query's answer — a picker in a new live row, a ghost
- * row a custom element built — is filled from the kept answer at the end of
- * the next landing, so a query need not land again, and need not land after
- * the one whose rows hold it, just to fill what is new.
- *
- * 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 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.
+ * Landing: rows from response items onto the elements that name their query.
+ * `applyRows` fills a row template; `applyRow` fills one element.
  */
-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_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_SUM, ATTR_URL_PARM, KIND_ROW, LIVE_GROUP, LIVE_ROW, ORDER_DESCENDING, 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 { 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 { 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;
@@ -239,7 +204,6 @@ 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);
@@ -258,14 +222,10 @@ 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, stop) {
-    if (stop && el !== root && el.matches(stop))
-        return false;
+function inScope(root, el) {
     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;
@@ -292,15 +252,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, stop) {
+function below(root, selector) {
     const found = [];
     for (const el of root.querySelectorAll(selector)) {
-        if (inScope(root, el, stop))
+        if (inScope(root, el))
             found.push(el);
     }
     for (const parked of root.querySelectorAll(PARKED)) {
-        if (inScope(root, parked, stop)) {
-            found.push(...below(parked.content, selector, stop));
+        if (inScope(root, parked)) {
+            found.push(...below(parked.content, selector));
         }
     }
     return found;
@@ -317,14 +277,6 @@ function everywhere(root, selector) {
     }
     return found;
 }
-/**
- * Tick or clear an `lb-select` checkbox, and stamp the live row it selects
- * to match.
- */
-export function select(box, on) {
-    box.checked = on;
-    box.closest(LIVE_ROW)?.toggleAttribute(ATTR_ROW_SELECTED, on);
-}
 /**
  * Put an element in the document or take it out, as its `lb-show` column
  * says.
@@ -347,12 +299,6 @@ function present(el, on) {
     }
     if (on || el.parentNode?.nodeType === FRAGMENT_NODE)
         return;
-    // A selection hidden is a selection abandoned: a tick kept out of sight
-    // would come back stale, and nothing else could clear it.
-    for (const box of [el, ...el.querySelectorAll(`[${ATTR_SELECT}]`)]) {
-        if (box.hasAttribute(ATTR_SELECT))
-            select(box, false);
-    }
     const parked = el.ownerDocument.createElement("template");
     parked.setAttribute(ATTR_SHOW, el.getAttribute(ATTR_SHOW));
     el.replaceWith(parked);
@@ -386,8 +332,9 @@ function addPlace(map, name, el) {
  */
 function note(places, el) {
     const column = el.getAttribute(ATTR_COLUMN);
-    if (column !== null)
+    if (column !== null) {
         addPlace(places.columns, column, el);
+    }
     if (el.hasAttribute(ATTR_URL_PARM))
         places.links.push(el);
     const show = el.getAttribute(ATTR_SHOW);
@@ -422,11 +369,11 @@ function noteRoot(places, root) {
  * when `self`, and every one below it short of `stop`, absent branches
  * included.
  */
-function search(root, self, stop) {
+function search(root, self) {
     const places = noPlaces();
     if (self)
         noteRoot(places, root);
-    for (const el of below(root, PLACE, stop))
+    for (const el of below(root, PLACE))
         note(places, el);
     return places;
 }
@@ -515,11 +462,9 @@ 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, stop) {
-    const places = search(root, self, stop);
+export function applyRow(root, row, self = false) {
+    const places = search(root, self);
     fill(places, row);
     link(places, row);
 }
@@ -636,106 +581,45 @@ export function focusIn(root) {
     }
 }
 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
- * 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.
+ * The list an element holds, found from its row template the first time
+ * rows land on it, and kept after that.
  */
 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,
+        rowTemplate: template,
         byKey: new Map(),
-        root: {
-            id: "",
-            nodes: [],
-            slot: template,
-            children: [],
-            rows: [],
-            heads: [],
-            aggregates: aggregatesIn(el, false),
-            hidden: false,
-        },
+        rows: [],
+        unentered: [],
     };
     // 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 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);
+    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.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.
@@ -767,125 +651,84 @@ function create(list, doc, key) {
     return entry;
 }
 /**
- * Give each radio button of a new live row a group of its own. The browser
- * groups radio buttons by `name`, and a row template repeats one `name` in
- * every live row, so the hub follows the `name` written, or the column when
- * none is, with the row's 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.
  */
-function nameRadios(row, key) {
-    for (const el of below(row, `input[type=radio][${ATTR_COLUMN}]`)) {
-        const name = el.getAttribute("name") || el.getAttribute(ATTR_COLUMN);
-        el.setAttribute("name", `${name}-${key}`);
+function standLast(list) {
+    let at = list.top;
+    for (const row of list.unentered) {
+        if (at.nextElementSibling !== row)
+            at.after(row);
+        at = row;
     }
 }
-/** A group's identity among its siblings: its column and its value there. */
-function groupId(column, value) {
-    return `${column}\u0000${JSON.stringify(value ?? null)}`;
+/** 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);
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(showing.length + list.unentered.length));
 }
-/** A new group, cloned from the group template for its level and stamped. */
-function makeGroup(doc, template, id, term, value) {
+/**
+ * Put a row not yet entered into a list: a live row copied from its row
+ * template, keyed by the empty key, its controls at their HTML defaults and
+ * its `lb-show` branches as for a row whose columns are all null. It sends
+ * nothing; the submit of the form around the list carries it. False when the
+ * element holds no row template.
+ */
+export function addUnentered(el) {
+    const template = lists.get(el)?.top ?? templateIn(el);
+    if (!template)
+        return false;
+    const list = listFor(el, template);
+    if (!list)
+        return false;
+    const doc = el.ownerDocument;
+    const source = list.rowTemplate.content.firstElementChild;
+    list.paths ??= compile(source);
     // 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,
-    };
+    const row = doc.importNode(source, true);
+    upgradeAbsent(row, doc);
+    placed(row);
+    row.setAttribute(ATTR_ROW_LIVE, "");
+    row.setAttribute(ATTR_KEY_VALUE, "");
+    nameRadios(row, "");
+    for (const [show, els] of placesBy(row, list.paths).shows) {
+        for (const shown of els)
+            presentPlaced(shown, show.startsWith(SHOW_NOT));
+    }
+    list.unentered.push(row);
+    standLast(list);
+    recount(el, list);
+    attachPlaced();
+    return true;
 }
 /**
- * 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.
+ * Take a row not yet entered out of its list, as a row leaves. False when
+ * the row is not one `--lb-new` put in a list.
  */
-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);
+export function discardUnentered(row) {
+    const el = row.parentElement?.closest(`[${ATTR_QUERY}]`);
+    const list = el ? lists.get(el) : undefined;
+    const at = list?.unentered.indexOf(row) ?? -1;
+    if (!el || !list || at < 0)
+        return false;
+    list.unentered.splice(at, 1);
+    leaving(row, ATTR_ROW_LIVE, ATTR_ROW_LEAVING);
+    depart([row]);
+    recount(el, list);
+    return true;
 }
 /**
- * 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.
+ * Give each radio button of a new live row a group of its own. The browser
+ * groups radio buttons by `name`, and a row template repeats one `name` in
+ * every live row, so the hub follows the `name` written, or the column when
+ * none is, with the row's key.
  */
-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;
+function nameRadios(row, key) {
+    for (const el of below(row, `input[type=radio][${ATTR_COLUMN}]`)) {
+        const name = el.getAttribute("name") || el.getAttribute(ATTR_COLUMN);
+        el.setAttribute("name", `${name}-${key}`);
+    }
 }
 /**
  * The rows that moved: rows whose values changed, and which now stand
@@ -926,6 +769,35 @@ 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);
@@ -933,17 +805,6 @@ 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
@@ -994,117 +855,11 @@ 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 === 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(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: ${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 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));
-        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);
 }
-/**
- * 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 {
@@ -1136,73 +891,46 @@ function filtered(el) {
         .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.
+ * The order an element's rows are placed by: its query's row of `lb-sort`.
  */
-function orderFor(el, options) {
-    const column = el.getAttribute(ATTR_ORDER);
-    const chosen = column ? choiceIn(options.choices, column) : undefined;
-    return chosen ?? options.order;
+function sortOf(state, query) {
+    const row = state.answers.get(SORT_QUERY)?.rows?.find((r) => r[SORT_COLUMN_QUERY] === query);
+    const order = row?.[SORT_COLUMN_ORDER];
+    return typeof order === "string" && order !== "" ? order : undefined;
+}
+/** The query's row of `lb-filters`, when it has one. */
+function filtersOf(state, query) {
+    return state.answers.get(FILTERS_QUERY)?.rows?.find((r) => r[FILTERS_COLUMN_QUERY] === query);
 }
 /**
  * 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.
+ * column its `lb-filter` names, the filter in the query's row of
+ * `lb-filters` of the same name.
  */
-function filterFor(el, choices, types) {
-    const filters = [];
+function filterFor(el, filters, types) {
+    const terms = [];
     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]);
+        const text = choiceIn(filters, column);
+        const parsed = text === undefined ? [] : parseFilter(text);
+        if (parsed.length > 0)
+            terms.push([column, parsed]);
     }
-    return (row) => filters.every(([column, terms]) => passes(row[column], terms, types[column]));
+    return (row) => terms.every(([column, parsed]) => passes(row[column], parsed, 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) {
     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.
- *
- * 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`.
- *
- * A landing that answers a request leaves alone each side `lb-manual` names
- * on the element, whole or a patch. Under `order`, nothing already showing
- * moves, and a new row goes last in its group. Under `filter`, a row the
- * answer changed or created stays showing. A row left where the order or
- * the filter would not leave it is stamped unplaced until the rows are next
- * placed.
+ * Land rows through a row template: a live row per key, placed by the order.
+ * A patch disturbs only what it names — rows it leaves out keep their
+ * contents and their place.
  */
 export function applyRows(el, template, keyColumn, result, options = {}) {
     const list = listFor(el, template);
@@ -1211,12 +939,11 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     const doc = options.doc ?? el.ownerDocument;
     const host = el;
     const whole = !isPatch(result);
-    const shown = rowsUnder(list.root);
+    const shown = list.rows;
     const focused = focusedRow(list, doc);
     // What a request did is said by this landing alone.
     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) {
@@ -1241,7 +968,6 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     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))
@@ -1272,13 +998,7 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
     // 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);
-    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`);
-    }
+    const terms = termsOf(el, options.order);
     const sort = (entries) => terms.length === 0
         ? entries
         : entries
@@ -1286,7 +1006,7 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
             .sort((a, b) => compareRows(a.entry.data, b.entry.data, terms, options.types) ||
             a.i - b.i)
             .map(({ entry }) => entry);
-    const passing = filterFor(el, options.choices, options.types ?? {});
+    const passing = filterFor(el, options.filters, options.types ?? {});
     const manual = options.requested ? manualOf(el) : NO_MANUAL;
     const touched = new Set([...changed, ...created]);
     // A row left out of place stays touched until the rows are placed again.
@@ -1296,11 +1016,10 @@ 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
-        // in the group it belongs to.
+        // What already shows stays where it stands, and what is new goes last.
         for (const entry of created)
             entry.placed = entry.data;
-        order = heldOrder(stayed, created, groupTerms(list, terms));
+        order = [...stayed, ...created];
         out = movedRows(order, sort(order), touched);
     }
     else {
@@ -1314,15 +1033,12 @@ 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);
-        // 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;
+        entry.placed = entry.data;
         // A row nobody sees stands nowhere the user would notice.
-        entry.unplaced = !hides && (out.has(entry) || kept || moves);
+        entry.unplaced = !hides && (out.has(entry) || kept);
     }
     const moved = movedRows(stayed, order, changed);
-    const retired = arrange(list, doc, order, terms);
+    placeRows(list, order);
     refocus(list, focused);
     const stamps = new Stamps();
     for (const key of arriving.keys()) {
@@ -1352,17 +1068,16 @@ export function applyRows(el, template, keyColumn, result, options = {}) {
         if (entry.unplaced)
             unplaced++;
     }
-    const rows = finish(list.root, options.types ?? {});
+    const rows = list.rows.filter((entry) => !entry.hidden);
     // Counted from what the hub holds, which is what the rows show.
-    setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length));
+    setStamp(el, ATTR_QUERY_ROW_COUNT, String(rows.length + list.unentered.length));
+    standLast(list);
     setStamp(el, ATTR_QUERY_UNPLACED_COUNT, String(unplaced));
     if (terms.length === 0)
         el.removeAttribute(ATTR_QUERY_ORDER);
     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?.();
@@ -1375,39 +1090,6 @@ 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);
@@ -1433,7 +1115,7 @@ function refocus(list, focused) {
         active.scrollIntoView?.({ block: "nearest" });
         return;
     }
-    const first = rowsUnder(list.root).find((row) => !row.hidden);
+    const first = list.rows.find((row) => !row.hidden);
     if (first)
         focusIn(first.el);
 }
@@ -1441,7 +1123,7 @@ function refocus(list, focused) {
 function landItem(el, item, options = {}) {
     const template = lists.get(el)?.top ?? templateIn(el);
     if (item.kind === KIND_ROW) {
-        const row = item.row;
+        const row = oneRow(item);
         if (template) {
             applyRows(el, template, item.key, row ? [row] : [], options);
             return;
@@ -1453,8 +1135,8 @@ function landItem(el, item, options = {}) {
             el.removeAttribute(ATTR_KEY_VALUE);
             return;
         }
-        applyRow(el, row);
         const key = row[item.key];
+        applyRow(el, row);
         if (key !== undefined && key !== null) {
             setStamp(el, ATTR_KEY_VALUE, String(key));
         }
@@ -1493,9 +1175,9 @@ export function keptAnswer(root, query) {
 function rowsOptions(state, item) {
     const declared = state.answers.get(item.query) ?? item;
     return {
-        order: declared.order,
+        order: sortOf(state, item.query) ?? declared.order,
         types: declared.types,
-        choices: state.answers.get(CHOICES_QUERY)?.row ?? undefined,
+        filters: filtersOf(state, item.query),
         doc: state.doc,
     };
 }
@@ -1549,38 +1231,41 @@ function keep(answers, item) {
         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);
+/** The queries whose sort or filters an answer changes. */
+function changedQueries(state, item) {
+    const rowsOf = (answer) => {
+        const map = new Map();
+        for (const row of answer?.rows ?? []) {
+            const query = row[SORT_COLUMN_QUERY];
+            if (typeof query === "string")
+                map.set(query, row);
+        }
+        return map;
+    };
+    const before = rowsOf(state.answers.get(item.query));
+    const after = rowsOf(item);
+    const queries = new Set();
+    for (const query of new Set([...before.keys(), ...after.keys()])) {
+        if (JSON.stringify(before.get(query)) !== JSON.stringify(after.get(query))) {
+            queries.add(query);
+        }
     }
-    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)));
+    return queries;
 }
 /**
- * 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.
+ * Place again the rows of every query whose sort or filters changed. Each
+ * lands its query's kept answer again, whole, so it shows what a round trip
+ * carrying the change 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)
+function rechoose(root, state, queries) {
+    for (const query of queries) {
+        const item = state.answers.get(query);
+        if (!item || 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));
+            landItem(el, item, rowsOptions(state, item));
         }
     }
 }
@@ -1607,14 +1292,16 @@ 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().
- * 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.
+ * An answer to `lb-sort` or `lb-filters` places again the rows it changes.
+ * Once everything has landed, each custom element placed since the last
+ * landing is attached.
  */
 export function applyResponse(root, items, options = {}) {
     const state = keptFor(root);
     for (const item of items) {
-        const choices = item.query === CHOICES_QUERY ? chosen(state, item) : new Set();
+        const changed = item.query === SORT_QUERY || item.query === FILTERS_QUERY
+            ? changedQueries(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 &&
@@ -1629,8 +1316,8 @@ export function applyResponse(root, items, options = {}) {
                 requested: options.requested,
             });
         }
-        if (choices.size > 0)
-            rechoose(root, state, choices);
+        if (changed.size > 0)
+            rechoose(root, state, changed);
     }
     fillArrivals(root, state);
     attachPlaced();