@loadbare/app 0.21.0 → 0.22.0

package/docs/reference/widgets.md

@@ -1,8 +1,7 @@
 # The Basic Widget Library
 
-Thirteen widgets: `lb-input`, `lb-select`, `lb-options`, `lb-picker`,
-`lb-table`, `lb-unknown-page`, `lb-confirm`, `lb-form`, `lb-insert-dialog`,
-`lb-master`, `lb-checkbox`, `lb-number` and `lb-date`. Every one of them is an ordinary custom element, written
+`@loadbare/widgets` is the basic widget set: controls, a table, dialogs, and
+elements that format a value. Every one of them is an ordinary custom element, written
 against the contracts in [Custom Elements](./custom-elements.md#html) for its
 definition and [Custom Elements](./custom-elements.md#code) for its class.
 
@@ -30,282 +29,16 @@ see [Being a control](./custom-elements.md#being-a-control). Each passes a
 refusal's message for its column to the native control inside it; see
 [Refusals](./data-binding.md#refusals).
 
-## `lb-input`
+## Each widget
 
-Wraps an `<input>`. The hub sets its `value` from the column `lb-column`
-names, and `lb-request` names what the widget sends on `change`:
+Each widget's parameters, the attributes it reads, and what a change sends
+are documented once, in the package that ships it: one page per widget,
+which the loadbare-widgets skill carries. Install that skill beside this one:
 
-```html
-<lb-input lb-column="name" lb-request="lb-row-update" exp-label="Name"></lb-input>
 ```
-
-Inside a form, leave `lb-request` off. The form gathers the widget on submit
-like any other control, so a widget that also sent its own request would
-write the same edit twice.
-
-| Parameter      | Fills                            |
-|----------------|----------------------------------|
-| `exp-label`    | The visible `<label>` text       |
-| `exp-type`     | The input's `type`, `text` when absent |
-| `exp-readonly` | The input's `readonly` attribute |
-
-## `lb-select`
-
-Wraps a `<select>` whose `<option>`s the page writes inside the tag:
-
-```html
-<lb-select lb-column="team" lb-request="lb-row-update" exp-label="Team">
-  <option value="">No team</option>
-  <option value="Engines">Engines</option>
-</lb-select>
-```
-
-| Parameter   | Fills                      |
-|-------------|----------------------------|
-| `exp-label` | The visible `<label>` text |
-
-## `lb-options`
-
-A `<select>` whose `<option>`s are the rows of the query it names. The page
-writes the row template inside the widget:
-
-```html
-<lb-options lb-query="statuses" lb-column="status" lb-request="lb-row-update" exp-label="Status">
-  <template><option lb-column="label"></option></template>
-</lb-options>
-```
-
-| Parameter   | Fills                      |
-|-------------|----------------------------|
-| `exp-label` | The visible `<label>` text |
-| `exp-size`  | The `<select>`'s `size`, an open list rather than a drop-down |
-
-- Each option's `value` is its row's key, the `lb-key-value` the hub stamps
-  on the live row, so the widget holds a key and shows a label.
-- A group template holding an `<optgroup>` puts the options in groups, one
-  per run of the query's order's leading term. The widget labels each
-  `<optgroup>` from the `lb-group-value` the hub stamps on it:
-
-  ```html
-  <template lb-group>
-    <optgroup><template><option lb-column="label"></option></template></optgroup>
-  </template>
-  ```
-- A heading option marked `data-group-label` in the `<optgroup>`, `hidden`
-  and `disabled`, labels the group with its text instead, so the label can
-  be a column of the group's first row.
-- Its `value` selects the option with that key, including an option that
-  arrives after the value did.
-
-`lb-picker` is the same class with the row template supplied by its
-definition.
-
-## `lb-picker`
-
-`lb-options`, with the row template built in, for a list where every row is
-one option showing one column:
-
-```html
-<lb-picker
-  lb-query="statuses"
-  lb-column="status"
-  lb-request="lb-row-update"
-  exp-label="Status"
-  exp-column="label"
-></lb-picker>
+npx loadbare-widgets skills install
 ```
 
-| Parameter    | Fills                                   |
-|--------------|-----------------------------------------|
-| `exp-label`  | The visible `<label>` text              |
-| `exp-column` | The column each option shows            |
-
-An option built from two columns, a row with a second element, or options
-in groups, is `lb-options` with the page's own templates.
-
-## `lb-table`
-
-A `<table>` that supplies its own scaffolding. The page supplies the heading
-row, the row template, and optionally a footer, each as a `<template>`:
-
-```html
-<lb-table lb-query="ledger" exp-caption="Ledger">
-  <template lb-exp-template="head">
-    <tr><th>Date</th><th>Amount</th></tr>
-  </template>
-  <template lb-group>
-    <tr><th colspan="2" lb-column="month"></th></tr>
-    <template>
-      <tr><td lb-column="date"></td><td lb-column="amount"></td></tr>
-    </template>
-  </template>
-  <template lb-exp-template="foot">
-    <tr><td>Total</td><td lb-sum="amount"></td></tr>
-  </template>
-</lb-table>
-```
-
-| Parameter     | Fills                |
-|---------------|----------------------|
-| `exp-caption` | The `<caption>` text |
-
-| Template                          | Fills                                   |
-|-----------------------------------|-----------------------------------------|
-| `<template lb-exp-template="head">` | The `<thead>`                         |
-| `<template lb-exp-template="foot">` | The `<tfoot>`                         |
-| Any other `<template>`            | The row or group template, in the `<tbody>` |
-
-- The hub places the rows by the query's order and builds its groups, and
-  leaves them where they stand for an edit from inside the table; see
-  [Rows the user is working in](./data-binding.md#rows-the-user-is-working-in). The
-  rows land in the one `<tbody>`, so a group here is a heading row with its
-  rows after it.
-- `lb-order` and `lb-filter` go on the `lb-table` itself, beside
-  `lb-query`; see [Order](./data-binding.md#order) and
-  [Filters](./data-binding.md#filters).
-- The footer is not a row of `ledger`. An aggregate there covers every row
-  showing;
-  a figure that is not a sum of the rows, such as a budget, is a `<tr>`
-  naming a `row` query of its own.
-- A `<template lb-exp-template="ghost">` is a blank row for entering a new
-  one, in a `<tbody>` of its own. The widget joins its controls to a form
-  outside the table, since a `<form>` cannot wrap a `<tr>`, and puts the
-  cursor back in it once an insert from it succeeds.
-- After rows land, the widget scrolls the row the page's own request created
-  or moved into view.
-- Text selected in a cell whose `lb-column` the table's `lb-filter` names
-  becomes that column's filter in `lb-choices`: `=` for the whole text,
-  `^=` from its start, `$=` up to its end, `*=` otherwise.
-- The heading of the order's leading column carries a triangle for the
-  direction, read from [`lb-query-order`](./data-binding.md#order). A
-  heading's column is the `lb-column` in the cell at its position in the row
-  template. While rows stand out of order the triangle carries
-  `data-unsorted` and a click on its heading re-sorts. With `lb-order`, a
-  click on the sorted heading reverses the order and a click on another
-  sorts by its column. Not on a grouped table.
-
-## `lb-confirm`
-
-A button that asks before it sends. The page writes the question inside the
-tag, and the request goes on the dialog's confirm button, so nothing reaches
-the hub until the user says yes:
-
-```html
-<lb-confirm exp-label="Delete" exp-request="lb-row-delete">
-  Delete <b lb-column="name"></b>?
-</lb-confirm>
-```
-
-| Parameter     | Fills                                            |
-|---------------|--------------------------------------------------|
-| `exp-label`   | The text of the button that opens the dialog     |
-| `exp-request` | The confirm button's `lb-request`                |
-| `exp-confirm` | The confirm button's text, `Confirm` when absent |
-
-The widget closes the dialog once the request succeeds, and leaves it open
-on a refusal.
-
-## `lb-form`
-
-A `<form>` over one row's controls. A row with a key saves each control's
-column on `change`; a row whose key is empty is new, and the hub sends no
-update for it, so its controls wait for a submit. A definition only.
-
-| Parameter | Fills           |
-|-----------|-----------------|
-| `exp-id`  | The form's `id` |
-
-## `lb-insert-dialog`
-
-A row entered in a modal dialog, written once outside every row and opened
-with `commandfor` and `command="show-modal"`. Save is the form's
-`lb-row-insert`; on success the widget chooses the new row in the nearest
-`lb-options` around the button that opened it, and closes. The handler
-answers with a patch holding the new row.
-
-While open, the button that opened it carries `insert-dialog-opener` and the
-widget carries `anchored`, for a stylesheet to place the dialog beside the
-button with CSS anchor positioning.
-
-| Parameter   | Fills                                             |
-|-------------|---------------------------------------------------|
-| `exp-id`    | The dialog's `id`                                 |
-| `exp-title` | The dialog's heading                              |
-| `exp-query` | The form's `lb-query`, which it inserts into      |
-| `exp-save`  | The Save button's text, `Save` when absent        |
-
-## `lb-master`
-
-A set, one of its rows, and the buttons that act on the set: New, Copy,
-Delete, Save new and Cancel, each shown only for a row on record or a new
-one. A definition only, built from `lb-form` and `lb-confirm`. New sends
-`new` and Copy sends `copy`, requests the page declares; `new` returns
-`url()` emptying the parm that names the row.
-
-| Parameter     | Fills                                      |
-|---------------|--------------------------------------------|
-| `exp-row`     | The `lb-query` of the row the form shows   |
-| `exp-form-id` | The form's `id`, `master-form` when absent |
-
-## `lb-checkbox`
-
-A checkbox and its label as one element, for an application to style. A
-definition only: a native checkbox is already a control (see
-[Checkboxes](./data-binding.md#checkboxes)), so the widget is the markup, a
-`<label>` holding the `<input type="checkbox">` and a `<span>` with the
-text. The column and request go on the checkbox inside, so they arrive as
-expansion attributes.
-
-Unlike `lb-input`, it has no script making the tag the control. A value
-that lands before a widget's script has loaded arrives only as the string
-stamp `lb-column-value`, and a script checkbox would read `"false"` as
-checked. The hub sets a native checkbox's `checked` directly.
-
-| Parameter     | Fills                                         |
-|---------------|-----------------------------------------------|
-| `exp-column`  | The checkbox's `lb-column`                    |
-| `exp-label`   | The label's text                              |
-| `exp-request` | The checkbox's `lb-request`, none when absent |
-
-## `lb-number` and `lb-date`
-
-A number shown by the browser's `Intl.NumberFormat`, and a date or time
-shown by `Intl.DateTimeFormat`.  Neither is a control: `lb-column` goes on
-the tag, and the widget renders the `lb-column-value` the hub stamps; see
-[Receiving a value](./custom-elements.md#receiving-a-value).
-
-```html
-<lb-number lb-column="balance" exp-style="currency" exp-currency="USD"></lb-number>
-<lb-date lb-column="due" exp-date-style="medium"></lb-date>
-```
-
-Each parameter is one of Intl's options in kebab-case, as `exp-currency-sign`
-for `currencySign`, plus `exp-locale`.  A value that is no number or date
-shows as it arrived, and a date alone, `YYYY-MM-DD`, shows as that day in
-every time zone.  The stamp keeps the raw value, so a stylesheet selects on
-it:
-
-```css
-lb-number[lb-column-value^="-"] { color: var(--negative); }
-```
-
-## `lb-unknown-page`
-
-The chrome's dialog for a URL that names no page, as one tag:
-
-```html
-<lb-hub>
-  <nav>...</nav>
-  <main></main>
-  <lb-unknown-page></lb-unknown-page>
-</lb-hub>
-```
-
-It expands to a `<dialog lb-url-unknown lb-query="lb-url">` showing
-`lb-path`, and the hub opens it when no page's stub matches the path. See
-[An unknown page](./chrome.md#an-unknown-page) for the same dialog written
-by hand.
-
-| Parameter         | Fills                                    |
-|-------------------|------------------------------------------|
-| `exp-button-text` | The text of the button that closes it, `OK` by default |
+For a reader without the skill, the package's
+[README](https://gitlab.com/kendowns/loadbare/-/blob/main/packages/widgets/README.md)
+lists the widgets and links each page.

package/docs/testing.md

@@ -274,7 +274,8 @@ What the hub is tested for here:
   a pending element is ignored
 - a round trip the server never answers is aborted at the ten-second
   deadline, under mocked timers, and fails the way any round trip fails
-- a successful insert gathered from a form resets the form
+- a successful insert gathered from a form resets the form, unless the
+  answer landed the new row on it
 - a path with no page reports, lands `lb-page-unknown`, and opens the
   `lb-url-unknown` dialog; two pages for one stub report and take the first
 - `lb-url` lands with the path, the page's `lb-page-title` or stub as

package/docs/tutorials/000-getting-started.md

@@ -57,7 +57,7 @@ Add a command to package.json that builds the app.
 ```json
 {
   "scripts": {
-    "dev": "loadbare-app-build --watch & node server.js"
+    "dev": "loadbare-app-build --watch & trap 'kill $! 2>/dev/null' EXIT INT TERM; node server.js"
   }
 }
 ```

package/docs/tutorials/040-displaying-data.md

@@ -159,7 +159,7 @@ runner:
 ```json
 {
   "scripts": {
-    "dev": "loadbare-app-build --watch & tsx server.js"
+    "dev": "loadbare-app-build --watch & trap 'kill $! 2>/dev/null' EXIT INT TERM; tsx server.js"
   }
 }
 ```

package/docs/tutorials/090-using-widget-libraries.md

@@ -90,7 +90,7 @@ publication — that's the same class shape
 [Committing a Control](./080-widget-requests.md) already wrote, packaged and
 given an import specifier instead of living in an application's `src/`.
 It doesn't cover `lb-table`'s footer destination or `lb-picker`'s
-expansion parameters, which are in
+expansion parameters, which each widget's own page covers; see
 [The Basic Widget Library](../reference/widgets.md).
 
 ---

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/app",
   "description": "High performance web app framework for server-bound applications",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "files": [
     "dist",
@@ -22,7 +22,9 @@
     "./constants": "./dist/core/lb-constants.js",
     "./types": "./dist/core/lb-types.js",
     "./server": "./dist/server/lb-server.js",
-    "./express": "./dist/server/lb-express.js"
+    "./express": "./dist/server/lb-express.js",
+    "./build": "./dist/build/build.js",
+    "./dev": "./dist/dev/lb-dev.js"
   },
   "scripts": {
     "prepublishOnly": "npm run typecheck && npm run test && npm run build",

package/skills/loadbare-app/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: loadbare-app
-description: Build server-bound web applications with Loadbare/app. Covers the file conventions the builder finds by name (`chrome.html`, `*.page.html`, `*.queries.ts`, `*.requests.ts`, `imports.ts`, `<tag>.html`, `<tag>.browser.ts`); the `lb-*` attribute vocabulary that lands query rows on HTML and issues requests (`lb-query`, `lb-column`, `lb-show`, `lb-request`); queries declared with `row(key, run)` and `rows(key, run)`; the URL as the hub's own query `lb-url`, with `lb-url-link`, `lb-url-parm`, `lb-url-push` and `lb-url-unknown`; the user's order and filters as the hub's query `lb-choices`, read by `lb-order` and `lb-filter`; one form pointed at a row by the `--lb-edit`, `--lb-new` and `--lb-release` commands; re-sorting a list with `--lb-sort`; build-time expansion with `exp-*` parameters, `lb-exp-slot` and `lb-exp-template`; custom elements as form-associated controls and row hosts; the Express wiring with `hubRoutes`; and the `@loadbare/widgets` library. Use whenever a task involves `@loadbare/app`, `@loadbare/widgets`, `loadbare-app-build`, an `lb-` attribute, or a page, query, request or custom element file in a Loadbare application. The model is not React, htmx or REST, and cannot be inferred from them.
+description: Build server-bound web applications with Loadbare/app. Covers the file conventions the builder finds by name (`chrome.html`, `*.page.html`, `*.queries.ts`, `*.requests.ts`, `imports.ts`, `<tag>.html`, `<tag>.browser.ts`); the `lb-*` attribute vocabulary that lands query rows on HTML and issues requests (`lb-query`, `lb-column`, `lb-show`, `lb-request`); queries declared with `row(key, run)` and `rows(key, run)`; the URL as the hub's own query `lb-url`, with `lb-url-link`, `lb-url-parm`, `lb-url-push` and `lb-url-unknown`; the user's order and filters as the hub's query `lb-choices`, read by `lb-order` and `lb-filter`; whether the page loaded and the server answers as the hub's query `lb-hub`; one form pointed at a row by the `--lb-edit`, `--lb-new` and `--lb-release` commands; re-sorting a list with `--lb-sort`; build-time expansion with `exp-*` parameters, `lb-exp-slot` and `lb-exp-template`; custom elements as form-associated controls and row hosts; the Express wiring with `hubRoutes`; and the `@loadbare/widgets` library. Use whenever a task involves `@loadbare/app`, `@loadbare/widgets`, `loadbare-app-build`, an `lb-` attribute, or a page, query, request or custom element file in a Loadbare application. The model is not React, htmx or REST, and cannot be inferred from them.
 license: Apache-2.0
 metadata:
   package: "@loadbare/app"
@@ -48,7 +48,9 @@ carries, so their import-time code runs then; open a database in
 `contextFor`, not at import.  Then start the server: `createHub` refuses a page that declares a reserved name at startup,
 and the server console reports a query that answers with the wrong kind.
 Restart the server after adding or changing a `.queries.ts` or
-`.requests.ts` file.
+`.requests.ts` file, or run it under the dev server, `devServer` from
+`@loadbare/app/dev`, which rebuilds and restarts it after each change; see
+[`references/dev-server.md`](references/dev-server.md).
 
 ## The shape of an application
 
@@ -73,7 +75,8 @@ server.ts
 The chrome carries `<lb-hub>` inside `<body>`, an empty `<main>` inside the
 hub, and `<script src="/client.js" defer>`.  Everything a user touches sits
 inside `<lb-hub>`.  The chrome belongs to no page, so it names only the
-hub's queries, `lb-url` and `lb-choices`, and sends no declared request.
+hub's queries, `lb-url`, `lb-choices` and `lb-hub`, and sends no declared
+request.
 
 A page is an HTML fragment that lands in `<main>`:
 
@@ -217,6 +220,15 @@ text for contains.  A choice shows with no round trip, then the server's
 page changes.  A filter that decides which rows the server sends is a query
 parm.
 
+**A page that failed to load says so.**  The hub serves a third query,
+`lb-hub`, and stamps its columns on `<lb-hub>` too: `lb-load-state`
+(`loading`, `loaded`, `failed`), `lb-server-state` (`reachable`, `failing`,
+`unreachable`), `lb-error` (`network`, `timeout` or the HTTP status),
+`lb-pending` and `lb-as-of`.  Show a server that is down from the chrome's
+stylesheet, `lb-hub[lb-load-state="failed"] .load-failed`, rather than
+leaving an empty page; see
+[`references/chrome.md`](references/chrome.md#the-hubs-state).
+
 **Groups are templates.**  A `<template lb-group>` holds a heading and one
 nested `<template>`, the next level or the row template; the nth breaks on
 the order's nth term, to any depth.  Contents land before the nested
@@ -475,12 +487,10 @@ and a condition need none.  A custom element exists to be a control of its
 own, or to act on rows once they land through the hook the hub calls,
 `lbRowsLanded` (the `HubLifecycle` interface).
 
-Before writing one, check `@loadbare/widgets`: `lb-input`, `lb-select`,
-`lb-options`, `lb-picker`, `lb-table`, `lb-unknown-page`, `lb-confirm`,
-`lb-form`, `lb-insert-dialog`, `lb-master`, `lb-checkbox`, `lb-number`,
-`lb-date`.  The first four are
-form-associated controls that carry `lb-column` and `lb-request`
-themselves.  Install the package and list it in `src/imports.ts`:
+Before writing one, check `@loadbare/widgets`, the basic widget set, which
+the loadbare-widgets skill documents.  Its controls are form-associated and
+carry `lb-column` and `lb-request` themselves.  Install the package and list
+it in `src/imports.ts`:
 
 ```ts
 export default ["@loadbare/widgets"];
@@ -510,9 +520,17 @@ with the package, so no network is needed.
   the request context.
 - [`references/builder.md`](references/builder.md) — the builder's options,
   what it reads, and where it looks.
+- [`references/dev-server.md`](references/dev-server.md) — `devServer` from
+  `@loadbare/app/dev`, and the parts to assemble another from.
 - [`references/css.md`](references/css.md) — how stylesheets are ordered.
 - [`references/widgets.md`](references/widgets.md) — the basic widget
-  library.
+  library as a package; each widget is in the loadbare-widgets skill.
 - [`references/names.md`](references/names.md) — every name Loadbare
   owns, the constants, and the section defining each.  Check a name here
   before designing around something the other references do not mention.
+
+## The other loadbare skills
+
+`npx loadbare-app skills install` puts this skill where a coding agent finds
+it.  `npx loadbare-widgets skills install` and `npx loadbare-db skills
+install` do the same for the loadbare-widgets and loadbare-db skills.

package/skills/loadbare-app/references/builder.md

@@ -16,19 +16,27 @@ loadbare-app-build [--src src] [--out dist] [--watch] [--minify]
 | `--watch`  | Build once, then again on every change under `--src` |
 | `--minify` | Minify `client.js` and `app.css`                     |
 
-Run it from the application's own `package.json`:
+During development, [the dev server](./dev-server.md) runs the build in
+watch mode, and restarts the server when it needs to.  To run the builder and
+the server side by side without it, from the application's own
+`package.json`:
 
 ```json
 {
   "scripts": {
-    "dev": "loadbare-app-build --watch & tsx server.ts"
+    "dev": "loadbare-app-build --watch & trap 'kill $! 2>/dev/null' EXIT INT TERM; tsx server.ts"
   }
 }
 ```
 
+The trap stops the watcher when the server exits.  Without it, a
+backgrounded watcher ignores Ctrl-C under `sh` and outlives the server.
+
 `--watch` watches every `.html`, `.ts`, and `.css` file under `--src`, and
-reports a failed build to the console without stopping. It runs no dev server
-and reloads no browser.
+reports a failed build to the console without stopping. It runs no server
+and reloads no browser. A program that builds or watches as part of its own
+work imports `buildApp` and `watchApp` from `@loadbare/app/build` instead;
+see [Assembling your own](./dev-server.md#assembling-your-own).
 
 `--minify` leaves `app.html` alone.
 

package/skills/loadbare-app/references/chrome.md

@@ -277,7 +277,58 @@ browser after a successful 200, and there is no server-delivered 404.
 
 `@loadbare/widgets` ships this dialog as `<lb-unknown-page>`, for a chrome
 that would rather write one tag; see
-[The Basic Widget Library](./widgets.md#lb-unknown-page).
+[The Basic Widget Library](./widgets.md).
+
+## The hub's state
+
+The hub serves a third query of its own, `lb-hub`: one row, keyed by
+`lb-path`, saying whether the page's data arrived and whether the server
+answers. A page whose load failed shows its markup with nothing landed on
+it, and without this row nothing on the page can tell a list that is empty
+from a server that is down.
+
+| Column            | Holds                                                                  |
+|-------------------|------------------------------------------------------------------------|
+| `lb-load-state`   | `loading`, `loaded` or `failed`: the page load for the URL showing     |
+| `lb-server-state` | `reachable`, `failing` or `unreachable`: how the latest round trip went |
+| `lb-error`        | Empty, or why the latest round trip failed                             |
+| `lb-pending`      | How many round trips are in flight, page loads and requests together   |
+| `lb-as-of`        | When rows last came from the server, as an ISO timestamp               |
+
+- `lb-load-state` is `loading` while the page load is in flight, `loaded`
+  once the server answered it, and `failed` when it did not. A request whose
+  answer moves the URL and carries the page's queries loads the page too. A
+  load overtaken by a newer one says nothing, and a request that fails
+  later leaves the page `loaded`, since what it shows did arrive.
+- `lb-server-state` is `reachable` when the server answered, a refusal
+  included; `failing` when it answered with an HTTP error status; and
+  `unreachable` when no answer came, because the network failed or the
+  ten-second deadline passed. It is empty until the first round trip
+  returns.
+- `lb-error` is `network`, `timeout`, or the status the server answered
+  with, such as `500`. The next answer empties it.
+- `lb-as-of` is unchanged by a refusal, which brings no rows.
+
+The hub also stamps each column on `<lb-hub>` itself, as the attribute of
+the same name, and leaves off one that is empty. A stylesheet reaches the
+whole document that way, and the markup names the query only to show its
+text:
+
+```css
+.load-failed { display: none; }
+lb-hub[lb-load-state="failed"] .load-failed { display: block; }
+lb-hub[lb-load-state="failed"] main { opacity: 0.4; }
+lb-hub:not([lb-pending="0"]) .banner { cursor: progress; }
+```
+
+```html
+<p class="load-failed" lb-query="lb-hub">
+  This page did not load: the server is <span lb-column="lb-server-state"></span>
+  (<span lb-column="lb-error"></span>).
+</p>
+```
+
+Nothing writes `lb-hub` but the hub. The builder refuses a request for it.
 
 ## Preventing the first-load blink
 

package/skills/loadbare-app/references/data-binding.md

@@ -119,9 +119,9 @@ from its nearest ancestor row: the live row it is in, or the element a
 it reads from that query's rows.
 
 An element with `lb-query` and `lb-column` both shows the rows of its own
-query and holds the column of the row around it. This
-[`<lb-options>`](./widgets.md#lb-options) lists the accounts and holds its
-row's `account`:
+query and holds the column of the row around it. This `<lb-options>`, from
+[`@loadbare/widgets`](./widgets.md), lists the accounts and holds its row's
+`account`:
 
 ```html
 <lb-options lb-query="accounts" lb-column="account">
@@ -167,8 +167,8 @@ option for the value shows no selection.
 
 The hub hands every value to the browser as the server sent it. What a
 number, a date or a null looks like is decided in the query, or by a custom
-element that formats it, such as
-[`lb-number` and `lb-date`](./widgets.md#lb-number-and-lb-date). Send a
+element that formats it, such as `lb-number` and `lb-date` in
+[`@loadbare/widgets`](./widgets.md). Send a
 column the user sorts or filters raw, and format it in the element.
 
 ### Checkboxes
@@ -944,7 +944,8 @@ nothing is not sent.
 
 For a query the hub serves, `lb-url` or `lb-choices`, the hub answers
 `lb-row-update` itself, with no round trip; see
-[Query parms](./chrome.md#query-parms) and [Choices](#choices).
+[Query parms](./chrome.md#query-parms) and [Choices](#choices). The third,
+`lb-hub`, takes no request.
 
 A key comes from a live row, or from an element a `row` landed on, so all
 three work against either kind:
@@ -961,8 +962,11 @@ update from a form or a live row sends every control it gathers. The
 application writes one `rowUpdate` for both, setting the columns `values`
 names, as an SQL UPDATE does.
 
-After a successful insert gathered from a form, the hub resets the form. A
-failed insert leaves the entry for the user to correct.
+After a successful insert gathered from a form, the hub resets the form,
+unless the answer landed the new row on it. A form over a `row` query not
+yet entered, whose insert answers `url()` to the new key, then shows the row
+just saved, on record. A failed insert leaves the entry for the user to
+correct.
 
 Leave `lb-request` off a control inside a form or a live row that sends its
 own update, or the same edit is written twice.
@@ -1254,7 +1258,9 @@ A reset of any form, whether the hub's, a reset button's or a script's,
 returns its controls to their defaults, and the hub removes
 `lb-column-value` from each of them. A cancelled reset keeps both.
 
-A page load that fails lands nothing and is reported to the console. A load
+A page load that fails lands nothing and is reported to the console, and
+the query `lb-hub` says so; see [The hub's state](./chrome.md#the-hubs-state).
+A load
 started by a request for `lb-url` stamps the element that sent it, as any
 request stamps its element.