@loadbare/app 0.4.0 → 0.5.0

package/dist/tests/lb-table.test.d.ts

@@ -1,15 +0,0 @@
-/**
- * lb-table — see docs/testing.md, tier 4.
- *
- * What this widget adds at run time is placement, and only placement:
- * `lb-sort` names the column rows are ordered by, `lb-group` names the
- * column they are sectioned by. Both answers are local, which is the whole
- * argument for the Place callback existing.
- *
- * The markup below is what widgets/lb-table.html expands to once the page
- * has supplied its head and its row template — a real <thead> holding a real
- * <tr>, because expansion unwrapped the templates that carried them past the
- * parser.
- */
-export {};
-//# sourceMappingURL=lb-table.test.d.ts.map

package/dist/tests/lb-table.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-table.test.d.ts","sourceRoot":"","sources":["../../tests/lb-table.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG"}

package/dist/tests/lb-table.test.js

@@ -1,205 +0,0 @@
-/**
- * lb-table — see docs/testing.md, tier 4.
- *
- * What this widget adds at run time is placement, and only placement:
- * `lb-sort` names the column rows are ordered by, `lb-group` names the
- * column they are sectioned by. Both answers are local, which is the whole
- * argument for the Place callback existing.
- *
- * The markup below is what widgets/lb-table.html expands to once the page
- * has supplied its head and its row template — a real <thead> holding a real
- * <tr>, because expansion unwrapped the templates that carried them past the
- * parser.
- */
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { installWindow, mount } from "./helpers/window";
-installWindow();
-await import("../widgets/lb-table");
-const CELLS = `<td lb-cell="name"></td><td lb-cell="amount"></td>`;
-/** A lb-table whose row template carries the placement attributes given. */
-function table(placement = "") {
-    return mount(`<lb-table><table>` +
-        `<thead><tr><th>Name</th><th>Amount</th></tr></thead>` +
-        `<tbody><template lb-key="id" ${placement}><tr>${CELLS}</tr></template></tbody>` +
-        `</table></lb-table>`);
-}
-const rows = (list) => ({ op: "rows", rows: list });
-const patch = (change) => ({ op: "patch", ...change });
-/** The body, row by row: a section heading as its label, a row as its cells. */
-function shown(widget) {
-    return [...widget.querySelectorAll("tbody > tr")].map((tr) => tr.hasAttribute("data-group")
-        ? `— ${tr.textContent.trim()}`
-        : [...tr.children].map((td) => td.textContent).join("/"));
-}
-describe("lb-table without placement", () => {
-    it("lands rows in the body, in the order sent", () => {
-        const widget = table();
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10" },
-            { id: "2", name: "Bab", amount: "20" },
-        ]));
-        assert.deepEqual(shown(widget), ["Ada/10", "Bab/20"]);
-    });
-    it("leaves the head the page wrote alone", () => {
-        const widget = table();
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10" }]));
-        assert.equal(widget.querySelectorAll("thead tr").length, 1);
-        assert.equal(widget.querySelector("thead th").textContent, "Name");
-    });
-    it("counts its rows for the stylesheet", () => {
-        const widget = table();
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10" }]));
-        assert.equal(widget.getAttribute("data-rows"), "1");
-    });
-});
-describe("lb-table sorting", () => {
-    it("orders rows by the column lb-sort names", () => {
-        const widget = table(`lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Cai", amount: "30" },
-            { id: "2", name: "Ada", amount: "10" },
-            { id: "3", name: "Bab", amount: "20" },
-        ]));
-        assert.deepEqual(shown(widget), ["Ada/10", "Bab/20", "Cai/30"]);
-    });
-    it("puts a patched-in row in its place rather than at the end", () => {
-        // A whole set and a single patched row take the same path, which is the
-        // reason placement is a callback rather than a branch.
-        const widget = table(`lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10" },
-            { id: "3", name: "Cai", amount: "30" },
-        ]));
-        widget.acceptRows(patch({ rows: [{ id: "2", name: "Bab", amount: "20" }] }));
-        assert.deepEqual(shown(widget), ["Ada/10", "Bab/20", "Cai/30"]);
-    });
-    it("leaves a row whose sort column changed where it was", () => {
-        // Today's behavior, and the gap NEEDED-FOR-1.0 names: a patch never
-        // re-places a row that already exists. The row's contents are current and
-        // its position is stale. This test flips when that item closes.
-        const widget = table(`lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10" },
-            { id: "2", name: "Bab", amount: "20" },
-        ]));
-        widget.acceptRows(patch({ rows: [{ id: "1", name: "Zed", amount: "10" }] }));
-        assert.deepEqual(shown(widget), ["Zed/10", "Bab/20"]);
-    });
-    it("sorts a whole set again, however it was reached", () => {
-        const widget = table(`lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10" },
-            { id: "2", name: "Bab", amount: "20" },
-        ]));
-        widget.acceptRows(patch({ rows: [{ id: "1", name: "Zed", amount: "10" }] }));
-        widget.acceptRows(rows([
-            { id: "1", name: "Zed", amount: "10" },
-            { id: "2", name: "Bab", amount: "20" },
-        ]));
-        assert.deepEqual(shown(widget), ["Bab/20", "Zed/10"]);
-    });
-});
-describe("lb-table grouping", () => {
-    it("builds a section heading per distinct value", () => {
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10", dept: "Core" },
-            { id: "2", name: "Bab", amount: "20", dept: "Ops" },
-            { id: "3", name: "Cai", amount: "30", dept: "Core" },
-        ]));
-        assert.deepEqual(shown(widget), [
-            "— Core",
-            "Ada/10",
-            "Cai/30",
-            "— Ops",
-            "Bab/20",
-        ]);
-    });
-    it("spans the heading across the row the page wrote", () => {
-        // How wide the table is, from the row template. Nothing else knows, and
-        // nothing had to be told twice.
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10", dept: "Core" }]));
-        const th = widget.querySelector("tr[data-group] th");
-        assert.equal(th.colSpan, 2);
-        assert.equal(th.getAttribute("scope"), "rowgroup");
-    });
-    it("removes a section when its last row goes", () => {
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10", dept: "Core" },
-            { id: "2", name: "Bab", amount: "20", dept: "Ops" },
-        ]));
-        widget.acceptRows(patch({ drop: ["2"] }));
-        assert.deepEqual(shown(widget), ["— Core", "Ada/10"]);
-    });
-    it("sorts within a section, not across the table", () => {
-        const widget = table(`lb-group="dept" lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Zed", amount: "10", dept: "Core" },
-            { id: "2", name: "Ada", amount: "20", dept: "Ops" },
-            { id: "3", name: "Bab", amount: "30", dept: "Core" },
-        ]));
-        assert.deepEqual(shown(widget), [
-            "— Core",
-            "Bab/30",
-            "Zed/10",
-            "— Ops",
-            "Ada/20",
-        ]);
-    });
-    it("patches a row into the right place in its section", () => {
-        const widget = table(`lb-group="dept" lb-sort="name"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10", dept: "Core" },
-            { id: "2", name: "Cai", amount: "30", dept: "Core" },
-            { id: "3", name: "Eve", amount: "50", dept: "Ops" },
-        ]));
-        widget.acceptRows(patch({ rows: [{ id: "4", name: "Bab", amount: "20", dept: "Core" }] }));
-        assert.deepEqual(shown(widget), [
-            "— Core",
-            "Ada/10",
-            "Bab/20",
-            "Cai/30",
-            "— Ops",
-            "Eve/50",
-        ]);
-    });
-    it("sections a tuple with no value for the column under the empty label", () => {
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10" }]));
-        assert.deepEqual(shown(widget), ["— ", "Ada/10"]);
-    });
-    it("does not count a section heading as a row", () => {
-        // A heading carries no lb-key, so it is scaffolding rather than a row —
-        // and the count a stylesheet reads has to say so.
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([
-            { id: "1", name: "Ada", amount: "10", dept: "Core" },
-            { id: "2", name: "Bab", amount: "20", dept: "Ops" },
-        ]));
-        assert.equal(widget.getAttribute("data-rows"), "2");
-    });
-    it("empties to no rows and no sections", () => {
-        const widget = table(`lb-group="dept"`);
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10", dept: "Core" }]));
-        widget.acceptRows(rows([]));
-        assert.deepEqual(shown(widget), []);
-        assert.equal(widget.getAttribute("data-rows"), "0");
-    });
-});
-describe("a table's foot", () => {
-    it("is an ordinary scope, untouched by the row machinery", () => {
-        // A <tfoot> is a place on the page, not a row the hub delivers. What
-        // lands in it is a second projection of the same table, resolved by name
-        // like any other — see demo/pages/ledger.html.
-        const widget = mount(`<lb-table><table>` +
-            `<tbody><template lb-key="id"><tr>${CELLS}</tr></template></tbody>` +
-            `<tfoot><tr lb-query="total"><th lb-cell="name"></th><td lb-cell="amount"></td></tr></tfoot>` +
-            `</table></lb-table>`);
-        widget.acceptRows(rows([{ id: "1", name: "Ada", amount: "10" }]));
-        assert.equal(widget.querySelectorAll("tfoot tr").length, 1);
-        assert.equal(widget.getAttribute("data-rows"), "1", "the foot is not a row");
-    });
-});

