@loadbare/widgets 0.2.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,34 @@
+# Loadbare Widgets
+
+This is a basic widget set, currently bare-bones proof of concept.
+
+Inventory:
+
+| Widget | Is |
+| --- | --- |
+| [`lb-input`](docs/lb-input.md) | an editable cell wrapping an `<input>` |
+| [`lb-select`](docs/lb-select.md) | a `<select>` whose options the page writes |
+| [`lb-list`](docs/lb-list.md) | the plain repeater |
+| [`lb-options`](docs/lb-options.md) | a `<select>` whose options come from a query |
+| [`lb-picker`](docs/lb-picker.md) | `lb-options` with the row template built in |
+| [`lb-table`](docs/lb-table.md) | a `<table>` supplying its own scaffolding |
+
+## Installing
+
+```
+npm install @loadbare/app @loadbare/widgets
+```
+
+Then list the package in the application's `imports.ts`:
+
+```ts
+// src/imports.ts
+export default ["@loadbare/widgets"];
+```
+
+You can now include the widgets in your HTML files.
+
+Apart from the line in `src/imports.ts`, no other import statements
+are required.  The loadbare builder automatically bundles the HTML and
+JS for any widget in the library that is actually used in the app.
+

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC"}

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,iBAAiB,CAAC;AACzB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC","sourcesContent":["import \"./lb-input.js\";\nimport \"./lb-select.js\";\nimport \"./lb-list.js\";\nimport \"./lb-options.js\";\nimport \"./lb-table.js\";\nimport \"./lb-picker.js\";\n"]}

package/dist/lb-input.d.ts

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

package/dist/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/lb-input.html

@@ -0,0 +1 @@
+<label>{{label}} <input readonly="{{readonly}}" /></label>

package/dist/lb-input.js

@@ -0,0 +1,57 @@
+/// <reference lib="dom" />
+import { ATTR_CELL, ATTR_KEY, ATTR_QUERY, ATTR_VALUE, LB_EVENT_NAME, } from "@loadbare/app/constants";
+/** The page asks for a request. A widget that was not asked stays quiet. */
+const FIRE_ON_CHANGE = "data-fire-on-change";
+/**
+ * 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: `data-fire-on-change` asks for a
+ * `cell-change` on the input's own `change` event, bound by the same
+ * lb-query/lb-key/lb-cell the value arrived on.
+ *
+ * The page has to ask, because committing per field is one editing model
+ * and not the only one. An input inside an `lb-insert` or `lb-update` form
+ * is read again by the form on submit, so a widget that sent on its own
+ * would write the same edit twice and defeat the batch the form is for.
+ */
+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", () => {
+            if (!this.hasAttribute(FIRE_ON_CHANGE))
+                return;
+            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 binding, 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);
+//# sourceMappingURL=lb-input.js.map

