@loadbare/app 0.9.0 → 0.11.0

package/dist/hub/lb-hub.browser.js

@@ -1,247 +1,214 @@
 /// <reference lib="dom" />
-import { ACTION_ROW_DELETE, ACTION_ROW_INSERT, ACTION_ROW_UPDATE, ATTR_ACTION, ATTR_CELL, ATTR_ERROR, ATTR_KEY_VALUE, ATTR_LIST, ATTR_NAV_LINK, ATTR_PAGE, ATTR_PENDING, ATTR_QUERY_PARM, ATTR_QUERY_PARM_PUSH, ATTR_ROW, ATTR_UNKNOWN_PAGE, ATTR_VALUE, LB_ACTIONS, LB_RESERVED_PREFIX, HUB_TAG_NAME, NAV_CELL_LABEL, NAV_CELL_URI, NAV_ROW, QUERY_PARMS_ROW, LB_EVENT_NAME, LB_ENDPOINT, LB_REQUEST_TIMEOUT_MS, } from "../core/lb-constants.js";
-import { withQueryParms, } from "../core/lb-types.js";
-import { applyData, applyQueryParms, isValueControl, within, } from "./lb-apply.js";
-export { applyData, applyRow } from "./lb-apply.js";
-/** What each operation takes from scope, and what it cannot be sent without. */
-const OPERATIONS = {
-    [ACTION_ROW_INSERT]: { fills: ["list"], requires: ["list", "values"] },
-    [ACTION_ROW_DELETE]: { fills: ["list", "key"], requires: ["list", "key"] },
-    [ACTION_ROW_UPDATE]: {
-        fills: ["list", "key"],
-        requires: ["list", "key", "values"],
-    },
+import { ATTR_COLUMN, ATTR_COLUMN_VALUE, ATTR_KEY_VALUE, ATTR_PAGE, ATTR_PAGE_TITLE, ATTR_QUERY, ATTR_REQUEST, ATTR_REQUEST_ERROR, ATTR_REQUEST_PENDING, ATTR_URL_LINK, ATTR_URL_PUSH, ATTR_URL_UNKNOWN, HUB_TAG_NAME, KIND_ROW, LB_ENDPOINT, LB_EVENT_NAME, LB_REQUEST_TIMEOUT_MS, LB_RESERVED_PREFIX, LIVE_ROW, REQUEST_ROW_DELETE, REQUEST_ROW_INSERT, REQUEST_ROW_UPDATE, URL_COLUMN_PAGE_LABEL, URL_COLUMN_PAGE_UNKNOWN, URL_COLUMN_PATH, URL_QUERY, } from "../core/lb-constants.js";
+import { isRowRequest, nextLocation, pageNameFor, } from "../core/lb-types.js";
+import { applyResponse, isControl, isFormAssociated, within, } from "./lb-apply.js";
+export { applyResponse, applyRow } from "./lb-apply.js";
+/** What each request Loadbare provides cannot be issued without. */
+const NEEDS = {
+    [REQUEST_ROW_INSERT]: ["query", "values"],
+    [REQUEST_ROW_UPDATE]: ["query", "key", "values"],
+    [REQUEST_ROW_DELETE]: ["query", "key"],
 };
+/** The nearest ancestor carrying `lb-query`. An element is not its own. */
+function queryOf(el) {
+    return el.parentElement?.closest(`[${ATTR_QUERY}]`) ?? null;
+}
+/** The live row an element is, or is in. */
+function liveRowOf(el) {
+    return el.closest(LIVE_ROW);
+}
+/**
+ * The key of the nearest ancestor row, when that row is of `query`: a live
+ * row whose query it is, or the element a `row` of it landed on.
+ */
+function keyFrom(el, query) {
+    // A live row is its own row; any other element's row is an ancestor.
+    const row = el.matches(LIVE_ROW)
+        ? el
+        : el.parentElement?.closest(`[${ATTR_KEY_VALUE}]`);
+    if (!row)
+        return undefined;
+    // A live row's key is its outer query's, even when the row names a query
+    // of its own. Any other element's key is its own query's.
+    const ofQuery = row.matches(LIVE_ROW)
+        ? queryOf(row) === query
+        : row === query;
+    return ofQuery ? (row.getAttribute(ATTR_KEY_VALUE) ?? undefined) : undefined;
+}
+/**
+ * Every control whose form owner is `form`: HTML's own list, which holds a
+ * control nested in the form or joined to it by the `form` attribute, and a
+ * form-associated custom element as well as a native control.
+ */
+function controlsOf(form) {
+    return [...form.elements];
+}
 /**
- * Complete a request from where its element sits — see docs/TECHREF-1.0.md,
- * "Requests". Every request passes through here, whoever built it, so a
- * widget states what it did and never where it is.
+ * The form owner of an element that has one, as HTML reports it on the
+ * element's `form` property.
+ */
+function formOwnerOf(el) {
+    const owner = el.form;
+    return owner && owner.localName === "form"
+        ? owner
+        : null;
+}
+/**
+ * The controls a request gathers — see docs/reference/data-binding.md,
+ * "Gathering":
  *
- * The scope field is `list` or `row`, whichever attribute scoped the nearest
- * ancestor, so a declared action fired inside a single-row scope says so and
- * the wire never needs a noun for the addressable thing. A field the request
- * already carries is the dispatcher's to decide and is left as it is.
+ *   1. the element carrying `lb-request` has `lb-column`: it alone;
+ *   2. the element is a `<form>`: the controls whose form owner it is;
+ *   3. the element is in a live row: the controls in that live row;
+ *   4. otherwise: the controls whose form owner is the element's.
  *
- * False when the request cannot be sent, having said why.
+ * A control whose nearest `lb-query` is inside the group belongs to a query
+ * nested in it, and is skipped.
  */
-function scope(request, el) {
-    if (!request?.action) {
-        console.warn(`lb-hub: event without an action, ignoring`, request);
+function groupFor(el) {
+    if (el.hasAttribute(ATTR_COLUMN))
+        return { controls: [el], root: el };
+    if (el.localName === "form") {
+        const form = el;
+        return { controls: controlsOf(form), form, root: form };
+    }
+    const live = liveRowOf(el);
+    if (live)
+        return { controls: within(live, `[${ATTR_COLUMN}]`), root: live };
+    const form = formOwnerOf(el);
+    if (form)
+        return { controls: controlsOf(form), form, root: form };
+    return null;
+}
+/** The gathered controls, with their values under their columns. */
+function gather(group) {
+    const controls = [];
+    const values = {};
+    for (const el of group?.controls ?? []) {
+        const column = el.getAttribute(ATTR_COLUMN);
+        if (column === null || !isControl(el))
+            continue;
+        const nested = queryOf(el);
+        if (nested && nested !== group.root && group.root.contains(nested)) {
+            continue;
+        }
+        controls.push(el);
+        values[column] = el.value;
+    }
+    return { controls, values };
+}
+/** The form each insert gathered from, until its round trip succeeds. */
+const insertedFrom = new WeakMap();
+/**
+ * Complete a request from where its element sits. Every request passes
+ * through here, whoever issued it; a field it already carries is its
+ * issuer's to decide and is left as it is.
+ *
+ * False when the request cannot be issued, having said why.
+ */
+function complete(request, el) {
+    if (!request?.name) {
+        console.warn(`lb-hub: a request without a name, ignoring`, request);
         return false;
     }
-    const { action } = request;
-    const reserved = action.startsWith(LB_RESERVED_PREFIX);
-    // The reserved prefix is the whole of the discriminant, so a reserved
-    // name that is not one of the three operations is a typo rather than
-    // something to forward. Refused here, where the widget can see why: a
-    // server would only report that it declares no such action.
-    if (reserved && !LB_ACTIONS.includes(action)) {
-        console.error(`lb-hub: '${action}' begins with '${LB_RESERVED_PREFIX}' ` +
-            `but names no operation, ignoring`);
+    const { name } = request;
+    if (name.startsWith(LB_RESERVED_PREFIX) && !isRowRequest(name)) {
+        console.error(`lb-hub: '${name}' begins with '${LB_RESERVED_PREFIX}' but names no ` +
+            `request Loadbare provides, ignoring`);
         return false;
     }
-    // A control that writes a query parm has said what it does with its value.
-    // An action beside that would send the choice twice, once as a request and
-    // once as a page load, so the request is the one refused.
-    if (el.hasAttribute(ATTR_QUERY_PARM)) {
-        console.error(`lb-hub: <${el.localName}> carries ${ATTR_QUERY_PARM} and sends ` +
-            `'${action}' as well, not sent; a query parm change reloads the page`, el);
+    const group = groupFor(el);
+    const { controls, values } = gather(group);
+    if (request.values === undefined && controls.length > 0) {
+        request.values = values;
+    }
+    // The request is for the nearest `lb-query` of what it gathered, or of the
+    // element itself when it gathered nothing.
+    const queries = new Set(controls.map(queryOf));
+    if (queries.size > 1) {
+        console.error(`lb-hub: '${name}' gathered controls of more than one query, not sent`, el);
         return false;
     }
-    const fields = request;
-    // The element's own lb-list or lb-row is what it displays. Where it sits
-    // is its ancestors', the way a control belongs to the form around it.
-    const parent = el.parentElement;
-    const enclosing = parent?.closest(`[${ATTR_LIST}], [${ATTR_ROW}]`);
-    const row = parent?.closest(`[${ATTR_KEY_VALUE}]`);
-    const inScope = {
-        list: enclosing?.getAttribute(ATTR_LIST),
-        row: enclosing?.hasAttribute(ATTR_LIST)
-            ? null
-            : enclosing?.getAttribute(ATTR_ROW),
-        // Only a row of that scope: a key from outside it names a row of some
-        // other list.
-        key: row && enclosing?.contains(row) ? row.getAttribute(ATTR_KEY_VALUE) : null,
-        cell: el.getAttribute(ATTR_CELL),
-    };
-    const fill = (name) => {
-        const value = inScope[name];
-        if (fields[name] === undefined && value !== null && value !== undefined) {
-            fields[name] = value;
-        }
-    };
-    const operation = OPERATIONS[action];
-    if (!operation) {
-        // A declared action names one scope or the other, never both.
-        if (fields.list === undefined && fields.row === undefined) {
-            fill("list");
-            fill("row");
-        }
-        fill("key");
-        fill("cell");
-        return true;
+    const from = controls[0] ?? el;
+    const query = controls.length > 0 ? [...queries][0] : queryOf(el);
+    if (query) {
+        request.query ??= query.getAttribute(ATTR_QUERY);
+        const key = keyFrom(from, query);
+        if (key !== undefined)
+            request.key ??= key;
     }
-    for (const name of operation.fills)
-        fill(name);
-    // An element carrying lb-cell is a record of one cell, the way a control
-    // has a value and a form has values: the map holds that cell and nothing
-    // beside it. Its value is the one the dispatcher sent, or else what its
-    // control holds.
-    //
-    // Anything else gathers from the record it belongs to, the way a button
-    // submits its form owner: the nearest form, table row or live row around
-    // it, the element itself included. A <tr> counts because it is the one
-    // place a form cannot go around a row's controls. What else sits beside
-    // the element never decides it. The record is the scope's, so it is never
-    // the scope itself nor outside it; with none, there is nothing to say which
-    // cells are meant. Outside every scope the list is what is missing, and
-    // that is what gets reported.
-    if (fields.values === undefined && operation.requires.includes("values")) {
-        const cell = el.getAttribute(ATTR_CELL);
-        if (cell !== null) {
-            const control = controlOf(el);
-            const value = typeof fields.value === "string" ? fields.value : control?.value;
-            if (value !== undefined) {
-                fields.values = { [cell]: value };
-                if (action === ACTION_ROW_INSERT && control?.value === value) {
-                    gathered.set(request, [{ cell: el, control, value }]);
-                }
-            }
-        }
-        else if (fields.value !== undefined) {
-            console.error(`lb-hub: '${action}' from <${el.localName}> carries a value but no ` +
-                `${ATTR_CELL} to say which column it is, not sent`, el);
+    if (name === REQUEST_ROW_INSERT && group?.form) {
+        insertedFrom.set(request, group.form);
+    }
+    const needs = NEEDS[name];
+    if (needs) {
+        const missing = needs.filter((field) => request[field] === undefined ||
+            (field === "values" && Object.keys(request.values).length === 0));
+        if (missing.length > 0) {
+            console.error(`lb-hub: '${name}' from <${el.localName}> has no ` +
+                `${missing.join(", ")}, not sent`, el);
             return false;
         }
-        else {
-            const owner = el.closest(`form, tr, [${ATTR_KEY_VALUE}]`);
-            const ours = !enclosing || (owner !== enclosing && enclosing.contains(owner));
-            if (owner && ours) {
-                const { values, read } = gatherValues(owner);
-                if (read.length > 0) {
-                    fields.values = values;
-                    if (action === ACTION_ROW_INSERT)
-                        gathered.set(request, read);
-                }
-            }
-            else if (enclosing) {
-                console.error(`lb-hub: '${action}' from <${el.localName}> is in no form, table ` +
-                    `row or live row to gather values from, not sent; put its cells ` +
-                    `in a <form>`, el);
-                return false;
-            }
-        }
-    }
-    // An operation carries its values and nothing else: the value they were
-    // built from is not a second copy on the wire.
-    delete fields.value;
-    const missing = operation.requires.filter((f) => fields[f] === undefined);
-    if (missing.length > 0) {
-        console.error(`lb-hub: '${action}' from <${el.localName}> has no ` +
-            `${missing.join(", ")} in scope, not sent`, el);
-        return false;
     }
     return true;
 }
-/** Dispatch the bare action an element carries, for the hub to scope. */
-function dispatchAction(el) {
-    // Pressed again while its round trip is in flight. Ignoring it makes a
-    // pending native action disabled in fact, so a stylesheet only has to
-    // show it. A widget is not held back this way: one that sends on change
-    // must have its latest value sent, not dropped.
-    if (el.hasAttribute(ATTR_PENDING))
+/**
+ * Commit: dispatch the request an element names, for the hub to complete. A
+ * commit on an element whose round trip is in flight is ignored.
+ */
+function commit(el) {
+    if (el.hasAttribute(ATTR_REQUEST_PENDING))
         return;
-    const detail = { action: el.getAttribute(ATTR_ACTION) };
+    const detail = { name: el.getAttribute(ATTR_REQUEST) };
     el.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
 }
-/**
- * What each insert gathered, until its round trip succeeds. Keyed by the
- * request itself, so a request an ancestor stops leaves nothing behind.
- */
-const gathered = new WeakMap();
-/**
- * The control a cell reads from, for gathering rather than landing.
- *
- * A cell is always either a native form control itself (a bare
- * `<input lb-cell>`) or a widget that wraps one (`<lb-input>`, `<lb-select>`)
- * — that wrapping is structural, not incidental, which is what lets this be
- * one rule instead of one per widget type. The controls are the ones a value
- * lands on, so what is read back is what landed.
- */
-function controlOf(el) {
-    return isValueControl(el)
-        ? el
-        : [...el.querySelectorAll("input, select, textarea")].find(isValueControl);
+/** A submit button with a form owner commits with its form, never on click. */
+function isSubmitButton(el) {
+    const type = el.type;
+    const submits = (el.localName === "button" && type === "submit") ||
+        (el.localName === "input" && (type === "submit" || type === "image"));
+    return submits && formOwnerOf(el) !== null;
 }
 /**
- * Every lb-cell of an element's scope, gathered into one values map. Shared
- * by lb-row-insert and lb-row-update — both submit a batch of cells, and
- * differ only in whether a key comes with them. What was read comes back
- * beside the map, so an insert can reset it once it succeeds.
- *
- * Found the way a row lands, so a cell inside a nested scope is that scope's
- * and is not read: the options of a picker in the row are the picker's rows,
- * while the picker's own cell is the row's.
+ * HTML's interactive content: elements a click already means something to.
+ * HTML forbids nesting them inside `<a>` or `<button>` so a click means one
+ * thing, and the hub draws the same line.
  */
-function gatherValues(el) {
-    const values = {};
-    const read = [];
-    for (const cell of within(el, `[${ATTR_CELL}]`)) {
-        const name = cell.getAttribute(ATTR_CELL);
-        const control = controlOf(cell);
-        if (control === undefined) {
-            console.warn(`lb-hub: lb-cell '${name}' has no input, select or textarea to ` +
-                `read, ignoring it`, cell);
-            continue;
-        }
-        values[name] = control.value;
-        read.push({ cell, control, value: control.value });
-    }
-    return { values, read };
-}
+const INTERACTIVE = [
+    "a[href]",
+    "button",
+    "input:not([type=hidden])",
+    "select",
+    "textarea",
+    "label",
+    "details",
+    "iframe",
+    "embed",
+    "audio[controls]",
+    "video[controls]",
+    "img[usemap]",
+].join(", ");
 /**
- * After an insert succeeds, what it gathered goes back to its default, the
- * way `form.reset()` resets a form: the row those cells held now lives in the
- * list. A control showing something other than what was read holds an edit
- * made during the round trip, which was not sent, and is left alone.
- *
- * Where a value landed, `lb-value` comes off the cell first, so a widget that
- * renders from it sees the attribute go and returns to its default. The
- * control is reset after, so it ends at its default whatever the widget did.
- * Nothing is dispatched, as `form.reset()` fires no `change`.
+ * Whether a click on `target` is the click of `el`, the element carrying
+ * `lb-request` above it: no interactive content lies between them. A click on
+ * a control, link or button inside `el` belongs to that element.
  */
-function resetGathered(read) {
-    for (const { cell, control, value } of read) {
-        if (control.value !== value)
-            continue;
-        cell.removeAttribute(ATTR_VALUE);
-        control.removeAttribute(ATTR_VALUE);
-        if (control.localName === "select") {
-            for (const option of control.options) {
-                option.selected = option.defaultSelected;
-            }
-        }
-        else {
-            const text = control;
-            text.value = text.defaultValue;
-        }
+function clicks(target, el) {
+    for (let node = target; node && node !== el;) {
+        if (node.matches(INTERACTIVE) || isFormAssociated(node))
+            return false;
+        node = node.parentElement;
     }
+    return true;
 }
-/**
- * A path names a page host, and nothing finer. The bare path resolves to
- * `index`, the same convention a static file server follows — an
- * application names its landing page that way rather than the hub singling
- * one out.
- */
-function pageNameFor(path) {
-    const name = path.replace(/^\/+|\/+$/g, "");
-    return name === "" ? "index" : name;
+/** The page file's title, or its stub when it has none. */
+function titleOf(template, page) {
+    return template?.getAttribute(ATTR_PAGE_TITLE) || page;
 }
 /**
- * The `<template>` a page's markup ships in. The builder guarantees one per
- * page name (build/locations.ts refuses two page files sharing a stub), so
- * a second match here means the document was assembled by something else,
- * and is worth saying out loud rather than resolving by document order.
+ * The `<template>` a page ships in. The builder guarantees one per stub
+ * (build/locations.ts refuses two page files sharing one), so a second match
+ * here means the document was assembled by something else.
  */
 function pageHostFor(page) {
     const hosts = [];
@@ -250,32 +217,28 @@ function pageHostFor(page) {
             hosts.push(el);
         }
     }
-    if (hosts.length === 0) {
-        console.error(`lb-hub: no page host for '${page}'`);
-        return null;
-    }
     if (hosts.length > 1) {
-        console.error(`lb-hub: ${hosts.length} page hosts carry ${ATTR_PAGE}="${page}", ` +
+        console.error(`lb-hub: ${hosts.length} pages carry ${ATTR_PAGE}="${page}", ` +
             `using the first`);
     }
-    return hosts[0];
+    return hosts[0] ?? null;
 }
 /**
- * Fetch one round trip against the client-side deadline. Throws — rather
- * than swallowing — on a non-ok response, a network failure, or a timeout,
- * so a caller can tell a failed request from a genuinely empty result.
+ * One round trip against the client-side deadline. Throws on a non-ok
+ * response, a network failure or a timeout, so a caller can tell a failed
+ * request from an empty answer.
  *
- * The page names the path below the endpoint and the query string the
- * browser is showing rides after it verbatim, so every round trip, a page
- * load or an action, reaches the server with the URL on screen in hand.
+ * The stub names the path below the endpoint and the query string the
+ * browser is showing rides after it verbatim, so every round trip reaches
+ * the server with the query parms in hand.
  */
-async function fetchData(page, request) {
+async function fetchItems(page, request) {
     const path = page.split("/").map(encodeURIComponent).join("/");
     const url = `${LB_ENDPOINT}/${path}${location.search}`;
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), LB_REQUEST_TIMEOUT_MS);
     try {
-        // An empty body is how the hub asks for the page's whole query set.
+        // An empty body is how the hub asks for the page's queries.
         const res = await fetch(url, {
             method: "POST",
             headers: { "content-type": "application/json" },
@@ -291,23 +254,39 @@ async function fetchData(page, request) {
         clearTimeout(timeout);
     }
 }
-/**
- * An element's round trip is in flight, or is not. aria-busy states the same
- * fact to assistive technology, which no stylesheet on lb-pending reaches.
- */
+/** An element's round trip is in flight, or is not. */
 function pending(el, on) {
     if (!el)
         return;
     if (on) {
-        el.removeAttribute(ATTR_ERROR);
-        el.setAttribute(ATTR_PENDING, "");
+        el.removeAttribute(ATTR_REQUEST_ERROR);
+        el.setAttribute(ATTR_REQUEST_PENDING, "");
         el.setAttribute("aria-busy", "true");
     }
     else {
-        el.removeAttribute(ATTR_PENDING);
+        el.removeAttribute(ATTR_REQUEST_PENDING);
         el.removeAttribute("aria-busy");
     }
 }
+/** A plain primary click: no other button, no modifier, not yet handled. */
+function isPlainClick(e) {
+    return (e.button === 0 &&
+        !e.defaultPrevented &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.shiftKey &&
+        !e.altKey);
+}
+/** The URL a row for `lb-url` leads to, by the rule the server follows. */
+function nextUrl(row) {
+    const url = new URL(location.href);
+    const next = nextLocation(pageNameFor(url.pathname), url.searchParams, row);
+    const path = row[URL_COLUMN_PATH];
+    if (typeof path === "string")
+        url.pathname = path;
+    url.search = next.parms.toString();
+    return { url, moved: next.moved };
+}
 /**
  * The hub is a singleton outside <main>. It survives every page change,
  * so it needs no id to disambiguate it.
@@ -315,287 +294,269 @@ function pending(el, on) {
 class LbHub extends HTMLElement {
     main;
     /**
-     * The page currently in <main>. A page declares its own requests, so a request
-     * has to say which page it came from. The page rides on the URL rather
-     * than in the request, leaving the operation set closed.
+     * The stub of the page in <main>. A page declares its own requests, so a
+     * request says which page it came from, on the path below the endpoint.
      */
     page = "";
     connectedCallback() {
         this.main = this.querySelector("main");
-        // Scoped in the capture phase, on the way down, so every ancestor that
-        // sees the request on its way back up sees it whole. A request that
-        // cannot be sent is stopped here, before anything sees it at all.
+        // Completed in the capture phase, on the way down, so every ancestor
+        // that sees the request on its way back up sees it whole. A request that
+        // cannot be issued is stopped here, before anything sees it at all.
         this.addEventListener(LB_EVENT_NAME, (e) => {
             const origin = e.target;
             const request = e.detail;
-            if (!scope(request, origin))
+            if (!complete(request, origin))
                 e.stopPropagation();
         }, { capture: true });
         this.addEventListener(LB_EVENT_NAME, (e) => {
             const request = e.detail;
-            // The element that dispatched the request, not e.currentTarget (the
-            // hub itself, since the event bubbles) — pending/error state belongs
-            // at the origin so a widget can watch its own attributes.
+            // The element that issued the request, not e.currentTarget (the hub
+            // itself, since the event bubbles).
             const origin = e.target ?? undefined;
-            const page = this.page;
-            pending(origin, true);
-            void fetchData(page, request)
-                .then(async (data) => {
-                const { [QUERY_PARMS_ROW]: written, ...load } = data;
-                if (written === undefined)
-                    applyData(this, data);
-                else {
-                    await this.changeQueryParms(page, written, load);
-                }
-                resetGathered(gathered.get(request) ?? []);
-            })
-                .catch((err) => {
-                console.error(`lb-hub: request failed`, err);
-                origin?.setAttribute(ATTR_ERROR, "");
-            })
-                .finally(() => pending(origin, false));
-        });
-        /**
-         * A native element carrying an action. The hub dispatches the bare action
-         * from that element as the ordinary bubbling event, rather than sending
-         * it directly, so it is scoped exactly as a widget's is and an ancestor
-         * widget can still stop it and confirm. A native action button and a
-         * hand-written widget therefore produce identical events.
-         *
-         * A widget carrying an action is left alone — it owns its own interaction
-         * and decides what counts as performing it, which for a <select> is a
-         * change rather than a click. The test is the same lexical one applyData
-         * uses: a hyphen in the tag name.
-         */
-        this.addEventListener("click", (e) => {
-            const el = e.target?.closest(`[${ATTR_ACTION}]`);
-            if (!el || el.localName.includes("-"))
-                return;
-            // A form performs its action on submit, whatever was clicked in it.
-            if (el instanceof HTMLFormElement)
-                return;
-            // A button beside the cells is pressed once they are done. An element
-            // that is a cell, or holds them, has no such moment: a click into its
-            // own input would send the row. Deciding when a cell has changed is a
-            // widget's.
-            const action = el.getAttribute(ATTR_ACTION);
-            if ((action === ACTION_ROW_INSERT || action === ACTION_ROW_UPDATE) &&
-                (el.hasAttribute(ATTR_CELL) || el.querySelector(`[${ATTR_CELL}]`))) {
-                console.error(`lb-hub: '${action}' on <${el.localName}> is or holds a cell, so ` +
-                    `a click on it is not sent; put it on a <form>, a button or a widget`, el);
+            if (request.query?.startsWith(LB_RESERVED_PREFIX)) {
+                this.answer(request, origin);
                 return;
             }
-            e.preventDefault();
-            dispatchAction(el);
+            void this.send(request, origin);
         });
-        // The same delegation for the event a form owns.
+        // A form commits on submit. The submitter's own lb-request replaces the
+        // form's, the way `formaction` replaces `action`.
         this.addEventListener("submit", (e) => {
             const form = e.target;
-            if (!form || !form.hasAttribute(ATTR_ACTION))
+            if (!form)
+                return;
+            const submitter = e.submitter;
+            const el = submitter?.hasAttribute(ATTR_REQUEST)
+                ? submitter
+                : form.hasAttribute(ATTR_REQUEST)
+                    ? form
+                    : null;
+            if (!el)
                 return;
             e.preventDefault();
-            dispatchAction(form);
+            commit(el);
         });
-        // Only anchors that opted in. Everything else is a real link.
-        this.addEventListener("click", (e) => {
-            const link = e.target?.closest(`a[${ATTR_NAV_LINK}]`);
-            if (!link)
+        // A reset returns a form's controls to their defaults, so none of them
+        // shows what landed any longer. The browser resets the controls; the
+        // hub drops its own stamp from the same controls a submit gathers.
+        this.addEventListener("reset", (e) => {
+            if (e.defaultPrevented)
                 return;
-            e.preventDefault();
-            const { pathname, search } = new URL(link.href);
-            history.pushState(null, "", pathname + search);
-            void this.navigate();
+            for (const el of controlsOf(e.target)) {
+                el.removeAttribute(ATTR_COLUMN_VALUE);
+            }
         });
-        /**
-         * A control that writes a query parm. Changing what the page shows is
-         * not going anywhere, so the address updates in place and stays
-         * copyable, and history does not accumulate unless the control asks
-         * for it. Only the one parm is touched: the rest of the query string may
-         * have arrived by link, with no control on screen to say it again.
-         */
+        // A control commits on change.
         this.addEventListener("change", (e) => {
-            const el = e.target?.closest(`[${ATTR_QUERY_PARM}]`);
-            if (!el || !this.contains(el))
+            const el = e.target;
+            if (!el || !el.hasAttribute(ATTR_REQUEST) || !isControl(el))
                 return;
-            const control = controlOf(el);
-            if (control === undefined) {
-                console.warn(`lb-hub: ${ATTR_QUERY_PARM} on <${el.localName}> has no input, ` +
-                    `select or textarea to read, ignoring it`, el);
+            commit(el);
+        });
+        // Anything else commits on click. A form commits on submit, a control on
+        // change, and a submit button with its form. A click on interactive
+        // content inside the element is that content's own.
+        this.addEventListener("click", (e) => {
+            const target = e.target;
+            const el = target?.closest(`[${ATTR_REQUEST}]`);
+            if (!target || !el || !this.contains(el))
                 return;
-            }
-            const name = el.getAttribute(ATTR_QUERY_PARM);
-            const url = new URL(location.href);
-            if ((url.searchParams.get(name) ?? "") === control.value)
+            if (el.localName === "form" || isControl(el) || isSubmitButton(el)) {
                 return;
-            // Empty is the default, and a default is left out of the URL, so its
-            // length tracks how far the user has narrowed the page.
-            url.search = withQueryParms(url.searchParams, {
-                [name]: control.value,
-            }).toString();
-            if (el.hasAttribute(ATTR_QUERY_PARM_PUSH)) {
-                history.pushState(null, "", url);
             }
-            else {
-                history.replaceState(null, "", url);
+            if (!clicks(target, el))
+                return;
+            e.preventDefault();
+            commit(el);
+        });
+        // A link that opted in. Everything else is a real link, and so is a
+        // click that opens a new tab or window. The link's URL is a row for
+        // lb-url: its path, its query parms, and every other parm emptied. A
+        // link pushes a history entry, as a link does.
+        this.addEventListener("click", (e) => {
+            const link = e.target?.closest(`a[${ATTR_URL_LINK}]`);
+            if (!link || !isPlainClick(e))
+                return;
+            e.preventDefault();
+            const href = new URL(link.href);
+            const row = {};
+            for (const name of new URLSearchParams(location.search).keys()) {
+                row[name] = "";
             }
-            void this.navigate(el);
+            for (const [name, value] of href.searchParams)
+                row[name] = value;
+            row[URL_COLUMN_PATH] = href.pathname;
+            this.moveTo(row, true);
+            void this.navigate();
         });
         addEventListener("popstate", () => void this.navigate());
         void this.navigate();
     }
     /**
-     * Load the page at the URL the browser is showing. Every way of arriving
-     * comes through here — a cold load, a nav link, Back, a query parm write —
-     * so each one is the same page load and a URL always shows the same thing.
-     *
-     * Entering a page is the one operation that replaces host DOM. The host is
-     * already in the document, so selecting a page is a lookup and there is no
-     * fetching mechanism on the host channel. Staying on the page, with only
-     * the query string changed, keeps the DOM it has: the queries re-run and
-     * land by key, so a list that got its rows back keeps them, and its scroll.
-     *
-     * `origin` is the control that changed the query string, if one did, and
-     * carries the round trip's pending and error state as a request's origin
-     * does.
+     * Send a request to the server and land its answer. An answer naming
+     * `lb-url` moves the URL first; the server has already loaded the page
+     * there, in the same round trip.
      */
-    async navigate(origin) {
-        const page = pageNameFor(location.pathname);
-        this.landNavigation(page);
-        const template = pageHostFor(page);
-        if (!template) {
-            this.reportUnknownPage();
-            this.reveal();
+    async send(request, origin) {
+        const page = this.page;
+        const items = await this.roundTrip(page, request, origin);
+        if (items === null)
             return;
-        }
-        if (page !== this.page) {
-            this.page = page;
-            // Insert the page shell before fetching its data, not after: the
-            // template is already in the document, so holding it back behind a
-            // network round trip only leaves <main> empty for no reason.
-            this.main.replaceChildren(template.content.cloneNode(true));
-        }
-        this.reveal();
-        let data = {};
+        const url = items.find((item) => item.query === URL_QUERY);
+        const load = items.filter((item) => item !== url);
+        if (url === undefined)
+            applyResponse(this, load);
+        else
+            await this.follow(page, url, load, origin);
+        insertedFrom.get(request)?.reset();
+    }
+    /**
+     * One round trip for a page: a request, or with none a page load. The
+     * element that issued it carries `lb-request-pending` while it is in
+     * flight, and `lb-request-error` when it fails. Null on failure.
+     */
+    async roundTrip(page, request, origin) {
         pending(origin, true);
         try {
-            data = await fetchData(page);
+            return await fetchItems(page, request);
         }
         catch (err) {
-            console.error(`lb-hub: failed to load data for '${page}'`, err);
-            origin?.setAttribute(ATTR_ERROR, "");
+            console.error(`lb-hub: request failed for '${page}'`, err);
+            origin?.setAttribute(ATTR_REQUEST_ERROR, "");
+            return null;
         }
         finally {
             pending(origin, false);
         }
-        this.land(data);
     }
     /**
-     * A page load's answer, landed: the page's data, then the query string on
-     * the controls that write it, so a picker already has the options its
-     * value selects.
+     * Answer a request for a query the hub serves, with no round trip. The
+     * hub serves `lb-url`, and updates it.
      */
-    land(data) {
-        applyData(this, data);
-        applyQueryParms(this.main, new URLSearchParams(location.search));
+    answer(request, origin) {
+        if (request.query !== URL_QUERY || request.name !== REQUEST_ROW_UPDATE) {
+            console.error(`lb-hub: '${request.name}' for '${request.query}' is not a request ` +
+                `the hub answers, ignoring`);
+            return;
+        }
+        const pushed = origin?.hasAttribute(ATTR_URL_PUSH) ?? false;
+        if (this.moveTo(request.values ?? {}, pushed))
+            void this.navigate(origin);
     }
     /**
-     * A server response changed the query parms: the request wrote parms only
-     * the write could know, such as the key of a row it inserted. The server
-     * has already loaded the page at them, so this is the rest of a query parm
-     * write — the URL, then the load landed — with the round trip done.
-     *
-     * The history entry is replaced, as a control's write replaces it: the
-     * page is showing something else, not going somewhere.
-     *
-     * A load that did not come back, which the server says by sending the
-     * parms alone, is asked for again, so a failure reports as a page load's.
-     * It does not mark the element that sent the request: that request's
-     * write succeeded, and an error on it would invite sending it twice.
+     * Write a row for `lb-url` into the URL. A new page pushes a history
+     * entry, and so does `push`; a change of query parms replaces the entry.
+     * False when the URL is already the row's.
+     */
+    moveTo(row, push) {
+        const { url, moved } = nextUrl(row);
+        if (url.href === location.href)
+            return false;
+        if (moved || push)
+            history.pushState(null, "", url);
+        else
+            history.replaceState(null, "", url);
+        return true;
+    }
+    /**
+     * A server answer named `lb-url`: write the URL, then land the page the
+     * server loaded there. A load that did not come back is asked for again,
+     * without marking the element that issued the request: its write
+     * succeeded, and an error would invite sending it twice.
      *
      * `page` is where the request was sent from. A user who left it while the
      * request was in flight is on a URL that is not the server's to change.
      */
-    async changeQueryParms(page, written, load) {
+    async follow(page, item, load, origin) {
         if (pageNameFor(location.pathname) !== page)
             return;
-        const url = new URL(location.href);
-        url.search = withQueryParms(url.searchParams, written).toString();
-        history.replaceState(null, "", url);
-        if (Object.keys(load).length === 0)
+        this.moveTo(item.row ?? {}, origin?.hasAttribute(ATTR_URL_PUSH) ?? false);
+        if (load.length === 0)
             return this.navigate();
-        this.landNavigation(page);
-        this.land(load);
-    }
-    /**
-     * An app that ships `<body hidden>` (see docs/reference/chrome.md) is
-     * asking to stay invisible until there is something coherent to show,
-     * rather than flash the chrome before `<main>` has real content. This is
-     * a no-op for an app that doesn't use that convention.
-     */
-    reveal() {
-        document.body.hidden = false;
+        const template = this.arrive();
+        if (template)
+            applyResponse(this, load);
     }
     /**
-     * The hub's own row: where the page is, in the vocabulary a server
-     * answer arrives in, so a chrome displays it the way it displays anything
-     * — `lb-row="lb-navigation"` on a subtree, `lb-cell` on what shows a
-     * value. Landed before the page host is looked up, so a miss has it too;
-     * the unknown-page dialog is one consumer among whatever others the
-     * chrome writes.
-     *
-     * The label is the nav's: the text of the first lb-nav-link anchor whose
-     * href names this page. Taken from the nav rather than from a click, so a
-     * click, a reload and the back button all land the same label — and a
-     * path no anchor names lands an empty one, explicitly, so a consumer is
-     * never left showing the previous page's.
+     * Load the page at the URL the browser is showing. Every way of arriving
+     * comes through here — a cold load, a link, Back, a new query parm — so
+     * each is the same page load and a URL always shows the same thing.
      *
-     * The URI is the path and query string together, as the address bar has
-     * them: a link that opens a page narrowed is a different place from the
-     * bare page, though the label, which names the page, is the same.
+     * Entering a page is the one operation that replaces what <main> holds.
+     * Staying on it, with only the query parms changed, keeps what it has: the
+     * queries re-run and land by key, so rows that come back keep their place.
      *
-     * Landed only where a subtree names it. applyData() warns about a query
-     * with no scope, and a chrome that displays no navigation has nothing to
-     * be warned about.
+     * `origin` is the element whose request changed the URL, if one did, and
+     * carries the round trip's pending and error state.
      */
-    landNavigation(page) {
-        if (!this.querySelector(`[${ATTR_ROW}="${NAV_ROW}"]`))
+    async navigate(origin) {
+        const template = this.arrive();
+        if (!template)
             return;
-        let label = "";
-        for (const a of this.querySelectorAll(`a[${ATTR_NAV_LINK}]`)) {
-            if (pageNameFor(new URL(a.href).pathname) !== page)
-                continue;
-            label = a.textContent?.trim() ?? "";
-            break;
+        const items = await this.roundTrip(this.page, undefined, origin);
+        applyResponse(this, items ?? []);
+    }
+    /**
+     * Show the page the path names, and land `lb-url`. Null when no page's
+     * stub matches the path.
+     */
+    arrive() {
+        const page = pageNameFor(location.pathname);
+        const template = pageHostFor(page);
+        if (template && page !== this.page) {
+            this.page = page;
+            // The template is already in the document, so the page's markup goes
+            // in before its data arrives rather than leaving <main> empty.
+            this.main.replaceChildren(template.content.cloneNode(true));
         }
-        applyData(this, {
-            [NAV_ROW]: {
-                [NAV_CELL_LABEL]: label,
-                [NAV_CELL_URI]: location.pathname + location.search,
-            },
-        });
+        this.landUrl(template ? titleOf(template, page) : null);
+        // An app that ships `<body hidden>` (docs/reference/chrome.md) stays
+        // invisible until there is something coherent to show.
+        document.body.hidden = false;
+        if (!template) {
+            console.error(`lb-hub: no page for '${page}'`);
+            const dialog = this.querySelector(`dialog[${ATTR_URL_UNKNOWN}]`);
+            if (dialog && !dialog.open) {
+                dialog.showModal();
+            }
+        }
+        return template;
     }
     /**
-     * A path that resolves to no page host is discovered client-side, after a
-     * successful 200 — every route gets the same document, so there is no
-     * HTTP 404 to report (see docs/tutorials/010-pages-and-navigation.md).
-     * lb-unknown-page is optional: an application that declares none gets
-     * nothing beyond navigate()'s console.error. The builder guarantees the
-     * element it's on is a <dialog> (build/assemble.ts), so this can call
-     * showModal() without checking the tag here.
+     * The hub's own query: one row, keyed by the path, whose other columns are
+     * the query parms.
      *
-     * Only opens it. What the dialog says it gets from landNavigation(),
-     * already run, by naming the hub's row in lb-row like any subtree.
-     *
-     * Scoped to the hub, like every other lookup here, so that one rule holds
-     * without exception: what the hub acts on is inside the hub.
+     * The one exception to landing. A row sets the columns it names and
+     * leaves the rest as they were, and a URL names only the parms it carries.
+     * So the row also names, as empty, every column an element under
+     * `lb-query="lb-url"` shows: a control then shows what the address bar
+     * says after Back as well as after a reload, and never a parm the URL has
+     * dropped.
      */
-    reportUnknownPage() {
-        const dialog = this.querySelector(`[${ATTR_UNKNOWN_PAGE}]`);
-        if (!dialog)
+    landUrl(label) {
+        if (label !== null)
+            document.title = label;
+        const scopes = this.querySelectorAll(`[${ATTR_QUERY}="${URL_QUERY}"]`);
+        if (scopes.length === 0)
             return;
-        const modal = dialog;
-        if (!modal.open)
-            modal.showModal();
+        const row = {};
+        for (const scope of scopes) {
+            for (const el of within(scope, `[${ATTR_COLUMN}]`)) {
+                if (el === scope)
+                    continue;
+                row[el.getAttribute(ATTR_COLUMN)] = "";
+            }
+        }
+        for (const [name, value] of new URLSearchParams(location.search)) {
+            row[name] = value;
+        }
+        row[URL_COLUMN_PATH] = location.pathname;
+        row[URL_COLUMN_PAGE_LABEL] = label;
+        row[URL_COLUMN_PAGE_UNKNOWN] = label === null;
+        applyResponse(this, [
+            { query: URL_QUERY, kind: KIND_ROW, key: URL_COLUMN_PATH, row },
+        ]);
     }
 }
 customElements.define(HUB_TAG_NAME, LbHub);