package/dist/widgets/index.d.ts

@@ -1,7 +0,0 @@
-import "./lb-input";
-import "./lb-select";
-import "./lb-list";
-import "./lb-options";
-import "./lb-table";
-import "./lb-picker";
-//# sourceMappingURL=index.d.ts.map

package/dist/widgets/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,cAAc,CAAC;AACtB,OAAO,YAAY,CAAC;AACpB,OAAO,aAAa,CAAC"}

package/dist/widgets/index.js

@@ -1,6 +0,0 @@
-import "./lb-input";
-import "./lb-select";
-import "./lb-list";
-import "./lb-options";
-import "./lb-table";
-import "./lb-picker";

package/dist/widgets/lb-input.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-input.d.ts.map

package/dist/widgets/lb-input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-input.d.ts","sourceRoot":"","sources":["../../widgets/lb-input.ts"],"names":[],"mappings":""}

package/dist/widgets/lb-input.js

@@ -1,48 +0,0 @@
-/// <reference lib="dom" />
-import { ATTR_CELL, ATTR_KEY, ATTR_QUERY, ATTR_VALUE, LB_EVENT_NAME, } from "../core/lb-constants";
-/**
- * A leaf cell wrapping an <input>. The hub writes one attribute name for
- * every widget type, so the value lands in `lb-value` and the widget
- * forwards it to the control it owns.
- *
- * The other direction of the same cell: on change it sends `cell-change`,
- * addressed by the same lb-query/lb-key/lb-cell coordinates the value
- * arrived on. A `readonly` input never fires `change` from user input, so a
- * readonly cell sends nothing on its own.
- */
-class LbInput extends HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-        const input = this.querySelector("input");
-        if (!input) {
-            console.error(`lb-input: no <input> to receive the value`);
-            return;
-        }
-        input.value = value;
-    }
-    connectedCallback() {
-        this.addEventListener("change", () => {
-            const input = this.querySelector("input");
-            if (!input) {
-                console.error(`lb-input: change with no <input>, ignoring`);
-                return;
-            }
-            const query = this.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);
-            const key = this.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);
-            const cell = this.getAttribute(ATTR_CELL);
-            if (!query || !key || !cell) {
-                console.error(`lb-input: change with no query/key/cell coordinates, ignoring`);
-                return;
-            }
-            const detail = {
-                op: "cell-change",
-                query,
-                key,
-                cell,
-                value: input.value,
-            };
-            this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
-        });
-    }
-}
-customElements.define("lb-input", LbInput);

