@loadbare/app 0.5.4 → 0.5.6

package/dist/build/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../build/expand.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AA0CH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA8BjD;;;;GAIG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,CAmB1E;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GACzB,OAAO,CAAC,WAAW,CAAC,CAStB;AA4CD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAS3D;AAkPD;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAIhE"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../build/expand.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAkDH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AA8BjD;;;;GAIG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,CAmB1E;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GACzB,OAAO,CAAC,WAAW,CAAC,CAStB;AA4CD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAS3D;AAmPD;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,MAAM,CAIhE"}

package/dist/build/expand.js

@@ -29,7 +29,15 @@ const WIDGET_TAG = /^LB-/;
  */
 const HUB_TAG = HUB_TAG_NAME.toUpperCase();
 /** A placeholder is an entire attribute value or an entire text node. */
-const PLACEHOLDER = /^\{\{([A-Za-z][\w-]*)\}\}$/;
+/**
+ * `{{name}}` or `{{name|default}}`. The default is a literal that stands in
+ * when the tag supplies nothing; it is not evaluated and nothing branches on
+ * it. Whitespace around the name and the default is not part of either, so
+ * `{{button-text | OK}}` is the same placeholder as `{{button-text|OK}}` —
+ * a spaced form that shipped as literal braces would be a silent failure
+ * an author would find in the browser.
+ */
+const PLACEHOLDER = /^\{\{\s*([A-Za-z][\w-]*)\s*(?:\|\s*([^}]*?)\s*)?\}\}$/;
 /**
  * Marks an attribute as input to expansion. Three namespaces share the tag:
  * `lb-` is the hub's, `exp-` is expansion's, and everything unprefixed is
@@ -212,7 +220,8 @@ function checkAcyclic(defs) {
         visit(tag);
 }
 /**
- * Resolve a placeholder against what the author wrote. Unset means absent.
+ * Resolve a placeholder against what the author wrote: the supplied value,
+ * else the definition's default, else absent.
  *
  * Every name the definition asks for is recorded, whether or not it was
  * supplied, so expansion can report a parameter the definition never declared.
@@ -223,7 +232,7 @@ function resolve(text, attrs, asked) {
         return text;
     const name = match[1];
     asked.add(name);
-    return attrs.get(name) ?? null;
+    return attrs.get(name) ?? match[2] ?? null;
 }
 function substitute(root, attrs, asked) {
     for (const scope of scopes(root)) {

package/dist/core/lb-constants.d.ts

@@ -14,6 +14,9 @@ export declare const ATTR_SLOT = "lb-slot";
 export declare const ATTR_TEMPLATE = "lb-template";
 export declare const ATTR_NAV_LINK = "lb-nav-link";
 export declare const PAGE_TEMPLATE_PREFIX = "page-";
+export declare const NAV_QUERY = "lb-navigation";
+export declare const NAV_CELL_LABEL = "page-label";
+export declare const NAV_CELL_URI = "page-uri";
 export declare const ATTR_UNKNOWN_PAGE = "lb-unknown-page";
 export declare const HUB_TAG_NAME = "lb-hub";
 export declare const ATTR_PENDING = "data-lb-pending";

package/dist/core/lb-constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lb-constants.d.ts","sourceRoot":"","sources":["../../core/lb-constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,UAAU,aAAa,CAAC;AAMrC,eAAO,MAAM,UAAU,aAAa,CAAC;AAKrC,eAAO,MAAM,SAAS,YAAY,CAAC;AAOnC,eAAO,MAAM,cAAc,cAAc,CAAC;AAK1C,eAAO,MAAM,aAAa,eAAe,CAAC;AAM1C,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAKvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAOvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,SAAS,YAAY,CAAC;AAYnC,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAK3C,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAG3C,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAQ5C,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAQnD,eAAO,MAAM,YAAY,WAAW,CAAC;AAQrC,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAO9C,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AAIzC,eAAO,MAAM,qBAAqB,QAAS,CAAC"}
+{"version":3,"file":"lb-constants.d.ts","sourceRoot":"","sources":["../../core/lb-constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,aAAa,CAAC;AACrC,eAAO,MAAM,QAAQ,WAAW,CAAC;AACjC,eAAO,MAAM,SAAS,YAAY,CAAC;AACnC,eAAO,MAAM,UAAU,aAAa,CAAC;AAMrC,eAAO,MAAM,UAAU,aAAa,CAAC;AAKrC,eAAO,MAAM,SAAS,YAAY,CAAC;AAOnC,eAAO,MAAM,cAAc,cAAc,CAAC;AAK1C,eAAO,MAAM,aAAa,eAAe,CAAC;AAM1C,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAKvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAOvC,eAAO,MAAM,WAAW,cAAc,CAAC;AAMvC,eAAO,MAAM,SAAS,YAAY,CAAC;AAYnC,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAK3C,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAG3C,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAO5C,eAAO,MAAM,SAAS,kBAAkB,CAAC;AAKzC,eAAO,MAAM,cAAc,eAAe,CAAC;AAC3C,eAAO,MAAM,YAAY,aAAa,CAAC;AAUvC,eAAO,MAAM,iBAAiB,oBAAoB,CAAC;AAQnD,eAAO,MAAM,YAAY,WAAW,CAAC;AAQrC,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAO9C,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAG1C,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AAIzC,eAAO,MAAM,qBAAqB,QAAS,CAAC"}

package/dist/core/lb-constants.js

@@ -67,9 +67,22 @@ export const ATTR_TEMPLATE = "lb-template";
 export const ATTR_NAV_LINK = "lb-nav-link";
 // A page host ships as <template id="page-<name>">.
 export const PAGE_TEMPLATE_PREFIX = "page-";
+// The hub's own query. Landed on every navigation, on any subtree inside
+// the hub that names it, through the same applyData() a server answer goes
+// through — so a chrome displays where the page is the way it displays
+// anything else. The `lb-` prefix keeps it out of a server's namespace:
+// no server answers a query so named.
+export const NAV_QUERY = "lb-navigation";
+// Its two cells. The label is the nav's: the text of the lb-nav-link anchor
+// whose href names the current page, and empty when no anchor does. The
+// URI is the path as the browser has it.
+export const NAV_CELL_LABEL = "page-label";
+export const NAV_CELL_URI = "page-uri";
 // Marks the chrome's own <dialog> for a page name that resolves to no
 // template — a routing miss discovered client-side, not an HTTP 404 (every
 // route gets the same 200 response; see docs/tutorials/010-pages-and-navigation.md).
+// The hub only opens it; what it says comes from NAV_QUERY, which the
+// dialog consumes like any other subtree, by naming it in lb-query.
 // Optional: an application that declares none gets today's console.error
 // and nothing more. The builder requires the element it's on to be a
 // <dialog> (build/assemble.ts), since the hub calls showModal() on it.

package/dist/hub/lb-hub.browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lb-hub.browser.d.ts","sourceRoot":"","sources":["../../hub/lb-hub.browser.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"lb-hub.browser.d.ts","sourceRoot":"","sources":["../../hub/lb-hub.browser.ts"],"names":[],"mappings":"AA2BA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
-import { ATTR_ACTION, ATTR_CELL, ATTR_DELETE, ATTR_ERROR, ATTR_INSERT, ATTR_KEY, ATTR_NAV_LINK, ATTR_PENDING, ATTR_QUERY, ATTR_UNKNOWN_PAGE, ATTR_UPDATE, HUB_TAG_NAME, PAGE_TEMPLATE_PREFIX, LB_DATA_ENDPOINT, LB_EVENT_NAME, LB_REQUEST_ENDPOINT, LB_REQUEST_TIMEOUT_MS, } from "../core/lb-constants";
-import { applyData, applyTuple } from "./lb-apply";
+import { ATTR_ACTION, ATTR_CELL, ATTR_DELETE, ATTR_ERROR, ATTR_INSERT, ATTR_KEY, ATTR_NAV_LINK, ATTR_PENDING, ATTR_QUERY, ATTR_UNKNOWN_PAGE, ATTR_UPDATE, HUB_TAG_NAME, NAV_CELL_LABEL, NAV_CELL_URI, NAV_QUERY, PAGE_TEMPLATE_PREFIX, LB_DATA_ENDPOINT, LB_EVENT_NAME, LB_REQUEST_ENDPOINT, LB_REQUEST_TIMEOUT_MS, } from "../core/lb-constants";
+import { applyData } from "./lb-apply";
 export { applyData, applyTuple } from "./lb-apply";
 /**
  * Where a click happened, in the binding vocabulary. An action carries
@@ -225,10 +225,12 @@ class LbHub extends HTMLElement {
      */
     async navigate(path) {
         const page = pageNameFor(path);
+        this.landNavigation(path, page);
         const template = document.getElementById(PAGE_TEMPLATE_PREFIX + page);
         if (!(template instanceof HTMLTemplateElement)) {
             console.error(`lb-hub: no page host for '${page}'`);
-            this.reportUnknownPage(page);
+            this.reportUnknownPage();
+            this.reveal();
             return;
         }
         this.page = page;
@@ -236,6 +238,7 @@ class LbHub extends HTMLElement {
         // template is already in the document, so holding it back behind a
         // network round trip only leaves <main> empty for no reason.
         this.main.replaceChildren(template.content.cloneNode(true));
+        this.reveal();
         let data = {};
         try {
             data = await fetchData(`${LB_DATA_ENDPOINT}?page=${encodeURIComponent(page)}`);
@@ -245,6 +248,47 @@ class LbHub extends HTMLElement {
         }
         applyData(this, data);
     }
+    /**
+     * An app that ships `<body hidden>` (see docs/reference/chrome.md) is
+     * asking to stay invisible until there is something coherent to show,
+     * rather than flash the chrome before `<main>` has real content. This is
+     * a no-op for an app that doesn't use that convention.
+     */
+    reveal() {
+        document.body.hidden = false;
+    }
+    /**
+     * The hub's own query: where the page is, in the vocabulary a server
+     * answer arrives in, so a chrome displays it the way it displays anything
+     * — `lb-query="lb-navigation"` on a subtree, `lb-cell` on what shows a
+     * value. Landed before the page host is looked up, so a miss has it too;
+     * the unknown-page dialog is one consumer among whatever others the
+     * chrome writes.
+     *
+     * The label is the nav's: the text of the first lb-nav-link anchor whose
+     * href names this page. Taken from the nav rather than from a click, so a
+     * click, a reload and the back button all land the same label — and a
+     * path no anchor names lands an empty one, explicitly, so a consumer is
+     * never left showing the previous page's.
+     *
+     * Landed only where a subtree names it. applyData() warns about a query
+     * with no scope, and a chrome that displays no navigation has nothing to
+     * be warned about.
+     */
+    landNavigation(path, page) {
+        if (!this.querySelector(`[${ATTR_QUERY}="${NAV_QUERY}"]`))
+            return;
+        let label = "";
+        for (const a of this.querySelectorAll(`a[${ATTR_NAV_LINK}]`)) {
+            if (pageNameFor(new URL(a.href).pathname) !== page)
+                continue;
+            label = a.textContent?.trim() ?? "";
+            break;
+        }
+        applyData(this, {
+            [NAV_QUERY]: { [NAV_CELL_LABEL]: label, [NAV_CELL_URI]: path },
+        });
+    }
     /**
      * A path that resolves to no page host is discovered client-side, after a
      * successful 200 — every route gets the same document, so there is no
@@ -254,14 +298,16 @@ class LbHub extends HTMLElement {
      * element it's on is a <dialog> (build/assemble.ts), so this can call
      * showModal() without checking the tag here.
      *
+     * Only opens it. What the dialog says it gets from landNavigation(),
+     * already run, by naming the hub's query in lb-query like any subtree.
+     *
      * Scoped to the hub, like every other lookup here, so that one rule holds
      * without exception: what the hub acts on is inside the hub.
      */
-    reportUnknownPage(page) {
+    reportUnknownPage() {
         const dialog = this.querySelector(`[${ATTR_UNKNOWN_PAGE}]`);
         if (!dialog)
             return;
-        applyTuple(dialog, { page });
         const modal = dialog;
         if (!modal.open)
             modal.showModal();

package/dist/tests/expand.test.js

@@ -101,6 +101,30 @@ describe("substitution", () => {
         const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<label>{{label}}</label>` }));
         assert.match(html, /<label><\/label>/);
     });
+    it("falls back to a default the definition wrote", () => {
+        const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<button>{{text|OK}}</button>` }));
+        assert.match(html, /<button>OK<\/button>/);
+    });
+    it("lets a supplied value win over a default", () => {
+        const html = expand(`<lb-thing exp-text="Go"></lb-thing>`, defs({ "lb-thing": `<button>{{text|OK}}</button>` }));
+        assert.match(html, /<button>Go<\/button>/);
+    });
+    it("trims whitespace around a name and its default", () => {
+        // A spaced form that shipped as literal braces would be a silent failure
+        // found in the browser, so the space is not part of either side.
+        const html = expand(`<lb-thing></lb-thing>`, defs({
+            "lb-thing": `<button title="{{ tip | Press me }}">{{ text | OK }}</button>`,
+        }));
+        assert.match(html, /<button title="Press me">OK<\/button>/);
+    });
+    it("emits an attribute whose default is empty", () => {
+        // The one case a default distinguishes from no default: presence.
+        // readonly="{{readonly|}}" is a boolean attribute on unless a tag turns
+        // it off — which, since a supplied value is a string, a tag cannot do;
+        // the default is for a definition that wants the attribute there.
+        const html = expand(`<lb-thing></lb-thing>`, defs({ "lb-thing": `<input readonly="{{readonly|}}" />` }));
+        assert.match(html, /<input readonly="">/);
+    });
     it("reaches placeholders inside template content", () => {
         // lb-picker ships a row template of its own, so {{key}} written inside
         // one has to be a placeholder rather than literal text that ships.

package/docs/reference/chrome.md

@@ -20,18 +20,22 @@ Here is a minimal but fully complaint chrome for a typical app:
     <title>Membership Roster</title>
     <script src="/client.js" defer></script>
     <link rel="stylesheet" href="/app.css" />
+    <noscript><style>body[hidden] { display: block; }</style></noscript>
   </head>
-  <body>
+  <body hidden>
     <lb-hub>
-      <header><h1>Membership Roster</h1></header>
+      <header lb-query="lb-navigation">
+        <h1>Membership Roster</h1>
+        <h2 lb-cell="page-label"></h2>
+      </header>
       <nav>
         <a href="/" lb-nav-link>Home</a>
         <a href="/members" lb-nav-link>Members</a>
         <a href="https://example.org/">Our website</a>
       </nav>
       <main></main>
-      <dialog lb-unknown-page>
-        The page <span lb-cell="page"></span> is not in this app.
+      <dialog lb-unknown-page lb-query="lb-navigation">
+        The URL <span lb-cell="page-uri"></span> is not in this app.
       </dialog>
     </lb-hub>
   </body>
@@ -56,8 +60,10 @@ Everything else is optional:
 |-------------------------------------------|---------------------------------------------|
 | `<link rel="stylesheet" href="/app.css">` | The bundled stylesheet                      |
 | `<a lb-nav-link>`                         | Navigation between pages                    |
+| `lb-query="lb-navigation"`                | Where the page is — see below               |
 | `<dialog lb-unknown-page>`                | A message when a URL matches no page        |
 | Custom elements                           | The chrome, decomposed into widget files    |
+| `<body hidden>` + a `<noscript>` fallback | Avoids a first-load blink — see below       |
 | Any other HTML                            | Header, footer, skip links, meta tags, etc. |
 
 ## Rules for writing chrome 
@@ -71,5 +77,81 @@ A navigation anchor's `href` is a path, and the path names a page:
 landing page is the one named `index.page.html`. An anchor without
 `lb-nav-link` is left alone and behaves like any other link.
 
-The `lb-unknown-page` attribute, if used, must appear on a `<dialog>`.
-Inside it, `lb-cell="page"` shows the name of the page that was asked for.
+The `lb-unknown-page` attribute, if used, must appear on a `<dialog>`. The
+hub opens it when a path names no page. What it says is up to the chrome:
+the dialog is a subtree like any other, and it displays where the page is by
+naming the hub's own query, described next.
+
+## Where the page is
+
+On every navigation the hub lands a query of its own, `lb-navigation`, on
+any subtree inside the hub that names it. It arrives the way a server's
+query arrives — `lb-query` on the subtree, `lb-cell` on each element that
+shows a value — so a chrome displays the current page with no code at all:
+
+```html
+<header lb-query="lb-navigation">
+  <h1>Membership Roster</h1>
+  <h2 lb-cell="page-label"></h2>
+</header>
+```
+
+| Cell         | Holds                                                     |
+|--------------|-----------------------------------------------------------|
+| `page-label` | The text of the `lb-nav-link` anchor for the path, or empty if none |
+| `page-uri`   | The path as the browser has it, such as `/members`        |
+
+The label is the nav's. The hub takes it from the first `lb-nav-link`
+anchor whose `href` names the current page, so a click, a reload and the
+back button all land the same text, and a path no anchor names lands an
+empty label. A chrome that shows the label somewhere fixed should expect
+that case for a page reachable only by URL.
+
+The `lb-` prefix on the query name is what keeps it out of the server's
+namespace: no server answers a query so named. It is landed only where a
+subtree names it, so a chrome that displays no navigation is not warned
+about a query with no scope.
+
+The same tuple is what an unknown-page dialog has to work with. It lands
+before the page host is looked up, so a miss has it too. Name the query on
+the dialog and show whichever cell fits:
+
+```html
+<dialog lb-unknown-page lb-query="lb-navigation">
+  The URL <span lb-cell="page-uri"></span> is not in this app.
+</dialog>
+```
+
+`@loadbare/widgets` ships this dialog as a widget, `<lb-unknown-page>`, for a
+chrome that would rather write one tag — see
+[The Basic Widget Library](./widgets.md#lb-unknown-page).
+
+## Preventing the first-load blink
+
+`client.js` loads with `defer`, so the browser can — and typically does —
+paint the document before the script has run. Without help, that means a
+visible flash: the chrome appears first, then `<main>`'s real content pops in
+a moment later and shifts everything around it.
+
+`<body hidden>` avoids this by hiding the whole document, not just `<main>`,
+until the hub has something to show. `<lb-hub>` un-hides `<body>` itself the
+first time `navigate()` finishes, so the chrome and the first page's content
+always appear together, already in their final layout — there is no
+intermediate state to flash.
+
+Hiding `<main>` alone doesn't work: an empty `<main>` already renders at zero
+height, so hiding it changes nothing visible. The pop-in comes from the
+chrome being shown *before* `<main>` has real content, not from `<main>`
+being visibly empty — so it's the whole document that needs to wait, not
+just the piece that was empty.
+
+The `<noscript>` block is the escape hatch for a visitor with JavaScript
+disabled. `<lb-hub>` is what removes `hidden` from `<body>`, so a browser
+that never runs `client.js` would otherwise be stuck looking at a
+permanently blank page. `<noscript>` content is only rendered when scripting
+is off, so the fallback rule only ever applies in exactly that case — it
+never runs, and never races with the hub, on a normal visit.
+
+Both are optional. An app that doesn't mind the blink, or has no chrome
+complex enough for it to be noticeable, can leave `<body>` unhidden and skip
+the `<noscript>` block entirely.

package/docs/reference/custom-elements.md

@@ -86,6 +86,14 @@ value is a placeholder is removed rather than shipped empty, which is how
 placeholder in a text node resolves to nothing, and the whitespace around
 it survives.
 
+Give a placeholder a default with a pipe: `{{button-text|OK}}` reads
+`exp-button-text` when the tag supplies it and `OK` when it does not. The
+default is a literal, not an expression. Whitespace around the name and the
+default is not part of either, so `{{ button-text | OK }}` is the same
+placeholder. An empty default, `readonly="{{readonly|}}"`, is the one that
+differs from no default at all: it emits the attribute, empty, rather than
+dropping it, so a definition can ship a boolean attribute switched on.
+
 Every attribute stays on the tag after expansion, `exp-` ones included.
 
 Parameter values reach a definition through the DOM rather than through

package/docs/reference/data-binding.md

@@ -56,6 +56,11 @@ an `<option>` — whose content model is text — displays the value it is.
 Name the same query on more than one subtree to display it in more than one
 place. Every subtree gets the result.
 
+One query is the hub's rather than the server's: `lb-navigation`, landed on
+every navigation with the cells `page-label` and `page-uri`. It binds the
+same way, and the `lb-` prefix on its name is what marks it as Loadbare's —
+see [Where the page is](./chrome.md#where-the-page-is).
+
 `lb-key` holds one name in two positions. On a row template it names the
 cell that identifies a row; on a row that is showing, it carries that row's
 key value. A template is never a row, so the two never collide.

package/docs/reference/widgets.md

@@ -1,7 +1,7 @@
 # The Basic Widget Library
 
-Six widgets: `lb-input`, `lb-select`, `lb-list`, `lb-options`, `lb-table`,
-`lb-picker`. Every one of them is written against the same two contracts
+Seven widgets: `lb-input`, `lb-select`, `lb-list`, `lb-options`, `lb-table`,
+`lb-picker`, `lb-unknown-page`. Every one of them is written against the same two contracts
 documented elsewhere — [Custom Elements](./custom-elements.md#html) for its
 definition, [Custom Elements](./custom-elements.md#code) for its class —
 nothing here is special-cased machinery.
@@ -161,3 +161,22 @@ Behavior — grouping, key-as-value, the action on change — is inherited
 whole from `lb-options`; a page author who needs a second element in the
 row, or an option built from two columns, writes `lb-options` and its own
 `<template>` instead.
+
+## `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-unknown-page>` scoped to the hub's own
+`lb-navigation` query, so `page-label` and `page-uri` land in it the way any
+cell lands anywhere, and the hub opens it on a miss. It takes no parameters
+and, so far, shows both cells rather than choosing between them. See
+[`chrome.html`](./chrome.md#where-the-page-is) for the query, and for the same
+dialog written by hand.

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

@@ -26,8 +26,9 @@ At minimum, the chrome must contain:
     <meta charset="utf-8" />
     <title>@Loadbare/app Tutorials</title>
     <script src="/client.js" defer></script>
+    <noscript><style>body[hidden] { display: block; }</style></noscript>
   </head>
-  <body>
+  <body hidden>
     <lb-hub>
       <main></main>
     </lb-hub>
@@ -41,6 +42,14 @@ the custom elements used anywhere in `src/`.   In this basic starting point,
 we have `<lb-hub>` as the only custom element, so `client.js` will just
 contain the Javascript class `LbHub`.
 
+`<body hidden>` and the `<noscript>` rule next to it are optional, not part
+of the minimum above. `<lb-hub>` removes `hidden` from `<body>` as soon as it
+has something to show, so the document stays invisible for a moment rather
+than flashing an empty page and then popping in real content — see
+[chrome.html](../reference/chrome.md#preventing-the-first-load-blink) for
+why. Every chrome in the rest of these tutorials carries this forward; drop
+it if you'd rather not have it.
+
 ## The dev script
 
 Add a command to package.json that builds the app. 

package/docs/tutorials/010-pages-and-navigation.md

@@ -46,8 +46,9 @@ display something to the user if they type a URL that has no matching page.
     <meta charset="utf-8" />
     <title>Pages and Navigation</title>
     <script src="/client.js" defer></script>
+    <noscript><style>body[hidden] { display: block; }</style></noscript>
   </head>
-  <body>
+  <body hidden>
     <lb-hub>
       <nav>
         <!-- a bare link to "/" goes to page "index" -->
@@ -55,7 +56,9 @@ display something to the user if they type a URL that has no matching page.
         <a href="/about" lb-nav-link>About</a>
       </nav>
       <main></main>
-      <dialog lb-unknown-page>The page <span lb-cell="page"></span> is not in this app.</dialog>
+      <dialog lb-unknown-page lb-query="lb-navigation">
+        The URL <span lb-cell="page-uri"></span> is not in this app.
+      </dialog>
     </lb-hub>
   </body>
 </html>
@@ -72,7 +75,11 @@ link.
 
 If a `<dialog lb-unknown-page>` element is present in the HTML, it will be
 displayed to the user when a URL is entered that has no matching page in the app.
-The `lb-cell` attribute will be explained when we get to data binding.
+The `lb-query` and `lb-cell` attributes will be explained when we get to data
+binding; for now, know that `lb-navigation` is a query the hub itself answers
+on every navigation, and `page-uri` is the path that was asked for.  The
+widget library ships this dialog ready-made as `<lb-unknown-page>`, which
+[Using Widget Libraries](./090-using-widget-libraries.md) covers.
 
 ## Serving every route
 

package/docs/tutorials/020-css.md

@@ -60,8 +60,9 @@ Add the stylesheet link to the chrome:
     <script src="/client.js" defer></script>
     <!-- Add a standard stylesheet link -->
     <link rel="stylesheet" href="/app.css" />
+    <noscript><style>body[hidden] { display: block; }</style></noscript>
   </head>
-  <body>
+  <body hidden>
     <lb-hub>
       <nav>
         <a href="/" lb-nav-link>Home</a>

package/docs/tutorials/030-html-decomposition.md

@@ -27,8 +27,9 @@ element, not yet defined:
     <title>Pages and Navigation</title>
     <script src="/client.js" defer></script>
     <link rel="stylesheet" href="/app.css" />
+    <noscript><style>body[hidden] { display: block; }</style></noscript>
   </head>
-  <body>
+  <body hidden>
     <lb-hub>
       <!-- replace this from the previous tutorial...
       <nav>

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

@@ -60,6 +60,28 @@ writes the query result to `lb-value`, and the widget's own class —
 imported from `@loadbare/widgets`, not written in this
 application — reacts to it.
 
+## The unknown-page dialog, as a widget
+
+[Pages and Navigation](./010-pages-and-navigation.md) wrote a
+`<dialog lb-unknown-page>` by hand.  The library ships the same dialog as a
+widget, so a chrome that lists the package can replace the dialog with one
+tag:
+
+```html
+<lb-hub>
+  <nav>
+    <a href="/" lb-nav-link>Home</a>
+    <a href="/about" lb-nav-link>About</a>
+  </nav>
+  <main></main>
+  <lb-unknown-page></lb-unknown-page>
+</lb-hub>
+```
+
+Its definition is the dialog, already scoped to the hub's `lb-navigation`
+query and carrying both of its cells.  Nothing else changes: the hub still
+finds a `<dialog lb-unknown-page>` inside itself and opens it on a miss.
+
 ## Where this stops
 
 This only covers consuming a published widget, not writing one for

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loadbare/app",
   "description": "High performance web app framework for server-bound applications",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "type": "module",
   "files": [
     "dist",