package/dist/lb-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-input.js","sourceRoot":"","sources":["../widgets/lb-input.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,aAAa,GACd,MAAM,yBAAyB,CAAC;AAGjC,4EAA4E;AAC5E,MAAM,cAAc,GAAG,qBAAqB,CAAC;AAE7C;;;;;;;;;;;;;GAaG;AAEH,MAAM,OAAQ,SAAQ,WAAW;IAC/B,MAAM,CAAC,kBAAkB,GAAG,CAAC,UAAU,CAAC,CAAC;IAEzC,wBAAwB,CAAC,KAAa,EAAE,IAAY,EAAE,KAAa;QACjE,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;YAC3D,OAAO;QACT,CAAC;QACD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;gBAAE,OAAO;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC1C,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,4CAA4C,CAAC,CAAC;gBAC5D,OAAO;YACT,CAAC;YACD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,UAAU,GAAG,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;YACxE,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ,GAAG,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;YAClE,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAC1C,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC5B,OAAO,CAAC,KAAK,CACX,2DAA2D,CAC5D,CAAC;gBACF,OAAO;YACT,CAAC;YACD,MAAM,MAAM,GAAe;gBACzB,EAAE,EAAE,aAAa;gBACjB,KAAK;gBACL,GAAG;gBACH,IAAI;gBACJ,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAC1D,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_CELL,\n  ATTR_KEY,\n  ATTR_QUERY,\n  ATTR_VALUE,\n  LB_EVENT_NAME,\n} from \"@loadbare/app/constants\";\nimport type { HubRequest } from \"@loadbare/app/types\";\n\n/** The page asks for a request. A widget that was not asked stays quiet. */\nconst FIRE_ON_CHANGE = \"data-fire-on-change\";\n\n/**\n * A leaf cell wrapping an <input>. The hub writes one attribute name for\n * every widget type, so the value lands in `lb-value` and the widget\n * forwards it to the control it owns.\n *\n * The other direction of the same cell: `data-fire-on-change` asks for a\n * `cell-change` on the input's own `change` event, bound by the same\n * lb-query/lb-key/lb-cell the value arrived on.\n *\n * The page has to ask, because committing per field is one editing model\n * and not the only one. An input inside an `lb-insert` or `lb-update` form\n * is read again by the form on submit, so a widget that sent on its own\n * would write the same edit twice and defeat the batch the form is for.\n */\n\nclass LbInput extends HTMLElement {\n  static observedAttributes = [ATTR_VALUE];\n\n  attributeChangedCallback(_name: string, _old: string, value: string) {\n    const input = this.querySelector(\"input\");\n    if (!input) {\n      console.error(`lb-input: no <input> to receive the value`);\n      return;\n    }\n    input.value = value;\n  }\n\n  connectedCallback() {\n    this.addEventListener(\"change\", () => {\n      if (!this.hasAttribute(FIRE_ON_CHANGE)) return;\n      const input = this.querySelector(\"input\");\n      if (!input) {\n        console.error(`lb-input: change with no <input>, ignoring`);\n        return;\n      }\n      const query = this.closest(`[${ATTR_QUERY}]`)?.getAttribute(ATTR_QUERY);\n      const key = this.closest(`[${ATTR_KEY}]`)?.getAttribute(ATTR_KEY);\n      const cell = this.getAttribute(ATTR_CELL);\n      if (!query || !key || !cell) {\n        console.error(\n          `lb-input: change with no query/key/cell binding, ignoring`,\n        );\n        return;\n      }\n      const detail: HubRequest = {\n        op: \"cell-change\",\n        query,\n        key,\n        cell,\n        value: input.value,\n      };\n      this.dispatchEvent(\n        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n      );\n    });\n  }\n}\n\ncustomElements.define(\"lb-input\", LbInput);\n"]}

package/dist/lb-list.d.ts

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

package/dist/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/lb-list.html

@@ -0,0 +1 @@
+<div lb-slot></div>

package/dist/lb-list.js

@@ -0,0 +1,18 @@
+/// <reference lib="dom" />
+import { applyRows } from "@loadbare/app/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);
+//# sourceMappingURL=lb-list.js.map

package/dist/lb-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-list.js","sourceRoot":"","sources":["../widgets/lb-list.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAG3B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,MAAO,SAAQ,WAAW;IAC9B,UAAU,CAAC,MAAkB;QAC3B,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC1B,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport type { Projection, HubRowHost } from \"@loadbare/app/types\";\nimport { applyRows } from \"@loadbare/app/rows\";\n\n/**\n * The plain repeater: whatever the page author wrote inside is repeated once\n * per tuple, in the order the server sent.\n *\n * It exists because a projection has to land on a widget, and because a\n * `<table>` cannot be one — a custom element written inside `<tbody>` is\n * discarded by the parser, so the widget goes around the table and the\n * template goes inside it, where the content model already allows it.\n */\nclass LbList extends HTMLElement implements HubRowHost {\n  acceptRows(result: Projection) {\n    applyRows(this, result);\n  }\n}\n\ncustomElements.define(\"lb-list\", LbList);\n"]}

package/dist/lb-options.d.ts

