@mosaicajs/components 0.2.0 → 0.4.0

package/dist/mosaica-components.js.sri

@@ -1 +1 @@
-sha384-6EQhQsMgHJEiAjNNj1/HvEuFRrHLIEDd7N47ufKkXI3Zupi3ISVLqPzMNRZTn3ar
+sha384-pA1hzsfbruonlvsvA6of9R0WEX1tWRvy8k5/KB6GJUoHlGUKGJ9dyezet7X6Qoow

package/dist/mosaica-components.json

@@ -1,5 +1,5 @@
 {
   "file": "mosaica-components.js",
-  "bytes": 1955994,
-  "integrity": "sha384-6EQhQsMgHJEiAjNNj1/HvEuFRrHLIEDd7N47ufKkXI3Zupi3ISVLqPzMNRZTn3ar"
+  "bytes": 2042305,
+  "integrity": "sha384-pA1hzsfbruonlvsvA6of9R0WEX1tWRvy8k5/KB6GJUoHlGUKGJ9dyezet7X6Qoow"
 }

package/dist/parts.d.ts

@@ -11,18 +11,18 @@
  */
 export declare const PARTS: {
     readonly map: readonly ["attribution", "canvas", "controls", "density-key", "note", "overlay", "region-tag", "tooltip", ...string[]];
-    readonly status: readonly ["card", "strip", "count-shown", "count-matched", "count-highlighted", "count-of", "count-visible", ...string[]];
+    readonly status: readonly ["cancel", "card", "spinner", "strip", "count-shown", "count-matched", "count-highlighted", "count-of", "count-visible", ...string[]];
     readonly 'view-picker': readonly ["field", "select"];
     readonly 'key-picker': readonly ["entry", "field", "label", "select", "step"];
     readonly 'layer-picker': readonly ["entry", "name", "note", "title", ...string[]];
-    readonly filter: readonly ["bar", "entry", "mode", "more", "operator", "operators", "refusal", "tick", "value-count", "values"];
+    readonly filter: readonly ["bar", "entry", "mode", "more", "operator", "operators", "refusal", "spinner", "tick", "value-count", "values"];
     readonly 'cluster-filter': readonly ["entry", "more", "name", "option", "path", "refusal", "value-count", "values"];
     readonly 'filter-panel': readonly ["add", "add-list", "add-note", "add-option", "add-search", "all", "all-count", "card", "chip", "chips", "clear", "clear-highlight", "edit", "subject", "subject-count", "subject-key", "subject-name", ...string[]];
-    readonly 'field-card': readonly ["axis", "band", "bar-match", "bar-subject", "bin", "brush", "brush-filter", "brush-highlight", "choice", "colour-popover", "count", "filter", "fold", "head", "hex", "highlight", "hue", "level-select", "more", "name", "paint", "path", "plot", "ramp", "reset", "row", "rows", "spark", "sub", "sv", "swatch", "title", "verbs"];
+    readonly 'field-card': readonly ["also", "axis", "band", "bar-match", "bar-subject", "bin", "brush", "brush-filter", "brush-from", "brush-highlight", "brush-to", "chip", "chip-name", "chip-remove", "chips", "choice", "colour-popover", "count", "crumb", "crumb-name", "crumbs", "filter", "fold", "head", "hex", "highlight", "hue", "level", "level-select", "more", "name", "paint", "plot", "ramp", "range", "refusal", "remainder", "reset", "row", "rows", "spark", "step", "sub", "sv", "swatch", "title", "verbs"];
     readonly 'colour-editor': readonly ["changed", "check", "choice", "close", "colour-popover", "columns", "count", "deselect", "dialog", "done", "hex", "hue", "name", "path", "reset", "reset-all", "row", "rows", "selected", "set-colour", "sub", "sv", "swatch", "title"];
     readonly hierarchy: readonly ["actions", "also", "children", "count-masked", "count-matched", "counts", "dismiss", "expander", "filter", "fit", "highlight", "layer", "more", "name", "row", "search", "title", "tree", ...string[]];
     readonly selection: readonly ["action", "actions", "count-matched", "count-served", "count-visible", "counts", "item", "items", "label", "reason", "refusal", "retry", "state", "title"];
-    readonly 'item-card': readonly ["close", "copy", "field", "headline", "key", "label", "open", "scoped", "show-all", "subtitle", "title", "value", "view-chip", ...string[]];
+    readonly 'item-card': readonly ["close", "copy", "field", "headline", "image", "key", "label", "more", "open", "scoped", "show-all", "subtitle", "title", "value", "view-chip", ...string[]];
     readonly 'artifact-card': readonly ["child", "children", "close", "content", "count", "filter", "fit", "headline", "highlight", "label", "name", "outside", "parent", "parents", "shape", "title", "value", "verbs", ...string[]];
 };
 /** An element name `PARTS` lists: `map`, `status`, `item-card`, and so on. */