package/dist/widgets/lb-list.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-list.d.ts.map

package/dist/widgets/lb-list.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-list.d.ts","sourceRoot":"","sources":["../../widgets/lb-list.ts"],"names":[],"mappings":""}

package/dist/widgets/lb-list.js

@@ -1,17 +0,0 @@
-/// <reference lib="dom" />
-import { applyRows } from "../hub/lb-rows";
-/**
- * The plain repeater: whatever the page author wrote inside is repeated once
- * per tuple, in the order the server sent.
- *
- * It exists because a projection has to land on a widget, and because a
- * `<table>` cannot be one — a custom element written inside `<tbody>` is
- * discarded by the parser, so the widget goes around the table and the
- * template goes inside it, where the content model already allows it.
- */
-class LbList extends HTMLElement {
-    acceptRows(result) {
-        applyRows(this, result);
-    }
-}
-customElements.define("lb-list", LbList);

package/dist/widgets/lb-options.d.ts

@@ -1,26 +0,0 @@
-import type { Projection, HubRowHost } from "../core/lb-types";
-/**
- * A `<select>` whose choices come from a query, and the case that shows why
- * placement belongs to the widget rather than to the framework.
- *
- * The rows arrive flat and keyed. Nothing on the wire knows about
- * `<optgroup>`, and nothing needs to: a group is a column like any other, and
- * turning a repeated column value into an element is exactly the local
- * knowledge a widget has and the hub does not. A table wanting section
- * headings would read the same `lb-group` and build something else.
- *
- * The identity of a row is the value of the option, so `lb-key` supplies
- * both and the page declares it once.
- *
- * Exported because `lb-picker` is this widget with its row template
- * supplied by the definition instead of by the page. Nothing about the
- * behavior changes, so nothing about the behavior is written twice.
- */
-export declare class LbOptions extends HTMLElement implements HubRowHost {
-    acceptRows(result: Projection): void;
-    private place;
-    /** The group with this label, or a new one in front of the template. */
-    private groupFor;
-    connectedCallback(): void;
-}
-//# sourceMappingURL=lb-options.d.ts.map

