@fieldia/viewer 0.10.0 → 0.12.0

package/src/lib/say.mjs

@@ -0,0 +1,58 @@
+/** 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.
+ */
+export 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.mjs.map

package/src/lib/say.mjs.map

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

package/src/lib/tab-strip.d.mts

@@ -0,0 +1,17 @@
+import type { El } from './dom.mjs';
+export interface TabStrip {
+    /** The tabs' list with a button at each edge: what goes on the page. */
+    element: HTMLElement;
+    /** Look again at what is past each edge: after the tabs shown change, or the strip's width. */
+    measure(): void;
+    /** Scroll the strip, and only the strip, so this tab is in sight. */
+    reveal(tab: HTMLElement): void;
+    destroy(): void;
+}
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+export declare function tabStrip(list: HTMLElement, el: El): TabStrip;

package/src/lib/tab-strip.d.ts

@@ -0,0 +1,17 @@
+import type { El } from './dom';
+export interface TabStrip {
+    /** The tabs' list with a button at each edge: what goes on the page. */
+    element: HTMLElement;
+    /** Look again at what is past each edge: after the tabs shown change, or the strip's width. */
+    measure(): void;
+    /** Scroll the strip, and only the strip, so this tab is in sight. */
+    reveal(tab: HTMLElement): void;
+    destroy(): void;
+}
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+export declare function tabStrip(list: HTMLElement, el: El): TabStrip;

package/src/lib/tab-strip.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabStrip = tabStrip;
+const dom_1 = require("./dom");
+/** Room kept beside a tab brought into sight: the button over that edge and the fade beside it. */
+const EDGE = 64;
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+function tabStrip(list, el) {
+    const rtl = () => list.closest('[dir]')?.getAttribute('dir') === 'rtl';
+    const edge = (side) => el('button', { type: 'button', class: `fd-tabs-scroll fd-tabs-${side}`, tabindex: '-1', 'aria-hidden': 'true', hidden: '' });
+    const before = edge('before');
+    const after = edge('after');
+    const element = el('div', { class: 'fd-tabbar' }, before, list, after);
+    // A strip's width along, less a tab's room, toward the button's own edge.
+    const move = (toward) => list.scrollBy({ left: toward * (rtl() ? -1 : 1) * Math.max(list.clientWidth - 2 * EDGE, EDGE), behavior: 'smooth' });
+    before.addEventListener('click', () => move(-1));
+    after.addEventListener('click', () => move(1));
+    function measure() {
+        // How far along from the start: right to left, scrollLeft runs from 0 down.
+        const along = Math.abs(list.scrollLeft);
+        const start = along > 1;
+        const end = along + list.clientWidth < list.scrollWidth - 1;
+        (0, dom_1.setHidden)(before, !start);
+        (0, dom_1.setHidden)(after, !end);
+        const more = [start && 'start', end && 'end'].filter(Boolean).join(' ');
+        (0, dom_1.setAttr)(element, 'data-more', more || null);
+    }
+    function reveal(tab) {
+        if (!list.clientWidth || list.scrollWidth <= list.clientWidth)
+            return;
+        const room = list.getBoundingClientRect();
+        const at = tab.getBoundingClientRect();
+        // Either way round, a larger scrollLeft shows what is further right.
+        if (at.left < room.left + EDGE)
+            list.scrollLeft += at.left - room.left - EDGE;
+        else if (at.right > room.right - EDGE)
+            list.scrollLeft += at.right - room.right + EDGE;
+        measure();
+    }
+    list.addEventListener('scroll', measure, { passive: true });
+    const view = list.ownerDocument.defaultView;
+    const watcher = view && 'ResizeObserver' in view ? new view.ResizeObserver(() => measure()) : null;
+    watcher?.observe(list);
+    return { element, measure, reveal, destroy: () => watcher?.disconnect() };
+}
+//# sourceMappingURL=tab-strip.js.map

