@fieldia/viewer 0.19.1 → 0.20.0

package/src/lib/viewer.mjs

@@ -1,5 +1,5 @@
-import { createForm, checkPage, isRightToLeft, localizePage, translatePage, wideColumns, MESSAGES, } from '@fieldia/core';
-import { browserPreferences, createWidget, displayValue, drawIcon, installStyles, readsAsText, readText, wearsQuiet, WIDGET_LABELS } from '@fieldia/widgets';
+import { createForm, checkPage, isRightToLeft, localizePage, translatePage, wideColumns, MESSAGES, hotkeyWords, } from '@fieldia/core';
+import { browserPreferences, createWidget, displayValue, drawIcon, installStyles, readsAsText, readText, settleParts, wearsQuiet, WIDGET_LABELS } from '@fieldia/widgets';
 import { findPage, pageDialogs } from './related.mjs';
 import { listView } from './list.mjs';
 import { applyLook, skinFor, wearTokens } from './look.mjs';
@@ -12,7 +12,10 @@ import { valueWords } from './value-words.mjs';
 import { hotkeyOf, hotkeyOn } from './hotkeys.mjs';
 import { recordBar } from './record-bar.mjs';
 import { attachmentPreview } from './attachment-preview.mjs';
+import { applyTracks, helpBox, keepTools, loneFieldTools, wordsWithLinks, workHeading } from './section-head.mjs';
 import { installRecordStyles } from './record-styles.mjs';
+import { isRichButton, nothingToUndo } from './button-parts.mjs';
+import { headPart, partsFor } from './viewer-parts.mjs';
 import { ownLocale, VIEWER_LABELS } from './labels.mjs';
 import { keepTabIn } from './focus-trap.mjs';
 export { VIEWER_LABELS, DEFAULT_LABELS } from './labels.mjs';
@@ -110,6 +113,31 @@ export function mountViewer(host, given) {
         const words = el('bdi', {}, text);
         return icon ? [icon, words] : [words];
     }
+    /**
+     * A tab's face: its icon and words, or its icon alone (its words then its
+     * name and tooltip), and the pill of its count after them.
+     */
+    function tabFace(tab) {
+        const pill = tab.count !== undefined ? [el('span', { class: 'fd-tab-count', 'aria-hidden': 'true' }, '0')] : [];
+        if (!tab.iconOnly)
+            return [...withIcon(tab.icon, tab.label), ...pill];
+        const icon = drawIcon(doc, tab.icon, options.icons);
+        return [...(icon ? [icon] : []), ...pill];
+    }
+    /**
+     * A label's words with its access key's letter underlined, as a work item's
+     * "Stat_e_": the first of that letter in them, whatever its case. Its words
+     * stay one piece for whatever reads them; without a key, the words alone.
+     */
+    function accessKeyed(text, key) {
+        const words = keepMarkWithWord(text);
+        const at = key ? words.toLocaleLowerCase().indexOf(key) : -1;
+        if (at === -1)
+            return [words];
+        return [el('span', { class: 'fd-label-words' }, words.slice(0, at), el('span', { class: 'fd-access-key' }, words.slice(at, at + 1)), words.slice(at + 1))];
+    }
+    /** What a group's heading and a help box draw with. */
+    const headKit = { doc, labels: widgetLabels, icons: options.icons, withIcon, el };
     const theme = options.theme ?? page.look?.theme;
     const root = el('form', { class: 'fd-form', novalidate: '', 'data-fd-skin': skinFor(options.skin ?? page.look?.skin, theme), dir, lang: tag, 'data-max-width': page.maxWidth });
     applyLook(root, theme ? { ...page.look, theme } : page.look);