package/dist/parts.js

@@ -13,14 +13,15 @@ const STATE = ['state', 'refusal', 'reason', 'refresh', 'retry', 'reauthorise'];
  */
 export const PARTS = {
     map: ['attribution', 'canvas', 'controls', 'density-key', 'note', 'overlay', 'region-tag', 'tooltip', ...STATE],
-    status: ['card', 'strip', 'count-shown', 'count-matched', 'count-highlighted', 'count-of', 'count-visible', ...STATE],
+    status: ['cancel', 'card', 'spinner', 'strip', 'count-shown', 'count-matched', 'count-highlighted', 'count-of', 'count-visible', ...STATE],
     'view-picker': ['field', 'select'],
     'key-picker': ['entry', 'field', 'label', 'select', 'step'],
     'layer-picker': ['entry', 'name', 'note', 'title', ...STATE],
-    filter: ['bar', 'entry', 'mode', 'more', 'operator', 'operators', 'refusal', 'tick', 'value-count', 'values'],
+    filter: ['bar', 'entry', 'mode', 'more', 'operator', 'operators', 'refusal', 'spinner', 'tick', 'value-count', 'values'],
     'cluster-filter': ['entry', 'more', 'name', 'option', 'path', 'refusal', 'value-count', 'values'],
     'filter-panel': ['add', 'add-list', 'add-note', 'add-option', 'add-search', 'all', 'all-count', 'card', 'chip', 'chips', 'clear', 'clear-highlight', 'edit', 'subject', 'subject-count', 'subject-key', 'subject-name', ...STATE],
     'field-card': [
+        'also',
         'axis',
         'band',
         'bar-match',
@@ -28,27 +29,40 @@ export const PARTS = {
         'bin',
         'brush',
         'brush-filter',
+        'brush-from',
         'brush-highlight',
+        'brush-to',
+        'chip',
+        'chip-name',
+        'chip-remove',
+        'chips',
         'choice',
         'colour-popover',
         'count',
+        'crumb',
+        'crumb-name',
+        'crumbs',
         'filter',
         'fold',
         'head',
         'hex',
         'highlight',
         'hue',
+        'level',
         'level-select',
         'more',
         'name',
         'paint',
-        'path',
         'plot',
         'ramp',
+        'range',
+        'refusal',
+        'remainder',
         'reset',
         'row',
         'rows',
         'spark',
+        'step',
         'sub',
         'sv',
         'swatch',
@@ -58,7 +72,7 @@ export const PARTS = {
     'colour-editor': ['changed', 'check', 'choice', 'close', 'colour-popover', 'columns', 'count', 'deselect', 'dialog', 'done', 'hex', 'hue', 'name', 'path', 'reset', 'reset-all', 'row', 'rows', 'selected', 'set-colour', 'sub', 'sv', 'swatch', 'title'],
     hierarchy: ['actions', 'also', 'children', 'count-masked', 'count-matched', 'counts', 'dismiss', 'expander', 'filter', 'fit', 'highlight', 'layer', 'more', 'name', 'row', 'search', 'title', 'tree', ...STATE],
     selection: ['action', 'actions', 'count-matched', 'count-served', 'count-visible', 'counts', 'item', 'items', 'label', 'reason', 'refusal', 'retry', 'state', 'title'],
-    'item-card': ['close', 'copy', 'field', 'headline', 'key', 'label', 'open', 'scoped', 'show-all', 'subtitle', 'title', 'value', 'view-chip', ...STATE],
+    'item-card': ['close', 'copy', 'field', 'headline', 'image', 'key', 'label', 'more', 'open', 'scoped', 'show-all', 'subtitle', 'title', 'value', 'view-chip', ...STATE],
     'artifact-card': ['child', 'children', 'close', 'content', 'count', 'filter', 'fit', 'headline', 'highlight', 'label', 'name', 'outside', 'parent', 'parents', 'shape', 'title', 'value', 'verbs', ...STATE]
 };
 /**

package/dist/paths.d.ts

@@ -1,24 +1,46 @@
-import { type Layer, type Store } from '@mosaicajs/client';
+import { type BrowseRow, type Layer, type Store } from '@mosaicajs/client';
+import { type Called } from './base.js';
+/** A cluster's path of what its parents are called, nearest last, and whether parents above the first step are left out. */
+export type Path = {
+    steps: string[];
+    beyond: boolean;
+};
 /**
- * The names of clusters' parents on a `nested` or `dag` layer, learnt from browse pages: for each
- * cluster asked about, a page of its served parents, and then one of its first parent's. Each is
- * asked for once until {@link reset}, which also drops an answer still loading.
+ * The names and parents of clusters on a layer with parent edges, learnt from browse pages. For
+ * each cluster asked about, the children form of the cluster names its served parents, and the
+ * walk goes on up from the first of them as each answer lands. A cluster is asked about once until
+ * {@link reset}, which also drops an answer still loading.
  */
 export declare class ClusterPaths {
     private readonly changed;
-    /** Every cluster met on a browse page. */
+    /** Every cluster a page has served. */
     private readonly met;
-    /** Each cluster's served parents, once asked for. */
-    private readonly parentsOf;
+    /** Each cluster's served parents, as the children form gave them. */
+    private readonly parentsGiven;
     private readonly asked;
+    /** The clusters whose children form has been answered or refused. */
+    private readonly done;
+    /** How many steps up each cluster asked about is walked. */
+    private readonly walks;
     private epoch;
     /** `changed` is called as each page lands. */
     constructor(changed: () => void);
     reset(): void;
-    /** The rung a cluster was met at, where a page has named it. */
-    rungOf(id: bigint): number | undefined;
-    /** Ask for the parents of each of `ids` and of its first parent, on a `nested` or `dag` layer. */
-    ask(store: Store, layer: Layer, ids: readonly bigint[]): void;
-    /** A cluster's two nearest parents' names, nearest last, as far up as the pages have named them. */
+    /** Note the rows a page served, whose names and parents are then known. */
+    meet(rows: Iterable<BrowseRow>): void;
+    /** What a cluster is called from the row a page served, or `null` where no page has met it. */
+    nameOf(id: bigint): Called | null;
+    private parentsOf;
+    /** Walk `depth` steps up from each of `ids` on a layer with parent edges, asking for each step's parents not yet met. */
+    ask(store: Store, layer: Layer, ids: readonly bigint[], depth?: number): void;
+    private walk;
+    private fetch;
+    /**
+     * A cluster's path of parents up to `depth` steps, nearest last, as far up as the pages have
+     * named them; `null` while a step's parents are on their way. A step names every served parent
+     * of the step below it, and the step above is taken from the first of them.
+     */
+    path(id: bigint, depth: number): Path | null;
+    /** A cluster's path two steps up as one line, as far as it is known. */
     pathOf(id: bigint): string;
 }

package/dist/paths.js

@@ -1,18 +1,22 @@
-import { artifactName } from '@mosaicajs/client';
-import { isTree } from './aggregate.js';
-import { UNNAMED } from './base.js';
+import { isLinked } from './aggregate.js';
+import { called } from './base.js';
 /**
- * The names of clusters' parents on a `nested` or `dag` layer, learnt from browse pages: for each
- * cluster asked about, a page of its served parents, and then one of its first parent's. Each is
- * asked for once until {@link reset}, which also drops an answer still loading.
+ * The names and parents of clusters on a layer with parent edges, learnt from browse pages. For
+ * each cluster asked about, the children form of the cluster names its served parents, and the
+ * walk goes on up from the first of them as each answer lands. A cluster is asked about once until
+ * {@link reset}, which also drops an answer still loading.
  */
 export class ClusterPaths {
     changed;
-    /** Every cluster met on a browse page. */
+    /** Every cluster a page has served. */
     met = new Map();
-    /** Each cluster's served parents, once asked for. */
-    parentsOf = new Map();
+    /** Each cluster's served parents, as the children form gave them. */
+    parentsGiven = new Map();
     asked = new Set();
+    /** The clusters whose children form has been answered or refused. */
+    done = new Set();
+    /** How many steps up each cluster asked about is walked. */
+    walks = new Map();
     epoch = 0;
     /** `changed` is called as each page lands. */
     constructor(changed) {
@@ -21,52 +25,86 @@ export class ClusterPaths {
     reset() {
         this.epoch += 1;
         this.met.clear();
-        this.parentsOf.clear();
+        this.parentsGiven.clear();
         this.asked.clear();
+        this.done.clear();
+        this.walks.clear();
     }
-    /** The rung a cluster was met at, where a page has named it. */
-    rungOf(id) {
-        return this.met.get(id)?.rung;
+    /** Note the rows a page served, whose names and parents are then known. */
+    meet(rows) {
+        for (const r of rows)
+            this.met.set(r.mosaicaId, r);
     }
-    /** Ask for the parents of each of `ids` and of its first parent, on a `nested` or `dag` layer. */
-    ask(store, layer, ids) {
-        if (!isTree(layer))
+    /** What a cluster is called from the row a page served, or `null` where no page has met it. */
+    nameOf(id) {
+        const row = this.met.get(id);
+        return row ? called(row.name, row.key) : null;
+    }
+    parentsOf(id) {
+        return this.parentsGiven.get(id) ?? this.met.get(id)?.parentIds;
+    }
+    /** Walk `depth` steps up from each of `ids` on a layer with parent edges, asking for each step's parents not yet met. */
+    ask(store, layer, ids, depth = 2) {
+        if (!isLinked(layer))
+            return;
+        for (const id of ids)
+            this.walks.set(id, Math.max(depth, this.walks.get(id) ?? 0));
+        this.walk(store, layer, ids);
+    }
+    walk(store, layer, ids) {
+        for (const id of ids) {
+            let at = id;
+            for (let i = 0; i < (this.walks.get(id) ?? 0) && at !== undefined; i++) {
+                const parents = this.parentsOf(at);
+                if (parents === undefined || parents.some((p) => !this.met.has(p))) {
+                    this.fetch(store, layer, at);
+                    break;
+                }
+                at = parents[0];
+            }
+        }
+    }
+    fetch(store, layer, id) {
+        if (this.asked.has(id))
             return;
+        this.asked.add(id);
         const epoch = this.epoch;
-        const ask = (id) => {
-            if (this.asked.has(id))
+        const landed = (parents) => {
+            if (epoch !== this.epoch)
                 return;
-            this.asked.add(id);
-            void store
-                .browse({ layer: layer.name, filters: null, parent: id, limit: 1 })
-                .then((p) => {
-                if (epoch !== this.epoch)
-                    return;
-                for (const r of p.parents)
-                    this.met.set(r.mosaicaId, r);
-                this.parentsOf.set(id, p.parents.map((r) => r.mosaicaId));
-                this.changed();
-            })
-                .catch(() => undefined);
+            this.done.add(id);
+            if (parents) {
+                this.meet(parents);
+                this.parentsGiven.set(id, parents.map((r) => r.mosaicaId));
+            }
+            this.walk(store, layer, [...this.walks.keys()]);
+            this.changed();
         };
-        for (const id of ids) {
-            ask(id);
-            const first = this.parentsOf.get(id)?.[0];
-            if (first !== undefined)
-                ask(first);
-        }
+        store.browse({ layer: layer.name, filters: null, parent: id, limit: 1 }).then((p) => landed(p.parents), () => landed(null));
     }
-    /** A cluster's two nearest parents' names, nearest last, as far up as the pages have named them. */
-    pathOf(id) {
-        const names = [];
-        let parents = this.parentsOf.get(id) ?? this.met.get(id)?.parentIds ?? [];
-        for (let i = 0; i < 2 && parents.length > 0; i++) {
-            const at = this.met.get(parents[0]);
-            if (!at)
+    /**
+     * A cluster's path of parents up to `depth` steps, nearest last, as far up as the pages have
+     * named them; `null` while a step's parents are on their way. A step names every served parent
+     * of the step below it, and the step above is taken from the first of them.
+     */
+    path(id, depth) {
+        const steps = [];
+        let parents = this.parentsOf(id) ?? [];
+        let at = id;
+        for (let i = 0; i < depth && parents.length > 0; i++) {
+            const named = parents.flatMap((p) => this.met.get(p) ?? []);
+            if (named.length < parents.length && this.asked.has(at) && !this.done.has(at))
+                return null;
+            if (named.length === 0)
                 break;
-            names.unshift(artifactName(at) ?? UNNAMED);
-            parents = this.parentsOf.get(at.mosaicaId) ?? at.parentIds;
+            steps.unshift(named.map((r) => called(r.name, r.key).text).join(', '));
+            at = named[0].mosaicaId;
+            parents = this.parentsOf(at) ?? [];
         }
-        return names.join(' › ');
+        return { steps, beyond: parents.length > 0 };
+    }
+    /** A cluster's path two steps up as one line, as far as it is known. */
+    pathOf(id) {
+        return this.path(id, 2)?.steps.join(' › ') ?? '';
     }
 }

package/dist/selection.d.ts

@@ -1,4 +1,4 @@
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type RegionProjection } from '@mosaicajs/client';
 import { MosaicaElement } from './base.js';
 import './count.js';
@@ -6,7 +6,7 @@ import './count.js';
  * Use the selection card beside a map so that viewers can see what is inside the region they have
  * drawn. It reads the store's selected region, or the `region` you set. It counts the items inside
  * that the filters match, the items the viewer may see there and the marks drawn there. The drawn
- * marks are listed below the counts, and clicking one picks it.
+ * marks are listed below the counts, each a button that picks it.
  *
  * The region acts as a filter, which means the map and every other count narrow to it once it
  * settles. Outside flips it to everything outside the shape, and Clear removes it. The counts are
@@ -14,6 +14,12 @@ import './count.js';
  * says when that is so. Export and Save as artifact are shown disabled because they are not
  * available yet.
  *
+ * Screen readers announce the state line as it changes: that the selection is being counted, a
+ * refusal, and, once, when the query has finished loading, the matched and visible counts with
+ * whether they are exact for the shape. The counts and that verdict are read out and not drawn on
+ * the line, since the figures are below it. With `quiet`, the card shows the same and announces
+ * nothing.
+ *
  * @summary A card showing the counts and marks inside the selected region.
  * @tagname mosaica-selection
  * @category Elements
@@ -32,7 +38,7 @@ import './count.js';
  * @csspart count-visible - The `<mosaica-count>` of items the viewer may see inside (or outside).
  * @csspart label - The heading above the list.
  * @csspart items - The list of drawn marks inside.
- * @csspart item - One drawn mark, by `mosaica_id`.
+ * @csspart item - One drawn mark's row, holding a button named by its `mosaica_id`.
  * @csspart actions - The action buttons.
  * @csspart action - One action button.
  */
@@ -40,7 +46,20 @@ export declare class MosaicaSelection extends MosaicaElement {
     static styles: import("lit").CSSResult[];
     /** A region to show instead of the store's `region` projection. */
     accessor region: RegionProjection | null;
+    /**
+     * Announces nothing: the state line and the counts are still shown, and none is put in a live
+     * region. Set it when another element on the page says the same things.
+     */
+    accessor quiet: boolean;
     private get shown();
+    private readonly actionFocus;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    /**
+     * The state and its line for a region: what the server said of its count, or how the count
+     * stands. Once it is counted, `verdict` says whether the counts are exact for the shape.
+     */
+    private stateOfRegion;
     render(): TemplateResult | typeof nothing;
 }
 declare global {