@@ -0,0 +1,26 @@
+import type { Projection, HubRowHost } from "@loadbare/app/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/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,qBAAqB,CAAC;AAG7B;;;;;;;;;;;;;;;;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/lb-options.html

@@ -0,0 +1,4 @@
+<label
+  >{{label}}
+  <select lb-slot></select
+></label>

package/dist/lb-options.js

@@ -0,0 +1,73 @@
+/// <reference lib="dom" />
+import { ATTR_ACTION, ATTR_GROUP, ATTR_KEY, LB_EVENT_NAME, } from "@loadbare/app/constants";
+import { applyRows } from "@loadbare/app/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);
+//# sourceMappingURL=lb-options.js.map

package/dist/lb-options.js.map

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

package/dist/lb-picker.d.ts

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

package/dist/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/lb-picker.html

@@ -0,0 +1,7 @@
+<label
+  >{{label}}
+  <select>
+    <template lb-key="{{key}}" lb-group="{{group}}">
+      <option lb-cell="{{cell}}"></option>
+    </template></select
+></label>

package/dist/lb-picker.js

@@ -0,0 +1,26 @@
+/// <reference lib="dom" />
+import { LbOptions } from "./lb-options.js";
+/**
+ * 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);
+//# sourceMappingURL=lb-picker.js.map

package/dist/lb-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-picker.js","sourceRoot":"","sources":["../widgets/lb-picker.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,QAAS,SAAQ,SAAS;CAAG;AAEnC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LbOptions } from \"./lb-options.js\";\n\n/**\n * The same `<select>` as `lb-options`, with the row template supplied by\n * the definition instead of by the page.\n *\n * A row template is markup, so writing it is the page author's job — until\n * every row is one option and the only thing that varies is which columns it\n * reads. Those are words, and words are parameters: `exp-key`, `exp-cell` and\n * `exp-group` fill the placeholders in the template the definition already\n * has, at build time, and the page writes one tag with no children.\n *\n * It is the same trade as anywhere else in expansion. A page author who wants\n * a second element in the row, or an option built from two columns, writes\n * `lb-options` and the template themselves. This one is for when they do\n * not.\n *\n * The behavior is inherited whole, because it is the same behavior: rows land\n * in groups, the key becomes the value, and a change sends the declared\n * action. A distinct class exists only because `customElements.define`\n * requires one constructor per name.\n */\nclass LbPicker extends LbOptions {}\n\ncustomElements.define(\"lb-picker\", LbPicker);\n"]}

package/dist/lb-select.d.ts

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

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

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

package/dist/lb-select.html

@@ -0,0 +1,4 @@
+<label
+  >{{label}}
+  <select lb-slot></select
+></label>

package/dist/lb-select.js

@@ -0,0 +1,44 @@
+/// <reference lib="dom" />
+import { ATTR_ACTION, ATTR_VALUE, LB_EVENT_NAME, } from "@loadbare/app/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 binding 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);
+//# sourceMappingURL=lb-select.js.map