package/dist/widgets/lb-options.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-options.d.ts","sourceRoot":"","sources":["../../widgets/lb-options.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,UAAU,EAEV,UAAU,EACX,MAAM,kBAAkB,CAAC;AAG1B;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,SAAU,SAAQ,WAAY,YAAW,UAAU;IAC9D,UAAU,CAAC,MAAM,EAAE,UAAU;IAa7B,OAAO,CAAC,KAAK,CAQX;IAEF,wEAAwE;IACxE,OAAO,CAAC,QAAQ;IAUhB,iBAAiB;CAkBlB"}

package/dist/widgets/lb-options.js

@@ -1,72 +0,0 @@
-/// <reference lib="dom" />
-import { ATTR_ACTION, ATTR_GROUP, ATTR_KEY, LB_EVENT_NAME, } from "../core/lb-constants";
-import { applyRows } from "../hub/lb-rows";
-/**
- * A `<select>` whose choices come from a query, and the case that shows why
- * placement belongs to the widget rather than to the framework.
- *
- * The rows arrive flat and keyed. Nothing on the wire knows about
- * `<optgroup>`, and nothing needs to: a group is a column like any other, and
- * turning a repeated column value into an element is exactly the local
- * knowledge a widget has and the hub does not. A table wanting section
- * headings would read the same `lb-group` and build something else.
- *
- * The identity of a row is the value of the option, so `lb-key` supplies
- * both and the page declares it once.
- *
- * Exported because `lb-picker` is this widget with its row template
- * supplied by the definition instead of by the page. Nothing about the
- * behavior changes, so nothing about the behavior is written twice.
- */
-export class LbOptions extends HTMLElement {
-    acceptRows(result) {
-        applyRows(this, result, this.place);
-        // The identity of the row is the value of the option, so nothing on the
-        // page has to say so twice.
-        for (const option of this.querySelectorAll(`option[${ATTR_KEY}]`)) {
-            option.setAttribute("value", option.getAttribute(ATTR_KEY));
-        }
-        // A group is derived, so it goes when its last row does.
-        for (const group of this.querySelectorAll("optgroup")) {
-            if (!group.querySelector("option"))
-                group.remove();
-        }
-    }
-    place = (row, tuple, template) => {
-        const select = this.querySelector("select");
-        const groupCell = template.getAttribute(ATTR_GROUP);
-        if (!groupCell) {
-            select.insertBefore(row, template);
-            return;
-        }
-        this.groupFor(select, template, tuple[groupCell] ?? "").append(row);
-    };
-    /** The group with this label, or a new one in front of the template. */
-    groupFor(select, template, label) {
-        for (const group of select.querySelectorAll("optgroup")) {
-            if (group.label === label)
-                return group;
-        }
-        const group = document.createElement("optgroup");
-        group.label = label;
-        select.insertBefore(group, template);
-        return group;
-    }
-    connectedCallback() {
-        this.addEventListener("change", () => {
-            const select = this.querySelector("select");
-            if (!select) {
-                console.error(`lb-options: change with no <select>, ignoring`);
-                return;
-            }
-            const name = this.getAttribute(ATTR_ACTION);
-            if (!name) {
-                console.error(`lb-options: no ${ATTR_ACTION}, nothing to send`);
-                return;
-            }
-            const detail = { op: "action", name, value: select.value };
-            this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
-        });
-    }
-}
-customElements.define("lb-options", LbOptions);