package/src/lib/tab-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-strip.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/tab-strip.ts"],"names":[],"mappings":";;AAsBA,4BAuCC;AA5DD,+BAA2C;AAE3C,mGAAmG;AACnG,MAAM,IAAI,GAAG,EAAE,CAAC;AAYhB;;;;;GAKG;AACH,SAAgB,QAAQ,CAAC,IAAiB,EAAE,EAAM;IAChD,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;IACvE,MAAM,IAAI,GAAG,CAAC,IAAwB,EAAE,EAAE,CACxC,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,0BAA0B,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/H,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACvE,0EAA0E;IAC1E,MAAM,IAAI,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtJ,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/C,SAAS,OAAO;QACd,4EAA4E;QAC5E,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;QACxB,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QAC5D,IAAA,eAAS,EAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,IAAA,eAAS,EAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;QACvB,MAAM,IAAI,GAAG,CAAC,KAAK,IAAI,OAAO,EAAE,GAAG,IAAI,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxE,IAAA,aAAO,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,SAAS,MAAM,CAAC,GAAgB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO;QACtE,MAAM,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC1C,MAAM,EAAE,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QACvC,qEAAqE;QACrE,IAAI,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI;YAAE,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;aACzE,IAAI,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI;YAAE,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACvF,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAI,IAAI,gBAAgB,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACnG,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC;AAC5E,CAAC"}

package/src/lib/tab-strip.mjs

@@ -0,0 +1,48 @@
+import { setAttr, setHidden } from './dom.mjs';
+/** Room kept beside a tab brought into sight: the button over that edge and the fade beside it. */
+const EDGE = 64;
+/**
+ * A row of tabs too long for its room scrolls sideways: past an edge with more
+ * beyond it, the tabs fade out under a button that moves the strip a width
+ * along — to the left at the start of a right-to-left page. The buttons are
+ * for a pointer: the keyboard moves along the tabs, which come into sight.
+ */
+export function tabStrip(list, el) {
+    const rtl = () => list.closest('[dir]')?.getAttribute('dir') === 'rtl';
+    const edge = (side) => el('button', { type: 'button', class: `fd-tabs-scroll fd-tabs-${side}`, tabindex: '-1', 'aria-hidden': 'true', hidden: '' });
+    const before = edge('before');
+    const after = edge('after');
+    const element = el('div', { class: 'fd-tabbar' }, before, list, after);
+    // A strip's width along, less a tab's room, toward the button's own edge.
+    const move = (toward) => list.scrollBy({ left: toward * (rtl() ? -1 : 1) * Math.max(list.clientWidth - 2 * EDGE, EDGE), behavior: 'smooth' });
+    before.addEventListener('click', () => move(-1));
+    after.addEventListener('click', () => move(1));
+    function measure() {
+        // How far along from the start: right to left, scrollLeft runs from 0 down.
+        const along = Math.abs(list.scrollLeft);
+        const start = along > 1;
+        const end = along + list.clientWidth < list.scrollWidth - 1;
+        setHidden(before, !start);
+        setHidden(after, !end);
+        const more = [start && 'start', end && 'end'].filter(Boolean).join(' ');
+        setAttr(element, 'data-more', more || null);
+    }
+    function reveal(tab) {
+        if (!list.clientWidth || list.scrollWidth <= list.clientWidth)
+            return;
+        const room = list.getBoundingClientRect();
+        const at = tab.getBoundingClientRect();
+        // Either way round, a larger scrollLeft shows what is further right.
+        if (at.left < room.left + EDGE)
+            list.scrollLeft += at.left - room.left - EDGE;
+        else if (at.right > room.right - EDGE)
+            list.scrollLeft += at.right - room.right + EDGE;
+        measure();
+    }
+    list.addEventListener('scroll', measure, { passive: true });
+    const view = list.ownerDocument.defaultView;
+    const watcher = view && 'ResizeObserver' in view ? new view.ResizeObserver(() => measure()) : null;
+    watcher?.observe(list);
+    return { element, measure, reveal, destroy: () => watcher?.disconnect() };
+}
+//# sourceMappingURL=tab-strip.mjs.map