package/dist/lb-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-select.js","sourceRoot":"","sources":["../widgets/lb-select.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EACL,WAAW,EACX,UAAU,EACV,aAAa,GACd,MAAM,yBAAyB,CAAC;AAGjC;;;;;;;;GAQG;AACH,MAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,GAAG,CAAC,UAAU,CAAC,CAAC;IAEzC,wBAAwB,CAAC,KAAa,EAAE,IAAY,EAAE,KAAa;QACjE,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;YAC7D,OAAO;QACT,CAAC;QACD,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC5C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,OAAO,CAAC,KAAK,CAAC,8CAA8C,CAAC,CAAC;gBAC9D,OAAO;YACT,CAAC;YACD,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YAC5C,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO,CAAC,KAAK,CAAC,iBAAiB,WAAW,mBAAmB,CAAC,CAAC;gBAC/D,OAAO;YACT,CAAC;YACD,MAAM,MAAM,GAAe;gBACzB,EAAE,EAAE,QAAQ;gBACZ,IAAI;gBACJ,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB,CAAC;YACF,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAC1D,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;;AAGH,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport {\n  ATTR_ACTION,\n  ATTR_VALUE,\n  LB_EVENT_NAME,\n} from \"@loadbare/app/constants\";\nimport type { HubRequest } from \"@loadbare/app/types\";\n\n/**\n * A leaf cell wrapping a <select>. It receives its value like any other cell,\n * and on change it sends the action the page declared for it — the request\n * vocabulary and the binding vocabulary running in both directions on one\n * widget.\n *\n * The choice is the interaction, so this is the case where an action carries\n * a value. The server still decides what that choice means.\n */\nclass LbSelect extends HTMLElement {\n  static observedAttributes = [ATTR_VALUE];\n\n  attributeChangedCallback(_name: string, _old: string, value: string) {\n    const select = this.querySelector(\"select\");\n    if (!select) {\n      console.error(`lb-select: no <select> to receive the value`);\n      return;\n    }\n    select.value = value;\n  }\n\n  connectedCallback() {\n    this.addEventListener(\"change\", () => {\n      const select = this.querySelector(\"select\");\n      if (!select) {\n        console.error(`lb-select: change with no <select>, ignoring`);\n        return;\n      }\n      const name = this.getAttribute(ATTR_ACTION);\n      if (!name) {\n        console.error(`lb-select: no ${ATTR_ACTION}, nothing to send`);\n        return;\n      }\n      const detail: HubRequest = {\n        op: \"action\",\n        name,\n        value: select.value,\n      };\n      this.dispatchEvent(\n        new CustomEvent(LB_EVENT_NAME, { bubbles: true, detail }),\n      );\n    });\n  }\n}\n\ncustomElements.define(\"lb-select\", LbSelect);\n"]}

package/dist/lb-table.d.ts

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

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

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

package/dist/lb-table.html

@@ -0,0 +1,8 @@
+<table>
+  <caption>
+    {{caption}}
+  </caption>
+  <thead lb-template="head"></thead>
+  <tbody lb-slot></tbody>
+  <tfoot lb-template="foot"></tfoot>
+</table>

package/dist/lb-table.js

@@ -0,0 +1,114 @@
+/// <reference lib="dom" />
+import { ATTR_CELL, ATTR_GROUP, ATTR_KEY, ATTR_SORT, } from "@loadbare/app/constants";
+import { applyRows } from "@loadbare/app/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
+ * binds to 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);
+//# sourceMappingURL=lb-table.js.map

package/dist/lb-table.js.map

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

package/docs/lb-input.md

@@ -0,0 +1,72 @@
+# `lb-input`
+
+> Status: a barebones starter.  Iterative use will drive improvements.
+
+A wrapper for HTML Input.  
+
+Requires attributes `lb-cell` and `exp-label`.  
+
+```html
+<lb-list lb-query="people">
+  <template lb-key="id">
+    <div>
+      <lb-input lb-cell="name" exp-label="Name" data-fire-on-change></lb-input>
+      <lb-input lb-cell="email" exp-label="Email" exp-readonly></lb-input>
+    </div>
+  </template>
+</lb-list>
+```
+
+## Expansion Attributes
+
+These are the parameters that control build-time expansion of the final HTML.
+
+| Parameter             | Fills                                            |
+|-----------------------|--------------------------------------------------|
+| `exp-label`           | the visible `<label>` text                       |
+| `exp-readonly`        | the input's `readonly` attribute                 |
+
+Any value on `exp-readonly` makes the input readonly. Leaving the parameter
+off drops the attribute.
+
+
+## Behavioral Attributes
+
+| Parameter             | Fills                                            |
+|-----------------------|--------------------------------------------------|
+| `data-fire-on-change` | if true, fires a request to the server on change |
+
+## Binding
+
+| Attribute  | Read from            | Names                        |
+|------------|----------------------|------------------------------|
+| `lb-cell`  | the element itself   | the column the input shows   |
+| `lb-key`   | the nearest ancestor | the row                      |
+| `lb-query` | the nearest ancestor | the query                    |
+
+## Inside a form
+
+An `lb-input` inside an `lb-insert` or `lb-update` form leaves
+`data-fire-on-change` off. The form reads every `lb-cell` in it on submit and
+sends one request for all of them, so an input that also sent its own would
+write the same edit twice.
+
+```html
+<form lb-update>
+  <lb-input lb-cell="name" exp-label="Name"></lb-input>
+  <lb-input lb-cell="email" exp-label="Email"></lb-input>
+  <button type="submit">Save</button>
+</form>
+```
+
+## Editing
+
+By default an `lb-input` does not notify the hub when its value changes, as shown
+in the form example above.
+
+To fire a server event through the hub, add `data-fire-on-change`.  The hub will
+catch the event and fire a request to the server.
+
+While the request is in flight the hub marks the `lb-input` with
+`data-lb-pending`, and on failure with `data-lb-error`. Both are there for a
+stylesheet to read.

