@mosaicajs/components 0.1.0-rc.4 → 0.1.0

package/dist/status.js

@@ -41,53 +41,41 @@ import { NOTHING_VISIBLE, renderState, seesNothing, showsContent, stateOf } from
 import { chrome, tokens } from './tokens.js';
 import './count.js';
 /**
- * The view's state and counts on one line: `● | 16,822,190 of 21,406,522 match | 5,390 shown`.
- * The counts are the store's counts in view (`ViewProjection.inView`): over the camera's box, or
- * over the selected region while one is selected, as the selection card counts it. While a
- * highlight is set, a cell reads `N highlighted of M`, M being the matched count, and the
- * match cell is left out unless a filter or selection narrows what matches. While the view is up to
- * date the first cell is a dot alone, titled "Up to date", and while it updates a grey dot alone,
- * titled "Updating", so the strip keeps its width through a pan. Where the viewer can see no item in
- * the view at all, it is a grey dot alone titled "Nothing visible to you", which the map says in
- * words. Otherwise it names the state in two or three words beside its dot (Connecting,
- * Reconnecting, Server unreachable, Server did not answer, Server busy, Nothing in view, Data
- * updated, View refused, Session expired) with the action the state offers: Refresh when the data
- * changed, Retry when the view was refused, the server did not answer or is too busy, and Sign in
- * on expiry where `reauthorise` is set. View refused has the server's reason on a line under it.
- * The counts grey out while they are not current. The strip sizes to its content and does not
- * wrap. `compact` shortens the figures (`16.8M of 21.4M match`) and drops the shown count.
- * `expanded` renders the figures again as a card below the strip.
+ * Use the status line with a map so that viewers know whether what they see is current and how much
+ * of the data it covers. A typical line reads `● | 16,822,190 of 21,406,522 match | 5,390 shown`,
+ * where the first figure is the items the filters match out of those the viewer may see. The
+ * figures count the camera's box, or the selected region while there is one. While a highlight is
+ * set, the counts cell reads `N highlighted of M`.
  *
- * The state cell is an `aria-live` region, so a refusal, an expiry or a change of data is announced;
- * the counts are not, so a pan does not read them out. The
- * state is one of the ten panel states (see `PanelState`); the refusal behind it stays in the
- * store's `status.refusal`, which `mosaica-statechange` carries, and the refusal's code is on the
- * refusal part's `data-code`.
+ * While the view is up to date, the first cell is a dot alone. When something goes wrong, the cell
+ * names the state and offers a button if the viewer can act, such as Retry when the server is busy.
+ * Sign in appears when the session expires only if you have set `reauthorise`.
  *
- * @summary The state and the counts of the view, on one line.
+ * Screen readers announce a refusal or an expiry, because the state cell is an `aria-live` region.
+ * The counts sit outside it, so they are not read out every time the map pans.
+ *
+ * @summary A status line showing whether the map is up to date and how many items it shows.
  * @tagname mosaica-status
  * @category Elements
- * @fires {CustomEvent<MosaicaEventDetails['mosaica-statechange']>} mosaica-statechange - On every
- *   change of panel state, including the first render, with the refusal behind it.
- * @fires {CustomEvent<MosaicaEventDetails['mosaica-expired']>} mosaica-expired - Once each time the
- *   session expires.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-statechange']>} mosaica-statechange - The panel
+ *   state changed, including on the first render.
+ * @fires {CustomEvent<MosaicaEventDetails['mosaica-expired']>} mosaica-expired - The session expired.
+ *   Fires once each time.
  * @csspart strip - The one-line strip.
  * @csspart state - The state's dot and words, with `data-state` set to the panel state.
  * @csspart refusal - The words "View refused", or "Server busy", with `data-code` set to the
  *   refusal's code.
- * @csspart reason - The server's reason for a refusal, as it sent it, on a line under "View
- *   refused".
- * @csspart refresh - The Refresh button, when the data changed under the view.
- * @csspart retry - The Retry button, when the view was refused or the server did not answer or is
- *   too busy.
- * @csspart reauthorise - The Sign in button, on expiry where `reauthorise` is set.
+ * @csspart reason - The server's reason for a refusal, under "View refused".
+ * @csspart refresh - The Refresh button, shown when the data has changed.
+ * @csspart retry - The Retry button, after a refusal, no answer or a busy server.
+ * @csspart reauthorise - The Sign in button, shown on expiry if `reauthorise` is set.
  * @csspart count-shown - The `<mosaica-count>` of marks shown.
- * @csspart count-matched - The `<mosaica-count>` matched by the filters.
- * @csspart count-highlighted - The `<mosaica-count>` the highlight matched, while a highlight is set.
+ * @csspart count-matched - The `<mosaica-count>` of items the filters match.
+ * @csspart count-highlighted - The `<mosaica-count>` of highlighted items, while a highlight is set.
  * @csspart count-of - The matched count the highlighted count is out of, while a highlight is set.
  * @csspart count-visible - The `<mosaica-count>` of items the viewer may see here, which the matched
  *   count is out of.
- * @csspart card - The card of figures, under `expanded`.
+ * @csspart card - The card of figures, when `expanded` is set.
  */
 let MosaicaStatus = (() => {
     let _classSuper = MosaicaElement;
@@ -213,15 +201,15 @@ let MosaicaStatus = (() => {
     `
         ];
         #expanded_accessor_storage = __runInitializers(this, _expanded_initializers, false);
-        /** Renders the figures again as a card below the strip. */
+        /** Adds a card of the figures below the strip. */
         get expanded() { return this.#expanded_accessor_storage; }
         set expanded(value) { this.#expanded_accessor_storage = value; }
         #compact_accessor_storage = (__runInitializers(this, _expanded_extraInitializers), __runInitializers(this, _compact_initializers, false));
-        /** Shortens the figures to one decimal (`16.8M`) and drops the shown count, where room is short. */
+        /** Shortens the figures to one decimal (`16.8M`) and drops the shown count. */
         get compact() { return this.#compact_accessor_storage; }
         set compact(value) { this.#compact_accessor_storage = value; }
         #reauthorise_accessor_storage = (__runInitializers(this, _compact_extraInitializers), __runInitializers(this, _reauthorise_initializers, null));
-        /** Called by the Sign in button that the expired state shows; without it, no button. */
+        /** A function the Sign in button calls when the session has expired. Without it there is no Sign in button. */
         get reauthorise() { return this.#reauthorise_accessor_storage; }
         set reauthorise(value) { this.#reauthorise_accessor_storage = value; }
         lastState = (__runInitializers(this, _reauthorise_extraInitializers), null);

package/dist/store-element.d.ts

@@ -2,17 +2,18 @@ import { nothing, type TemplateResult } from 'lit';
 import type { Store } from '@mosaicajs/client';
 import { MosaicaElement } from './base.js';
 /**
- * Provides one store, and so one view, to the panels and maps inside it, which find it by context.
- * An overview beside a detail is two of these. `<mosaica-explorer>` is its own provider and needs
- * none.
+ * Use `<mosaica-store>` when you lay out the elements yourself, so that the map, the filter panel
+ * and the cards all show the same view and filters. The elements inside it find its store through
+ * context, which means you do not pass the store to each one. Put each map of a different view in
+ * its own wrapper. `<mosaica-explorer>` provides its own store, so it needs no wrapper.
  *
- * Takes a `store` property, or builds a store from `token` or an `authorise` property and
- * `viewer-url`, the page's own origin where unset, or from `viewer-url` alone for an open server. It renders its children and nothing else (`display: contents`).
+ * The wrapper uses the store in its `store` property. When that is not set, it builds one from
+ * `viewer-url` and `token` or `authorise`.
  *
- * @summary Provides one store to the elements inside it.
+ * @summary A wrapper that shares one store between the elements inside it.
  * @tagname mosaica-store
  * @category Elements
- * @slot - The panels and maps that read the store.
+ * @slot - The elements that use the store.
  */
 export declare class MosaicaStore extends MosaicaElement {
     static styles: import("lit").CSSResult;

package/dist/store-element.js

@@ -4,17 +4,18 @@ import { MosaicaElement } from './base.js';
 import { storeContext } from './context.js';
 import { attachContextRoot, defineOnce } from './define.js';
 /**
- * Provides one store, and so one view, to the panels and maps inside it, which find it by context.
- * An overview beside a detail is two of these. `<mosaica-explorer>` is its own provider and needs
- * none.
+ * Use `<mosaica-store>` when you lay out the elements yourself, so that the map, the filter panel
+ * and the cards all show the same view and filters. The elements inside it find its store through
+ * context, which means you do not pass the store to each one. Put each map of a different view in
+ * its own wrapper. `<mosaica-explorer>` provides its own store, so it needs no wrapper.
  *
- * Takes a `store` property, or builds a store from `token` or an `authorise` property and
- * `viewer-url`, the page's own origin where unset, or from `viewer-url` alone for an open server. It renders its children and nothing else (`display: contents`).
+ * The wrapper uses the store in its `store` property. When that is not set, it builds one from
+ * `viewer-url` and `token` or `authorise`.
  *
- * @summary Provides one store to the elements inside it.
+ * @summary A wrapper that shares one store between the elements inside it.
  * @tagname mosaica-store
  * @category Elements
- * @slot - The panels and maps that read the store.
+ * @slot - The elements that use the store.
  */
 export class MosaicaStore extends MosaicaElement {
     static styles = css `

package/dist/tokens.d.ts

@@ -1,17 +1,16 @@
 /**
- * The theme every element shares, as a Lit `CSSResult` a host element can add to its own `styles`.
- * Every colour and font, the corner radii and the shadow are `--mosaica-*` custom properties, as
- * are the map's height and the spacing of the map's corners; other spacing is fixed. The elements
- * do not declare those names: each reads a private twin that falls back to the default, so a value
- * set on the element or on any ancestor, including an enclosing `<mosaica-explorer>`, wins, and the
- * default applies where nothing is set. Each colour's default is a light and a dark value, chosen
- * by the `color-scheme` the element inherits from the page.
+ * The theme every element shares, as a Lit `CSSResult`. Add it to your own Lit element's `styles`
+ * to use the same tokens. The elements take every colour and font, the corner radii, the shadow,
+ * the map's height and the spacing of the map's corners from the `--mosaica-*` custom properties
+ * that the components reference lists under Theme tokens; other spacing is fixed. Set a token on an element or any ancestor, including an
+ * enclosing `<mosaica-explorer>`, to override its default. Each colour has a light and a dark
+ * default, chosen by the page's `color-scheme`.
  *
- * The interface is neutral so that colour on screen belongs to the data. The map's data palette is
- * not a token: it encodes data, and it is the map's `palette` property.
+ * The colours the map uses for data are not tokens. Set them with the map's `palette`,
+ * `category-palette` and `ramp`.
  *
- * The default font is Instrument Sans where the page has loaded it; the elements fetch no font
- * themselves, so a page that wants it links it.
+ * The default font is Instrument Sans if the page has loaded it. The elements fetch no fonts, so
+ * link it from your page if you want it.
  *
  * @cssprop --mosaica-surface - The background of panels, cards, inputs and buttons.
  * @cssprop --mosaica-surface-2 - The background of a chip, a hovered row and a chosen row.
@@ -48,8 +47,8 @@
  * @cssprop --mosaica-font-mono - The font family of identifiers.
  * @cssprop --mosaica-shadow - The shadow under anything that floats over the map: the status
  *   strip, the map toolbar, the map tooltip, cards and popovers.
- * @cssprop --mosaica-space - The gap between the map's corner content and the map's edges; half of
- *   it separates items in one corner.
+ * @cssprop --mosaica-space - The gap between the content in the map's corners and the map's edges.
+ *   Half of it separates items in one corner.
  * @cssprop --mosaica-density - A multiplier on `--mosaica-space`'s default.
  * @cssprop --mosaica-map-height - The map's height.
  */

package/dist/tokens.js

@@ -1,18 +1,17 @@
 import { css } from 'lit';
 /**
- * The theme every element shares, as a Lit `CSSResult` a host element can add to its own `styles`.
- * Every colour and font, the corner radii and the shadow are `--mosaica-*` custom properties, as
- * are the map's height and the spacing of the map's corners; other spacing is fixed. The elements
- * do not declare those names: each reads a private twin that falls back to the default, so a value
- * set on the element or on any ancestor, including an enclosing `<mosaica-explorer>`, wins, and the
- * default applies where nothing is set. Each colour's default is a light and a dark value, chosen
- * by the `color-scheme` the element inherits from the page.
+ * The theme every element shares, as a Lit `CSSResult`. Add it to your own Lit element's `styles`
+ * to use the same tokens. The elements take every colour and font, the corner radii, the shadow,
+ * the map's height and the spacing of the map's corners from the `--mosaica-*` custom properties
+ * that the components reference lists under Theme tokens; other spacing is fixed. Set a token on an element or any ancestor, including an
+ * enclosing `<mosaica-explorer>`, to override its default. Each colour has a light and a dark
+ * default, chosen by the page's `color-scheme`.
  *
- * The interface is neutral so that colour on screen belongs to the data. The map's data palette is
- * not a token: it encodes data, and it is the map's `palette` property.
+ * The colours the map uses for data are not tokens. Set them with the map's `palette`,
+ * `category-palette` and `ramp`.
  *
- * The default font is Instrument Sans where the page has loaded it; the elements fetch no font
- * themselves, so a page that wants it links it.
+ * The default font is Instrument Sans if the page has loaded it. The elements fetch no fonts, so
+ * link it from your page if you want it.
  *
  * @cssprop --mosaica-surface - The background of panels, cards, inputs and buttons.
  * @cssprop --mosaica-surface-2 - The background of a chip, a hovered row and a chosen row.
@@ -49,8 +48,8 @@ import { css } from 'lit';
  * @cssprop --mosaica-font-mono - The font family of identifiers.
  * @cssprop --mosaica-shadow - The shadow under anything that floats over the map: the status
  *   strip, the map toolbar, the map tooltip, cards and popovers.
- * @cssprop --mosaica-space - The gap between the map's corner content and the map's edges; half of
- *   it separates items in one corner.
+ * @cssprop --mosaica-space - The gap between the content in the map's corners and the map's edges.
+ *   Half of it separates items in one corner.
  * @cssprop --mosaica-density - A multiplier on `--mosaica-space`'s default.
  * @cssprop --mosaica-map-height - The map's height.
  */

package/dist/view-picker.d.ts

@@ -1,17 +1,21 @@
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { MosaicaElement } from './base.js';
 /**
- * A select over the views the viewer may reach, one entry per plain view and one per view group,
- * in `/v1/meta`'s order, drawn as the current view's title with a chevron. Choosing a group enters
- * it under the current view's key where the two groups share keys, else at the key this element
- * last left it on, else at its first view. Renders nothing where the bundle offers one entry.
+ * Use the view picker when the bundle lays its items out in more than one way and viewers should
+ * choose the layout. Each view that belongs to no group is one entry, and so is each group of
+ * views. When there is only one entry, the picker shows nothing.
  *
- * @summary Chooses the view.
+ * Choosing a group opens the view the viewer last left that group on, or the group's first view.
+ * When the current view's group shares keys with the chosen group, the picker opens the view under
+ * the current key instead, so that the viewer stays on the same year or quarter. Viewers step
+ * between the views inside a group with `<mosaica-key-picker>`.
+ *
+ * @summary A drop-down menu for switching views.
  * @tagname mosaica-view-picker
  * @category Elements
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-viewswitch']>} mosaica-viewswitch - The view
  *   changed.
- * @csspart field - The select and its chevron, drawn as the view's title in bold.
+ * @csspart field - The select and its chevron, shown as the view's title in bold.
  * @csspart select - The select.
  */
 export declare class MosaicaViewPicker extends MosaicaElement {

package/dist/view-picker.js

@@ -6,17 +6,21 @@ import { icon } from './icons.js';
 import { switchView } from './view-switch.js';
 import { chrome, tokens } from './tokens.js';
 /**
- * A select over the views the viewer may reach, one entry per plain view and one per view group,
- * in `/v1/meta`'s order, drawn as the current view's title with a chevron. Choosing a group enters
- * it under the current view's key where the two groups share keys, else at the key this element
- * last left it on, else at its first view. Renders nothing where the bundle offers one entry.
+ * Use the view picker when the bundle lays its items out in more than one way and viewers should
+ * choose the layout. Each view that belongs to no group is one entry, and so is each group of
+ * views. When there is only one entry, the picker shows nothing.
  *
- * @summary Chooses the view.
+ * Choosing a group opens the view the viewer last left that group on, or the group's first view.
+ * When the current view's group shares keys with the chosen group, the picker opens the view under
+ * the current key instead, so that the viewer stays on the same year or quarter. Viewers step
+ * between the views inside a group with `<mosaica-key-picker>`.
+ *
+ * @summary A drop-down menu for switching views.
  * @tagname mosaica-view-picker
  * @category Elements
  * @fires {CustomEvent<MosaicaEventDetails['mosaica-viewswitch']>} mosaica-viewswitch - The view
  *   changed.
- * @csspart field - The select and its chevron, drawn as the view's title in bold.
+ * @csspart field - The select and its chevron, shown as the view's title in bold.
  * @csspart select - The select.
  */
 export class MosaicaViewPicker extends MosaicaElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mosaicajs/components",
-  "version": "0.1.0-rc.4",
+  "version": "0.1.0",
   "description": "The mosaica-* web components: a map, filters, counts, item cards and an explorer over a Mosaica server, plus a single-file bundle.",
   "keywords": [
     "mosaica",
@@ -19,7 +19,7 @@
     "directory": "clients/ts/components"
   },
   "license": "Apache-2.0",
-  "author": "Joe Ennis",
+  "author": "mosaicadb",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -112,8 +112,8 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@mosaicajs/client": "0.1.0-rc.4",
-    "@mosaicajs/deck": "0.1.0-rc.4"
+    "@mosaicajs/client": "0.1.0",
+    "@mosaicajs/deck": "0.1.0"
   },
   "peerDependencies": {
     "@deck.gl/aggregation-layers": "^9.3.7",
@@ -127,12 +127,12 @@
     "@deck.gl/core": "^9.3.7",
     "@deck.gl/layers": "^9.3.7",
     "@luma.gl/core": "^9.3.6",
-    "happy-dom": "^20.0.0",
+    "happy-dom": "^21.0.4",
     "lit": "^3.3.0",
     "playwright": "^1.62.1",
     "typescript": "^5.9.0",
     "vite": "^8.2.0",
-    "vitest": "^3.2.0",
+    "vitest": "^4.1.12",
     "esbuild": "^0.28.0"
   },
   "publishConfig": {