package/src/lib/tab-strip.mjs.map

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

package/src/lib/value-words.d.mts

@@ -0,0 +1,10 @@
+import { type Fields, type Locale, type Values } from '@fieldia/core';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export declare function valueWords(doc: Document, fields: Fields, text: string, locale: Locale): {
+    nodes: (Node | string)[];
+    update(values: Readonly<Values>): void;
+};

package/src/lib/value-words.d.ts

@@ -0,0 +1,10 @@
+import { type Fields, type Locale, type Values } from '@fieldia/core';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export declare function valueWords(doc: Document, fields: Fields, text: string, locale: Locale): {
+    nodes: (Node | string)[];
+    update(values: Readonly<Values>): void;
+};

package/src/lib/value-words.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueWords = valueWords;
+const core_1 = require("@fieldia/core");
+const widgets_1 = require("@fieldia/widgets");
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+function valueWords(doc, fields, text, locale) {
+    const parts = (0, core_1.splitValues)(text);
+    if (!parts.some((part) => part.field))
+        return { nodes: [text], update: () => undefined };
+    const values = [];
+    const nodes = parts.map((part) => {
+        if (!part.field)
+            return part.text;
+        // Set apart from the words round it, so a date or an amount keeps its own order on a page read right to left.
+        const span = doc.createElement('bdi');
+        span.className = 'fd-value';
+        span.dataset['field'] = part.field;
+        values.push({ field: part.field, span });
+        return span;
+    });
+    return {
+        nodes,
+        update(record) {
+            for (const { field, span } of values) {
+                const def = fields[field];
+                const words = def ? (0, widgets_1.displayValue)(def, record[field], record, locale) : '';
+                if (span.textContent !== words)
+                    span.textContent = words;
+            }
+        },
+    };
+}
+//# sourceMappingURL=value-words.js.map

package/src/lib/value-words.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-words.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/value-words.ts"],"names":[],"mappings":";;AAQA,gCAuBC;AA/BD,wCAA+G;AAC/G,8CAAgD;AAEhD;;;;GAIG;AACH,SAAgB,UAAU,CAAC,GAAa,EAAE,MAAc,EAAE,IAAY,EAAE,MAAc;IACpF,MAAM,KAAK,GAAG,IAAA,kBAAW,EAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;IACzF,MAAM,MAAM,GAA2C,EAAE,CAAC;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC/B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAClC,8GAA8G;QAC9G,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO;QACL,KAAK;QACL,MAAM,CAAC,MAAM;YACX,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,CAAC;gBACrC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAA,sBAAY,EAAC,GAAgB,EAAE,MAAM,CAAC,KAAK,CAAsB,EAAE,MAA+B,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrI,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK;oBAAE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3D,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/value-words.mjs

@@ -0,0 +1,35 @@
+import { splitValues } from '@fieldia/core';
+import { displayValue } from '@fieldia/widgets';
+/**
+ * Words that hold fields' values — "Entries before {lock_date} cannot be
+ * posted." — drawn as text with each value in a span of its own, written as
+ * the field shows it, and brought up to date as the record changes.
+ */
+export function valueWords(doc, fields, text, locale) {
+    const parts = splitValues(text);
+    if (!parts.some((part) => part.field))
+        return { nodes: [text], update: () => undefined };
+    const values = [];
+    const nodes = parts.map((part) => {
+        if (!part.field)
+            return part.text;
+        // Set apart from the words round it, so a date or an amount keeps its own order on a page read right to left.
+        const span = doc.createElement('bdi');
+        span.className = 'fd-value';
+        span.dataset['field'] = part.field;
+        values.push({ field: part.field, span });
+        return span;
+    });
+    return {
+        nodes,
+        update(record) {
+            for (const { field, span } of values) {
+                const def = fields[field];
+                const words = def ? displayValue(def, record[field], record, locale) : '';
+                if (span.textContent !== words)
+                    span.textContent = words;
+            }
+        },
+    };
+}
+//# sourceMappingURL=value-words.mjs.map