package/dist/widgets/lb-picker.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-picker.d.ts.map

package/dist/widgets/lb-picker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-picker.d.ts","sourceRoot":"","sources":["../../widgets/lb-picker.ts"],"names":[],"mappings":""}

package/dist/widgets/lb-picker.js

@@ -1,25 +0,0 @@
-/// <reference lib="dom" />
-import { LbOptions } from "./lb-options";
-/**
- * The same `<select>` as `lb-options`, with the row template supplied by
- * the definition instead of by the page.
- *
- * A row template is markup, so writing it is the page author's job — until
- * every row is one option and the only thing that varies is which columns it
- * reads. Those are words, and words are parameters: `exp-key`, `exp-cell` and
- * `exp-group` fill the placeholders in the template the definition already
- * has, at build time, and the page writes one tag with no children.
- *
- * It is the same trade as anywhere else in expansion. A page author who wants
- * a second element in the row, or an option built from two columns, writes
- * `lb-options` and the template themselves. This one is for when they do
- * not.
- *
- * The behavior is inherited whole, because it is the same behavior: rows land
- * in groups, the key becomes the value, and a change sends the declared
- * action. A distinct class exists only because `customElements.define`
- * requires one constructor per name.
- */
-class LbPicker extends LbOptions {
-}
-customElements.define("lb-picker", LbPicker);

package/dist/widgets/lb-select.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-select.d.ts.map

package/dist/widgets/lb-select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-select.d.ts","sourceRoot":"","sources":["../../widgets/lb-select.ts"],"names":[],"mappings":""}

package/dist/widgets/lb-select.js

@@ -1,43 +0,0 @@
-/// <reference lib="dom" />
-import { ATTR_ACTION, ATTR_VALUE, LB_EVENT_NAME, } from "../core/lb-constants";
-/**
- * A leaf cell wrapping a <select>. It receives its value like any other cell,
- * and on change it sends the action the page declared for it — the request
- * vocabulary and the addressing vocabulary running in both directions on one
- * widget.
- *
- * The choice is the interaction, so this is the case where an action carries
- * a value. The server still decides what that choice means.
- */
-class LbSelect extends HTMLElement {
-    static observedAttributes = [ATTR_VALUE];
-    attributeChangedCallback(_name, _old, value) {
-        const select = this.querySelector("select");
-        if (!select) {
-            console.error(`lb-select: no <select> to receive the value`);
-            return;
-        }
-        select.value = value;
-    }
-    connectedCallback() {
-        this.addEventListener("change", () => {
-            const select = this.querySelector("select");
-            if (!select) {
-                console.error(`lb-select: change with no <select>, ignoring`);
-                return;
-            }
-            const name = this.getAttribute(ATTR_ACTION);
-            if (!name) {
-                console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);
-                return;
-            }
-            const detail = {
-                op: "action",
-                name,
-                value: select.value,
-            };
-            this.dispatchEvent(new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }));
-        });
-    }
-}
-customElements.define("lb-select", LbSelect);

package/dist/widgets/lb-table.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=lb-table.d.ts.map

package/dist/widgets/lb-table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lb-table.d.ts","sourceRoot":"","sources":["../../widgets/lb-table.ts"],"names":[],"mappings":""}

package/dist/widgets/lb-table.js

