@mosaicajs/components 0.3.0 → 0.4.0

package/dist/hierarchy.js

@@ -34,11 +34,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 };
 import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { artifactName, browsableLayers, isFilterLayer, withMember, withoutMember } from '@mosaicajs/client';
+import { browsableLayers, isFilterLayer, withMember, withoutMember } from '@mosaicajs/client';
 import { refusalOf } from '@mosaicajs/client/internal';
-import { MosaicaElement, UNNAMED, emit, idString } from './base.js';
+import { MosaicaElement, called, calledList, emit, focusLost, idString, labelOf } from './base.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
+import { Lineage, focusAdded, spokenCounts } from './lineage.js';
 import { renderState, stateOf } from './states.js';
 import { chrome, tokens } from './tokens.js';
 import './count.js';
@@ -52,10 +53,19 @@ const masked = (n) => ({ value: Number(n), exact: true });
  * hierarchy, filter layers among them. When there are several, a select switches between them.
  *
  * Each row shows how many of the artifact's items the viewer may see. While filters are set, it
- * also shows how many of those items match. A parent the viewer may not see is left out, so its
- * children appear at the top level.
+ * also shows how many of those items match, and a screen reader is given each count with what it
+ * counts. An artifact the viewer may not see is left out, and its children appear under its
+ * nearest ancestors the viewer may see, or at the top level where it has none. A row under several
+ * served parents names the others, and a parent no page has served yet is asked for by name. When
+ * the filters change, the rows are fetched again, a few requests at a time: as many pages of the
+ * roots and of each open row as More had loaded, since a page's cursor is good only for the
+ * filters it was served under. Focus stays on the control it was on.
  *
- * A row's buttons highlight or filter the map by its artifact. Its Fit button only fires
+ * A row's name is one line, cut with an ellipsis where it is too long, unless
+ * `--mosaica-long-text` is `normal`. A row's buttons highlight or filter the map by its artifact.
+ * They are shown in place of its counts while the pointer or focus is in the row, and Escape puts
+ * them away again; where there is no pointer to hover with, they stand beside the counts. Its Fit
+ * button only fires
  * `mosaica-artifactfit`, so you handle the event by passing its id to the map's `fitTo`. The
  * explorer does this for a hierarchy you put in one of its slots. `fitTo` finds only the artifacts
  * the map currently draws, so Fit does nothing for a row whose artifact is not drawn at this zoom.
@@ -70,31 +80,39 @@ const masked = (n) => ({ value: Number(n), exact: true });
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-artifactfit']>} mosaica-artifactfit - A row's Fit
  *   button was pressed.
  * @csspart title - The heading.
- * @csspart state - The state line, with `data-state`.
+ * @csspart state - The state line, with `data-state`, inside a `role="status"` region, which also
+ *   says which rows are loading children and which were refused them.
  * @csspart refusal - The words "View refused" or "Layer unavailable", with `data-code`.
  * @csspart reason - The server's reason for a refusal, under "View refused".
  * @csspart layer - The layer select, shown if there are several layers.
  * @csspart search - The search box.
- * @csspart tree - The tree of rows.
- * @csspart row - One row, with `data-id`, and `data-clause` (`filter`, `highlight` or both,
- *   separated by a space) while its artifact is filtered or highlighted.
- * @csspart expander - A row's expand button. On a row with no children it has `data-leaf` and is
- *   hidden, keeping the names aligned.
- * @csspart name - A row's name, with `data-unnamed` if it has none. Pressing it highlights the
- *   artifact.
- * @csspart counts - A row's counts.
+ * @csspart tree - The tree of rows, named by the layer.
+ * @csspart row - One row, with `data-id`, `data-clause` (`filter`, `highlight` or both, separated
+ *   by a space) while its artifact is filtered or highlighted, and `data-buttons-away` once Escape has put
+ *   its buttons away.
+ * @csspart expander - A row's expand button, with `aria-expanded` while its children are shown. On
+ *   a row with no children it has `data-leaf` and is hidden, keeping the names aligned.
+ * @csspart name - A row's name. Where the artifact has none it is the artifact's key, with
+ *   `data-key-name`, and where it has no key either it is the word Unnamed, with `data-unnamed`.
+ *   Pressing it highlights the artifact, and it has `aria-pressed` while the artifact is
+ *   highlighted.
+ * @csspart counts - A row's counts as they are drawn, hidden from a screen reader, which is given
+ *   them beside it with what each counts. They are not drawn while the row's buttons are shown
+ *   over them.
  * @csspart count-matched - The `<mosaica-count>` of a row's items that match the filters, while a
  *   filter is set.
  * @csspart count-masked - The `<mosaica-count>` of a row's items the viewer may see.
- * @csspart actions - A row's buttons.
+ * @csspart actions - A row's buttons, shown over its counts while the pointer or focus is in the
+ *   row.
  * @csspart highlight - A row's highlight button, with `aria-pressed`.
  * @csspart filter - A row's filter button, with `aria-pressed`.
  * @csspart fit - A row's Fit button, on a layer that draws.
  * @csspart dismiss - A × that removes a row's filter or highlight, one for each, with `data-verb`.
- * @csspart also - The row's other parents, or "Children unavailable" with `data-code` if its
- *   children were refused.
+ *   The highlight's has a bar under it.
+ * @csspart also - The row's other parents, each with `data-key-name` where it is called by its key,
+ *   or "Children unavailable" with `data-code` if its children were refused.
  * @csspart children - An expanded row's children.