package/docs/lb-list.md

@@ -0,0 +1,61 @@
+# `lb-list`
+
+The plain repeater: a row per tuple, in the order the rows arrive.
+
+Apply the `lb-query` attribute to name the query. Write a
+`<template lb-key="...">` inside the tag, naming the column that identifies a
+row, and apply `lb-cell` to each element in it.
+
+```html
+<lb-list lb-query="people">
+  <template lb-key="id">
+    <div>
+      <span lb-cell="name"></span>
+      <span lb-cell="email"></span>
+    </div>
+  </template>
+</lb-list>
+```
+
+## Status
+
+Barebones starter to prove out the publish/consume chain and identify necessary
+improvements through iterative use.
+
+## Parameters
+
+None.
+
+## Binding
+
+| Attribute  | Read from                        | Names                            |
+|------------|----------------------------------|----------------------------------|
+| `lb-query` | the element itself               | the query whose rows land here   |
+| `lb-key`   | the row template                 | the column that identifies a row |
+| `lb-cell`  | elements inside the row template | the column each element shows    |
+
+For ordering and section headings, see [`lb-table`](./lb-table.md).
+
+## Repeating table rows
+
+Put `lb-list` around the `<table>` and the `<template>` inside `<tbody>`. A
+custom element written inside `<tbody>` is thrown away by the HTML parser.
+
+```html
+<lb-list lb-query="ledger">
+  <table>
+    <tbody>
+      <template lb-key="id">
+        <tr><td lb-cell="date"></td><td lb-cell="amount"></td></tr>
+      </template>
+    </tbody>
+  </table>
+</lb-list>
+```
+
+[`lb-table`](./lb-table.md) supplies the table itself.
+
+## Styling an empty list
+
+`lb-list` carries `data-rows` with the number of rows showing, for a
+stylesheet to read.

package/docs/lb-options.md

@@ -0,0 +1,67 @@
+# `lb-options`
+
+A wrapper for HTML Select, with the `<option>`s coming from a query.
+
+Apply the `lb-query` attribute to name the query, and `lb-action` to name the
+action a change sends. Write a `<template lb-key="...">` inside the tag, and
+apply `lb-cell` to the `<option>` itself — an `<option>` holds text, not
+elements. Apply `lb-group` to the template to section the options.
+
+Provide `exp-label`.
+
+```html
+<lb-options lb-query="statuses" exp-label="Status" lb-action="setStatus">
+  <template lb-key="id" lb-group="category">
+    <option lb-cell="label"></option>
+  </template>
+</lb-options>
+```
+
+## Status
+
+Barebones starter to prove out the publish/consume chain and identify necessary
+improvements through iterative use.
+
+## Parameters
+
+| Parameter   | Fills                      |
+|-------------|----------------------------|
+| `exp-label` | the visible `<label>` text |
+
+## Binding
+
+| Attribute   | Read from          | Names                                |
+|-------------|--------------------|--------------------------------------|
+| `lb-query`  | the element itself | the query whose rows become options  |
+| `lb-action` | the element itself | the action a change sends            |
+| `lb-key`    | the row template   | the column that identifies a row     |
+| `lb-group`  | the row template   | the column that sections the options |
+| `lb-cell`   | the `<option>`     | the column the option shows          |
+
+`lb-key` gives the option its `value`, so the page names that column once.
+`lb-sort` is not read here.
+
+## Grouping
+
+`lb-group` names a column whose distinct values become `<optgroup>`s, each
+labelled with the value.
+
+## Choosing
+
+Choosing an option notifies the hub, which fires a request to the server: the
+action named by `lb-action`, carrying the key of the chosen row. Declare that
+action on the server.
+
+`lb-action` is required. Without it, a change does nothing.
+
+While the request is in flight the hub marks the `lb-options` with
+`data-lb-pending`, and on failure with `data-lb-error`. Both are there for a
+stylesheet to read.
+
+## Styling an empty list
+
+`lb-options` carries `data-rows` with the number of options showing, for a
+stylesheet to read.
+
+For the case where every row is one option and only the column names vary,
+see [`lb-picker`](./lb-picker.md).

