@mosaicajs/components 0.3.0 → 0.4.0

package/dist/cluster-filter.d.ts

@@ -1,19 +1,19 @@
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type BrowseRow, type Refusal } from '@mosaicajs/client';
 import { MosaicaElement } from './base.js';
-/** One cluster the list offers: its row and, once walked, its path of parents' names, nearest last. */
+/** One cluster the list offers. */
 type Offer = {
     row: BrowseRow;
-    path: string[] | null;
-    beyond: boolean;
 };
 /**
  * Use `<mosaica-cluster-filter>` when you want to search a layer's clusters without the field card
  * around it. Set `layer` to a layer `meta.layers` lists.
  *
  * With the box empty, the list offers the layer's top-level clusters, largest first. Typing
- * searches the cluster names at every level. In the list, the arrow keys move between rows, Enter
- * chooses one, and Escape closes the list.
+ * searches the cluster names at every level. The arrow keys move between the rows, as do Home and
+ * End once one is reached. Enter chooses the row they reached, and Escape closes the list. A line
+ * under the box says how many clusters are listed, or why none is, and that they are loading once
+ * that has taken a quarter of a second.
  *
  * Each row counts the items the filters match in that cluster without applying this layer's own
  * filter, so a cluster the viewer has filtered out still shows its count. Choosing a row filters
@@ -26,12 +26,15 @@ type Offer = {
  *   row added or removed a `member_of` clause.
  * @csspart entry - The search box.
  * @csspart values - The list, while it is open.
- * @csspart option - One cluster in the list, with `data-id` and `aria-selected` while its clause is
- *   on.
- * @csspart name - A row's name, with `data-unnamed` if the cluster has none.
- * @csspart path - A row's path of parents' names.
+ * @csspart option - One cluster in the list, with `data-id`, `aria-selected` while its clause is
+ *   on, and `data-active` on the one the arrow keys reached.
+ * @csspart name - A row's name. Where the cluster has none it is the cluster's key, with
+ *   `data-key-name`, and where it has no key either it is the word Unnamed, with `data-unnamed`.
+ * @csspart path - A row's path of its parents' names, each step naming every served parent of the
+ *   step below it, by its key where it has no name.
  * @csspart value-count - A row's exact count.
- * @csspart more - The note under the box when nothing matches, or when more match than are listed.
+ * @csspart more - The note under the box when there is nothing to list, or when more match than
+ *   are listed.
  * @csspart refusal - The words "Clusters unavailable", with `data-code`, if the list was refused.
  */
 export declare class MosaicaClusterFilter extends MosaicaElement {
@@ -55,7 +58,7 @@ export declare class MosaicaClusterFilter extends MosaicaElement {
     accessor search: string;
     /** Whether the list is open. @internal */
     accessor listOpen: boolean;
-    /** The row the arrow keys reached, by `mosaicaId`; `null` is the first that can be chosen. @internal */
+    /** The row the arrow keys reached, by `mosaicaId`; `null` before they reach one. @internal */
     accessor activeId: bigint | null;
     /** The top-level clusters, once fetched. @internal */
     accessor tops: Offer[] | null;
@@ -68,11 +71,11 @@ export declare class MosaicaClusterFilter extends MosaicaElement {
     /** @internal */
     accessor refusal: Refusal | null;
     private readonly counts;
+    /** Whether the open list's clusters have been awaited long enough to say so. */
+    private readonly awaited;
     private readonly floating;
-    /** Every artifact's row as the field has met it, for names and parents. */
-    private readonly rows;
-    /** Each artifact's served parents as a children-form page gave them. */
-    private readonly parentsOf;
+    /** The names of the offered clusters' parents, walked {@link PATH_DEPTH} steps up. */
+    private readonly paths;
     /** The layer and view the top-level clusters were fetched for. */
     private fetchedFor;
     private searchTimer;
@@ -81,21 +84,21 @@ export declare class MosaicaClusterFilter extends MosaicaElement {
     protected resetServerData(): void;
     disconnectedCallback(): void;
     private declared;
-    /** The levels a request addresses on the layer: each declared level on a levelled one, else one request with none. */
-    private levels;
+    /** The first declared level of a levelled layer, whose clusters are the top level; `undefined` on any other. */
+    private firstLevel;
     /** One browse page of the layer. Counts come from the aggregate, so the page is asked unfiltered. */
     private browse;
+    /** Offer the rows of a page, and walk the parents of each. */
     private offer;
+    /** An offer's path of parents, once walked; empty for a cluster with none. */
+    private pathOf;
     /** Fetch the top-level clusters, once per layer and view. */
     private fetchTops;
-    /** Search the layer's names for `q`, at every level of a levelled layer, and walk each match's path. */
-    private searchFor;
     /**
-     * Fill in an offer's path, its first parent's name and so on up to {@link PATH_DEPTH} parents. On
-     * a layer whose children form needs no level, a missing parent is asked for; on a levelled layer
-     * only parents already met are named.
+     * Search the layer's names for `q`, and walk each match's path. One request with no level
+     * searches every level of a levelled layer.
      */
-    private walk;
+    private searchFor;
     /** The clauses this field holds: the layer's, in its position. */
     private held;
     private toggle;
@@ -109,8 +112,9 @@ export declare class MosaicaClusterFilter extends MosaicaElement {
     /** The rows and width {@link fitPaths} last measured. */
     private pathsMeasured;
     /**
-     * Name as many of each listed path's nearest parents as fit its line, dropping whole names from
-     * the left. Measured with the line's own font, after the list is placed.
+     * Where a path is kept to one line, name as many of each listed path's nearest parents as fit
+     * it, dropping whole names from the left. Measured with the line's own font, after the list is
+     * placed. A path that wraps names them all.
      */
     private fitPaths;
     protected updated(changed: PropertyValues<this>): void;

package/dist/cluster-filter.js

@@ -38,10 +38,12 @@ import { repeat } from 'lit/directives/repeat.js';
 import { artifactName, withMember, withoutMember } from '@mosaicajs/client';
 import { refusalOf } from '@mosaicajs/client/internal';
 import { HeldAggregate, artifactGroupings, countsByKey } from './aggregate.js';
-import { MosaicaElement, UNNAMED, emit, idString } from './base.js';
+import { MosaicaElement, called, emit, idString, labelOf } from './base.js';
 import { FloatingList } from './float.js';
 import { attachContextRoot, defineOnce } from './define.js';
 import { icon } from './icons.js';
+import { ClusterPaths } from './paths.js';
+import { NamedQuery } from './states.js';
 import { chrome, tokens } from './tokens.js';
 /** How long typing must be quiet before a name search is sent. */
 const SEARCH_DEBOUNCE_MS = 250;
@@ -51,8 +53,8 @@ const TOP_LEVEL_ROWS = 50;
  * A path of `n` of its nearest parents, nearest last, led by an ellipsis where parents further up
  * are left out.
  */
-function pathText(path, beyond, n) {
-    return `${beyond || n < path.length ? '… › ' : ''}${path.slice(path.length - n).join(' › ')}`;
+function pathText(path, n) {
+    return `${path.beyond || n < path.steps.length ? '… › ' : ''}${path.steps.slice(path.steps.length - n).join(' › ')}`;
 }
 /** How many parents a match's path is walked up, nearest first. */
 const PATH_DEPTH = 3;
@@ -61,8 +63,10 @@ const PATH_DEPTH = 3;
  * around it. Set `layer` to a layer `meta.layers` lists.
  *
  * With the box empty, the list offers the layer's top-level clusters, largest first. Typing
- * searches the cluster names at every level. In the list, the arrow keys move between rows, Enter
- * chooses one, and Escape closes the list.
+ * searches the cluster names at every level. The arrow keys move between the rows, as do Home and
+ * End once one is reached. Enter chooses the row they reached, and Escape closes the list. A line
+ * under the box says how many clusters are listed, or why none is, and that they are loading once
+ * that has taken a quarter of a second.
  *
  * Each row counts the items the filters match in that cluster without applying this layer's own
  * filter, so a cluster the viewer has filtered out still shows its count. Choosing a row filters
@@ -75,12 +79,15 @@ const PATH_DEPTH = 3;
  *   row added or removed a `member_of` clause.
  * @csspart entry - The search box.
  * @csspart values - The list, while it is open.
- * @csspart option - One cluster in the list, with `data-id` and `aria-selected` while its clause is
- *   on.
- * @csspart name - A row's name, with `data-unnamed` if the cluster has none.
- * @csspart path - A row's path of parents' names.
+ * @csspart option - One cluster in the list, with `data-id`, `aria-selected` while its clause is
+ *   on, and `data-active` on the one the arrow keys reached.
+ * @csspart name - A row's name. Where the cluster has none it is the cluster's key, with
+ *   `data-key-name`, and where it has no key either it is the word Unnamed, with `data-unnamed`.
+ * @csspart path - A row's path of its parents' names, each step naming every served parent of the
+ *   step below it, by its key where it has no name.
  * @csspart value-count - A row's exact count.
- * @csspart more - The note under the box when nothing matches, or when more match than are listed.
+ * @csspart more - The note under the box when there is nothing to list, or when more match than
+ *   are listed.
  * @csspart refusal - The words "Clusters unavailable", with `data-code`, if the list was refused.
  */
 let MosaicaClusterFilter = (() => {
@@ -186,6 +193,11 @@ let MosaicaClusterFilter = (() => {
         background: var(--_mosaica-surface-2);
         font-weight: 600;
       }
+      /* The box keeps focus, so the row the arrow keys reached is ringed as if it had it. */
+      [part~='option'][data-active] {
+        outline: 2px solid var(--_mosaica-focus);
+        outline-offset: -2px;
+      }
       .opt {
         display: flex;
         flex-direction: column;
@@ -193,11 +205,12 @@ let MosaicaClusterFilter = (() => {
       }
       [part='name'],
       [part='path'] {
+        white-space: var(--_mosaica-long-text, nowrap);
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
+        overflow-wrap: anywhere;
       }
-      /* Shortened from the left a whole name at a time, so the nearest parents stay; see pathText. */
+      /* On one line, shortened from the left a whole name at a time, so the nearest parents stay; see pathText. */
       [part='path'] {
         font-size: 12px;
         font-weight: 400;
@@ -216,6 +229,14 @@ let MosaicaClusterFilter = (() => {
         font-size: 12px;
         color: var(--_mosaica-ink-3);
       }
+      .skel {
+        margin-top: 8px;
+      }
+      @media (forced-colors: active) {
+        [part~='option'][data-active] {
+          outline-color: Highlight;
+        }
+      }
     `
         ];
         #layer_accessor_storage = __runInitializers(this, _layer_initializers, '');
@@ -243,7 +264,7 @@ let MosaicaClusterFilter = (() => {
         get listOpen() { return this.#listOpen_accessor_storage; }
         set listOpen(value) { this.#listOpen_accessor_storage = value; }
         #activeId_accessor_storage = (__runInitializers(this, _listOpen_extraInitializers), __runInitializers(this, _activeId_initializers, null));
-        /** The row the arrow keys reached, by `mosaicaId`; `null` is the first that can be chosen. @internal */
+        /** The row the arrow keys reached, by `mosaicaId`; `null` before they reach one. @internal */
         get activeId() { return this.#activeId_accessor_storage; }
         set activeId(value) { this.#activeId_accessor_storage = value; }
         #tops_accessor_storage = (__runInitializers(this, _activeId_extraInitializers), __runInitializers(this, _tops_initializers, null));
@@ -259,15 +280,15 @@ let MosaicaClusterFilter = (() => {
         get refusal() { return this.#refusal_accessor_storage; }
         set refusal(value) { this.#refusal_accessor_storage = value; }
         counts = (__runInitializers(this, _refusal_extraInitializers), new HeldAggregate('clusters'));
+        /** Whether the open list's clusters have been awaited long enough to say so. */
+        awaited = new NamedQuery(this);
         floating = new FloatingList(() => {
             const list = this.renderRoot.querySelector('[part="values"]');
             const anchor = this.renderRoot.querySelector('.combo');
             return list && anchor ? { list, anchor } : null;
         });
-        /** Every artifact's row as the field has met it, for names and parents. */
-        rows = new Map();
-        /** Each artifact's served parents as a children-form page gave them. */
-        parentsOf = new Map();
+        /** The names of the offered clusters' parents, walked {@link PATH_DEPTH} steps up. */
+        paths = new ClusterPaths(() => this.requestUpdate());
         /** The layer and view the top-level clusters were fetched for. */
         fetchedFor = '';
         searchTimer = null;
@@ -278,8 +299,7 @@ let MosaicaClusterFilter = (() => {
             this.tops = null;
             this.found = null;
             this.refusal = null;
-            this.rows.clear();
-            this.parentsOf.clear();
+            this.paths.reset();
             this.fetchedFor = '';
         }
         disconnectedCallback() {
@@ -288,15 +308,16 @@ let MosaicaClusterFilter = (() => {
             this.searchTimer = null;
             this.counts.set(null, null);
             this.floating.stop();
+            this.awaited.stop();
             super.disconnectedCallback();
         }
         declared() {
             return this.resolvedStore?.get('meta')?.layers.find((l) => l.name === this.layer) ?? null;
         }
-        /** The levels a request addresses on the layer: each declared level on a levelled one, else one request with none. */
-        levels(layer) {
+        /** The first declared level of a levelled layer, whose clusters are the top level; `undefined` on any other. */
+        firstLevel(layer) {
             const levelled = layer.hierarchy.kind === 'stacked' || layer.hierarchy.kind === 'tiered';
-            return levelled && layer.levels.length > 0 ? layer.levels.map((l) => l.level) : [undefined];
+            return levelled ? layer.levels[0]?.level : undefined;
         }
         /** One browse page of the layer. Counts come from the aggregate, so the page is asked unfiltered. */
         browse(req) {
@@ -307,9 +328,17 @@ let MosaicaClusterFilter = (() => {
             const { level, ...rest } = req;
             return s.browse({ ...rest, layer: this.layer, filters: null, limit: Math.max(1, Math.min(req.limit, ceiling)), ...(level === undefined ? {} : { level }) });
         }
-        offer(row) {
-            this.rows.set(row.mosaicaId, row);
-            return { row, path: row.parentIds.length === 0 ? [] : null, beyond: false };
+        /** Offer the rows of a page, and walk the parents of each. */
+        offer(rows, layer) {
+            const s = this.resolvedStore;
+            this.paths.meet(rows);
+            if (s)
+                this.paths.ask(s, layer, rows.map((r) => r.mosaicaId), PATH_DEPTH);
+            return rows.map((row) => ({ row }));
+        }
+        /** An offer's path of parents, once walked; empty for a cluster with none. */
+        pathOf(o) {
+            return this.paths.path(o.row.mosaicaId, PATH_DEPTH);
         }
         /** Fetch the top-level clusters, once per layer and view. */
         fetchTops() {
@@ -322,12 +351,12 @@ let MosaicaClusterFilter = (() => {
                 return;
             this.fetchedFor = key;
             const epoch = this.epoch;
-            const level = this.levels(layer)[0];
+            const level = this.firstLevel(layer);
             this.browse({ limit: TOP_LEVEL_ROWS, ...(level === undefined ? {} : { level }) })
                 .then((page) => {
                 if (epoch !== this.epoch)
                     return;
-                this.tops = page.artifacts.map((r) => this.offer(r));
+                this.tops = this.offer(page.artifacts, layer);
                 this.refusal = null;
             })
                 .catch((error) => {
@@ -339,23 +368,22 @@ let MosaicaClusterFilter = (() => {
                 this.fetchedFor = '';
             });
         }
-        /** Search the layer's names for `q`, at every level of a levelled layer, and walk each match's path. */
+        /**
+         * Search the layer's names for `q`, and walk each match's path. One request with no level
+         * searches every level of a levelled layer.
+         */
         searchFor(q) {
             const layer = this.declared();
             if (!layer)
                 return;
             const epoch = this.epoch;
             const limit = this.resolvedStore?.get('meta')?.selection.maxBrowseRows ?? 50;
-            Promise.all(this.levels(layer).map((level) => this.browse({ q, limit: Math.min(limit, 50), ...(level === undefined ? {} : { level }) })))
-                .then((pages) => {
+            this.browse({ q, limit: Math.min(limit, 50) })
+                .then((page) => {
                 if (epoch !== this.epoch || this.search.trim() !== q)
                     return;
-                const offers = pages.flatMap((p) => p.artifacts.map((r) => this.offer(r)));
-                this.found = { q, offers, more: pages.some((p) => p.next !== null) };
+                this.found = { q, offers: this.offer(page.artifacts, layer), more: page.next !== null };
                 this.refusal = null;
-                const walkable = layer.hierarchy.kind === 'nested' || layer.hierarchy.kind === 'dag';
-                for (const o of offers)
-                    void this.walk(o, walkable, epoch);
             })
                 .catch((error) => {
                 if (epoch !== this.epoch)
@@ -364,38 +392,6 @@ let MosaicaClusterFilter = (() => {
                 this.found = { q, offers: [], more: false };
             });
         }
-        /**
-         * Fill in an offer's path, its first parent's name and so on up to {@link PATH_DEPTH} parents. On
-         * a layer whose children form needs no level, a missing parent is asked for; on a levelled layer
-         * only parents already met are named.
-         */
-        async walk(o, ask, epoch) {
-            const names = [];
-            let at = o.row;
-            for (let i = 0; i < PATH_DEPTH && at.parentIds.length > 0; i++) {
-                const up = at.parentIds[0];
-                let parent = this.rows.get(up);
-                if (!parent && ask) {
-                    let held = this.parentsOf.get(at.mosaicaId);
-                    if (!held) {
-                        held = this.browse({ parent: at.mosaicaId, limit: 1 }).then((p) => p.parents, () => []);
-                        this.parentsOf.set(at.mosaicaId, held);
-                    }
-                    for (const r of await held)
-                        this.rows.set(r.mosaicaId, r);
-                    parent = this.rows.get(up);
-                }
-                if (!parent)
-                    break;
-                names.unshift(artifactName(parent) ?? UNNAMED);
-                at = parent;
-            }
-            if (epoch !== this.epoch)
-                return;
-            o.path = names;
-            o.beyond = at.parentIds.length > 0;
-            this.requestUpdate();
-        }
         /** The clauses this field holds: the layer's, in its position. */
         held() {
             return (this.resolvedStore?.get('filters').members ?? []).filter((m) => m.layer === this.layer && m.verb === 'filter');
@@ -409,15 +405,15 @@ let MosaicaClusterFilter = (() => {
                 this.search = '';
                 this.found = null;
                 this.listOpen = false;
-                this.choose({ id: idString(row.mosaicaId), name: artifactName(row), path: offer.path && offer.path.length > 0 ? pathText(offer.path, offer.beyond, offer.path.length) : '', rung: row.rung });
+                const path = this.pathOf(offer);
+                this.choose({ id: idString(row.mosaicaId), name: artifactName(row), path: path && path.steps.length > 0 ? pathText(path, path.steps.length) : '', rung: row.rung });
                 return;
             }
             const members = s.get('filters').members;
             const on = this.held().some((m) => m.artifact === row.mosaicaId && !m.outside);
-            const name = artifactName(row);
             s.setMembers(on
                 ? withoutMember(members, this.layer, row.mosaicaId, 'filter')
-                : withMember(members, { layer: this.layer, artifact: row.mosaicaId, outside: false, verb: 'filter', ...(name === null ? {} : { label: name }) }));
+                : withMember(members, { layer: this.layer, artifact: row.mosaicaId, outside: false, verb: 'filter', ...labelOf(called(row.name, row.key)) }));
             emit(this, 'mosaica-clausechange', { id: idString(row.mosaicaId), layer: this.layer, outside: false, verb: 'filter', on: !on });
             this.search = '';
             this.found = null;
@@ -459,30 +455,33 @@ let MosaicaClusterFilter = (() => {
         /** The rows and width {@link fitPaths} last measured. */
         pathsMeasured = '';
         /**
-         * Name as many of each listed path's nearest parents as fit its line, dropping whole names from
-         * the left. Measured with the line's own font, after the list is placed.
+         * Where a path is kept to one line, name as many of each listed path's nearest parents as fit
+         * it, dropping whole names from the left. Measured with the line's own font, after the list is
+         * placed. A path that wraps names them all.
          */
         fitPaths() {
             // Only while the list shows, and only when its rows or its width changed since last measured.
             const shown = this.listOpen ? Array.from(this.renderRoot.querySelectorAll('[part="path"][data-id]')) : [];
-            const key = `${shown[0]?.clientWidth ?? 0}|${shown.map((el) => `${el.dataset.id}:${el.title}`).join(',')}`;
+            const oneLine = shown[0] ? getComputedStyle(shown[0]).whiteSpace === 'nowrap' : false;
+            const key = `${oneLine}|${shown[0]?.clientWidth ?? 0}|${shown.map((el) => `${el.dataset.id}:${el.title}`).join(',')}`;
             if (shown.length === 0 || key === this.pathsMeasured)
                 return;
             this.pathsMeasured = key;
-            const context = typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
-            if (!context)
-                return;
+            const context = !oneLine || typeof document === 'undefined' ? null : document.createElement('canvas').getContext('2d');
             let changed = false;
             for (const el of shown) {
                 const id = BigInt(el.dataset.id);
                 const o = this.listed()?.find((x) => x.row.mosaicaId === id);
-                if (!o?.path || el.clientWidth === 0)
+                const path = o ? this.pathOf(o) : null;
+                if (!path)
                     continue;
-                context.font = getComputedStyle(el).font;
-                let n = o.path.length;
-                while (n > 1 && context.measureText(pathText(o.path, o.beyond, n)).width > el.clientWidth)
-                    n -= 1;
-                if ((this.pathFits.get(id) ?? o.path.length) !== n) {
+                let n = path.steps.length;
+                if (context && el.clientWidth > 0) {
+                    context.font = getComputedStyle(el).font;
+                    while (n > 1 && context.measureText(pathText(path, n)).width > el.clientWidth)
+                        n -= 1;
+                }
+                if ((this.pathFits.get(id) ?? path.steps.length) !== n) {
                     this.pathFits.set(id, n);
                     changed = true;
                 }
@@ -494,6 +493,9 @@ let MosaicaClusterFilter = (() => {
             super.updated(changed);
             this.floating.update();
             this.fitPaths();
+            if (changed.has('activeId'))
+                this.renderRoot.querySelector('[part~="option"][data-active]')?.scrollIntoView({ block: 'nearest' });
+            this.awaited.track(this.listOpen && this.isConnected && this.refusal === null && this.listed() === null);
             // Counted only while the list is open: a closed list shows no counts, so asks for none.
             const layer = this.declared();
             const limits = this.resolvedStore?.get('meta')?.selection;
@@ -514,30 +516,33 @@ let MosaicaClusterFilter = (() => {
             const listed = this.listed();
             // Largest first once the counts land; the server's order until then.
             const offers = listed === null ? [] : counts === null ? listed : [...listed].sort((a, b) => (countOf(b) ?? -1) - (countOf(a) ?? -1));
-            const active = offers.find((o) => o.row.mosaicaId === this.activeId) ?? offers[0] ?? null;
-            const move = (by) => {
-                if (offers.length === 0)
-                    return;
-                const at = active ? offers.indexOf(active) : -1;
-                this.activeId = offers[(at + by + offers.length) % offers.length].row.mosaicaId;
+            // The row Enter acts on: the one the arrow keys reached. Until they reach one there is none, so
+            // Enter does not take whichever row the counts put first as they land.
+            const active = offers.find((o) => o.row.mosaicaId === this.activeId) ?? null;
+            const at = active ? offers.indexOf(active) : -1;
+            const reach = (i) => {
+                if (offers.length > 0)
+                    this.activeId = offers[(i + offers.length) % offers.length].row.mosaicaId;
             };
             const open = this.listOpen && offers.length > 0;
             const option = (o) => {
-                const name = artifactName(o.row);
+                const name = called(o.row.name, o.row.key);
                 const count = countOf(o);
-                const full = o.path && o.path.length > 0 ? pathText(o.path, o.beyond, o.path.length) : '';
-                const path = o.path && o.path.length > 0 ? pathText(o.path, o.beyond, this.pathFits.get(o.row.mosaicaId) ?? o.path.length) : '';
+                const walked = this.pathOf(o);
+                const full = walked && walked.steps.length > 0 ? pathText(walked, walked.steps.length) : '';
+                const path = walked && walked.steps.length > 0 ? pathText(walked, this.pathFits.get(o.row.mosaicaId) ?? walked.steps.length) : '';
                 return html `<button type="button" part="option" role="option" id=${`c-${o.row.mosaicaId}`} tabindex="-1" data-id=${idString(o.row.mosaicaId)} ?data-active=${o === active}
         aria-selected=${on.has(o.row.mosaicaId) ? 'true' : 'false'}
         @mousedown=${(e) => e.preventDefault()} @click=${() => this.toggle(o)}>
-        <span class="opt"><span part="name" ?data-unnamed=${name === null}>${name ?? UNNAMED}</span>${path ? html `<span part="path" data-id=${idString(o.row.mosaicaId)} title=${full}><bdi>${path}</bdi></span>` : nothing}</span>
+        <span class="opt"><span part="name" ?data-key-name=${name.from === 'key'} ?data-unnamed=${name.from === 'none'}>${name.text}</span>${path ? html `<span part="path" data-id=${idString(o.row.mosaicaId)} title=${full}><bdi>${path}</bdi></span>` : nothing}</span>
         ${count === undefined ? nothing : html `<span part="value-count">${count.toLocaleString('en-GB')}</span>`}
       </button>`;
             };
+            const shown = this.placeholder || 'Type a name';
             const box = html `<div class="combo">
-      <div class="input">${icon('search', 12)}<input id="ctl" part="entry" type="search" autocomplete="off" placeholder=${this.placeholder || 'Type a name'}
-        role="combobox" aria-expanded=${open ? 'true' : 'false'} aria-controls="values" aria-activedescendant=${open && active ? `c-${active.row.mosaicaId}` : nothing}
-        aria-label=${`${title}: find a cluster`} .value=${this.search}
+      <div class="input">${icon('search', 12)}<input id="ctl" part="entry" type="search" autocomplete="off" placeholder=${shown}
+        role="combobox" aria-autocomplete="list" aria-expanded=${open ? 'true' : 'false'} aria-controls="values" aria-activedescendant=${open && active ? `c-${active.row.mosaicaId}` : nothing}
+        aria-label=${`${title}: ${shown}`} .value=${this.search}
         @focus=${() => {
                 this.fetchTops();
                 this.listOpen = true;
@@ -548,7 +553,12 @@ let MosaicaClusterFilter = (() => {
                 if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                     e.preventDefault();
                     this.listOpen = true;
-                    move(e.key === 'ArrowDown' ? 1 : -1);
+                    reach(e.key === 'ArrowDown' ? at + 1 : Math.max(at, 0) - 1);
+                }
+                else if ((e.key === 'Home' || e.key === 'End') && open && active) {
+                    // Before the arrow keys reach a row, Home and End move in the text.
+                    e.preventDefault();
+                    reach(e.key === 'Home' ? 0 : -1);
                 }
                 else if (e.key === 'Enter') {
                     if (open && active)
@@ -559,19 +569,26 @@ let MosaicaClusterFilter = (() => {
                     this.listOpen = false;
                 }
             }} /></div>
-      ${open ? html `<div part="values" id="values" popover="manual" role="listbox" aria-label=${title}>${repeat(offers, (o) => o.row.mosaicaId, option)}</div>` : nothing}
+      ${open ? html `<div part="values" id="values" popover="manual" role="listbox" aria-multiselectable=${this.choose ? nothing : 'true'} aria-label=${title}>${repeat(offers, (o) => o.row.mosaicaId, option)}</div>` : nothing}
     </div>`;
             const typed = this.search.trim() !== '';
-            const note = this.refusal
+            // How many clusters are listed, or why none is, for a reader as the list changes under the box.
+            const said = this.refusal
                 ? html `<span part="refusal" data-code=${this.refusal.code}>Clusters unavailable</span>`
-                : typed && this.found?.q === this.search.trim()
-                    ? this.found.offers.length === 0
-                        ? html `<span part="more">No cluster by that name</span>`
-                        : this.found.more
-                            ? html `<span part="more">Type more to narrow the list</span>`
-                            : nothing
-                    : nothing;
-            return html `${box}${note}`;
+                : listed === null
+                    ? this.listOpen
+                        ? html `<span class="skel" aria-hidden="true"></span>${this.awaited.named ? html `<span class="sr-only">Loading clusters</span>` : nothing}`
+                        : nothing
+                    : offers.length === 0
+                        ? typed
+                            ? html `<span part="more">No cluster by that name</span>`
+                            : this.listOpen
+                                ? html `<span part="more">No clusters</span>`
+                                : nothing
+                        : !open
+                            ? nothing
+                            : html `<span class="sr-only">${offers.length} ${offers.length === 1 ? 'cluster' : 'clusters'} listed. </span>${typed && this.found?.more ? html `<span part="more">Type more to narrow the list</span>` : nothing}`;
+            return html `${box}<div role="status">${said}</div>`;
         }
     };
 })();

package/dist/colour-editor.d.ts

@@ -64,8 +64,12 @@ export declare class MosaicaColourEditor extends MosaicaElement {
     static styles: import("lit").CSSResult[];
     /** What the dialog colours: a rendered category column, or `cluster:<layer>`. */
     accessor field: string;
-    /** The level of a `stacked` or `tiered` layer whose clusters are listed. `null` is the coarsest level. */
-    accessor level: number | null;
+    /**
+     * The level each `stacked` or `tiered` layer's clusters are listed at, keyed by layer name. A
+     * layer with no entry is listed at the level the map draws it at, which follows the zoom where its
+     * levels declare no zoom range. Set it as a property; it has no attribute.
+     */
+    accessor clusterLevels: ReadonlyMap<string, number>;
     /** Whether the dialog is open. @internal */
     accessor isOpen: boolean;
     /** The ticked rows, by key. @internal */
@@ -81,6 +85,8 @@ export declare class MosaicaColourEditor extends MosaicaElement {
     private opener;
     /** The frame the paths of the rows in sight are next asked for in, while one is waiting. */
     private pathFrame;
+    /** The level the layer was listed at in the last update, chosen or followed. */
+    private listedAt;
     /** Open the dialog. */
     show(): Promise<void>;
     /** Close the dialog and return focus to the element that had it before. */
@@ -89,11 +95,14 @@ export declare class MosaicaColourEditor extends MosaicaElement {
     protected resetServerData(): void;
     disconnectedCallback(): void;
     /**
-     * A change of field or level drops what was found and ticked and closes the picker, since each
-     * names the last field's values; the dialog closes where the field is now nothing it can edit.
+     * A change of field or of the level its layer is listed at, chosen or followed as the map zooms,
+     * drops what was found and ticked and closes the picker, since each names the last field's
+     * values; the dialog closes where the field is now nothing it can edit.
      */
     protected willUpdate(changed: PropertyValues<this>): void;
     private get layerName();
+    /** The level `layer` is listed at: its entry in `clusterLevels`, else the level the map draws it at. */
+    private levelOf;
     /** The layer listed, where `field` names one the points can be coloured by. */
     private layerOf;
     /** Whether `field` is a rendered category column. */
@@ -123,6 +132,8 @@ export declare class MosaicaColourEditor extends MosaicaElement {
     private palette;
     private pick;
     private tick;
+    /** Untick every row. The bar Deselect is on goes with them, so focus moves to the first row's checkbox. */
+    private deselect;
     /** A match the search box found: its row gets focus where the list holds it; else it goes at the top. */
     private onFound;
     private onKey;