@@ -146,15 +174,21 @@ export function mountViewer(host, given) {
     // ---- the parts -------------------------------------------------------
     /** The fields that take the focus as the record opens, in the order they are drawn. */
     const focusers = [];
+    /** The fields with an access key, in the order they are drawn: Alt with the key focuses the first shown. */
+    const fieldKeys = [];
     /** Each field's face, put on again when the form changes skin: quiet, or in its box. */
     const faces = [];
     /** Folded sections, and how to open each: a problem inside one has to be seen. */
     const folds = new Map();
     /** Every part drawn again from the state of the page shown. */
     const renderNow = () => render(form.getState());
+    /** The record's head being drawn: tabs placed in it go to its band. */
+    let headNow = null;
     /** Set once the viewer is on the page; set again when it is taken away. */
     let mounted = false;
     let gone = false;
+    /** Whether the form has opened a record yet (its `open` event). */
+    let opened = false;
     /** The columns a part spans in the grid it sits in; the stylesheet keeps it within the columns there at each width. */
     function spans(element, colspan) {
         if (colspan)
@@ -183,7 +217,7 @@ export function mountViewer(host, given) {
             if (node.colspan)
                 wrapper.style.setProperty('--fd-span', String(node.colspan));
             const labelText = node.label ?? def.label;
-            const label = el('label', { class: 'fd-label', id: `${id}-label`, for: id }, keepMarkWithWord(labelText));
+            const label = el('label', { class: 'fd-label', id: `${id}-label`, for: id }, ...accessKeyed(labelText, node.hotkey));
             // 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) {
@@ -191,9 +225,17 @@ export function mountViewer(host, given) {
                 label.append(mark);
             }
             const widget = createWidget({ form, name: node.field, field: def, node, id, document: doc, labels: widgetLabels, preferences, locale, dialogs }, options.widgets);
+            // Its own tools (a Markdown text's Edit and Done), for a group that holds it alone to put in its heading.
+            keepTools(wrapper, widget);
             // The field that takes the focus as the record opens (Flectra's default_focus): the page's own, not a saved form's inside it.
             if (node.focus && scope.root)
                 focusers.push({ wrapper, focus: () => widget.focus() });
+            // Its access key: Alt with its letter takes the focus to it, as the letter underlined in its label says.
+            if (node.hotkey) {
+                fieldKeys.push({ key: node.hotkey, wrapper, focus: () => widget.focus() });
+                const control = widget.element.matches(CONTROL) ? widget.element : widget.element.querySelector(CONTROL);
+                control?.setAttribute('aria-keyshortcuts', hotkeyWords(node.hotkey));
+            }
             // A label kept out of sight still names the box; the empty box shows it instead, unless the page gives it words of its own.
             const textBox = widget.element.matches(TEXT_BOX) ? widget.element : widget.element.querySelector(TEXT_BOX);
             if (labelsAt === 'hidden' && !node.placeholder)
@@ -209,10 +251,11 @@ export function mountViewer(host, given) {
             // Empty and quiet, it says what to add, unless the page gives it words of its own: "Add story points", or for a
             // question "Your answer". A field of several boxes, each with its own label (an address), says it in none of them.
             const ownWords = !!node.placeholder || labelsAt === 'hidden' || def.type === 'json' || def.type === 'properties';
-            const hint = quietHint(labelText, locale, labels);
+            // Unless the page says empty quiet fields show nothing at rest (quietHints false): then its label alone says what it is.
+            const hint = page.look?.quietHints === false ? null : quietHint(labelText, locale, labels);
             const restWords = () => (!ownWords && wrapper.hasAttribute('data-quiet') ? hint : drawnPlaceholder);
             // Where no box can hold a placeholder (a choice's blank, a state's words), the page's own words come first.
-            const blankWords = node.placeholder || (labelsAt === 'hidden' ? labelText : hint);
+            const blankWords = node.placeholder || (labelsAt === 'hidden' ? labelText : (hint ?? ''));
             const quietSelect = widget.element instanceof HTMLSelectElement ? widget.element.querySelector(':scope > option[value=""]') : null;
             const richText = widget.element.matches('.fd-richtext') ? widget.element : widget.element.querySelector(':scope > .fd-richtext');
             const stateWords = widget.element.querySelector(':scope > .fd-dot-label');
@@ -276,7 +319,12 @@ export function mountViewer(host, given) {
                 const icon = drawIcon(doc, 'lock', options.icons) ?? '';
                 lock = reason ? bubbleTip(`${id}-lock`, reason, fill(labels.locked, { label: labelText }), 'fd-lock', icon) : null;
                 lockMark = lock?.element ?? el('span', { class: 'fd-lock-wrap' }, el('span', { class: 'fd-lock', 'aria-hidden': 'true' }, icon));
-                if (labelsAt === 'hidden')
+                // At the value's start, as a work item's Reason: in a record head's band, in the room before the value.
+                if (page.look?.lockAt === 'value') {
+                    widget.element.before(lockMark);
+                    wrapper.setAttribute('data-lock-at', 'value');
+                }
+                else if (labelsAt === 'hidden')
                     widget.element.after(lockMark);
                 else
                     label.insertBefore(lockMark, tip && labelsAt !== 'after' ? tip.element : null);
@@ -321,6 +369,11 @@ export function mountViewer(host, given) {
                 if (!wrapper.contains(event.relatedTarget))
                     entered = form.getState().values[node.field];
             });
+            // Entered before the record came (a dialog takes the focus at once): what it held is what the record brought.
+            cleanups.push(form.on('open', ({ values }) => {
+                if (wrapper.contains(doc.activeElement))
+                    entered = values[node.field];
+            }));
             wrapper.addEventListener('keydown', (event) => {
                 if (event.key !== 'Escape' || event.defaultPrevented || !wrapper.hasAttribute('data-quiet'))
                     return;
@@ -444,25 +497,38 @@ export function mountViewer(host, given) {
             watch(() => setHidden(element, form.node(id).invisible));
         }
         function buttonItem(node) {
+            // Its icon alone, a toggle, a menu beside it, a look that follows the record's changes: drawn by button-parts.ts.
+            const head = isRichButton(node) ? headPart.loaded : undefined;
+            if (head) {
+                const rich = head.richButton({ doc, el, form, labels, icons: options.icons, uid, withIcon, press, say: (message, tone) => actionHost.say(message, tone), watch, cleanups }, node);
+                spans(rich, node.colspan);
+                return hiddenOn(node, rich);
+            }
             const button = el('button', { type: 'button', class: `fd-button fd-button-${node.style ?? 'secondary'}`, 'data-node': node.id }, ...withIcon(node.icon, node.label));
             if (node.hotkey)
                 hotkeyOn(button, node.hotkey, node.label);
             spans(button, node.colspan);
-            // Its confirmation, then its steps: the form asks, through the viewer.
-            button.addEventListener('click', () => void press(button, () => form.runAction(node.id)));
+            // Its confirmation, then its steps: the form asks, through the viewer. Undo with nothing to put back says so.
+            button.addEventListener('click', () => {
+                if (!nothingToUndo(node, form, (message, tone) => actionHost.say(message, tone), labels))
+                    void press(button, () => form.runAction(node.id));
+            });
             hideWhen(button, node.id);
             // A header's button is drawn here too, never through item(): hidden at its widths the same way.
             return hiddenOn(node, button);
         }
         function textItem(node, inline = false) {
             const style = node.style ?? 'paragraph';
-            // Its words, with the values of the fields they name.
+            // Its words, with the values of the fields they name, and its [words](address) as links.
             const words = valueWords(doc, page.fields, node.text, locale);
+            const shown = wordsWithLinks(doc, words.nodes);
             const element = inline
-                ? el('span', { class: `fd-oneline-words fd-text-${style}`, 'data-node': node.id }, ...words.nodes)
+                ? el('span', { class: `fd-oneline-words fd-text-${style}`, 'data-node': node.id }, ...shown)
                 : style === 'alert'
-                    ? el('div', { class: `fd-alert fd-text-alert fd-tone-${node.tone ?? 'info'}`, role: 'status', 'data-node': node.id }, el('span', { class: 'fd-alert-message' }, ...words.nodes))
-                    : el(style === 'heading' ? 'h3' : 'p', { class: `fd-text-${style}`, 'data-node': node.id }, ...words.nodes);
+                    ? el('div', { class: `fd-alert fd-text-alert fd-tone-${node.tone ?? 'info'}`, role: 'status', 'data-node': node.id }, el('span', { class: 'fd-alert-message' }, ...shown))
+                    : style === 'help'
+                        ? helpBox(headKit, node, shown)
+                        : el(style === 'heading' ? 'h3' : 'p', { class: `fd-text-${style}`, 'data-node': node.id }, ...shown);
             spans(element, node.colspan);
             hideWhen(element, node.id);
             watch((state) => words.update(state.values));
@@ -563,7 +629,18 @@ export function mountViewer(host, given) {
                 section.style.setProperty('--fd-label-width', `${node.labelWidth}px`);
             const description = node.description ? el('p', { class: 'fd-section-description' }, node.description) : null;
             const content = grid(node.children, plan.at === 'tracks' ? null : node.columns, plan.inner);
-            if (node.title && node.collapsible) {
+            // Its own column widths and gap; a heading with tools at its end, as a work item's group has.
+            applyTracks(content, node);
+            const own = loneFieldTools(node, content);
+            const tools = node.title && (workHeading(node) || own.length) ? headPart.loaded : undefined;
+            if (tools) {
+                content.id = uid(`${node.id}-content`);
+                const head = tools.sectionHeading(headKit, node, section, content, description, own);
+                if (node.collapsible)
+                    folds.set(section, () => head.show(true));
+                section.append(head.legend);
+            }
+            else 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' }), ...withIcon(node.icon, node.title));
                 let open = node.collapsed !== true;
@@ -606,7 +683,12 @@ export function mountViewer(host, given) {
             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 }, ...withIcon(tab.icon, tab.label));
+                const button = el('button', { type: 'button', class: 'fd-tab', role: 'tab', id: tabId, 'aria-controls': panelId, 'data-node': tab.id }, ...tabFace(tab));
+                if (tab.iconOnly) {
+                    button.classList.add('fd-tab-icon-only');
+                    button.setAttribute('aria-label', tab.label);
+                    button.title = tab.label;
+                }
                 const panel = el('div', { class: 'fd-tabpanel', role: 'tabpanel', id: panelId, 'aria-labelledby': tabId });
                 /**
                  * A tab's parts are drawn when it is first shown, and kept up to date
@@ -656,12 +738,36 @@ export function mountViewer(host, given) {
             // Too long for its room, the strip scrolls; the tab chosen, however, comes into sight in it.
             const strip = tabStrip(list, el);
             cleanups.push(strip.destroy);
-            box.append(strip.element, ...parts.map((p) => p.panel));
+            // Placed in a record's head: the tabs at the end of its band, the panels the sheet's body.
+            const inHead = node.place === 'head' && headNow && scope.root ? headNow : null;
+            if (inHead) {
+                box.classList.add('fd-tabs-in-head');
+                inHead.tabs.append(strip.element);
+                box.append(...parts.map((p) => p.panel));
+            }
+            else
+                box.append(strip.element, ...parts.map((p) => p.panel));
+            // A tab's count in its pill, and in its name: "Links, 0".
+            for (const p of parts) {
+                const count = p.tab.count;
+                if (count === undefined)
+                    continue;
+                const pill = p.button.querySelector('.fd-tab-count');
+                watch((state) => {
+                    const value = state.values[count];
+                    const n = Array.isArray(value) ? value.length : typeof value === 'number' ? value : Number(value ?? 0) || 0;
+                    setText(pill, String(n));
+                    setAttr(p.button, 'aria-label', fill(labels.countOf, { label: p.tab.label, count: n }));
+                });
+            }
             let shownKey = '';
             let revealed = '';
             watch((state) => {
                 const tabsHidden = form.node(node.id).invisible;
                 setHidden(box, tabsHidden);
+                // In the head, its strip is apart from its box: hidden with it.
+                if (inHead)
+                    setHidden(strip.element, tabsHidden);
                 const shown = parts.filter((p) => !form.node(p.tab.id).invisible);
                 const keep = picked !== null && shown.some((p) => p.tab.id === picked);
                 if (keep)
@@ -1217,6 +1323,10 @@ export function mountViewer(host, given) {
         return box;
     }
     function sheetLayout(node) {
+        // A head comes in the head part, waited for before the page is drawn; where it could not come, the sheet is drawn plainly.
+        const part = node.head ? headPart.loaded : undefined;
+        if (part)
+            return headedLayout(node, part);
         const pageBox = el('div', { class: 'fd-sheet-page', 'data-node': node.id });
         const actions = el('div', { class: 'fd-actions' });
         const save = el('button', { type: 'submit', class: 'fd-button fd-button-primary' }, labels.save);
@@ -1312,41 +1422,7 @@ export function mountViewer(host, given) {
             });
             card.append(stats);
         }
-        for (const alert of node.alerts ?? []) {
-            // Its words with the values they name, or a field's words while it holds any; its buttons after them, as links unless styled.
-            const words = valueWords(doc, page.fields, alert.message, locale);
-            const message = el('span', { class: 'fd-alert-message' }, ...words.nodes);
-            let fromField = false;
-            const box = el('div', { class: `fd-alert fd-tone-${alert.tone ?? 'info'}`, role: 'status', 'data-node': alert.id }, message);
-            if (alert.buttons?.length)
-                box.append(el('span', { class: 'fd-alert-actions' }, ...alert.buttons.map((button) => buttonItem({ ...button, style: button.style ?? 'link' }))));
-            updaters.push((state) => {
-                words.update(state.values);
-                const from = alert.messageField ? state.values[alert.messageField] : null;
-                const said = typeof from === 'string' ? from.trim() : '';
-                if (said)
-                    setText(message, said);
-                else if (fromField)
-                    message.replaceChildren(...words.nodes);
-                fromField = !!said;
-            });
-            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);
-        }
+        card.append(...alertBoxes(node));
         if (node.badges?.length) {
             const badges = el('div', { class: 'fd-badges' });
             for (const badge of node.badges) {
@@ -1423,6 +1499,95 @@ export function mountViewer(host, given) {
         pageBox.append(...(bar ? [bar] : []), header, layout);
         return pageBox;
     }
+    /** The sheet's alerts: its words with the values they name, or a field's words while it holds any; its buttons after them, as links unless styled. */
+    function alertBoxes(node) {
+        return (node.alerts ?? []).map((alert) => {
+            const words = valueWords(doc, page.fields, alert.message, locale);
+            const message = el('span', { class: 'fd-alert-message' }, ...words.nodes);
+            let fromField = false;
+            const box = el('div', { class: `fd-alert fd-tone-${alert.tone ?? 'info'}`, role: 'status', 'data-node': alert.id }, message);
+            if (alert.buttons?.length)
+                box.append(el('span', { class: 'fd-alert-actions' }, ...alert.buttons.map((button) => buttonItem({ ...button, style: button.style ?? 'link' }))));
+            updaters.push((state) => {
+                words.update(state.values);
+                const from = alert.messageField ? state.values[alert.messageField] : null;
+                const said = typeof from === 'string' ? from.trim() : '';
+                if (said)
+                    setText(message, said);
+                else if (fromField)
+                    message.replaceChildren(...words.nodes);
+                fromField = !!said;
+            });
+            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);
+            return box;
+        });
+    }
+    /**
+     * A record with a head (`SheetHead`), as a work item: the head — its kind,
+     * title, row, buttons and band, the tabs placed in it — then the body, which
+     * holds its alerts and its parts (a tab's panels, when its tabs are in the
+     * head). The record's breadcrumbs and pager, when the app gives them, over
+     * it; its gear menu is the head's ⋮.
+     */
+    function headedLayout(node, part) {
+        const pageBox = el('div', { class: 'fd-sheet-page fd-head-page', 'data-node': node.id });
+        const head = part.recordHead({
+            doc,
+            el,
+            form,
+            page,
+            sheet: node,
+            head: node.head,
+            labels,
+            locale,
+            icons: options.icons,
+            uid,
+            fill,
+            withIcon,
+            press,
+            say: (message, tone) => actionHost.say(message, tone),
+            fieldItem,
+            item,
+            buttonItem,
+            watch: (update) => updaters.push(update),
+            cleanups,
+            showTab: (id) => tabs.get(id)?.() ?? false,
+            unfold(part) {
+                for (let folded = part.closest('.fd-section-folded'); folded; folded = folded.parentElement?.closest('.fd-section-folded') ?? null)
+                    folds.get(folded)?.();
+            },
+            root: () => root,
+        });
+        // The parts drawn now: tabs placed in the head go to its band.
+        headNow = head;
+        let parts;
+        try {
+            parts = grid(node.children, 1, top(false));
+        }
+        finally {
+            headNow = null;
+        }
+        const body = el('div', { class: 'fd-head-body' }, ...alertBoxes(node), parts);
+        // The side panel beside the body on a wide page; a dialog leaves it to the full page.
+        const side = node.sidePanel ? el('aside', { class: 'fd-side' }, slotItem(node.sidePanel)) : null;
+        const bar = topBar(node.toolbar ? { ...node.toolbar, menu: undefined } : undefined);
+        pageBox.append(...(bar ? [bar] : []), head.element, side ? el('div', { class: 'fd-head-layout' }, body, side) : body);
+        return pageBox;
+    }
     /** The sheet header's statusbar: the same widget a form can place anywhere. */
     function statusbar(config) {
         const def = page.fields[config.field];
@@ -1445,42 +1610,76 @@ export function mountViewer(host, given) {
     }
     let wizardForward = null;
     const layout = page.layout;
-    let body;
-    if (layout.type === 'sheet')
-        body = sheetLayout(layout);
-    else if (layout.type === 'wizard')
-        body = wizardLayout(layout);
-    else if (layout.type === 'tabs')
-        body = sectionsLayout({ id: `${layout.id}-page`, children: [layout] });
-    else if (layout.type === 'list') {
-        const list = listView({
-            page,
-            node: layout,
-            form,
-            dataSource: options.dataSource,
-            doc,
-            el,
-            labels,
-            locale,
-            fill,
-            press,
-            withIcon,
-            uid,
-            icons: options.icons,
-            preferences,
-            onOpenRecord: options.onOpenRecord,
-            ...(options.listFilter ? { fixedFilter: options.listFilter } : {}),
-            ...(options.listViews ? { views: options.listViews } : {}),
+    /** A list page's way to ask for its records again (handle.reload). */
+    let reloadList = null;
+    /** And its way to open a record as its row's press does (handle.openRecord). */
+    let openInList = null;
+    /**
+     * The page itself — its layout, head and bar — drawn whole: at once when every part it draws from is in, else once
+     * they have come (or could not, when what they would have drawn is drawn plainly). Nothing of it is shown before, so
+     * nothing moves as a part arrives, and no focus is lost: there was nothing to have it.
+     */
+    function drawPage() {
+        let body;
+        if (layout.type === 'sheet')
+            body = sheetLayout(layout);
+        else if (layout.type === 'wizard')
+            body = wizardLayout(layout);
+        else if (layout.type === 'tabs')
+            body = sectionsLayout({ id: `${layout.id}-page`, children: [layout] });
+        else if (layout.type === 'list') {
+            const list = listView({
+                page,
+                node: layout,
+                form,
+                dataSource: options.dataSource,
+                doc,
+                el,
+                labels,
+                locale,
+                fill,
+                press,
+                withIcon,
+                uid,
+                icons: options.icons,
+                preferences,
+                onOpenRecord: options.onOpenRecord,
+                ...(options.listFilter ? { fixedFilter: options.listFilter } : {}),
+                ...(options.listViews ? { views: options.listViews } : {}),
+            });
+            cleanups.push(list.destroy);
+            reloadList = list.reload;
+            openInList = list.open;
+            body = list.element;
+        }
+        else
+            body = sectionsLayout(layout);
+        const head = layout.type === 'sheet' ? null : pageHead();
+        // A record of sections or tabs has the bar the app fills — its breadcrumbs and pager — over its title.
+        const bar = layout.type === 'sections' || layout.type === 'tabs' ? topBar(undefined) : null;
+        content.append(...(bar ? [bar] : []), ...(head ? [head] : []), banner, draft, body);
+        pageDrawn = true;
+    }
+    let pageDrawn = false;
+    /** What needs the page drawn — a list's rows to open or ask for again — at once when it is, else once it is. */
+    const afterDrawing = (then) => (pageDrawn ? then() : drawn.then(then));
+    const awaited = partsFor(page, options.widgets, options.slots).filter((part) => !part.loaded);
+    let drawn = Promise.resolve();
+    if (!awaited.length)
+        drawPage();
+    else {
+        root.setAttribute('aria-busy', 'true');
+        drawn = settleParts(awaited).then(() => {
+            if (gone)
+                return;
+            drawPage();
+            root.removeAttribute('aria-busy');
+            render(form.getState());
+            // A record that opened meanwhile: its focused field takes the focus now, as it would have then.
+            if (opened)
+                focusAsOpened(true);
         });
-        cleanups.push(list.destroy);
-        body = list.element;
     }
-    else
-        body = sectionsLayout(layout);
-    const head = layout.type === 'sheet' ? null : pageHead();
-    // A record of sections or tabs has the bar the app fills — its breadcrumbs and pager — over its title.
-    const bar = layout.type === 'sections' || layout.type === 'tabs' ? topBar(undefined) : null;
-    content.append(...(bar ? [bar] : []), ...(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') {
@@ -1593,6 +1792,14 @@ export function mountViewer(host, given) {
         if (!key || !hotkeysHere(event.target))
             return;
         const button = [...root.querySelectorAll(`button[data-hotkey="${key}"]`)].find((b) => b.closest('.fd-form') === root && !b.closest('[hidden]') && !b.disabled && !b.hasAttribute('aria-busy'));
+        // A field's access key: the first shown with it takes the focus.
+        const field = button ? undefined : fieldKeys.find((one) => one.key === key && one.wrapper.isConnected && !one.wrapper.closest('[hidden]'));
+        if (field) {
+            event.preventDefault();
+            root.removeAttribute('data-hotkeys');
+            field.focus();
+            return;
+        }
         if (!button)
             return;
         event.preventDefault();
@@ -1667,22 +1874,24 @@ export function mountViewer(host, given) {
     mounted = true;
     // As the record opens, its focused field takes the focus — the first shown — unless the person is busy elsewhere:
     // only while nothing has the focus, or, the first time, while it is in this form (a dialog's first box).
-    let opened = false;
-    if (focusers.length) {
-        cleanups.push(form.on('open', () => {
-            const first = !opened;
-            opened = true;
-            queueMicrotask(() => {
-                if (gone || !root.isConnected || root.closest('[hidden]') || (typeof root.checkVisibility === 'function' && !root.checkVisibility()))
-                    return;
-                const active = doc.activeElement;
-                const free = !active || active === doc.body || active === doc.documentElement;
-                if (!free && !(first && root.contains(active)))
-                    return;
-                focusers.find((one) => !one.wrapper.closest('[hidden]'))?.focus();
-            });
-        }));
+    function focusAsOpened(first) {
+        if (!focusers.length)
+            return;
+        queueMicrotask(() => {
+            if (gone || !root.isConnected || root.closest('[hidden]') || (typeof root.checkVisibility === 'function' && !root.checkVisibility()))
+                return;
+            const active = doc.activeElement;
+            const free = !active || active === doc.body || active === doc.documentElement;
+            if (!free && !(first && root.contains(active)))
+                return;
+            focusers.find((one) => !one.wrapper.closest('[hidden]'))?.focus();
+        });
     }
+    cleanups.push(form.on('open', () => {
+        const first = !opened;
+        opened = true;
+        focusAsOpened(first);
+    }));
     if (form.getState().status === 'idle')
         void form.load();
     return {
@@ -1723,6 +1932,14 @@ export function mountViewer(host, given) {
             render(form.getState());
         },
         isReadonly: () => locked,
+        reload: () => afterDrawing(async () => {
+            if (reloadList)
+                return reloadList();
+            await form.run([{ do: 'reload' }]);
+        }),
+        openRecord: (id, options) => afterDrawing(async () => {
+            await openInList?.(id, options);
+        }),
         on: (event, listener) => {
             const off = form.on(event, listener);
             cleanups.push(off);
@@ -1730,6 +1947,7 @@ export function mountViewer(host, given) {
         },
         setValues: (values) => form.setValues(values),
         run: (steps, context) => form.run(steps, context),
+        drawn,
         destroy() {
             gone = true;
             unsubscribe();
@@ -1741,6 +1959,8 @@ export function mountViewer(host, given) {
         },
     };
 }
+/** What a field is worked with: where its access key is said. */
+const CONTROL = 'input:not([type="hidden"]), select, textarea, button, [contenteditable="true"], [tabindex="0"]';
 /** The boxes a label can be shown in, as the words of an empty box. */
 const TEXT_BOX = 'input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), textarea';
 /** Nothing in it: no value, empty words, nothing picked. */