package/docs/lb-picker.md

@@ -0,0 +1,52 @@
+# `lb-picker`
+
+[`lb-options`](./lb-options.md) with the row template built in, for when every
+row is one option and only the column names vary. It takes no children.
+
+Apply the `lb-query` attribute to name the query, and `lb-action` to name the
+action a change sends.
+
+Provide `exp-label`, `exp-key`, `exp-cell`, and optionally `exp-group`.
+
+```html
+<lb-picker
+  lb-query="statuses"
+  exp-label="Status"
+  exp-key="id"
+  exp-cell="label"
+  exp-group="category"
+  lb-action="setStatus"
+></lb-picker>
+```
+
+## Status
+
+Barebones starter to prove out the publish/consume chain and identify necessary
+improvements through iterative use.
+
+## Parameters
+
+| Parameter   | Fills                                            |
+|-------------|--------------------------------------------------|
+| `exp-label` | the visible `<label>` text                       |
+| `exp-key`   | the column that identifies a row                 |
+| `exp-cell`  | the column the option shows                      |
+| `exp-group` | the column that sections the options, if grouped |
+
+`exp-key` and `exp-cell` are required. Leaving `exp-group` off leaves the
+options ungrouped.
+
+## Binding
+
+| Attribute   | Read from          | Names                               |
+|-------------|--------------------|-------------------------------------|
+| `lb-query`  | the element itself | the query whose rows become options |
+| `lb-action` | the element itself | the action a change sends           |
+
+## Choosing
+
+The same as [`lb-options`](./lb-options.md): grouping, the key as the option's
+value, `data-rows`, and the action on change.
+
+Write `lb-options` and the template instead for a row that needs a second
+element, or an option built from two columns.

package/docs/lb-select.md

@@ -0,0 +1,48 @@
+# `lb-select`
+
+A wrapper for HTML Select, with the `<option>`s written by hand.
+
+Apply the `lb-cell` attribute to name the column, and `lb-action` to name the
+action a change sends.
+
+Provide `exp-label`.
+
+```html
+<lb-select lb-cell="status" exp-label="Status" lb-action="setStatus">
+  <option value="open">Open</option>
+  <option value="closed">Closed</option>
+</lb-select>
+```
+
+## Status
+
+Barebones starter to prove out the publish/consume chain and identify necessary
+improvements through iterative use.
+
+## Parameters
+
+| Parameter   | Fills                      |
+|-------------|----------------------------|
+| `exp-label` | the visible `<label>` text |
+
+## Binding
+
+| Attribute   | Read from          | Names                       |
+|-------------|--------------------|-----------------------------|
+| `lb-cell`   | the element itself | the column the select shows |
+| `lb-action` | the element itself | the action a change sends   |
+
+## Choosing
+
+Choosing an option notifies the hub, which fires a request to the server: the
+action named by `lb-action`, carrying the chosen option's value. Declare that
+action on the server.
+
+`lb-action` is required. Without it, a change does nothing.
+
+While the request is in flight the hub marks the `lb-select` with
+`data-lb-pending`, and on failure with `data-lb-error`. Both are there for a
+stylesheet to read.
+
+For a `<select>` whose options come from a query, see
+[`lb-options`](./lb-options.md) and [`lb-picker`](./lb-picker.md).

