@loadbare/app 0.4.0

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

@@ -0,0 +1,205 @@
+/**
+ * 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/tests/pages.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Discovering `*.hooks.ts`/`*.queries.ts` pairs (build/locations.ts) and
+ * generating the hub registry from them (build/pages.ts).
+ */
+export {};
+//# sourceMappingURL=pages.test.d.ts.map

package/dist/tests/pages.test.d.ts.map

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

package/dist/tests/pages.test.js

@@ -0,0 +1,98 @@
+/**
+ * Discovering `*.hooks.ts`/`*.queries.ts` pairs (build/locations.ts) and
+ * generating the hub registry from them (build/pages.ts).
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { resolveLocations } from "../build/locations";
+import { pagesSource } from "../build/pages";
+const CHROME = `<!doctype html><body><lb-hub><main></main></lb-hub></body>`;
+async function tree(files) {
+    const dir = await mkdtemp(path.join(tmpdir(), "loadbare-pages-"));
+    for (const [name, content] of Object.entries(files)) {
+        const file = path.join(dir, name);
+        await mkdir(path.dirname(file), { recursive: true });
+        await writeFile(file, content, "utf-8");
+    }
+    return dir;
+}
+describe("discovering hooks and queries", () => {
+    it("pairs a *.hooks.ts and *.queries.ts with the page sharing their basename", async () => {
+        const src = await tree({
+            "chrome.chrome.html": CHROME,
+            "pages/hello.page.html": `<p>hi</p>`,
+            "pages/hello.hooks.ts": `export const hooks = {};`,
+            "pages/hello.queries.ts": `export const queries = {};`,
+        });
+        try {
+            const { pageSources } = await resolveLocations({
+                src,
+                out: `${src}/dist`,
+            });
+            const hello = pageSources.get("hello");
+            assert.ok(hello?.hooks?.endsWith("hello.hooks"));
+            assert.ok(hello?.queries?.endsWith("hello.queries"));
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+    it("allows a page to have only one of the two", async () => {
+        const src = await tree({
+            "chrome.chrome.html": CHROME,
+            "pages/counter.page.html": `<p>0</p>`,
+            "pages/counter.queries.ts": `export const queries = {};`,
+        });
+        try {
+            const { pageSources } = await resolveLocations({
+                src,
+                out: `${src}/dist`,
+            });
+            const counter = pageSources.get("counter");
+            assert.equal(counter?.hooks, undefined);
+            assert.ok(counter?.queries?.endsWith("counter.queries"));
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+    it("throws when a hooks or queries file has no matching page", async () => {
+        const src = await tree({
+            "chrome.chrome.html": CHROME,
+            "pages/orphan.hooks.ts": `export const hooks = {};`,
+        });
+        try {
+            await assert.rejects(() => resolveLocations({ src, out: `${src}/dist` }), /no 'orphan\.page\.html'/);
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+});
+describe("pagesSource", () => {
+    it("returns undefined when no page has hooks or queries", () => {
+        assert.equal(pagesSource([{ name: "hello", file: "/src/hello.page.html" }], new Map(), "/out", "@loadbare/app"), undefined);
+    });
+    it("generates one import per file found and one entry per page", () => {
+        const pages = [
+            { name: "hello", file: "/src/hello.page.html" },
+            { name: "counter", file: "/src/counter.page.html" },
+        ];
+        const pageSources = new Map([
+            ["hello", { hooks: "/src/hello.hooks", queries: "/src/hello.queries" }],
+            ["counter", { queries: "/src/counter.queries" }],
+        ]);
+        const out = pagesSource(pages, pageSources, "/out", "@loadbare/app");
+        assert.match(out, /import \{ createHub \} from "@loadbare\/app\/server";/);
+        assert.match(out, /import \{ hooks as page_hello_Hooks \} from "\.\.\/src\/hello\.hooks";/);
+        assert.match(out, /import \{ queries as page_hello_Queries \} from "\.\.\/src\/hello\.queries";/);
+        assert.match(out, /import \{ queries as page_counter_Queries \} from "\.\.\/src\/counter\.queries";/);
+        assert.doesNotMatch(out, /page_counter_Hooks/);
+        assert.match(out, /"hello": \{ hooks: page_hello_Hooks, queries: page_hello_Queries \}/);
+        assert.match(out, /"counter": \{ hooks: \{\}, queries: page_counter_Queries \}/);
+        assert.match(out, /export const hub = createHub\(\{/);
+    });
+});

package/dist/tests/styles.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Discovering `.css` files (build/locations.ts) and concatenating them
+ * (build/styles.ts) — see that file's header for what ordering guarantee is
+ * and is not made.
+ */
+export {};
+//# sourceMappingURL=styles.test.d.ts.map

package/dist/tests/styles.test.d.ts.map

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

package/dist/tests/styles.test.js

@@ -0,0 +1,73 @@
+/**
+ * Discovering `.css` files (build/locations.ts) and concatenating them
+ * (build/styles.ts) — see that file's header for what ordering guarantee is
+ * and is not made.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { resolveLocations } from "../build/locations";
+import { stylesSource } from "../build/styles";
+const CHROME = `<!doctype html><body><lb-hub><main></main></lb-hub></body>`;
+async function tree(files) {
+    const dir = await mkdtemp(path.join(tmpdir(), "loadbare-styles-"));
+    for (const [name, content] of Object.entries(files)) {
+        const file = path.join(dir, name);
+        await mkdir(path.dirname(file), { recursive: true });
+        await writeFile(file, content, "utf-8");
+    }
+    return dir;
+}
+describe("discovering CSS", () => {
+    it("finds a .css file anywhere under src", async () => {
+        const src = await tree({
+            "chrome.chrome.html": CHROME,
+            "widgets/app-box.css": ".app-box {}",
+            "styles/00-reset.css": "* { margin: 0; }",
+        });
+        try {
+            const { cssFiles } = await resolveLocations({ src, out: `${src}/dist` });
+            assert.equal(cssFiles.length, 2);
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+    it("orders by filename, not by directory, so a global sorts first by naming itself 00-", async () => {
+        const src = await tree({
+            "chrome.chrome.html": CHROME,
+            "widgets/app-box.css": ".app-box {}",
+            "00-reset.css": "* { margin: 0; }",
+        });
+        try {
+            const { cssFiles } = await resolveLocations({ src, out: `${src}/dist` });
+            assert.deepEqual(cssFiles.map((f) => path.basename(f)), ["00-reset.css", "app-box.css"]);
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+});
+describe("stylesSource", () => {
+    it("returns undefined for no files", async () => {
+        assert.equal(await stylesSource([]), undefined);
+    });
+    it("concatenates file contents in the order given", async () => {
+        const src = await tree({
+            "a.css": "a {}",
+            "b.css": "b {}",
+        });
+        try {
+            const out = await stylesSource([
+                path.join(src, "a.css"),
+                path.join(src, "b.css"),
+            ]);
+            assert.equal(out, "a {}\nb {}");
+        }
+        finally {
+            await rm(src, { recursive: true, force: true });
+        }
+    });
+});

package/dist/widgets/index.d.ts

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

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

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

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

package/dist/widgets/lb-input.js

@@ -0,0 +1,48 @@
+/// <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

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

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

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

package/dist/widgets/lb-list.js

@@ -0,0 +1,17 @@
+/// <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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,72 @@
+/// <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

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

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

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

package/dist/widgets/lb-picker.js

@@ -0,0 +1,25 @@
+/// <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

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

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

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