package/src/lib/value-words.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-words.mjs","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/value-words.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAqE,MAAM,eAAe,CAAC;AAC/G,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,GAAa,EAAE,MAAc,EAAE,IAAY,EAAE,MAAc;IACpF,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;IACzF,MAAM,MAAM,GAA2C,EAAE,CAAC;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC/B,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAClC,8GAA8G;QAC9G,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IACH,OAAO;QACL,KAAK;QACL,MAAM,CAAC,MAAM;YACX,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,MAAM,EAAE,CAAC;gBACrC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,GAAgB,EAAE,MAAM,CAAC,KAAK,CAAsB,EAAE,MAA+B,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrI,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK;oBAAE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3D,CAAC;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/viewer.d.mts

@@ -1,14 +1,18 @@
-import { type Form, type FormOptions, type Page, type RecordId, type Locale } from '@fieldia/core';
+import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type ResolvedFilter, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
 import { type IconSet, type PreferenceStore, type WidgetFactory } from '@fieldia/widgets';
+import { type PageFinder } from './related.mjs';
+import { type Breadcrumb, type RecordPager } from './record-bar.mjs';
+export type { Breadcrumb, RecordPager } from './record-bar.mjs';
 export type Skin = 'underline' | 'outlined';
 import { type ViewerLabels } from './labels.mjs';
 export { VIEWER_LABELS, DEFAULT_LABELS, type ViewerLabels } from './labels.mjs';
+export type { PageFinder, PageRequest } from './related.mjs';
 /** Fill a slot with the app's own content. Return a function to clean up. */
 export type SlotRenderer = (element: HTMLElement, context: {
     form: Form;
     name: string;
 }) => void | (() => void);
