@fieldia/viewer 0.5.0 → 0.7.0

package/src/lib/viewer.mjs

@@ -1,90 +1,8 @@
-import { createForm, validatePage, MESSAGES, } from '@fieldia/core';
-import { browserPreferences, createWidget, installStyles, WIDGET_LABELS } from '@fieldia/widgets';
-import { openFormDialog, openSearchDialog } from './dialog.mjs';
-export const VIEWER_LABELS = {
-    en: {
-        save: 'Save',
-        discard: 'Discard',
-        saving: 'Saving…',
-        saved: 'Saved',
-        submit: 'Submit',
-        next: 'Next',
-        back: 'Back',
-        stepOf: 'Step {n} of {total}',
-        submitted: 'Thank you. Your answers were sent.',
-        submitAnother: 'Submit another response',
-        draftFound: 'You have unsaved answers from {time}.',
-        restore: 'Restore',
-        discardDraft: 'Discard',
-        ok: 'OK',
-        cancel: 'Cancel',
-        loading: 'Loading…',
-        saveClose: 'Save & Close',
-        close: 'Close',
-    },
-    ar: {
-        save: 'حفظ',
-        discard: 'تجاهل',
-        saving: 'جارٍ الحفظ…',
-        saved: 'تم الحفظ',
-        submit: 'إرسال',
-        next: 'التالي',
-        back: 'رجوع',
-        stepOf: 'الخطوة {n} من {total}',
-        submitted: 'شكرًا لك. تم إرسال إجاباتك.',
-        submitAnother: 'إرسال إجابة أخرى',
-        draftFound: 'لديك إجابات غير محفوظة من {time}.',
-        restore: 'استعادة',
-        discardDraft: 'تجاهل',
-        ok: 'موافق',
-        cancel: 'إلغاء',
-        loading: 'جارٍ التحميل…',
-        saveClose: 'حفظ وإغلاق',
-        close: 'إغلاق',
-    },
-    de: {
-        save: 'Speichern',
-        discard: 'Verwerfen',
-        saving: 'Wird gespeichert…',
-        saved: 'Gespeichert',
-        submit: 'Absenden',
-        next: 'Weiter',
-        back: 'Zurück',
-        stepOf: 'Schritt {n} von {total}',
-        submitted: 'Vielen Dank. Ihre Antworten wurden gesendet.',
-        submitAnother: 'Weitere Antwort senden',
-        draftFound: 'Sie haben ungespeicherte Antworten vom {time}.',
-        restore: 'Wiederherstellen',
-        discardDraft: 'Verwerfen',
-        ok: 'OK',
-        cancel: 'Abbrechen',
-        loading: 'Wird geladen…',
-        saveClose: 'Speichern und schließen',
-        close: 'Schließen',
-    },
-    fr: {
-        save: 'Enregistrer',
-        discard: 'Annuler les modifications',
-        saving: 'Enregistrement…',
-        saved: 'Enregistré',
-        submit: 'Envoyer',
-        next: 'Suivant',
-        back: 'Retour',
-        stepOf: 'Étape {n} sur {total}',
-        submitted: 'Merci. Vos réponses ont été envoyées.',
-        submitAnother: 'Envoyer une autre réponse',
-        draftFound: 'Vous avez des réponses non enregistrées du {time}.',
-        restore: 'Restaurer',
-        discardDraft: 'Ignorer',
-        ok: 'OK',
-        cancel: 'Annuler',
-        loading: 'Chargement…',
-        saveClose: 'Enregistrer et fermer',
-        close: 'Fermer',
-    },
-};
-/** English, kept under its old name. */
-export const DEFAULT_LABELS = VIEWER_LABELS.en;
+import { createForm, checkPage, translatePage, wideColumns, MESSAGES, } from '@fieldia/core';
+import { browserPreferences, createWidget, drawIcon, installStyles, WIDGET_LABELS } from '@fieldia/widgets';
+import { pageDialogs } from './related.mjs';
+import { VIEWER_LABELS } from './labels.mjs';
+export { VIEWER_LABELS, DEFAULT_LABELS } from './labels.mjs';
 let mounts = 0;
 /**
  * Render a page into `host` and keep it in step with its form. Plain DOM: the
@@ -93,11 +11,12 @@ let mounts = 0;
  */
 export function mountViewer(host, options) {
     const doc = host.ownerDocument;
-    const checked = validatePage(options.page);
+    // The quick check of names and conditions: the full one, with its validation library, belongs where pages are made.
+    const checked = checkPage(options.page);
     if (!checked.ok) {
         throw new Error(`This page cannot be shown:\n${checked.issues.map((i) => `  ${i.path}: ${i.message}`).join('\n')}`);
     }
-    const page = checked.page;
+    const page = options.translate ? translatePage(checked.page, options.translate) : checked.page;
     const locale = options.locale ?? 'en';
     const preferences = options.preferences ?? browserPreferences();
     const dialogs = pageDialogs(options);
@@ -120,7 +39,12 @@ export function mountViewer(host, options) {
         node.append(...children);
         return node;
     }
-    const root = el('form', { class: 'fd-form', novalidate: '', 'data-fd-skin': options.skin ?? 'underline', dir, lang: options.locale });
+    /** Words with the icon a page names before them, when there is such an icon. */
+    function withIcon(name, text) {
+        const icon = drawIcon(doc, name, options.icons);
+        return icon ? [icon, text] : [text];
+    }
+    const root = el('form', { class: 'fd-form', novalidate: '', 'data-fd-skin': options.skin ?? 'underline', dir, lang: options.locale, 'data-max-width': page.maxWidth });
     const confirm = options.confirm ?? dialogConfirm;
     // ---- the parts -------------------------------------------------------
     function fieldItem(node) {
@@ -130,6 +54,12 @@ export function mountViewer(host, options) {
         if (node.colspan)
             wrapper.style.setProperty('--fd-span', String(node.colspan));
         const label = el('label', { class: 'fd-label', id: `${id}-label`, for: id }, node.label ?? def.label);
+        // The ✓ of a field filled in right; never on a yes/no box, a table or a file, where it would say nothing.
+        const mark = options.showValid && !NO_VALID_MARK.has(def.type) ? drawIcon(doc, 'check') : null;
+        if (mark) {
+            mark.classList.add('fd-valid-mark');
+            label.append(mark);
+        }
         const widget = createWidget({ form, name: node.field, field: def, node, id, document: doc, labels: widgetLabels, preferences, locale, dialogs }, options.widgets);
         if (!['INPUT', 'SELECT', 'TEXTAREA'].includes(widget.element.tagName)) {
             // `for` stays: a custom field that puts the id on its own input is
@@ -141,7 +71,8 @@ export function mountViewer(host, options) {
         }
         const helpText = node.help ?? def.help;
         const help = helpText ? el('div', { class: 'fd-help', id: `${id}-help` }, helpText) : null;
-        const error = el('div', { class: 'fd-error', id: `${id}-error`, role: 'alert', hidden: '' });
+        // Not an alert of its own: a refused save is announced once, naming every field to look at.
+        const error = el('div', { class: 'fd-error', id: `${id}-error`, hidden: '' });
         // A warning from the data source's onchange, beside the field whose change brought it.
         const warning = el('div', { class: 'fd-warning', role: 'status', hidden: '' });
         wrapper.append(label, widget.element, ...(help ? [help] : []), error, warning);
@@ -157,10 +88,17 @@ export function mountViewer(host, options) {
             const warned = state.warning && state.warningField === node.field ? state.warning : '';
             warning.hidden = !warned;
             warning.textContent = warned;
+            if (mark) {
+                const value = state.values[node.field];
+                const filled = value !== null && value !== undefined && value !== '' && !(Array.isArray(value) && !value.length);
+                const valid = !shown.readonly && !message && filled && state.dirty.includes(node.field) && form.problem(node.field) === null;
+                wrapper.classList.toggle('fd-valid', valid);
+                mark.toggleAttribute('hidden', !valid);
+            }
             widget.update({
                 value: state.values[node.field],
                 values: state.values,
-                readonly: shown.readonly,
+                readonly: shown.readonly || locked,
                 required: shown.required,
                 invalid: !!message,
                 describedBy: [help?.id, message ? error.id : undefined].filter(Boolean).join(' ') || undefined,
@@ -174,7 +112,7 @@ export function mountViewer(host, options) {
         });
     }
     function buttonItem(node) {
-        const button = el('button', { type: 'button', class: `fd-button fd-button-${node.style ?? 'secondary'}`, 'data-node': node.id }, node.label);
+        const button = el('button', { type: 'button', class: `fd-button fd-button-${node.style ?? 'secondary'}`, 'data-node': node.id }, ...withIcon(node.icon, node.label));
         button.addEventListener('click', async () => {
             if (node.confirm && !(await confirm(node.confirm)))
                 return;
@@ -199,7 +137,17 @@ export function mountViewer(host, options) {
     }
     function grid(children, columns = 1) {
         const box = el('div', { class: 'fd-grid' });
-        box.style.setProperty('--fd-columns', String(columns));
+        box.style.setProperty('--fd-columns', String(wideColumns(columns)));
+        // Counts given for the narrower widths replace the skin's own stacking there.
+        if (typeof columns === 'object') {
+            for (const width of ['medium', 'narrow']) {
+                const count = columns[width];
+                if (count === undefined)
+                    continue;
+                box.setAttribute(`data-columns-${width}`, String(count));
+                box.style.setProperty(`--fd-columns-${width}`, String(count));
+            }
+        }
         box.append(...children.map(item));
         return box;
     }
@@ -208,10 +156,10 @@ export function mountViewer(host, options) {
     function sectionItem(node) {
         const section = el('fieldset', { class: 'fd-section', 'data-node': node.id });
         const description = node.description ? el('p', { class: 'fd-section-description' }, node.description) : null;
-        const content = grid(node.children, node.columns ?? 1);
+        const content = grid(node.children, node.columns);
         if (node.title && node.collapsible) {
             content.id = uid(`${node.id}-content`);
-            const toggle = el('button', { type: 'button', class: 'fd-section-toggle', 'aria-controls': content.id }, el('span', { class: 'fd-section-chevron', 'aria-hidden': 'true' }), node.title);
+            const toggle = el('button', { type: 'button', class: 'fd-section-toggle', 'aria-controls': content.id }, el('span', { class: 'fd-section-chevron', 'aria-hidden': 'true' }), ...withIcon(node.icon, node.title));
             let open = node.collapsed !== true;
             const show = (next) => {
                 open = next;
@@ -227,7 +175,7 @@ export function mountViewer(host, options) {
             section.append(el('legend', { class: 'fd-section-title' }, toggle));
         }
         else if (node.title) {
-            section.append(el('legend', { class: 'fd-section-title' }, node.title));
+            section.append(el('legend', { class: 'fd-section-title' }, ...withIcon(node.icon, node.title)));
         }
         if (description)
             section.append(description);
@@ -245,7 +193,7 @@ export function mountViewer(host, options) {
         const parts = node.children.map((tab) => {
             const tabId = uid(`${tab.id}-tab`);
             const panelId = uid(`${tab.id}-panel`);
-            const button = el('button', { type: 'button', class: 'fd-tab', role: 'tab', id: tabId, 'aria-controls': panelId, 'data-node': tab.id }, tab.label);
+            const button = el('button', { type: 'button', class: 'fd-tab', role: 'tab', id: tabId, 'aria-controls': panelId, 'data-node': tab.id }, ...withIcon(tab.icon, tab.label));
             const panel = el('div', { class: 'fd-tabpanel', role: 'tabpanel', id: panelId, 'aria-labelledby': tabId }, grid(tab.children));
             button.addEventListener('click', () => {
                 picked = active = tab.id;
@@ -303,12 +251,101 @@ export function mountViewer(host, options) {
         }
     }
     // ---- shared chrome ----------------------------------------------------------
-    const status = el('div', { class: 'fd-status', role: 'status', 'aria-live': 'polite' });
+    /** The whole form locked: every field read-only, no Save; buttons still run. */
+    let locked = options.readonly === true;
+    // Edit unlocks; Done saves what changed first, and locks only once that is saved.
+    const editSwitch = options.editSwitch ? el('button', { type: 'button', class: 'fd-button fd-edit-switch' }) : null;
+    editSwitch?.addEventListener('click', async () => {
+        if (!locked) {
+            if (form.getState().dirty.length) {
+                const saved = await form.save();
+                if (!saved) {
+                    if (!form.getState().saveProblem)
+                        announce(checkText(form.getState()));
+                    focusFirstProblem();
+                    return;
+                }
+            }
+            locked = true;
+        }
+        else
+            locked = false;
+        root.toggleAttribute('data-readonly', locked);
+        render(form.getState());
+    });
+    root.toggleAttribute('data-readonly', locked);
+    updaters.push(() => {
+        if (!editSwitch)
+            return;
+        editSwitch.textContent = locked ? labels.edit : labels.done;
+        editSwitch.classList.toggle('fd-button-primary', locked);
+    });
+    // The status says its words alone, so a screen reader hears them; Retry sits beside it.
+    const statusText = el('div', { class: 'fd-status', role: 'status', 'aria-live': 'polite' });
+    const retry = el('button', { type: 'button', class: 'fd-button fd-button-link fd-retry', hidden: '' }, labels.retry);
+    retry.addEventListener('click', () => void submitOrSave());
+    const status = el('div', { class: 'fd-status-box' }, statusText, retry);
+    const notDone = () => (page.data.kind === 'responses' ? labels.notSent : labels.notSaved);
+    /** "Not saved. Check: Email, Phone": the fields with a problem, in the order they show. */
+    function checkText(state) {
+        const names = [];
+        for (const key of Object.keys(state.errors)) {
+            const field = key.split('.')[0];
+            const shown = root.querySelector(`.fd-field[data-field="${field}"]:not([hidden]) > .fd-label`);
+            const name = shown?.firstChild?.textContent ?? page.fields[field]?.label ?? field;
+            if (!names.includes(name))
+                names.push(name);
+        }
+        const inOrder = [...root.querySelectorAll('.fd-field[data-field] > .fd-label')].map((label) => label.firstChild?.textContent ?? '');
+        names.sort((a, b) => (inOrder.indexOf(a) + 1 || Infinity) - (inOrder.indexOf(b) + 1 || Infinity));
+        return names.length ? fill(labels.checkFields, { what: notDone(), fields: names.join(', ') }) : notDone();
+    }
+    let quietTimer;
+    updaters.push((state) => {
+        const problem = state.saveProblem;
+        const text = state.status === 'saving' ? labels.saving
+            : state.status === 'saved' ? labels.saved
+                : state.status === 'loading' ? labels.loading
+                    : state.status === 'error' && problem ? (problem.kind === 'fields' ? checkText(state) : problem.kind === 'other' ? problem.message : notDone())
+                        : state.status === 'error' ? state.error ?? ''
+                            : '';
+        statusText.textContent = text;
+        retry.hidden = !(state.status === 'error' && problem?.kind === 'other');
+        statusText.classList.toggle('fd-status-error', state.status === 'error');
+        statusText.classList.toggle('fd-status-saved', state.status === 'saved');
+        // A toast shows while there is something to say, and lets "Saved" go after a moment.
+        if (options.saveStatus === 'toast') {
+            clearTimeout(quietTimer);
+            status.hidden = !text;
+            if (state.status === 'saved')
+                quietTimer = setTimeout(() => (status.hidden = true), 2500);
+        }
+    });
+    // A save the network failed: a banner over the page, with Retry.
+    const bannerRetry = el('button', { type: 'button', class: 'fd-button fd-retry' }, labels.retry);
+    bannerRetry.addEventListener('click', () => void submitOrSave());
+    const banner = el('div', { class: 'fd-banner fd-tone-warning', role: 'alert', hidden: '' }, el('span', { class: 'fd-banner-text' }, labels.offline), bannerRetry);
+    /** Said at once to a screen reader: why a save or send did not go through. */
+    const announcer = el('div', { class: 'fd-announce', role: 'alert', 'aria-live': 'assertive' });
+    function announce(text) {
+        announcer.textContent = '';
+        setTimeout(() => (announcer.textContent = text), 0);
+    }
+    // Each new reason a save was refused, from Save or from autosave, is shown where it belongs.
+    let seenProblem = null;
     updaters.push((state) => {
-        const text = state.status === 'saving' ? labels.saving : state.status === 'saved' ? labels.saved : state.status === 'loading' ? labels.loading : state.status === 'error' ? state.error ?? '' : '';
-        status.textContent = text;
-        status.classList.toggle('fd-status-error', state.status === 'error');
-        status.classList.toggle('fd-status-saved', state.status === 'saved');
+        if (state.saveProblem === seenProblem)
+            return;
+        seenProblem = state.saveProblem;
+        banner.hidden = seenProblem?.kind !== 'network';
+        if (!seenProblem)
+            return;
+        if (seenProblem.kind === 'rule')
+            void dialogConfirm(seenProblem.message, false);
+        else if (seenProblem.kind === 'fields')
+            announce(checkText(state));
+        else if (seenProblem.kind === 'other')
+            announce(seenProblem.message);
     });
     const draft = el('div', { class: 'fd-draft', hidden: '' });
     const draftText = el('span');
@@ -342,6 +379,9 @@ export function mountViewer(host, options) {
     async function submitOrSave() {
         const saved = await form.save();
         if (!saved) {
+            // Stopped by the page's own checks: say which fields; a refused save says so above.
+            if (!form.getState().saveProblem)
+                announce(checkText(form.getState()));
             focusFirstProblem();
             return;
         }
@@ -376,34 +416,66 @@ export function mountViewer(host, options) {
             discard.addEventListener('click', () => form.reset());
             actions.insertBefore(discard, action);
             updaters.push((state) => {
-                const dirty = state.dirty.length > 0 && state.status !== 'saving';
+                const dirty = state.dirty.length > 0 && state.status !== 'saving' && !locked;
                 action.hidden = !dirty;
                 discard.hidden = !dirty;
             });
         }
-        return options.showActions === false ? el('div', {}, box) : el('div', {}, box, actions);
+        else
+            updaters.push(() => (action.hidden = locked));
+        if (editSwitch)
+            actions.prepend(editSwitch);
+        if (options.showActions === false)
+            return el('div', {}, box);
+        if (page.actionsPosition === 'top') {
+            actions.classList.add('fd-actions-top');
+            return el('div', {}, actions, box);
+        }
+        return el('div', {}, box, actions);
     }
     function wizardLayout(node) {
         const box = el('div', { class: 'fd-wizard', 'data-node': node.id });
         const progressText = el('div', { class: 'fd-progress-text' });
         const bar = el('span');
         box.append(el('div', { class: 'fd-progress' }, progressText, el('div', { class: 'fd-progress-bar' }, bar)));
+        // A clickable wizard lists its steps: back to any, forward past those that are complete.
+        const list = node.clickable ? el('ol', { class: 'fd-steps-list' }) : null;
+        const stepButtons = new Map();
+        if (list) {
+            for (const step of node.children) {
+                const go = el('button', { type: 'button', class: 'fd-step-link' }, ...withIcon(step.icon, step.label));
+                go.addEventListener('click', () => {
+                    if (form.goTo(step.id))
+                        focusStep();
+                    else
+                        focusFirstProblem();
+                });
+                stepButtons.set(step.id, go);
+                list.append(el('li', {}, go));
+            }
+            box.append(el('nav', { class: 'fd-steps', 'aria-label': labels.steps }, list));
+        }
         const panels = node.children.map((step) => {
             const panel = el('section', { class: 'fd-step', 'data-node': step.id, 'aria-labelledby': uid(`${step.id}-title`) });
-            panel.append(el('h2', { class: 'fd-step-title', id: uid(`${step.id}-title`) }, step.label));
+            panel.append(el('h2', { class: 'fd-step-title', id: uid(`${step.id}-title`) }, ...withIcon(step.icon, step.label)));
             if (step.description)
                 panel.append(el('p', { class: 'fd-section-description' }, step.description));
             panel.append(grid(step.children));
             box.append(panel);
             return { step, panel };
         });
-        const back = el('button', { type: 'button', class: 'fd-button' }, labels.back);
+        const back = el('button', { type: 'button', class: 'fd-button' }, node.backLabel ?? labels.back);
+        const skip = el('button', { type: 'button', class: 'fd-button fd-button-link' }, labels.skip);
         const forward = el('button', { type: 'submit', class: 'fd-button fd-button-primary' });
-        box.append(el('div', { class: 'fd-wizard-nav' }, back, el('span', { class: 'fd-spacer' }), status, forward));
+        box.append(el('div', { class: 'fd-wizard-nav' }, back, el('span', { class: 'fd-spacer' }), status, skip, forward));
         back.addEventListener('click', () => {
             if (form.back())
                 focusStep();
         });
+        skip.addEventListener('click', () => {
+            if (form.skip())
+                focusStep();
+        });
         const isLast = () => {
             const steps = form.steps();
             return steps.indexOf(form.getState().step ?? '') === steps.length - 1;
@@ -427,8 +499,20 @@ export function mountViewer(host, options) {
             bar.style.width = `${((index + 1) / Math.max(1, steps.length)) * 100}%`;
             for (const { step, panel } of panels)
                 panel.hidden = step.id !== state.step;
+            const last = index === steps.length - 1;
             back.hidden = index === 0;
-            forward.textContent = index === steps.length - 1 ? labels.submit : labels.next;
+            skip.hidden = last || !node.children.find((step) => step.id === state.step)?.optional;
+            forward.textContent = last ? node.finishLabel ?? labels.submit : node.nextLabel ?? labels.next;
+            for (const [id, go] of stepButtons) {
+                const at = steps.indexOf(id);
+                go.parentElement.hidden = at === -1;
+                go.classList.toggle('fd-step-done', at !== -1 && at < index);
+                go.classList.toggle('fd-step-skipped', state.skipped.includes(id));
+                if (id === state.step)
+                    go.setAttribute('aria-current', 'step');
+                else
+                    go.removeAttribute('aria-current');
+            }
         });
         return box;
     }
@@ -438,17 +522,28 @@ export function mountViewer(host, options) {
         const save = el('button', { type: 'submit', class: 'fd-button fd-button-primary' }, labels.save);
         const discard = el('button', { type: 'button', class: 'fd-button' }, labels.discard);
         discard.addEventListener('click', () => form.reset());
+        // Save and Discard lead the header bar, or close the sheet when the page puts them at its foot.
+        const atFoot = page.actionsPosition === 'bottom';
+        const foot = el('div', { class: 'fd-actions fd-actions-end fd-sheet-foot' });
         if (options.showActions === false)
             actions.append(...(node.buttons ?? []).map(buttonItem));
+        else if (atFoot) {
+            actions.append(...(node.buttons ?? []).map(buttonItem));
+            foot.append(status, discard, save);
+        }
         else
             actions.append(save, discard, ...(node.buttons ?? []).map(buttonItem), status);
+        // The Edit switch leads the header bar, before Save and the record's own buttons.
+        if (editSwitch && options.showActions !== false)
+            actions.prepend(editSwitch);
         updaters.push((state) => {
-            const dirty = state.dirty.length > 0 && state.status !== 'saving';
+            const dirty = state.dirty.length > 0 && state.status !== 'saving' && !locked;
             save.hidden = !dirty;
             discard.hidden = !dirty;
         });
         const header = el('div', { class: 'fd-header' }, actions);
-        if (node.statusbar)
+        const underTitle = node.statusbar?.position === 'title';
+        if (node.statusbar && !underTitle)
             header.append(statusbar(node.statusbar));
         const card = el('div', { class: 'fd-card' });
         if (node.ribbon) {
@@ -461,7 +556,9 @@ export function mountViewer(host, options) {
             const stats = el('div', { class: 'fd-stats' });
             for (const stat of node.statButtons) {
                 const value = el('span', { class: 'fd-stat-value' });
-                const button = el('button', { type: 'button', class: 'fd-stat', 'data-node': stat.id }, value, el('span', { class: 'fd-stat-label' }, stat.label));
+                const icon = drawIcon(doc, stat.icon, options.icons);
+                const words = el('span', { class: 'fd-stat-words' }, value, el('span', { class: 'fd-stat-label' }, stat.label));
+                const button = el('button', { type: 'button', class: 'fd-stat', 'data-node': stat.id }, ...(icon ? [icon, words] : [words]));
                 button.addEventListener('click', () => void form.runAction(stat.id));
                 updaters.push((state) => {
                     button.hidden = form.node(stat.id).invisible;
@@ -473,15 +570,45 @@ export function mountViewer(host, options) {
             card.append(stats);
         }
         for (const alert of node.alerts ?? []) {
-            const box = el('div', { class: `fd-alert fd-tone-${alert.tone ?? 'info'}`, role: 'status', 'data-node': alert.id }, alert.message);
-            hideWhen(box, alert.id);
+            const box = el('div', { class: `fd-alert fd-tone-${alert.tone ?? 'info'}`, role: 'status', 'data-node': alert.id }, el('span', { class: 'fd-alert-message' }, alert.message));
+            if (alert.dismissible) {
+                // Closed, it stays closed while the page is open, whatever its condition does.
+                let dismissed = false;
+                const close = el('button', { type: 'button', class: 'fd-alert-close', 'aria-label': labels.dismiss }, '×');
+                close.addEventListener('click', () => {
+                    dismissed = true;
+                    box.hidden = true;
+                });
+                box.append(close);
+                updaters.push(() => {
+                    box.hidden = dismissed || form.node(alert.id).invisible;
+                });
+            }
+            else
+                hideWhen(box, alert.id);
             card.append(box);
         }
+        if (node.badges?.length) {
+            const badges = el('div', { class: 'fd-badges' });
+            for (const badge of node.badges) {
+                const chip = el('span', { class: `fd-badge fd-tone-${badge.tone ?? 'muted'}`, 'data-node': badge.id }, ...withIcon(badge.icon, badge.label));
+                hideWhen(chip, badge.id);
+                badges.append(chip);
+            }
+            updaters.push(() => {
+                badges.hidden = [...badges.children].every((chip) => chip.hidden);
+            });
+            card.append(badges);
+        }
         if (node.title) {
             const title = el('div', { class: 'fd-title' });
+            if (node.title.above?.length)
+                title.append(el('div', { class: 'fd-title-above' }, ...node.title.above.map(fieldItem)));
             title.append(fieldItem({ type: 'field', id: '#title', field: node.title.field, placeholder: node.title.placeholder }));
             if (node.title.subtitleField)
                 title.append(fieldItem({ type: 'field', id: '#subtitle', field: node.title.subtitleField }));
+            if (node.title.below?.length)
+                title.append(el('div', { class: 'fd-title-below' }, ...node.title.below.map(fieldItem)));
             const row = el('div', { class: 'fd-title-row' }, title);
             if (node.title.avatarField) {
                 const avatar = fieldItem({ type: 'field', id: '#avatar', field: node.title.avatarField });
@@ -490,7 +617,15 @@ export function mountViewer(host, options) {
             }
             card.append(row);
         }
+        if (node.statusbar && underTitle)
+            card.append(el('div', { class: 'fd-title-statusbar' }, statusbar(node.statusbar)));
         card.append(grid(node.children));
+        if (atFoot && options.showActions !== false) {
+            card.append(foot);
+            updaters.push((state) => {
+                foot.hidden = state.dirty.length === 0 && !statusText.textContent;
+            });
+        }
         const layout = el('div', { class: 'fd-sheet-layout' }, card);
         if (node.sidePanel) {
             layout.classList.add('fd-has-side');
@@ -507,7 +642,7 @@ export function mountViewer(host, options) {
             barOptions['visibleStates'] = config.visibleStates;
         const node = { type: 'field', id: '#statusbar', field: config.field, widget: 'statusbar', options: barOptions };
         const widget = createWidget({ form, name: config.field, field: def, node, id: uid('statusbar'), document: doc, labels: widgetLabels, preferences, locale, dialogs }, options.widgets);
-        updaters.push((state) => widget.update({ value: state.values[config.field], values: state.values, readonly: form.node('#statusbar').readonly, required: false, invalid: false }));
+        updaters.push((state) => widget.update({ value: state.values[config.field], values: state.values, readonly: form.node('#statusbar').readonly || locked, required: false, invalid: false }));
         return widget.element;
     }
     let wizardForward = null;
@@ -522,8 +657,17 @@ export function mountViewer(host, options) {
     else
         body = sectionsLayout(layout);
     const head = layout.type === 'sheet' ? null : pageHead();
-    content.append(...(head ? [head] : []), draft, body);
-    root.append(content, done);
+    content.append(...(head ? [head] : []), banner, draft, body);
+    root.append(content, done, announcer);
+    // The status leaves its place beside Save when the page wants it in a corner or across the top.
+    if (options.saveStatus === 'toast') {
+        status.classList.add('fd-toast');
+        root.append(status);
+    }
+    else if (options.saveStatus === 'bar') {
+        status.classList.add('fd-status-bar');
+        content.prepend(status);
+    }
     root.addEventListener('submit', (event) => {
         event.preventDefault();
         if (wizardForward)
@@ -531,13 +675,65 @@ export function mountViewer(host, options) {
         else
             void submitOrSave();
     });
+    // ---- keys -------------------------------------------------------------------
+    /** Text typed and not yet taken, such as a tag without its Enter, is taken now. */
+    function commitTyping() {
+        const active = doc.activeElement;
+        if (active && root.contains(active) && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+            active.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    /** The fields Enter can move between: on this page, shown, with a box to type or choose in, outside tables of lines. */
+    function nextField(from) {
+        const fields = [...root.querySelectorAll('.fd-field')].filter((field) => !field.closest('[hidden], [data-type="one2many"] .fd-field, .fd-form-dialog') && !field.parentElement?.closest('[data-type="one2many"]'));
+        const here = from.closest('.fd-field');
+        const after = fields.slice(fields.indexOf(here) + 1);
+        for (const field of after) {
+            const control = field.querySelector('input:not([type="hidden"]):not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly]), [contenteditable="true"]');
+            if (control)
+                return control;
+        }
+        return null;
+    }
+    root.addEventListener('keydown', (event) => {
+        if (event.isComposing || event.key !== 'Enter')
+            return;
+        const keys = options.keys ?? {};
+        if (event.ctrlKey || event.metaKey) {
+            // Saves even after a field used the Enter (a tag box adding its tag); the grid keeps its own keys.
+            if (keys.saveWithCtrlEnter === false || options.showActions === false)
+                return;
+            if (event.target.closest('.ag-root-wrapper'))
+                return;
+            event.preventDefault();
+            commitTyping();
+            if (wizardForward)
+                void wizardForward();
+            else
+                void submitOrSave();
+            return;
+        }
+        // A plain Enter a field used itself, such as picking from an open list, is the field's.
+        if (event.defaultPrevented || !keys.enterMovesToNext || event.shiftKey || event.altKey)
+            return;
+        const from = event.target;
+        if (from.tagName !== 'INPUT' && from.tagName !== 'SELECT')
+            return;
+        if (from.closest('[data-type="one2many"]'))
+            return;
+        if (['button', 'submit', 'reset', 'file'].includes(from.type))
+            return;
+        event.preventDefault();
+        nextField(from)?.focus();
+    });
     // ---- confirmation dialog -----------------------------------------------------
-    function dialogConfirm(message) {
+    /** A question with Cancel and OK, or with `withCancel` false a notice with OK alone. */
+    function dialogConfirm(message, withCancel = true) {
         return new Promise((resolve) => {
             const text = el('p', { id: `${prefix}-confirm` }, message);
             const cancel = el('button', { type: 'button', class: 'fd-button' }, labels.cancel);
             const ok = el('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.ok);
-            const dialog = el('div', { class: 'fd-dialog', role: 'alertdialog', 'aria-modal': 'true', 'aria-labelledby': text.id }, text, el('div', { class: 'fd-actions fd-actions-end' }, cancel, ok));
+            const dialog = el('div', { class: 'fd-dialog', role: 'alertdialog', 'aria-modal': 'true', 'aria-labelledby': text.id }, text, el('div', { class: 'fd-actions fd-actions-end' }, ...(withCancel ? [cancel, ok] : [ok])));
             const backdrop = el('div', { class: 'fd-dialog-backdrop' }, dialog);
             const close = (answer) => {
                 backdrop.remove();
@@ -581,6 +777,12 @@ export function mountViewer(host, options) {
                 focusFirstProblem();
             return valid;
         },
+        setReadonly(readonly) {
+            locked = readonly;
+            root.toggleAttribute('data-readonly', locked);
+            render(form.getState());
+        },
+        isReadonly: () => locked,
         destroy() {
             unsubscribe();
             for (const cleanup of cleanups)
@@ -591,85 +793,6 @@ export function mountViewer(host, options) {
         },
     };
 }
-/** The field a page's records are named by: its title, or "name", or its first line of text. */
-function nameFieldOf(page) {
-    if (page.layout.type === 'sheet' && page.layout.title?.field)
-        return page.layout.title.field;
-    if (page.fields['name'])
-        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) {
-    const shown = Object.fromEntries(Object.entries(fields).map(([name, def]) => [name, readonly ? { ...def, readonly: true } : def]));
-    return {
-        fieldia: '0.1',
-        id: 'values',
-        title,
-        data: { kind: 'record', model: 'values' },
-        fields: shown,
-        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 })) }],
-        },
-    };
-}
-/** 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)
-        return undefined;
-    return {
-        ...(source.search ? { search: (request) => source.search(request) } : {}),
-        ...(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;
-    // 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,
-        skin: options.skin,
-        dir: options.dir,
-        widgets: options.widgets,
-        preferences: options.preferences,
-        relatedPages: options.relatedPages,
-    };
-    return {
-        canOpen: (model) => pageFor(model) !== null,
-        async openRecord(model, request) {
-            const related = pageFor(model);
-            if (!related)
-                return null;
-            const nameField = nameFieldOf(related);
-            const result = await openFormDialog({
-                ...shared,
-                page: related,
-                dataSource: options.dataSource,
-                recordId: request.recordId ?? null,
-                values: request.name && nameField ? { [nameField]: request.name } : undefined,
-                title: request.title,
-                size: 'large',
-            });
-            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 };
-        },
-        searchMore: (request) => openSearchDialog({ title: request.title, search: request.search, locale: options.locale, skin: options.skin, dir: options.dir }),
-        async editValues(request) {
-            const result = await openFormDialog({
-                ...shared,
-                page: valuesPage(request.fields, request.title, request.readonly === true),
-                dataSource: lookupsOf(options.dataSource),
-                values: request.values,
-                title: request.title,
-                mode: 'values',
-                ...(request.recompute ? { recompute: request.recompute } : {}),
-            });
-            return result.saved ? result.values : null;
-        },
-    };
-}
+/** Fields whose ✓ would say nothing: a yes/no box is never wrong, a table or a file has its own look. */
+const NO_VALID_MARK = new Set(['boolean', 'one2many', 'binary', 'image', 'html', 'json', 'properties']);
 //# sourceMappingURL=viewer.mjs.map