package/docs/lb-table.md

@@ -0,0 +1,69 @@
+# `lb-table`
+
+A wrapper for HTML Table, supplying the `<table>` itself.
+
+Apply the `lb-query` attribute to name the query. Write three `<template>`s
+inside the tag: one marked `lb-template="head"` for the heading row, one
+carrying `lb-key` for the row, and optionally one marked `lb-template="foot"`
+for the footer. Apply `lb-sort` and `lb-group` to the row template to order
+and section the rows.
+
+Provide `exp-caption`.
+
+```html
+<lb-table lb-query="ledger" exp-caption="Ledger">
+  <template lb-template="head">
+    <tr><th>Date</th><th>Amount</th></tr>
+  </template>
+  <template lb-key="id" lb-sort="date" lb-group="month">
+    <tr><td lb-cell="date"></td><td lb-cell="amount"></td></tr>
+  </template>
+  <template lb-template="foot">
+    <tr lb-query="ledger-total"><td>Total</td><td lb-cell="total"></td></tr>
+  </template>
+</lb-table>
+```
+
+Each part goes in a `<template>` because a `<thead>` or `<tr>` written
+directly inside the tag is thrown away by the HTML parser.
+
+## Status
+
+Barebones starter to prove out the publish/consume chain and identify necessary
+improvements through iterative use.
+
+## Parameters
+
+| Parameter     | Fills                |
+|---------------|----------------------|
+| `exp-caption` | the `<caption>` text |
+
+## Binding
+
+| Attribute  | Read from                        | Names                              |
+|------------|----------------------------------|------------------------------------|
+| `lb-query` | the element itself               | the query whose rows fill the body |
+| `lb-key`   | the row template                 | the column that identifies a row   |
+| `lb-sort`  | the row template                 | the column rows are ordered by     |
+| `lb-group` | the row template                 | the column rows are sectioned by   |
+| `lb-cell`  | elements inside the row template | the column each element shows      |
+
+## Sorting and grouping
+
+`lb-sort` names the column rows are ordered by, comparing the text each row
+shows. `lb-group` names the column they are sectioned by: each distinct value
+gets a heading row of its own, spanning the width of the row template, and
+rows sort within their section.
+
+## The footer
+
+The footer is an ordinary part of the page, not a row from the table's query.
+Give it its own `lb-query` — a grand total is a second query, declared on the
+server like any other.
+
+## Styling an empty table
+
+`lb-table` carries `data-rows` with the number of rows showing, for a
+stylesheet to read.
+
+For a repeater with no table of its own, see [`lb-list`](./lb-list.md).

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@loadbare/widgets",
+  "description": "The basic widget set for @loadbare/app: input, select, list, options, picker, table",
+  "version": "0.2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "docs",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "loadbare": {
+    "widgets": "./dist"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "tsx --test \"tests/**/*.test.ts\"",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run typecheck && npm run build && npm run test",
+    "preflight": "node scripts/preflight-release.mjs",
+    "release": "npm run preflight && npm publish",
+    "release:patch": "node scripts/bump-release.mjs patch",
+    "release:minor": "node scripts/bump-release.mjs minor",
+    "release:major": "node scripts/bump-release.mjs major"
+  },
+  "author": "Ken Downs",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/kendowns/loadbare.git",
+    "directory": "packages/widgets"
+  },
+  "homepage": "https://gitlab.com/kendowns/loadbare",
+  "bugs": {
+    "url": "https://gitlab.com/kendowns/loadbare/-/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "peerDependencies": {
+    "@loadbare/app": "^0.4.0"
+  },
+  "devDependencies": {
+    "@loadbare/app": "^0.4.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.0.0",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.8.4",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0"
+  }
+}