-export interface ViewerOptions extends Omit<FormOptions, 'page'> {
+export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
     page: Page;
     /** A form made elsewhere, to share one record between two views. */
     form?: Form;
@@ -29,16 +33,24 @@ export interface ViewerOptions extends Omit<FormOptions, 'page'> {
     /** Labels that win over the language's defaults. */
     labels?: Partial<ViewerLabels>;
     dir?: 'ltr' | 'rtl';
-    /** How to ask before a button with `confirm` runs. Defaults to a small dialog. */
+    /** How a question is asked: a button's `confirm`, and an `ask` step. Defaults to the viewer's own small box. */
     confirm?: (message: string) => Promise<boolean>;
     /** Where a person's choices about the page's look are kept, such as a table's columns. The browser's storage by default. */
     preferences?: PreferenceStore;
     /** False when something around the page saves it, such as a dialog: the page's own Save, Discard and Submit stay hidden. */
     showActions?: boolean;
     /**
-     * Pages for the models links point to, so a link can show its record in a
-     * dialog: Create and edit…, and the button that opens the linked record.
+     * The app's pages, for the parts that show another page. A saved form placed
+     * in this one (a `form` part) is drawn from the page asked for by its id —
+     * `{ id, version }` when it keeps to a version; and a link shows its record
+     * in a dialog (Create and edit…, and the button that opens the linked
+     * record) with the page asked for by the model it points to, `{ model }`.
+     * Either a record of pages 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
+     * with a promise: a saved form shows a quiet placeholder until it does.
      */
+    pages?: PageFinder;
+    /** Pages by the models links point to: what `pages` gives by model, as earlier versions had it. Still read. */
     relatedPages?: Record<string, Page> | ((model: string) => Page | null | undefined);
     /**
      * The app's own icons, or replacements for Fieldia's, by the name a page
@@ -69,6 +81,37 @@ export interface ViewerOptions extends Omit<FormOptions, 'page'> {
     translate?: (text: string) => string;
     /** A list page: a row was opened, by a click or by Enter. The app shows the record. */
     onOpenRecord?: (id: RecordId) => void;
+    /** A list page: only the records these conditions let through, whatever is searched — the invoices of one order, opened from it. */
+    listFilter?: ResolvedFilter[];
+    /**
+     * What the page's steps ask of the screen, the viewer does itself: a page
+     * opened (in a dialog, a side panel, or this form's place, with Back), words
+     * said (a toast), a question asked (its own box, or `confirm`), a tab shown.
+     * Give any of these to do it your own way; the rest stay the viewer's.
+     */
+    host?: Partial<ActionHost>;
+    /**
+     * A page a step opens: answer with how it ended to open it your own way —
+     * your router, your own dialog — or with undefined to let the viewer open it.
+     */
+    onOpen?: (request: OpenRequest) => Promise<OpenResult> | undefined;
+    /**
+     * The records round this one, for the pager over a record — "3 / 42",
+     * Previous and Next — as the list it was opened from has them: their ids in
+     * order, or how many there are, where this one is, and the id at a place.
+     * Moving saves what changed first, as Flectra does; the form then shows
+     * the other record (its `open` event says which). A copy joins them after
+     * its record; a record deleted leaves them, the pager moving to the next.
+     * Never in a dialog.
+     */
+    records?: readonly RecordId[] | RecordPager;
+    /**
+     * The trail to this record, for the breadcrumbs over it: each page before
+     * it with its words and what a press does (back to it); the record itself
+     * comes last, by its name. A page a step opens in this one's place adds
+     * this one to the trail, as the way back. Never in a dialog.
+     */
+    breadcrumbs?: readonly Breadcrumb[];
 }
 export interface ViewerHandle {
     readonly form: Form;
@@ -81,6 +124,12 @@ export interface ViewerHandle {
     /** Lock or unlock the whole form. */
     setReadonly(readonly: boolean): void;
     isReadonly(): boolean;
+    /** Listen to one of the form's events — change, save, send, action, run, step, open; returns what stops listening. */
+    on<E extends keyof FormEvents>(event: E, listener: (event: FormEvents[E]) => void): () => void;
+    /** Write several fields at once, as the app: the page's change steps do not run for it. */
+    setValues(values: Values): void;
+    /** Run steps on the form, as a button would. */
+    run(steps: readonly ActionStep[], context?: RunContext): Promise<RunResult>;
     destroy(): void;
 }
 /**

package/src/lib/viewer.d.ts

@@ -1,14 +1,18 @@
-import { type Form, type FormOptions, type Page, type RecordId, type Locale } from '@fieldia/core';
+import { type ActionHost, type ActionStep, type FormEvents, type Form, type FormOptions, type Page, type RecordId, type ResolvedFilter, type Locale, type OpenRequest, type OpenResult, type RunContext, type RunResult, type Values } from '@fieldia/core';
 import { type IconSet, type PreferenceStore, type WidgetFactory } from '@fieldia/widgets';
+import { type PageFinder } from './related';
+import { type Breadcrumb, type RecordPager } from './record-bar';
+export type { Breadcrumb, RecordPager } from './record-bar';
 export type Skin = 'underline' | 'outlined';
 import { type ViewerLabels } from './labels';
 export { VIEWER_LABELS, DEFAULT_LABELS, type ViewerLabels } from './labels';
+export type { PageFinder, PageRequest } from './related';
 /** Fill a slot with the app's own content. Return a function to clean up. */
 export type SlotRenderer = (element: HTMLElement, context: {
     form: Form;
     name: string;
 }) => void | (() => void);
-export interface ViewerOptions extends Omit<FormOptions, 'page'> {
+export interface ViewerOptions extends Omit<FormOptions, 'page' | 'host'> {
     page: Page;
     /** A form made elsewhere, to share one record between two views. */
     form?: Form;
@@ -29,16 +33,24 @@ export interface ViewerOptions extends Omit<FormOptions, 'page'> {
     /** Labels that win over the language's defaults. */
     labels?: Partial<ViewerLabels>;
     dir?: 'ltr' | 'rtl';
-    /** How to ask before a button with `confirm` runs. Defaults to a small dialog. */
+    /** How a question is asked: a button's `confirm`, and an `ask` step. Defaults to the viewer's own small box. */
     confirm?: (message: string) => Promise<boolean>;
     /** Where a person's choices about the page's look are kept, such as a table's columns. The browser's storage by default. */
     preferences?: PreferenceStore;
     /** False when something around the page saves it, such as a dialog: the page's own Save, Discard and Submit stay hidden. */
     showActions?: boolean;
     /**
-     * Pages for the models links point to, so a link can show its record in a
-     * dialog: Create and edit…, and the button that opens the linked record.
+     * The app's pages, for the parts that show another page. A saved form placed
+     * in this one (a `form` part) is drawn from the page asked for by its id —
+     * `{ id, version }` when it keeps to a version; and a link shows its record
+     * in a dialog (Create and edit…, and the button that opens the linked
+     * record) with the page asked for by the model it points to, `{ model }`.
+     * Either a record of pages 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
+     * with a promise: a saved form shows a quiet placeholder until it does.
      */
+    pages?: PageFinder;
+    /** Pages by the models links point to: what `pages` gives by model, as earlier versions had it. Still read. */
     relatedPages?: Record<string, Page> | ((model: string) => Page | null | undefined);
     /**
      * The app's own icons, or replacements for Fieldia's, by the name a page
@@ -69,6 +81,37 @@ export interface ViewerOptions extends Omit<FormOptions, 'page'> {
     translate?: (text: string) => string;
     /** A list page: a row was opened, by a click or by Enter. The app shows the record. */
     onOpenRecord?: (id: RecordId) => void;
+    /** A list page: only the records these conditions let through, whatever is searched — the invoices of one order, opened from it. */
+    listFilter?: ResolvedFilter[];
+    /**
+     * What the page's steps ask of the screen, the viewer does itself: a page
+     * opened (in a dialog, a side panel, or this form's place, with Back), words
+     * said (a toast), a question asked (its own box, or `confirm`), a tab shown.
+     * Give any of these to do it your own way; the rest stay the viewer's.
+     */
+    host?: Partial<ActionHost>;
+    /**
+     * A page a step opens: answer with how it ended to open it your own way —
+     * your router, your own dialog — or with undefined to let the viewer open it.
+     */
+    onOpen?: (request: OpenRequest) => Promise<OpenResult> | undefined;
+    /**
+     * The records round this one, for the pager over a record — "3 / 42",
+     * Previous and Next — as the list it was opened from has them: their ids in
+     * order, or how many there are, where this one is, and the id at a place.
+     * Moving saves what changed first, as Flectra does; the form then shows
+     * the other record (its `open` event says which). A copy joins them after
+     * its record; a record deleted leaves them, the pager moving to the next.
+     * Never in a dialog.
+     */
+    records?: readonly RecordId[] | RecordPager;
+    /**
+     * The trail to this record, for the breadcrumbs over it: each page before
+     * it with its words and what a press does (back to it); the record itself
+     * comes last, by its name. A page a step opens in this one's place adds
+     * this one to the trail, as the way back. Never in a dialog.
+     */
+    breadcrumbs?: readonly Breadcrumb[];
 }
 export interface ViewerHandle {
     readonly form: Form;
@@ -81,6 +124,12 @@ export interface ViewerHandle {
     /** Lock or unlock the whole form. */
     setReadonly(readonly: boolean): void;
     isReadonly(): boolean;
+    /** Listen to one of the form's events — change, save, send, action, run, step, open; returns what stops listening. */
+    on<E extends keyof FormEvents>(event: E, listener: (event: FormEvents[E]) => void): () => void;
+    /** Write several fields at once, as the app: the page's change steps do not run for it. */
+    setValues(values: Values): void;
+    /** Run steps on the form, as a button would. */
+    run(steps: readonly ActionStep[], context?: RunContext): Promise<RunResult>;
     destroy(): void;
 }
 /**