@fieldia/viewer 0.10.0 → 0.12.0

package/src/lib/record-styles.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RECORD_STYLES = void 0;
+exports.installRecordStyles = installRecordStyles;
+/**
+ * What sits around a record, on the same tokens as the form: the bar over it
+ * (breadcrumbs, the gear menu, the pager), the attachment preview beside its
+ * sheet, and where the side panel goes. Put in the document after Fieldia's
+ * own stylesheet, so its rules on the sheet's layout come after those.
+ */
+exports.RECORD_STYLES = `
+.fd-record-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 46px; box-sizing: border-box; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }
+.fd-form > .fd-content > .fd-record-bar { margin: -4px 0 12px; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }
+.fd-breadcrumbs { min-width: 0; }
+.fd-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.3; }
+.fd-breadcrumbs li { display: flex; align-items: center; min-width: 0; }
+.fd-breadcrumbs li + li::before { content: "/"; color: var(--fd-muted); padding-inline: 8px; }
+.fd-crumb { all: unset; cursor: pointer; color: var(--fd-accent); border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-crumb:hover { text-decoration: underline; }
+.fd-crumb:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-crumb-current { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-record-actions { position: relative; }
+.fd-record-actions[hidden] { display: none; }
+.fd-record-gear { display: inline-flex; align-items: center; gap: 6px; }
+.fd-record-gear svg { width: 16px; height: 16px; flex: none; }
+.fd-record-menu { position: absolute; z-index: 40; inset-block-start: calc(100% + 4px); inset-inline-start: 0; display: grid; min-width: 220px; max-width: min(320px, 90vw); padding: 4px; box-sizing: border-box; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
+.fd-record-menu[data-end] { inset-inline-start: auto; inset-inline-end: 0; }
+.fd-record-menu[hidden], .fd-record-menu [hidden] { display: none; }
+.fd-record-menu [role="group"] { display: grid; }
+.fd-record-menu-heading { padding: 6px 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fd-muted); }
+.fd-record-menu-rule { margin: 4px 0; border-block-start: 1px solid var(--fd-border); }
+.fd-record-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 3px; cursor: pointer; color: var(--fd-text); }
+.fd-record-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--fd-muted); }
+.fd-record-menu-item:hover, .fd-record-menu-item:focus { background: var(--fd-accent-soft); }
+.fd-record-menu-item:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-record-menu-danger { color: var(--fd-error); }
+.fd-record-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
+.fd-record-pager[hidden] { display: none; }
+.fd-record-pager-text { padding-inline-end: 6px; font-variant-numeric: tabular-nums; color: var(--fd-muted); white-space: nowrap; }
+.fd-record-step { min-width: 34px; padding-inline: 8px; font-size: 18px; line-height: 1; }
+.fd-record-step[aria-disabled="true"] { opacity: 0.5; cursor: default; }
+/* ‹ and › are mirrored by the browser itself in a page read right to left: they point the way it reads. */
+@container fd-form (max-width: 520px) {
+  .fd-record-bar { padding-inline: 12px; gap: 6px 8px; }
+  /* On a phone the gear says nothing more than its picture, and the trail folds to the page before this one, a way back. */
+  .fd-record-gear-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .fd-breadcrumbs ol { flex-wrap: nowrap; font-size: 15px; }
+  .fd-breadcrumbs li:not(:nth-last-child(-n + 2)) { display: none; }
+  .fd-breadcrumbs li:nth-last-child(2)::before { content: "‹"; padding-inline: 0 6px; font-size: 20px; color: var(--fd-accent); }
+}
+
+/* The attachment beside the sheet: the sheet and its side panel in the first column, the file in the second. */
+.fd-attachment-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); overflow: hidden; }
+.fd-attachment-preview[hidden] { display: none; }
+.fd-attachment-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; padding-inline: 12px 8px; border-block-end: 1px solid var(--fd-border); min-width: 0; }
+.fd-attachment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.fd-attachment-count { color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fd-attachment-head [hidden] { display: none; }
+.fd-attachment-body { display: grid; min-height: 0; background: var(--fd-page); }
+.fd-attachment-body > iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; background: #fff; }
+.fd-attachment-body > img { display: block; max-width: 100%; max-height: 80vh; margin: auto; object-fit: contain; }
+.fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) { max-width: none; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-template-rows: auto 1fr; }
+.fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) > :is(.fd-card, .fd-side) { grid-column: 1; }
+.fd-sheet-layout.fd-has-preview > .fd-attachment-preview { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 8px; height: calc(100vh - 16px); max-height: 1200px; }
+@container (max-width: 1000px) {
+  .fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
+  .fd-sheet-layout.fd-has-preview > .fd-attachment-preview { grid-column: 1; grid-row: auto; position: static; height: auto; }
+  .fd-attachment-body > iframe { min-height: 60vh; }
+}
+/* A side panel kept beside the sheet: narrower under 1000px, under the sheet only once the form is too narrow for both. */
+@container (max-width: 1000px) { .fd-sheet-layout.fd-has-side[data-side-beside="always"]:not(:has(> .fd-attachment-preview:not([hidden]))) { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); } }
+@container (max-width: 600px) { .fd-sheet-layout.fd-has-side[data-side-beside="always"]:not(:has(> .fd-attachment-preview:not([hidden]))) { grid-template-columns: minmax(0, 1fr); } }
+`;
+/** Puts the record's surroundings' look in the document once. */
+function installRecordStyles(doc) {
+    if (doc.getElementById('fd-record-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-record-styles';
+    style.textContent = exports.RECORD_STYLES;
+    (doc.head ?? doc.documentElement).append(style);
+}
+//# sourceMappingURL=record-styles.js.map

package/src/lib/record-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-styles.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/record-styles.ts"],"names":[],"mappings":";;;AAuEA,kDAMC;AA7ED;;;;;GAKG;AACU,QAAA,aAAa,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DtC,CAAC;AAEF,iEAAiE;AACjE,SAAgB,mBAAmB,CAAC,GAAa;IAC/C,IAAI,GAAG,CAAC,cAAc,CAAC,kBAAkB,CAAC;QAAE,OAAO;IACnD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,kBAAkB,CAAC;IAC9B,KAAK,CAAC,WAAW,GAAG,qBAAa,CAAC;IAClC,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAClD,CAAC"}

package/src/lib/record-styles.mjs

@@ -0,0 +1,79 @@
+/**
+ * What sits around a record, on the same tokens as the form: the bar over it
+ * (breadcrumbs, the gear menu, the pager), the attachment preview beside its
+ * sheet, and where the side panel goes. Put in the document after Fieldia's
+ * own stylesheet, so its rules on the sheet's layout come after those.
+ */
+export const RECORD_STYLES = /* css */ `
+.fd-record-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 46px; box-sizing: border-box; padding: 6px 16px; background: var(--fd-surface); border-block-end: 1px solid var(--fd-border); }
+.fd-form > .fd-content > .fd-record-bar { margin: -4px 0 12px; border-radius: var(--fd-radius); border: 1px solid var(--fd-border); }
+.fd-breadcrumbs { min-width: 0; }
+.fd-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.3; }
+.fd-breadcrumbs li { display: flex; align-items: center; min-width: 0; }
+.fd-breadcrumbs li + li::before { content: "/"; color: var(--fd-muted); padding-inline: 8px; }
+.fd-crumb { all: unset; cursor: pointer; color: var(--fd-accent); border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-crumb:hover { text-decoration: underline; }
+.fd-crumb:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-crumb-current { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-record-actions { position: relative; }
+.fd-record-actions[hidden] { display: none; }
+.fd-record-gear { display: inline-flex; align-items: center; gap: 6px; }
+.fd-record-gear svg { width: 16px; height: 16px; flex: none; }
+.fd-record-menu { position: absolute; z-index: 40; inset-block-start: calc(100% + 4px); inset-inline-start: 0; display: grid; min-width: 220px; max-width: min(320px, 90vw); padding: 4px; box-sizing: border-box; background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: max(var(--fd-control-radius), 4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
+.fd-record-menu[data-end] { inset-inline-start: auto; inset-inline-end: 0; }
+.fd-record-menu[hidden], .fd-record-menu [hidden] { display: none; }
+.fd-record-menu [role="group"] { display: grid; }
+.fd-record-menu-heading { padding: 6px 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fd-muted); }
+.fd-record-menu-rule { margin: 4px 0; border-block-start: 1px solid var(--fd-border); }
+.fd-record-menu-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 3px; cursor: pointer; color: var(--fd-text); }
+.fd-record-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--fd-muted); }
+.fd-record-menu-item:hover, .fd-record-menu-item:focus { background: var(--fd-accent-soft); }
+.fd-record-menu-item:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-record-menu-danger { color: var(--fd-error); }
+.fd-record-pager { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
+.fd-record-pager[hidden] { display: none; }
+.fd-record-pager-text { padding-inline-end: 6px; font-variant-numeric: tabular-nums; color: var(--fd-muted); white-space: nowrap; }
+.fd-record-step { min-width: 34px; padding-inline: 8px; font-size: 18px; line-height: 1; }
+.fd-record-step[aria-disabled="true"] { opacity: 0.5; cursor: default; }
+/* ‹ and › are mirrored by the browser itself in a page read right to left: they point the way it reads. */
+@container fd-form (max-width: 520px) {
+  .fd-record-bar { padding-inline: 12px; gap: 6px 8px; }
+  /* On a phone the gear says nothing more than its picture, and the trail folds to the page before this one, a way back. */
+  .fd-record-gear-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .fd-breadcrumbs ol { flex-wrap: nowrap; font-size: 15px; }
+  .fd-breadcrumbs li:not(:nth-last-child(-n + 2)) { display: none; }
+  .fd-breadcrumbs li:nth-last-child(2)::before { content: "‹"; padding-inline: 0 6px; font-size: 20px; color: var(--fd-accent); }
+}
+
+/* The attachment beside the sheet: the sheet and its side panel in the first column, the file in the second. */
+.fd-attachment-preview { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); overflow: hidden; }
+.fd-attachment-preview[hidden] { display: none; }
+.fd-attachment-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; padding-inline: 12px 8px; border-block-end: 1px solid var(--fd-border); min-width: 0; }
+.fd-attachment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.fd-attachment-count { color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fd-attachment-head [hidden] { display: none; }
+.fd-attachment-body { display: grid; min-height: 0; background: var(--fd-page); }
+.fd-attachment-body > iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; background: #fff; }
+.fd-attachment-body > img { display: block; max-width: 100%; max-height: 80vh; margin: auto; object-fit: contain; }
+.fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) { max-width: none; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-template-rows: auto 1fr; }
+.fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) > :is(.fd-card, .fd-side) { grid-column: 1; }
+.fd-sheet-layout.fd-has-preview > .fd-attachment-preview { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 8px; height: calc(100vh - 16px); max-height: 1200px; }
+@container (max-width: 1000px) {
+  .fd-sheet-layout.fd-has-preview:has(> .fd-attachment-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
+  .fd-sheet-layout.fd-has-preview > .fd-attachment-preview { grid-column: 1; grid-row: auto; position: static; height: auto; }
+  .fd-attachment-body > iframe { min-height: 60vh; }
+}
+/* A side panel kept beside the sheet: narrower under 1000px, under the sheet only once the form is too narrow for both. */
+@container (max-width: 1000px) { .fd-sheet-layout.fd-has-side[data-side-beside="always"]:not(:has(> .fd-attachment-preview:not([hidden]))) { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); } }
+@container (max-width: 600px) { .fd-sheet-layout.fd-has-side[data-side-beside="always"]:not(:has(> .fd-attachment-preview:not([hidden]))) { grid-template-columns: minmax(0, 1fr); } }
+`;
+/** Puts the record's surroundings' look in the document once. */
+export function installRecordStyles(doc) {
+    if (doc.getElementById('fd-record-styles'))
+        return;
+    const style = doc.createElement('style');
+    style.id = 'fd-record-styles';
+    style.textContent = RECORD_STYLES;
+    (doc.head ?? doc.documentElement).append(style);
+}
+//# sourceMappingURL=record-styles.mjs.map

package/src/lib/record-styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"record-styles.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/record-styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DtC,CAAC;AAEF,iEAAiE;AACjE,MAAM,UAAU,mBAAmB,CAAC,GAAa;IAC/C,IAAI,GAAG,CAAC,cAAc,CAAC,kBAAkB,CAAC;QAAE,OAAO;IACnD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,kBAAkB,CAAC;IAC9B,KAAK,CAAC,WAAW,GAAG,aAAa,CAAC;IAClC,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAClD,CAAC"}

package/src/lib/related.d.mts

@@ -1,7 +1,30 @@
-import type { Page } from '@fieldia/core';
+import type { Page, Tone } from '@fieldia/core';
 import type { WidgetDialogs } from '@fieldia/widgets';
 import type { ViewerOptions } from './viewer.mjs';
 /** The field a page's records are named by: its title, or "name", or its first line of text. */
 export declare function nameFieldOf(page: Page): string | null;
-/** The dialogs a page's widgets may open, made from the viewer's own options. */
-export declare function pageDialogs(options: ViewerOptions): WidgetDialogs;
+/**
+ * What a part asks the app's pages for: the page for a model, to show a
+ * linked record in a dialog; or a saved page by its id — and the version it
+ * keeps to, when it keeps to one — to draw a saved form placed in another.
+ */
+export type PageRequest = {
+    model: string;
+} | {
+    id: string;
+    version?: number;
+};
+/**
+ * The app's pages: a record of them by key — a model, a page's id, or
+ * `id@version` for a version kept to — or a function asked for each, which
+ * may answer at once or with a promise.
+ */
+export type PageFinder = Record<string, Page> | ((request: PageRequest) => Page | null | undefined | Promise<Page | null | undefined>);
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+export declare function findPage(options: Pick<ViewerOptions, 'pages' | 'relatedPages'>, request: PageRequest): Page | null | Promise<Page | null>;
+/**
+ * The dialogs a page's widgets may open, made from the viewer's own options.
+ * A linked record's page says its words through `say`, the opener's, so they
+ * show over the dialog and outlive it.
+ */
+export declare function pageDialogs(options: ViewerOptions, say?: (message: string, tone: Tone) => void): WidgetDialogs;

package/src/lib/related.d.ts

@@ -1,7 +1,30 @@
-import type { Page } from '@fieldia/core';
+import type { Page, Tone } from '@fieldia/core';
 import type { WidgetDialogs } from '@fieldia/widgets';
 import type { ViewerOptions } from './viewer';
 /** The field a page's records are named by: its title, or "name", or its first line of text. */
 export declare function nameFieldOf(page: Page): string | null;
-/** The dialogs a page's widgets may open, made from the viewer's own options. */
-export declare function pageDialogs(options: ViewerOptions): WidgetDialogs;
+/**
+ * What a part asks the app's pages for: the page for a model, to show a
+ * linked record in a dialog; or a saved page by its id — and the version it
+ * keeps to, when it keeps to one — to draw a saved form placed in another.
+ */
+export type PageRequest = {
+    model: string;
+} | {
+    id: string;
+    version?: number;
+};
+/**
+ * The app's pages: a record of them by key — a model, a page's id, or
+ * `id@version` for a version kept to — or a function asked for each, which
+ * may answer at once or with a promise.
+ */
+export type PageFinder = Record<string, Page> | ((request: PageRequest) => Page | null | undefined | Promise<Page | null | undefined>);
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+export declare function findPage(options: Pick<ViewerOptions, 'pages' | 'relatedPages'>, request: PageRequest): Page | null | Promise<Page | null>;
+/**
+ * The dialogs a page's widgets may open, made from the viewer's own options.
+ * A linked record's page says its words through `say`, the opener's, so they
+ * show over the dialog and outlive it.
+ */
+export declare function pageDialogs(options: ViewerOptions, say?: (message: string, tone: Tone) => void): WidgetDialogs;

package/src/lib/related.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nameFieldOf = nameFieldOf;
+exports.findPage = findPage;
 exports.pageDialogs = pageDialogs;
 const dialog_1 = require("./dialog");
 /** The field a page's records are named by: its title, or "name", or its first line of text. */
@@ -11,8 +12,8 @@ function nameFieldOf(page) {
         return 'name';
     return Object.entries(page.fields).find(([, def]) => def.type === 'char')?.[0] ?? null;
 }
-/** A form made of fields, for values edited in a dialog (a line, for one). */
-function valuesPage(fields, title, readonly) {
+/** A form made of fields, for values edited in a dialog (a line, for one): laid out as asked (a line's own form), else every field in two columns. */
+function valuesPage(fields, title, readonly, layout) {
     const shown = Object.fromEntries(Object.entries(fields).map(([name, def]) => [name, readonly ? { ...def, readonly: true } : def]));
     return {
         fieldia: '0.1',
@@ -23,10 +24,21 @@ function valuesPage(fields, title, readonly) {
         layout: {
             type: 'sections',
             id: 'values',
-            children: [{ type: 'section', id: 'values-section', columns: 2, children: Object.keys(shown).map((name) => ({ type: 'field', id: `values-${name}`, field: name })) }],
+            children: layout ?? [{ type: 'section', id: 'values-section', columns: 2, children: Object.keys(shown).map((name) => ({ type: 'field', id: `values-${name}`, field: name })) }],
         },
     };
 }
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+function findPage(options, request) {
+    const { pages, relatedPages } = options;
+    const key = 'model' in request ? request.model : request.version === undefined ? request.id : `${request.id}@${request.version}`;
+    const found = typeof pages === 'function' ? pages(request) : pages && Object.prototype.hasOwnProperty.call(pages, key) ? pages[key] : null;
+    if (found instanceof Promise)
+        return found.then((page) => page ?? null);
+    if (found || !('model' in request))
+        return found ?? null;
+    return (typeof relatedPages === 'function' ? relatedPages(request.model) : relatedPages?.[request.model]) ?? null;
+}
 /** Only finding and making linked records: values edited in a dialog are no record of the source's to load, save or recalculate. */
 function lookupsOf(source) {
     if (!source)
@@ -36,9 +48,13 @@ function lookupsOf(source) {
         ...(source.create ? { create: (request) => source.create(request) } : {}),
     };
 }
-/** The dialogs a page's widgets may open, made from the viewer's own options. */
-function pageDialogs(options) {
-    const pageFor = (model) => (typeof options.relatedPages === 'function' ? options.relatedPages(model) : options.relatedPages?.[model]) ?? null;
+/**
+ * The dialogs a page's widgets may open, made from the viewer's own options.
+ * A linked record's page says its words through `say`, the opener's, so they
+ * show over the dialog and outlive it.
+ */
+function pageDialogs(options, say) {
+    const pageFor = (model) => findPage(options, { model });
     // A dialog's page looks and reads like the page that opened it, and can open dialogs of its own.
     const shared = {
         locale: options.locale,
@@ -46,14 +62,18 @@ function pageDialogs(options) {
         dir: options.dir,
         widgets: options.widgets,
         preferences: options.preferences,
+        pages: options.pages,
         relatedPages: options.relatedPages,
         translate: options.translate,
         look: options.page.look,
+        // The person, and the values the app passes in, as the opener's own conditions and filters read them.
+        user: options.user,
+        context: options.context,
     };
     return {
         canOpen: (model) => pageFor(model) !== null,
         async openRecord(model, request) {
-            const related = pageFor(model);
+            const related = await pageFor(model);
             if (!related)
                 return null;
             const nameField = nameFieldOf(related);
@@ -62,25 +82,32 @@ function pageDialogs(options) {
                 page: related,
                 dataSource: options.dataSource,
                 recordId: request.recordId ?? null,
-                values: request.name && nameField ? { [nameField]: request.name } : undefined,
+                values: request.name || request.values ? { ...(request.values ?? {}), ...(request.name && nameField ? { [nameField]: request.name } : {}) } : undefined,
                 title: request.title,
                 size: 'large',
+                ...(say ? { host: { say } } : {}),
             });
             if (!result.saved || result.recordId === null)
                 return null;
             const name = nameField ? result.values[nameField] : null;
-            return { id: result.recordId, label: typeof name === 'string' && name ? name : request.name ?? request.title };
+            const label = typeof name === 'string' && name ? name : request.name ?? request.title;
+            // Its values as its page saved them, for a line of a table that opened it to take back.
+            return request.withValues ? { id: result.recordId, label, values: result.values } : { id: result.recordId, label };
         },
         searchMore: (request) => (0, dialog_1.openSearchDialog)({ title: request.title, search: request.search, locale: options.locale, skin: options.skin, dir: options.dir, look: options.page.look }),
         async editValues(request) {
             const result = await (0, dialog_1.openFormDialog)({
                 ...shared,
-                page: valuesPage(request.fields, request.title, request.readonly === true),
+                page: valuesPage(request.fields, request.title, request.readonly === true, request.layout),
+                ...(request.parent ? { parent: request.parent } : {}),
                 dataSource: lookupsOf(options.dataSource),
                 values: request.values,
                 title: request.title,
+                // A line's own form is laid out as a page is: the room of a record's dialog.
+                ...(request.layout ? { size: 'large' } : {}),
                 mode: 'values',
                 ...(request.recompute ? { recompute: request.recompute } : {}),
+                ...(say ? { host: { say } } : {}),
             });
             return result.saved ? result.values : null;
         },

package/src/lib/related.js.map

@@ -1 +1 @@
-{"version":3,"file":"related.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/related.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"related.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/related.ts"],"names":[],"mappings":";;AAMA,kCAIC;AAoCD,4BAOC;AAgBD,kCAyDC;AA5HD,qCAA4D;AAG5D,gGAAgG;AAChG,SAAgB,WAAW,CAAC,IAAU;IACpC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK;QAAE,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;IAC7F,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAAE,OAAO,MAAM,CAAC;IACvC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AACzF,CAAC;AAID,sJAAsJ;AACtJ,SAAS,UAAU,CAAC,MAA6B,EAAE,KAAa,EAAE,QAAiB,EAAE,MAAqB;IACxG,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAmB,CAAC;IACrJ,OAAO;QACL,OAAO,EAAE,KAAK;QACd,EAAE,EAAE,QAAQ;QACZ,KAAK;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACzC,MAAM,EAAE,KAAK;QACb,MAAM,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,EAAE,EAAE,QAAQ;YACZ,QAAQ,EAAE,MAAM,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAgB,EAAE,EAAE,EAAE,UAAU,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC;SACzL;KACF,CAAC;AACJ,CAAC;AAgBD,yIAAyI;AACzI,SAAgB,QAAQ,CAAC,OAAsD,EAAE,OAAoB;IACnG,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,OAAO,CAAC;IACxC,MAAM,GAAG,GAAG,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,EAAE,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;IACjI,MAAM,KAAK,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3I,IAAI,KAAK,YAAY,OAAO;QAAE,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;IACxE,IAAI,KAAK,IAAI,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC;QAAE,OAAO,KAAK,IAAI,IAAI,CAAC;IACzD,OAAO,CAAC,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC;AACpH,CAAC;AAED,oIAAoI;AACpI,SAAS,SAAS,CAAC,MAA8B;IAC/C,IAAI,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IAC9B,OAAO;QACL,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE,CAAC,MAAM,CAAC,MAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACzF,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,OAAsB,EAAE,EAAE,CAAC,MAAM,CAAC,MAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC1F,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,WAAW,CAAC,OAAsB,EAAE,GAA2C;IAC7F,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAChE,iGAAiG;IACjG,MAAM,MAAM,GAAG;QACb,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,GAAG,EAAE,OAAO,CAAC,GAAG;QAChB,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,YAAY,EAAE,OAAO,CAAC,YAAY;QAClC,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5B,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACvB,sGAAsG;QACtG,IAAI,EAAE,OAAO,CAAC,IAAI;QAClB,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC;IACF,OAAO;QACL,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI;QAC3C,KAAK,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO;YAC7B,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YAC1B,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;YACvC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC;gBAClC,GAAG,MAAM;gBACT,IAAI,EAAE,OAAO;gBACb,UAAU,EAAE,OAAO,CAAC,UAAU;gBAC9B,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,IAAI;gBAClC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;gBACvJ,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,IAAI,EAAE,OAAO;gBACb,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,CAAC,CAAC;YACH,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,QAAQ,KAAK,IAAI;gBAAE,OAAO,IAAI,CAAC;YAC3D,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YACzD,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC;YACtF,wFAAwF;YACxF,OAAO,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACrH,CAAC;QACD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAA,yBAAgB,EAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAClL,KAAK,CAAC,UAAU,CAAC,OAAO;YACtB,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC;gBAClC,GAAG,MAAM;gBACT,IAAI,EAAE,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,KAAK,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC;gBAC1F,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrD,UAAU,EAAE,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;gBACzC,MAAM,EAAE,OAAO,CAAC,MAAM;gBACtB,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,6EAA6E;gBAC7E,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrD,IAAI,EAAE,QAAQ;gBACd,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9D,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;aAClC,CAAC,CAAC;YACH,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/related.mjs

@@ -7,8 +7,8 @@ export function nameFieldOf(page) {
         return 'name';
     return Object.entries(page.fields).find(([, def]) => def.type === 'char')?.[0] ?? null;
 }
-/** A form made of fields, for values edited in a dialog (a line, for one). */
-function valuesPage(fields, title, readonly) {
+/** A form made of fields, for values edited in a dialog (a line, for one): laid out as asked (a line's own form), else every field in two columns. */
+function valuesPage(fields, title, readonly, layout) {
     const shown = Object.fromEntries(Object.entries(fields).map(([name, def]) => [name, readonly ? { ...def, readonly: true } : def]));
     return {
         fieldia: '0.1',
@@ -19,10 +19,21 @@ function valuesPage(fields, title, readonly) {
         layout: {
             type: 'sections',
             id: 'values',
-            children: [{ type: 'section', id: 'values-section', columns: 2, children: Object.keys(shown).map((name) => ({ type: 'field', id: `values-${name}`, field: name })) }],
+            children: layout ?? [{ type: 'section', id: 'values-section', columns: 2, children: Object.keys(shown).map((name) => ({ type: 'field', id: `values-${name}`, field: name })) }],
         },
     };
 }
+/** The page the app gives for a request: from `pages`, and for a model from `relatedPages` after it. A promise when it answers later. */
+export function findPage(options, request) {
+    const { pages, relatedPages } = options;
+    const key = 'model' in request ? request.model : request.version === undefined ? request.id : `${request.id}@${request.version}`;
+    const found = typeof pages === 'function' ? pages(request) : pages && Object.prototype.hasOwnProperty.call(pages, key) ? pages[key] : null;
+    if (found instanceof Promise)
+        return found.then((page) => page ?? null);
+    if (found || !('model' in request))
+        return found ?? null;
+    return (typeof relatedPages === 'function' ? relatedPages(request.model) : relatedPages?.[request.model]) ?? null;
+}
 /** Only finding and making linked records: values edited in a dialog are no record of the source's to load, save or recalculate. */
 function lookupsOf(source) {
     if (!source)
@@ -32,9 +43,13 @@ function lookupsOf(source) {
         ...(source.create ? { create: (request) => source.create(request) } : {}),
     };
 }
-/** The dialogs a page's widgets may open, made from the viewer's own options. */
-export function pageDialogs(options) {
-    const pageFor = (model) => (typeof options.relatedPages === 'function' ? options.relatedPages(model) : options.relatedPages?.[model]) ?? null;
+/**
+ * The dialogs a page's widgets may open, made from the viewer's own options.
+ * A linked record's page says its words through `say`, the opener's, so they
+ * show over the dialog and outlive it.
+ */
+export function pageDialogs(options, say) {
+    const pageFor = (model) => findPage(options, { model });
     // A dialog's page looks and reads like the page that opened it, and can open dialogs of its own.
     const shared = {
         locale: options.locale,
@@ -42,14 +57,18 @@ export function pageDialogs(options) {
         dir: options.dir,
         widgets: options.widgets,
         preferences: options.preferences,
+        pages: options.pages,
         relatedPages: options.relatedPages,
         translate: options.translate,
         look: options.page.look,
+        // The person, and the values the app passes in, as the opener's own conditions and filters read them.
+        user: options.user,
+        context: options.context,
     };
     return {
         canOpen: (model) => pageFor(model) !== null,
         async openRecord(model, request) {
-            const related = pageFor(model);
+            const related = await pageFor(model);
             if (!related)
                 return null;
             const nameField = nameFieldOf(related);
@@ -58,25 +77,32 @@ export function pageDialogs(options) {
                 page: related,
                 dataSource: options.dataSource,
                 recordId: request.recordId ?? null,
-                values: request.name && nameField ? { [nameField]: request.name } : undefined,
+                values: request.name || request.values ? { ...(request.values ?? {}), ...(request.name && nameField ? { [nameField]: request.name } : {}) } : undefined,
                 title: request.title,
                 size: 'large',
+                ...(say ? { host: { say } } : {}),
             });
             if (!result.saved || result.recordId === null)
                 return null;
             const name = nameField ? result.values[nameField] : null;
-            return { id: result.recordId, label: typeof name === 'string' && name ? name : request.name ?? request.title };
+            const label = typeof name === 'string' && name ? name : request.name ?? request.title;
+            // Its values as its page saved them, for a line of a table that opened it to take back.
+            return request.withValues ? { id: result.recordId, label, values: result.values } : { id: result.recordId, label };
         },
         searchMore: (request) => openSearchDialog({ title: request.title, search: request.search, locale: options.locale, skin: options.skin, dir: options.dir, look: options.page.look }),
         async editValues(request) {
             const result = await openFormDialog({
                 ...shared,
-                page: valuesPage(request.fields, request.title, request.readonly === true),
+                page: valuesPage(request.fields, request.title, request.readonly === true, request.layout),
+                ...(request.parent ? { parent: request.parent } : {}),
                 dataSource: lookupsOf(options.dataSource),
                 values: request.values,
                 title: request.title,
+                // A line's own form is laid out as a page is: the room of a record's dialog.
+                ...(request.layout ? { size: 'large' } : {}),
                 mode: 'values',
                 ...(request.recompute ? { recompute: request.recompute } : {}),
+                ...(say ? { host: { say } } : {}),
             });
             return result.saved ? result.values : null;
         },

package/src/lib/related.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"related.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/related.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"related.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/related.ts"],"names":[],"mappings":"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"}

package/src/lib/say.d.mts

@@ -0,0 +1,11 @@
+import type { Tone } from '@fieldia/core';
+import type { El } from './dom.mjs';
+/**
+ * Words a step says, as toasts at the foot of the screen: each in its tone,
+ * one over another, in a polite live region inside the form — so they wear its
+ * skin, scheme and direction. Each goes by itself after a moment, but not
+ * while the pointer or the focus is on it, and at once with its ×. They show
+ * over a dialog or panel too, and while a modal one is open, a screen reader —
+ * which hears only inside it — is told them there as well, unseen.
+ */
+export declare function sayer(root: HTMLElement, el: El, dismiss: string): (message: string, tone: Tone) => void;

package/src/lib/say.d.ts

@@ -0,0 +1,11 @@
+import type { Tone } from '@fieldia/core';
+import type { El } from './dom';
+/**
+ * Words a step says, as toasts at the foot of the screen: each in its tone,
+ * one over another, in a polite live region inside the form — so they wear its
+ * skin, scheme and direction. Each goes by itself after a moment, but not
+ * while the pointer or the focus is on it, and at once with its ×. They show
+ * over a dialog or panel too, and while a modal one is open, a screen reader —
+ * which hears only inside it — is told them there as well, unseen.
+ */
+export declare function sayer(root: HTMLElement, el: El, dismiss: string): (message: string, tone: Tone) => void;

package/src/lib/say.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sayer = sayer;
+/** How long words stay before they go by themselves: a warning or a danger stays longer. */
+const STAY_MS = 6000;
+const STAY_LONG_MS = 10000;
+/** The most toasts on screen at once: the oldest give way. */
+const MOST = 4;
+/**
+ * Words a step says, as toasts at the foot of the screen: each in its tone,
+ * one over another, in a polite live region inside the form — so they wear its
+ * skin, scheme and direction. Each goes by itself after a moment, but not
+ * while the pointer or the focus is on it, and at once with its ×. They show
+ * over a dialog or panel too, and while a modal one is open, a screen reader —
+ * which hears only inside it — is told them there as well, unseen.
+ */
+function sayer(root, el, dismiss) {
+    // There before anything is said, so a screen reader hears what comes into it.
+    const region = el('div', { class: 'fd-says', role: 'status', 'aria-live': 'polite' });
+    root.append(region);
+    return (message, tone) => {
+        const close = el('button', { type: 'button', class: 'fd-alert-close', 'aria-label': dismiss }, '×');
+        const toast = el('div', { class: 'fd-say', 'data-tone': tone }, el('span', {}, message), close);
+        // Its edge in its tone's colour, from the scheme's own: a danger is the error colour.
+        toast.style.setProperty('--fd-tone', `var(--fd-${tone === 'danger' ? 'error' : tone})`);
+        let timer;
+        const hold = () => clearTimeout(timer);
+        const go = () => {
+            hold();
+            toast.remove();
+        };
+        const wait = () => {
+            hold();
+            timer = setTimeout(go, tone === 'warning' || tone === 'danger' ? STAY_LONG_MS : STAY_MS);
+        };
+        close.addEventListener('click', go);
+        toast.addEventListener('mouseenter', hold);
+        toast.addEventListener('focusin', hold);
+        toast.addEventListener('mouseleave', wait);
+        toast.addEventListener('focusout', wait);
+        region.append(toast);
+        while (region.children.length > MOST)
+            region.firstElementChild?.remove();
+        echo(region, el, message);
+        wait();
+    };
+}
+/** The words again, unseen, in a live region of the topmost modal dialog the region is not in. */
+function echo(region, el, message) {
+    const modals = [...region.ownerDocument.querySelectorAll('[aria-modal="true"]')].filter((m) => !m.contains(region));
+    const top = modals[modals.length - 1];
+    if (!top)
+        return;
+    let heard = top.querySelector(':scope > .fd-says-echo');
+    if (!heard) {
+        heard = el('div', { class: 'fd-says-echo fd-sr-only', role: 'status', 'aria-live': 'polite' });
+        top.append(heard);
+    }
+    heard.textContent = message;
+}
+//# sourceMappingURL=say.js.map

package/src/lib/say.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"say.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/say.ts"],"names":[],"mappings":"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"}