- * @csspart more - The More button, which loads the next page.
+ * @csspart more - The More button, which loads the next page and moves focus to its first row.
  */
 let MosaicaHierarchy = (() => {
     let _classSuper = MosaicaElement;
@@ -104,30 +122,21 @@ let MosaicaHierarchy = (() => {
     let _limit_decorators;
     let _limit_initializers = [];
     let _limit_extraInitializers = [];
-    let _roots_decorators;
-    let _roots_initializers = [];
-    let _roots_extraInitializers = [];
-    let _rootsNext_decorators;
-    let _rootsNext_initializers = [];
-    let _rootsNext_extraInitializers = [];
     let _query_decorators;
     let _query_initializers = [];
     let _query_extraInitializers = [];
     let _searching_decorators;
     let _searching_initializers = [];
     let _searching_extraInitializers = [];
-    let _loading_decorators;
-    let _loading_initializers = [];
-    let _loading_extraInitializers = [];
-    let _refusal_decorators;
-    let _refusal_initializers = [];
-    let _refusal_extraInitializers = [];
+    let _searchRefusal_decorators;
+    let _searchRefusal_initializers = [];
+    let _searchRefusal_extraInitializers = [];
     let _open_decorators;
     let _open_initializers = [];
     let _open_extraInitializers = [];
-    let _revision_decorators;
-    let _revision_initializers = [];
-    let _revision_extraInitializers = [];
+    let _buttonsAway_decorators;
+    let _buttonsAway_initializers = [];
+    let _buttonsAway_extraInitializers = [];
     let _shown_decorators;
     let _shown_initializers = [];
     let _shown_extraInitializers = [];
@@ -136,25 +145,19 @@ let MosaicaHierarchy = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _layer_decorators = [property()];
             _limit_decorators = [property({ type: Number })];
-            _roots_decorators = [state()];
-            _rootsNext_decorators = [state()];
             _query_decorators = [state()];
             _searching_decorators = [state()];
-            _loading_decorators = [state()];
-            _refusal_decorators = [state()];
+            _searchRefusal_decorators = [state()];
             _open_decorators = [state()];
-            _revision_decorators = [state()];
+            _buttonsAway_decorators = [state()];
             _shown_decorators = [state()];
             __esDecorate(this, null, _layer_decorators, { kind: "accessor", name: "layer", static: false, private: false, access: { has: obj => "layer" in obj, get: obj => obj.layer, set: (obj, value) => { obj.layer = value; } }, metadata: _metadata }, _layer_initializers, _layer_extraInitializers);
             __esDecorate(this, null, _limit_decorators, { kind: "accessor", name: "limit", static: false, private: false, access: { has: obj => "limit" in obj, get: obj => obj.limit, set: (obj, value) => { obj.limit = value; } }, metadata: _metadata }, _limit_initializers, _limit_extraInitializers);
-            __esDecorate(this, null, _roots_decorators, { kind: "accessor", name: "roots", static: false, private: false, access: { has: obj => "roots" in obj, get: obj => obj.roots, set: (obj, value) => { obj.roots = value; } }, metadata: _metadata }, _roots_initializers, _roots_extraInitializers);
-            __esDecorate(this, null, _rootsNext_decorators, { kind: "accessor", name: "rootsNext", static: false, private: false, access: { has: obj => "rootsNext" in obj, get: obj => obj.rootsNext, set: (obj, value) => { obj.rootsNext = value; } }, metadata: _metadata }, _rootsNext_initializers, _rootsNext_extraInitializers);
             __esDecorate(this, null, _query_decorators, { kind: "accessor", name: "query", static: false, private: false, access: { has: obj => "query" in obj, get: obj => obj.query, set: (obj, value) => { obj.query = value; } }, metadata: _metadata }, _query_initializers, _query_extraInitializers);
             __esDecorate(this, null, _searching_decorators, { kind: "accessor", name: "searching", static: false, private: false, access: { has: obj => "searching" in obj, get: obj => obj.searching, set: (obj, value) => { obj.searching = value; } }, metadata: _metadata }, _searching_initializers, _searching_extraInitializers);
-            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
-            __esDecorate(this, null, _refusal_decorators, { kind: "accessor", name: "refusal", static: false, private: false, access: { has: obj => "refusal" in obj, get: obj => obj.refusal, set: (obj, value) => { obj.refusal = value; } }, metadata: _metadata }, _refusal_initializers, _refusal_extraInitializers);
+            __esDecorate(this, null, _searchRefusal_decorators, { kind: "accessor", name: "searchRefusal", static: false, private: false, access: { has: obj => "searchRefusal" in obj, get: obj => obj.searchRefusal, set: (obj, value) => { obj.searchRefusal = value; } }, metadata: _metadata }, _searchRefusal_initializers, _searchRefusal_extraInitializers);
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
-            __esDecorate(this, null, _revision_decorators, { kind: "accessor", name: "revision", static: false, private: false, access: { has: obj => "revision" in obj, get: obj => obj.revision, set: (obj, value) => { obj.revision = value; } }, metadata: _metadata }, _revision_initializers, _revision_extraInitializers);
+            __esDecorate(this, null, _buttonsAway_decorators, { kind: "accessor", name: "buttonsAway", static: false, private: false, access: { has: obj => "buttonsAway" in obj, get: obj => obj.buttonsAway, set: (obj, value) => { obj.buttonsAway = value; } }, metadata: _metadata }, _buttonsAway_initializers, _buttonsAway_extraInitializers);
             __esDecorate(this, null, _shown_decorators, { kind: "accessor", name: "shown", static: false, private: false, access: { has: obj => "shown" in obj, get: obj => obj.shown, set: (obj, value) => { obj.shown = value; } }, metadata: _metadata }, _shown_initializers, _shown_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -172,15 +175,15 @@ let MosaicaHierarchy = (() => {
       [part='search'] {
         margin-bottom: 8px;
       }
+      /* The box reaches 3 px left of the rows, so the expander's target at a row's edge is whole. */
       [part='tree'] {
         list-style: none;
-        margin: 0;
-        padding: 0;
+        margin: 0 0 0 -3px;
+        padding: 0 0 0 3px;
         max-height: 320px;
         overflow-y: auto;
       }
       [part='row'] {
-        position: relative;
         display: flex;
         align-items: center;
         gap: 6px;
@@ -199,19 +202,36 @@ let MosaicaHierarchy = (() => {
         background: var(--_mosaica-highlight-soft);
         color: var(--_mosaica-highlight);
       }
+      /* Drawn 14 px wide. The pointer's target is 24 px square around it, in the row's own room. */
       [part='expander'] {
+        position: relative;
         display: inline-flex;
+        align-items: center;
         width: 14px;
+        height: 24px;
+        flex: none;
         color: var(--_mosaica-ink-3);
       }
+      [part='expander']::before {
+        content: '';
+        position: absolute;
+        inset: 0 -5px;
+      }
+      [part='expander']:focus-visible {
+        outline-offset: 0;
+      }
       [part='expander'][data-leaf] {
         visibility: hidden;
       }
+      /* One line, cut with an ellipsis, unless the host asks for long names to wrap. */
       [part='name'] {
         flex: 1;
+        min-width: 0;
+        min-height: 24px;
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        white-space: var(--_mosaica-long-text);
+        overflow-wrap: anywhere;
         text-align: left;
       }
       [part='counts'] {
@@ -221,28 +241,46 @@ let MosaicaHierarchy = (() => {
         font-size: 12px;
         color: var(--_mosaica-ink-2);
       }
-      /* Over the counts, so hidden buttons take no width from the name; still reachable by Tab. */
+      /* The counts and the row's buttons. Where there is no pointer to hover with, side by side. */
+      .figures {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        flex: none;
+      }
       [part='actions'] {
-        position: absolute;
-        right: 2px;
-        top: 50%;
-        transform: translateY(-50%);
         display: inline-flex;
-        gap: 2px;
-        padding-left: 6px;
-        background: var(--_mosaica-surface-2);
-        border-radius: var(--_mosaica-radius-control);
-        opacity: 0;
-        pointer-events: none;
       }
-      [part='row']:hover [part='actions'],
-      [part='row']:focus-within [part='actions'] {
-        opacity: 1;
-        pointer-events: auto;
+      /* With a pointer, the buttons take no room: they are shown over the counts, which are not
+         drawn meanwhile, and over the end of a name beside short counts, while the pointer or
+         focus is in the row and Escape has not put them away. They are above the counts, which
+         come after them and, not drawn, would still lie over them. */
+      @media (hover: hover) {
+        [part='actions'] {
+          position: absolute;
+          right: 0;
+          z-index: 1;
+          padding-left: 6px;
+          background: var(--_mosaica-surface-2);
+          border-radius: var(--_mosaica-radius-control);
+          opacity: 0;
+          pointer-events: none;
+        }
+        [part='row']:not([data-buttons-away]):is(:hover, :focus-within) [part='actions'] {
+          opacity: 1;
+          pointer-events: auto;
+        }
+        [part='row']:not([data-buttons-away]):is(:hover, :focus-within) [part='counts'] {
+          opacity: 0;
+          pointer-events: none;
+        }
       }
       [part='actions'] button {
-        display: inline-flex;
-        padding: 3px;
+        display: inline-grid;
+        place-items: center;
+        width: 24px;
+        height: 24px;
         color: var(--_mosaica-ink-2);
         border-radius: 4px;
       }
@@ -250,7 +288,14 @@ let MosaicaHierarchy = (() => {
         color: var(--_mosaica-ink);
         background: var(--_mosaica-surface-3);
       }
+      [part='actions'] button[aria-pressed='true'] {
+        color: var(--_mosaica-ink);
+        background: var(--_mosaica-surface-3);
+        box-shadow: inset 0 -2px 0 currentColor;
+      }
+      /* Drawn 20 px square, with a 24 px target around it. */
       [part='dismiss'] {
+        position: relative;
         display: inline-grid;
         place-items: center;
         width: 20px;
@@ -259,8 +304,15 @@ let MosaicaHierarchy = (() => {
         border-radius: 4px;
         color: var(--_mosaica-ink-2);
       }
+      [part='dismiss']::before {
+        content: '';
+        position: absolute;
+        inset: -2px;
+      }
+      /* The × that removes a highlight has a bar under it, so it differs from the filter's by more than its colour. */
       [part='dismiss'][data-verb='highlight'] {
         color: var(--_mosaica-highlight);
+        box-shadow: inset 0 -2px 0 currentColor;
       }
       [part='dismiss']:hover {
         background: var(--_mosaica-surface-3);
@@ -270,9 +322,25 @@ let MosaicaHierarchy = (() => {
         font-size: 11px;
         color: var(--_mosaica-ink-3);
       }
+      [part='also'] [data-key-name] {
+        color: inherit;
+      }
+      /* Drawn as a line of text, with a target 24 px high and at least as wide around it. */
       [part='more'] {
+        position: relative;
         margin: 4px 0 4px calc(18px + var(--depth, 0) * 14px);
       }
+      [part='more']::before {
+        content: '';
+        position: absolute;
+        inset: -4px 0;
+        min-width: 24px;
+      }
+      [part='children'] {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
       [part='refusal'] {
         display: flex;
         align-items: center;
@@ -289,52 +357,42 @@ let MosaicaHierarchy = (() => {
         /** Rows per page, from 1 up to the server's `maxBrowseRows`. */
         get limit() { return this.#limit_accessor_storage; }
         set limit(value) { this.#limit_accessor_storage = value; }
-        #roots_accessor_storage = (__runInitializers(this, _limit_extraInitializers), __runInitializers(this, _roots_initializers, null));
-        get roots() { return this.#roots_accessor_storage; }
-        set roots(value) { this.#roots_accessor_storage = value; }
-        #rootsNext_accessor_storage = (__runInitializers(this, _roots_extraInitializers), __runInitializers(this, _rootsNext_initializers, null));
-        get rootsNext() { return this.#rootsNext_accessor_storage; }
-        set rootsNext(value) { this.#rootsNext_accessor_storage = value; }
-        #query_accessor_storage = (__runInitializers(this, _rootsNext_extraInitializers), __runInitializers(this, _query_initializers, ''));
+        #query_accessor_storage = (__runInitializers(this, _limit_extraInitializers), __runInitializers(this, _query_initializers, ''));
         get query() { return this.#query_accessor_storage; }
         set query(value) { this.#query_accessor_storage = value; }
         #searching_accessor_storage = (__runInitializers(this, _query_extraInitializers), __runInitializers(this, _searching_initializers, null));
         get searching() { return this.#searching_accessor_storage; }
         set searching(value) { this.#searching_accessor_storage = value; }
-        #loading_accessor_storage = (__runInitializers(this, _searching_extraInitializers), __runInitializers(this, _loading_initializers, false));
-        get loading() { return this.#loading_accessor_storage; }
-        set loading(value) { this.#loading_accessor_storage = value; }
-        #refusal_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _refusal_initializers, null));
-        get refusal() { return this.#refusal_accessor_storage; }
-        set refusal(value) { this.#refusal_accessor_storage = value; }
-        #open_accessor_storage = (__runInitializers(this, _refusal_extraInitializers), __runInitializers(this, _open_initializers, new Set()));
+        #searchRefusal_accessor_storage = (__runInitializers(this, _searching_extraInitializers), __runInitializers(this, _searchRefusal_initializers, null));
+        /** Why the last search was refused. */
+        get searchRefusal() { return this.#searchRefusal_accessor_storage; }
+        set searchRefusal(value) { this.#searchRefusal_accessor_storage = value; }
+        #open_accessor_storage = (__runInitializers(this, _searchRefusal_extraInitializers), __runInitializers(this, _open_initializers, new Set()));
         /** Which paths are open, so a re-render of the tree keeps the walk. */
         get open() { return this.#open_accessor_storage; }
         set open(value) { this.#open_accessor_storage = value; }
-        #revision_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _revision_initializers, 0));
-        /** Bumped to re-render after a node's children land, since the tree in `roots` is mutated. */
-        get revision() { return this.#revision_accessor_storage; }
-        set revision(value) { this.#revision_accessor_storage = value; }
-        /** The question the roots were fetched under; see {@link question}. */
-        fetchedUnder = (__runInitializers(this, _revision_extraInitializers), '');
-        /**
-         * Every name the walk has seen, by identifier. A filter layer's artifacts are never served in a
-         * viewport, so this is the client's only source of their names.
-         */
-        names = new Map();
+        #buttonsAway_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _buttonsAway_initializers, new Set()));
+        /** The paths of the rows whose buttons Escape has put away, each until the pointer and focus leave it. */
+        get buttonsAway() { return this.#buttonsAway_accessor_storage; }
+        set buttonsAway(value) { this.#buttonsAway_accessor_storage = value; }
+        /** The browse pages of the current layer: its roots and the children of the rows opened. */
+        lineage = (__runInitializers(this, _buttonsAway_extraInitializers), new Lineage({
+            store: () => this.resolvedStore,
+            layer: () => this.current(),
+            limit: () => this.limit,
+            isOpen: (path) => this.open.has(path),
+            changed: () => this.requestUpdate()
+        }));
         searchTimer = null;
-        /** Moved by {@link resetServerData}, so a page asked for before it is dropped. */
+        /** Moved by {@link resetServerData}, so a search asked for before it is dropped. */
         epoch = 0;
         resetServerData() {
             this.epoch += 1;
-            this.roots = null;
-            this.rootsNext = null;
+            this.lineage.reset();
             this.searching = null;
-            this.loading = false;
-            this.refusal = null;
+            this.searchRefusal = null;
             this.open = new Set();
-            this.names.clear();
-            this.fetchedUnder = '';
+            this.buttonsAway = new Set();
             if (this.searchTimer)
                 clearTimeout(this.searchTimer);
             this.searchTimer = null;
@@ -347,15 +405,6 @@ let MosaicaHierarchy = (() => {
             const offered = this.layers();
             return offered.find((l) => l.name === this.layer) ?? offered[0] ?? null;
         }
-        /**
-         * The question the panel is asking, as a string: the layer and the map's filter. A change
-         * refetches the roots and drops the walk, whose counts answer the old question.
-         */
-        question() {
-            // Hashed from `requestFilters()`, what `store.browse` sends, which includes the drawn region.
-            // A `member_of` leaf holds its artifact as a decimal string, so it serialises.
-            return `${this.current()?.name ?? ''}|${JSON.stringify(this.resolvedStore?.requestFilters() ?? null)}`;
-        }
         #shown_accessor_storage = __runInitializers(this, _shown_initializers, false);
         /**
          * Whether the panel is shown. A hidden panel sends no request, so a panel in a closed drawer
@@ -369,6 +418,7 @@ let MosaicaHierarchy = (() => {
         observer = (__runInitializers(this, _shown_extraInitializers), null);
         connectedCallback() {
             super.connectedCallback();
+            document.addEventListener('keydown', this.onEscape);
             if (typeof IntersectionObserver === 'undefined')
                 return;
             this.observer ??= new IntersectionObserver((entries) => {
@@ -380,123 +430,128 @@ let MosaicaHierarchy = (() => {
             this.observer.observe(this);
         }
         disconnectedCallback() {
+            document.removeEventListener('keydown', this.onEscape);
             this.observer?.disconnect();
             this.observer = null;
             super.disconnectedCallback();
         }
+        /**
+         * Escape puts away the buttons shown over a row's counts, wherever focus is, since the pointer
+         * alone shows them. Focus on one of them goes to the row's name.
+         */
+        onEscape = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            const active = this.shadowRoot?.activeElement ?? null;
+            const focused = active?.closest('[part="row"]') ?? null;
+            const shown = [focused, this.renderRoot.querySelector('[part="row"]:hover')].filter((row) => row !== null && !this.buttonsAway.has(row.path));
+            if (shown.length === 0)
+                return;
+            this.buttonsAway = new Set([...this.buttonsAway, ...shown.map((row) => row.path)]);
+            if (active?.closest('[part="actions"]'))
+                focused?.querySelector('[part="name"]')?.focus();
+        };
+        /** The buttons Escape put away come back once the pointer and focus have both left the row. */
+        leftRow(e, path) {
+            if (!this.buttonsAway.has(path))
+                return;
+            const row = e.currentTarget;
+            const to = e.type === 'focusout' ? e.relatedTarget : (this.shadowRoot?.activeElement ?? null);
+            if (row.contains(to) || (e.type === 'focusout' && row.matches(':hover')))
+                return;
+            this.shownAgain(path);
+        }
+        /** Let a row show its buttons again. */
+        shownAgain(path) {
+            if (this.buttonsAway.has(path))
+                this.buttonsAway = new Set([...this.buttonsAway].filter((p) => p !== path));
+        }
         /** Whether this element is displayed; see {@link shown}. */
         displayed() {
             return typeof this.checkVisibility === 'function' ? this.checkVisibility() : true;
         }
         /** The roots, where the question they were fetched under is no longer the one being asked. */
         loadRootsIfStale() {
-            const q = this.question();
-            if (this.shown && q !== this.fetchedUnder && this.current()) {
-                this.fetchedUnder = q;
-                void this.loadRoots();
-            }
+            if (this.shown)
+                this.lineage.loadIfStale();
         }
         onStoreChange() {
             this.loadRootsIfStale();
             super.onStoreChange();
         }
+        /** The control focus was on as the last render began. */
+        held = null;
         /** Re-asked before every render, so putting the panel away and taking it out again both count. */
         willUpdate(changed) {
             super.willUpdate(changed);
             if (!this.shown && this.displayed())
                 this.shown = true;
+            this.held = this.heldControl();
         }
         updated() {
-            if (this.shown && this.roots === null && this.current() && this.resolvedStore && !this.loading && this.fetchedUnder === '') {
-                this.fetchedUnder = this.question();
-                void this.loadRoots();
-            }
-        }
-        /** One page of the current layer, under the map's filter, which the store supplies. */
-        page(req) {
-            const s = this.resolvedStore;
-            const layer = this.current();
-            if (!s || !layer)
-                return null;
-            const ceiling = s.get('meta')?.selection.maxBrowseRows ?? this.limit;
-            return s.browse({ ...req, layer: layer.name, limit: Math.max(1, Math.min(this.limit, ceiling)) });
-        }
-        async loadRoots(cursor) {
-            const request = this.page(cursor === undefined ? {} : { cursor });
-            if (!request)
-                return;
-            const epoch = this.epoch;
-            this.loading = true;
-            this.refusal = null;
-            try {
-                const page = await request;
-                if (epoch !== this.epoch)
-                    return;
-                const nodes = page.artifacts.map((row) => this.node(row, ''));
-                this.roots = cursor === undefined ? nodes : [...(this.roots ?? []), ...nodes];
-                this.rootsNext = page.next;
-            }
-            catch (error) {
-                if (epoch !== this.epoch)
-                    return;
-                this.refusal = refusalOf(error);
-                this.roots = this.roots ?? [];
-            }
-            finally {
-                if (epoch === this.epoch)
-                    this.loading = false;
-            }
-        }
-        node(row, parentPath) {
-            const name = artifactName(row);
-            if (name !== null)
-                this.names.set(row.mosaicaId, name);
-            return { row, path: `${parentPath}/${row.mosaicaId}`, children: null, next: null, loading: false, refusal: null };
-        }
-        /** What to call an artifact: its name where the walk has met one. */
-        nameOf(id) {
-            return this.names.get(id) ?? UNNAMED;
-        }
-        /**
-         * Expand a node: its children, paged. A node keeps what it fetched while {@link question} is
-         * unchanged, so reopening it fetches nothing.
-         */
-        async expand(node, more = false) {
-            const request = this.page({ parent: node.row.mosaicaId, ...(more && node.next ? { cursor: node.next } : {}) });
-            if (!request)
-                return;
-            const epoch = this.epoch;
-            node.loading = true;
-            node.refusal = null;
-            this.revision++;
-            try {
-                const page = await request;
-                if (epoch !== this.epoch)
-                    return;
-                const nodes = page.artifacts.map((row) => this.node(row, node.path));
-                node.children = more ? [...(node.children ?? []), ...nodes] : nodes;
-                node.next = page.next;
-            }
-            catch (error) {
-                node.refusal = refusalOf(error);
-                node.children = node.children ?? [];
-            }
-            finally {
-                node.loading = false;
-                this.revision++;
-            }
+            if (this.held)
+                this.keepFocus(this.held);
+            this.loadRootsIfStale();
         }
+        /** Open a row, fetching its children where it has none yet, or close one that is open or opening. */
         toggle(node) {
             const open = new Set(this.open);
-            if (open.has(node.path))
+            if (open.has(node.path) && (node.children !== null || node.loading))
                 open.delete(node.path);
             else {
                 open.add(node.path);
                 if (node.children === null && !node.loading)
-                    void this.expand(node);
+                    void this.lineage.expand(node);
             }
             this.open = open;
         }
+        /**
+         * Load the next page of the roots, or of `parent`'s children, and move focus from the More
+         * button, which the page replaces or removes, to the first row it added. Focus that has gone
+         * anywhere else meanwhile stays there.
+         */
+        async more(button, parent) {
+            const added = await (parent ? this.lineage.expand(parent, true) : this.lineage.loadMore());
+            const first = added[0];
+            if (first)
+                await focusAdded(this, button, () => this.rowElements().find((r) => r.path === first.path)?.querySelector('[part="name"]'));
+        }
+        rowElements() {
+            return Array.from(this.renderRoot.querySelectorAll('[part="row"]'));
+        }
+        /** The control in a row that focus is on, read before a render so {@link keepFocus} can put it back. */
+        heldControl() {
+            const active = this.shadowRoot?.activeElement;
+            const row = active?.closest('[part="row"]');
+            const part = active?.getAttribute('part');
+            if (!active || !row || !part)
+                return null;
+            return { path: row.path, at: this.rowElements().indexOf(row), part, verb: active.getAttribute('data-verb') };
+        }
+        /**
+         * After a render, put focus back on the control it was on, in the row it was on. Where a ×
+         * removed itself, focus goes to the row's other ×, else to the button that makes the clause.
+         * Where the row is gone, it goes to the row now in its place, else the last, else the search box.
+         */
+        keepFocus(held) {
+            const rows = this.rowElements();
+            const active = this.shadowRoot?.activeElement ?? null;
+            // Focus is still in the tree, or the render removed the control that had it.
+            if (!active && !focusLost())
+                return;
+            const same = rows.find((r) => r.path === held.path);
+            const row = same ?? (active ? null : rows[Math.min(held.at, rows.length - 1)]);
+            if (!row) {
+                if (!active)
+                    this.renderRoot.querySelector('[part="search"] input')?.focus();
+                return;
+            }
+            const exact = row.querySelector(`[part="${held.part}"]${held.verb ? `[data-verb="${held.verb}"]` : ''}`);
+            const other = held.part === 'dismiss' ? (row.querySelector('[part="dismiss"]') ?? row.querySelector(`[part="actions"] [data-verb="${held.verb}"]`)) : null;
+            const to = exact ?? other ?? row.querySelector('[part="name"]');
+            if (to !== active)
+                to?.focus();
+        }
         search(text) {
             this.query = text;
             if (this.searchTimer)
@@ -507,21 +562,24 @@ let MosaicaHierarchy = (() => {
                 const q = text.trim();
                 if (q.length === 0) {
                     this.searching = null;
+                    this.searchRefusal = null;
                     return;
                 }
-                const request = this.page({ q });
+                const request = this.lineage.search(q);
                 if (!request)
                     return;
                 const epoch = this.epoch;
                 void request
-                    .then((page) => {
-                    if (epoch === this.epoch)
-                        this.searching = page.artifacts.map((row) => this.node(row, 'q'));
+                    .then((nodes) => {
+                    if (epoch !== this.epoch)
+                        return;
+                    this.searching = nodes;
+                    this.searchRefusal = null;
                 })
                     .catch((error) => {
                     if (epoch !== this.epoch)
                         return;
-                    this.refusal = refusalOf(error);
+                    this.searchRefusal = refusalOf(error);
                     this.searching = [];
                 });
             }, 250);
@@ -539,12 +597,16 @@ let MosaicaHierarchy = (() => {
                 return;
             const held = s.get('filters').members;
             const on = this.clausesOn(id).includes(verb);
-            const label = this.names.get(id);
-            s.setMembers(on
-                ? withoutMember(held, layer.name, id, verb)
-                : withMember(held, { layer: layer.name, artifact: id, outside: false, verb, ...(label === undefined ? {} : { label }) }));
+            s.setMembers(on ? withoutMember(held, layer.name, id, verb) : withMember(held, { layer: layer.name, artifact: id, outside: false, verb, ...labelOf(this.lineage.nameOf(id)) }));
             emit(this, 'mosaica-clausechange', { id: idString(id), layer: layer.name, outside: false, verb, on: !on });
         }
+        /** What the rows' own fetches say, for the status region: the rows loading children, and those refused them. */
+        rowNotes(nodes) {
+            return nodes.flatMap((n) => {
+                const name = called(n.row.name, n.row.key).text;
+                return [...(n.loading ? [`Loading children of ${name}`] : []), ...(n.refusal ? [`Children of ${name} unavailable`] : []), ...this.rowNotes(n.children ?? [])];
+            });
+        }
         render() {
             const s = this.resolvedStore;
             const heading = html `<h2 part="title">Hierarchy</h2>`;
@@ -555,14 +617,26 @@ let MosaicaHierarchy = (() => {
             if (offered.length === 0)
                 return html `<div class="panel">${heading}<span part="state" data-state="empty">No hierarchical layers</span></div>`;
             const layer = this.current();
-            const filtered = s.get('filters').expr !== null || s.get('filters').members.length > 0;
-            const rows = this.searching ?? this.roots;
+            const title = layer.title || layer.name;
+            const { roots, loading } = this.lineage;
+            const refusal = this.searchRefusal ?? this.lineage.refusal;
+            const rows = this.searching ?? roots;
+            const state = refusal ? 'refused' : rows === null ? (loading ? 'loading' : 'shown') : rows.length === 0 ? 'empty' : 'shown';
+            const said = refusal
+                ? html `<span part="refusal" data-code=${refusal.code}><span class="dot refuse"></span>Layer unavailable</span>`
+                : state === 'loading'
+                    ? html `<span class="sr-only">Loading</span>`
+                    : state === 'empty'
+                        ? this.searching
+                            ? 'No match'
+                            : 'Nothing here'
+                        : nothing;
+            const notes = this.rowNotes(rows ?? []);
             return html `<div class="panel">${heading}
-      <span part="state" data-state=${this.refusal ? 'refused' : this.loading && rows === null ? 'loading' : 'shown'}></span>
       ${offered.length > 1
                 ? html `<select part="layer" aria-label="Hierarchy layer" .value=${layer.name} @change=${(e) => {
                     this.layer = e.target.value;
-                    this.roots = null;
+                    this.lineage.clear();
                     this.searching = null;
                     this.open = new Set();
                 }}>
@@ -571,66 +645,69 @@ let MosaicaHierarchy = (() => {
                 : nothing}
       <div part="search" class="input">${icon('search', 14)}<input
         type="search"
-        aria-label=${`Search ${layer.title || layer.name}`}
+        aria-label=${`Search ${title}`}
         .value=${this.query}
         placeholder="Search names"
         autocomplete="off"
         @input=${(e) => this.search(e.target.value)}
       /></div>
-      ${this.refusal ? html `<span part="refusal" data-code=${this.refusal.code}><span class="dot refuse"></span>Layer unavailable</span>` : nothing}
-      ${rows === null || (this.refusal && rows.length === 0)
-                ? nothing
-                : rows.length === 0
-                    ? html `<span part="state" data-state="empty">${this.searching ? 'No match' : 'Nothing here'}</span>`
-                    : html `<ul part="tree">${rows.map((n) => this.renderNode(n, 0, layer, filtered))}</ul>`}
-      ${this.searching === null && this.rootsNext
-                ? html `<button part="more" class="more-link" type="button" @click=${() => void this.loadRoots(this.rootsNext ?? undefined)}>More</button>`
+      <div role="status"><span part="state" data-state=${state}>${said}</span>${notes.length > 0 ? html `<span class="sr-only">${notes.join('. ')}</span>` : nothing}</div>
+      ${rows === null || rows.length === 0 ? nothing : html `<ul part="tree" aria-label=${title}>${rows.map((n) => this.renderNode(n, 0, layer))}</ul>`}
+      ${this.searching === null && this.lineage.hasMore
+                ? html `<button part="more" class="more-link" type="button" @click=${(e) => void this.more(e.currentTarget, null)}>More</button>`
                 : nothing}
     </div>`;
         }
-        renderNode(node, depth, layer, filtered) {
-            const open = this.open.has(node.path);
-            const clauses = this.clausesOn(node.row.mosaicaId);
-            const name = artifactName(node.row);
+        renderNode(node, depth, layer) {
+            // A row is expanded while its children are drawn, not while they are on their way.
+            const open = this.open.has(node.path) && node.children !== null;
+            const id = node.row.mosaicaId;
+            const clauses = this.clausesOn(id);
+            const name = called(node.row.name, node.row.key);
+            const text = name.text;
             // A `dag` node is drawn under each served parent; the row names the others.
-            const also = node.row.parentIds.filter((p) => String(p) !== node.path.split('/').at(-2));
+            const also = this.lineage.alsoUnder(node);
             const drawn = !isFilterLayer(layer);
+            const pressed = (verb) => (clauses.includes(verb) ? 'true' : 'false');
             return html `<li>
-      <div part="row" style=${`--depth:${depth}`} data-id=${idString(node.row.mosaicaId)} data-clause=${clauses.length > 0 ? clauses.sort().join(' ') : nothing}>
+      <div part="row" style=${`--depth:${depth}`} .path=${node.path} data-id=${idString(id)} data-clause=${clauses.length > 0 ? clauses.sort().join(' ') : nothing}
+        data-buttons-away=${this.buttonsAway.has(node.path) ? '' : nothing} @pointerleave=${(e) => this.leftRow(e, node.path)} @focusout=${(e) => this.leftRow(e, node.path)}>
         <button part="expander" type="button" data-leaf=${node.row.childCount === 0 ? '' : nothing}
           aria-expanded=${open ? 'true' : 'false'}
-          aria-label=${open ? `Collapse ${name ?? 'row'}` : `Expand ${name ?? 'row'}`}
-          @click=${() => this.toggle(node)}>${icon(open ? 'chev' : 'chevr', 12)}</button>
-        <button part="name" type="button" data-unnamed=${name === null ? '' : nothing}
-          title="Highlight"
-          @click=${() => this.apply(node.row.mosaicaId, 'highlight')}>${name ?? UNNAMED}</button>
-        <span part="counts">
-          ${filtered && node.row.matchedCount !== null
-                ? html `<mosaica-count part="count-matched" .masked=${masked(node.row.matchedCount)}></mosaica-count>/`
-                : nothing}<mosaica-count part="count-masked" .masked=${masked(node.row.maskedCount)}></mosaica-count>
-        </span>
-        ${clauses.map((verb) => html `<button part="dismiss" type="button" data-verb=${verb} aria-label=${verb === 'highlight' ? `Stop highlighting ${name ?? UNNAMED}` : `Stop filtering to ${name ?? UNNAMED}`}
-            title=${verb === 'highlight' ? 'Stop highlighting' : 'Stop filtering'} @click=${() => this.apply(node.row.mosaicaId, verb)}>${icon('close', 12)}</button>`)}
-        <span part="actions">
-          <button part="highlight" type="button" data-verb="highlight" aria-pressed=${clauses.includes('highlight') ? 'true' : 'false'}
-            title="Highlight this" @click=${() => this.apply(node.row.mosaicaId, 'highlight')}>${icon('highlight', 13)}</button>
-          <button part="filter" type="button" data-verb="filter" aria-pressed=${clauses.includes('filter') ? 'true' : 'false'}
-            title="Filter to this" @click=${() => this.apply(node.row.mosaicaId, 'filter')}>${icon('filter', 13)}</button>
-          ${
+          aria-label=${open ? `Collapse ${name.from === 'none' ? 'row' : text}` : `Expand ${name.from === 'none' ? 'row' : text}`}
+          @click=${() => this.toggle(node)}>${node.loading ? html `<span class="spinner"></span>` : icon(open ? 'chev' : 'chevr', 12)}</button>
+        <button part="name" type="button" ?data-key-name=${name.from === 'key'} ?data-unnamed=${name.from === 'none'}
+          aria-label=${`Highlight ${text}`} aria-pressed=${pressed('highlight')} title="Highlight"
+          @click=${() => this.apply(id, 'highlight')}>${text}</button>
+        <span class="figures">
+          <span part="actions" @focusin=${() => this.shownAgain(node.path)}>
+            <button part="highlight" type="button" data-verb="highlight" aria-label=${`Highlight ${text}`} aria-pressed=${pressed('highlight')}
+              title="Highlight this" @click=${() => this.apply(id, 'highlight')}>${icon('highlight', 13)}</button>
+            <button part="filter" type="button" data-verb="filter" aria-label=${`Filter to ${text}`} aria-pressed=${pressed('filter')}
+              title="Filter to this" @click=${() => this.apply(id, 'filter')}>${icon('filter', 13)}</button>
+            ${
             // A filter layer draws nothing, so there is nothing to fit to.
             drawn
-                ? html `<button part="fit" type="button" title="Fit the map to it"
-                  @click=${() => emit(this, 'mosaica-artifactfit', { id: idString(node.row.mosaicaId) })}>${icon('fit', 13)}</button>`
+                ? html `<button part="fit" type="button" aria-label=${`Fit the map to ${text}`} title="Fit the map to it"
+                    @click=${() => emit(this, 'mosaica-artifactfit', { id: idString(id) })}>${icon('fit', 13)}</button>`
                 : nothing}
+          </span>
+          <span part="counts" aria-hidden="true">
+            ${node.row.matchedCount !== null
+                ? html `<mosaica-count part="count-matched" .masked=${masked(node.row.matchedCount)}></mosaica-count>/`
+                : nothing}<mosaica-count part="count-masked" .masked=${masked(node.row.maskedCount)}></mosaica-count>
+          </span><span class="sr-only">${spokenCounts(node.row)}</span>
         </span>
+        ${clauses.map((verb) => html `<button part="dismiss" type="button" data-verb=${verb} aria-label=${verb === 'highlight' ? `Stop highlighting ${text}` : `Stop filtering to ${text}`}
+              title=${verb === 'highlight' ? 'Stop highlighting' : 'Stop filtering'} @click=${() => this.apply(id, verb)}>${icon('close', 12)}</button>`)}
       </div>
-      ${also.length > 0 ? html `<div part="also" style=${`--depth:${depth}`}>also under ${also.map((p) => this.nameOf(p)).join(', ')}</div>` : nothing}
+      ${also.length > 0 ? html `<div part="also" style=${`--depth:${depth}`}>also under ${calledList(also)}</div>` : nothing}
       ${node.refusal ? html `<div part="also" style=${`--depth:${depth}`} data-code=${node.refusal.code}>Children unavailable</div>` : nothing}
-      ${open && node.children
-                ? html `<ul part="children" class="list" style="list-style:none;margin:0;padding:0">
-            ${node.children.map((c) => this.renderNode(c, depth + 1, layer, filtered))}
+      ${open
+                ? html `<ul part="children" aria-label=${`Children of ${text}`}>
+            ${node.children.map((c) => this.renderNode(c, depth + 1, layer))}
             ${node.next
-                    ? html `<li><button part="more" class="more-link" style=${`--depth:${depth + 1}`} type="button" @click=${() => void this.expand(node, true)}>More</button></li>`
+                    ? html `<li><button part="more" class="more-link" style=${`--depth:${depth + 1}`} type="button" @click=${(e) => void this.more(e.currentTarget, node)}>More</button></li>`
                     : nothing}
           </ul>`
                 : nothing}