@@ -1,113 +0,0 @@
-/// <reference lib="dom" />
-import { ATTR_CELL, ATTR_GROUP, ATTR_KEY, ATTR_SORT, } from "../core/lb-constants";
-import { applyRows } from "../hub/lb-rows";
-/**
- * A table that owns its own scaffolding, and the case that shows what a list
- * widget is for once the repeater exists.
- *
- * `lb-list` goes around a table the page author wrote. This one supplies
- * the table, and the page writes what only the page knows: the heading row
- * and the row template. That division is forced rather than chosen — a
- * `<thead>` written inside a custom element is not inside a table, so the
- * parser drops the tag and keeps the text. A `<template>` survives anywhere,
- * so the heading row arrives wrapped and expansion unwraps it into the
- * `lb-template` destination beside the slot.
- *
- * What it adds at run time is placement, and only placement. `lb-sort` names
- * the column rows are ordered by; `lb-group` names the column they are
- * sectioned by, and is the same attribute a grouped `<select>` reads, because
- * a table with section headings and an `<optgroup>` are asking the same thing
- * of the same data.
- *
- * The `foot` destination is the head's argument a second time and needs no
- * code here. A `<tfoot>` is a place on the page, not a row the hub delivers,
- * so what lands in it is an ordinary scope carrying its own `lb-query` — a
- * grand total is a second projection of the same table, and the hub resolves
- * it by name like any other. See demo/pages/ledger.html.
- */
-/**
- * The heading row of a section, carrying the value it stands for.
- *
- * The widget's own scaffolding, so it is HTML's namespace rather than
- * Loadbare App's: it is derived from rows the hub knows and is invisible to the hub
- * itself, exactly as the `<optgroup>` in `lb-options` is. Nothing
- * addresses it, so it carries no `lb-key` and no name from the vocabulary.
- */
-const GROUP_ROW = "data-group";
-class LbTable extends HTMLElement {
-    acceptRows(result) {
-        applyRows(this, result, this.place);
-        // A section is derived, so it goes when its last row does.
-        for (const heading of this.querySelectorAll(`tr[${GROUP_ROW}]`)) {
-            if (this.section(heading).rows.length === 0)
-                heading.remove();
-        }
-    }
-    /**
-     * Group first, then sort within the group.
-     *
-     * Inserting a row before the first one that sorts after it keeps the
-     * section ordered, whatever else is in it — which is what lets a whole set
-     * and a single patched row take the same path.
-     */
-    place = (row, tuple, template) => {
-        const groupCell = template.getAttribute(ATTR_GROUP);
-        const sortCell = template.getAttribute(ATTR_SORT);
-        const heading = groupCell
-            ? this.headingFor(template, tuple[groupCell] ?? "")
-            : null;
-        const { rows, end } = this.section(heading);
-        const value = sortCell ? (tuple[sortCell] ?? "") : "";
-        const after = sortCell
-            ? rows.find((other) => other !== row && cellOf(other, sortCell) > value)
-            : undefined;
-        template.parentElement.insertBefore(row, after ?? end);
-    };
-    /**
-     * The rows of one section, and the node it ends at.
-     *
-     * A section runs from its heading to the next heading, or to the template
-     * if there is none after it. Without grouping there is one section and it
-     * is the whole body — the heading row the page wrote is skipped along the
-     * way, because it carries no key and is therefore not a row.
-     */
-    section(heading) {
-        const template = this.querySelector("template");
-        const rows = [];
-        let node = heading
-            ? heading.nextElementSibling
-            : template.parentElement.firstElementChild;
-        while (node && node !== template && !node.hasAttribute(GROUP_ROW)) {
-            if (node.hasAttribute(ATTR_KEY))
-                rows.push(node);
-            node = node.nextElementSibling;
-        }
-        return { rows, end: node ?? template };
-    }
-    /** The section with this label, or a new one in front of the template. */
-    headingFor(template, label) {
-        const body = template.parentElement;
-        for (const heading of body.querySelectorAll(`tr[${GROUP_ROW}]`)) {
-            if (heading.getAttribute(GROUP_ROW) === label)
-                return heading;
-        }
-        const heading = document.createElement("tr");
-        heading.setAttribute(GROUP_ROW, label);
-        const cell = document.createElement("th");
-        cell.setAttribute("scope", "rowgroup");
-        // How wide the table is, from the row the page author wrote. Nothing
-        // else knows, and nothing had to be told twice.
-        cell.colSpan = template.content.firstElementChild?.childElementCount ?? 1;
-        cell.textContent = label;
-        heading.append(cell);
-        body.insertBefore(heading, template);
-        return heading;
-    }
-}
-/** What a live row is showing in one column. */
-function cellOf(row, cell) {
-    const selector = `[${ATTR_CELL}="${cell}"]`;
-    const el = row.matches(selector) ? row : row.querySelector(selector);
-    return el?.textContent ?? "";
-}
-customElements.define("lb-table", LbTable);