@fieldia/grid 0.10.0 → 0.12.0

package/src/lib/grid.mjs

@@ -1,7 +1,7 @@
 import { _stopPropagationForAgGrid, AllCommunityModule, createGrid, themeQuartz, } from 'ag-grid-community';
-import { fill, lineKind } from '@fieldia/core';
+import { fill, isRightToLeft, lineKind } from '@fieldia/core';
 import { installGridStyles } from './styles.mjs';
-import { createWidget, displayValue, kindTextField, lineForm, WIDGET_LABELS } from '@fieldia/widgets';
+import { cellText, createWidget, distributionIds, distributionModel, distributionWords, DRAWN_IN_CELLS, drawIcon, openLineDialog, kindTextField, lineForm, WIDGET_LABELS, } from '@fieldia/widgets';
 /**
  * A one2many as a spreadsheet, on AG Grid. Each cell is edited with the same
  * Fieldia widget the plain table uses, wired to its line, so every keystroke
@@ -17,6 +17,9 @@ const apis = new WeakMap();
 export function gridApiOf(element) {
     return apis.get(element);
 }
+/** Everything a cell needs, handed to AG Grid's editors and renderers. */
+/** The tones a line or a cell can take. */
+const TONES = ['info', 'success', 'warning', 'danger', 'muted'];
 /** The grid's own columns (the drag handle, the delete button) start with two underscores. */
 const isTool = (id) => id.startsWith('__');
 /** The column a section or note spans from: the first field shown. */
@@ -69,9 +72,143 @@ class OpenRenderer {
         return true;
     }
 }
-/** The delete button at the end of each line. */
+/** A line's own buttons, each shown by its condition on the line; a press runs with the line. */
+class RowButtonsRenderer {
+    box;
+    params;
+    init(params) {
+        this.params = params;
+        this.box = document.createElement('span');
+        this.box.className = 'fd-grid-row-buttons';
+        for (const own of params.buttons) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            const icon = drawIcon(document, own.icon);
+            button.className = `fd-button fd-button-link fd-line-button${icon ? ' fd-line-button-icon' : ''}`;
+            button.dataset['rowButton'] = own.id;
+            button.setAttribute('aria-label', own.label);
+            button.title = own.label;
+            button.append(icon ?? own.label);
+            button.addEventListener('click', async (event) => {
+                event.stopPropagation();
+                const key = this.params.data?.key;
+                if (!key || button.hasAttribute('aria-busy'))
+                    return;
+                button.setAttribute('aria-busy', 'true');
+                try {
+                    await params.press(own.id, key);
+                }
+                finally {
+                    button.removeAttribute('aria-busy');
+                }
+            });
+            this.box.append(button);
+        }
+        this.show();
+    }
+    show() {
+        const state = this.params.data ? this.params.stateOf(this.params.data.key) : undefined;
+        for (const button of this.box.querySelectorAll('button'))
+            button.hidden = !state?.buttons[button.dataset['rowButton']];
+    }
+    getGui() {
+        return this.box;
+    }
+    refresh(params) {
+        this.params = params;
+        this.show();
+        return true;
+    }
+}
+/** A choice drawn as a pill in the tone its rules give it: Flectra's widget="badge". */
+class BadgeRenderer {
+    pill;
+    init(params) {
+        this.pill = document.createElement('span');
+        this.refresh(params);
+    }
+    getGui() {
+        return this.pill;
+    }
+    refresh(params) {
+        const text = params.valueFormatted ?? String(params.value ?? '');
+        this.pill.className = text ? 'fd-grid-badge' : '';
+        this.pill.textContent = text;
+        const tone = params.toneOf(params.data);
+        if (tone)
+            this.pill.dataset['tone'] = tone;
+        else
+            delete this.pill.dataset['tone'];
+        return true;
+    }
+}
+/** An analytic distribution's cell: each account by its name and its share, "Sales 60%, Marketing 40%"; its editor opens its lines. */
+class DistributionRenderer {
+    text;
+    init(params) {
+        this.text = document.createElement('span');
+        this.text.className = 'fd-grid-distribution';
+        this.refresh(params);
+    }
+    getGui() {
+        return this.text;
+    }
+    refresh(params) {
+        const value = params.value;
+        const unknown = distributionIds(value).map(String).filter((id) => params.nameOf(id) === undefined);
+        if (unknown.length && params.data)
+            params.find(params.data, unknown);
+        this.text.textContent = distributionWords(value, params.locale, params.nameOf);
+        // All of it on pointing at it, when the column is narrower than its words.
+        this.text.title = this.text.textContent;
+        return true;
+    }
+}
+/**
+ * A cell drawn by a widget of its own — a progress bar, priority stars, a
+ * state's dot — used in the cell itself with a click, as the plain table's
+ * are: the same Fieldia widget, wired to its line.
+ */
+class DrawnRenderer {
+    box;
+    widget = null;
+    init(params) {
+        this.box = document.createElement('span');
+        this.box.className = 'fd-grid-drawn';
+        const { cell, subfield, look, data } = params;
+        if (data) {
+            const node = { type: 'field', id: `${cell.fieldId}.${data.key}.${subfield}`, field: subfield, widget: look.widget, ...(look.options ? { options: look.options } : {}) };
+            this.widget = createWidget({ form: lineForm(cell.form, cell.field, data.key), name: subfield, field: cell.defs[subfield], node, id: `${cell.fieldId}-${data.key}-${subfield}-cell`, document, labels: cell.labels, locale: cell.locale, dialogs: cell.dialogs }, cell.registry);
+            // Named by its column, as the plain table's cell is by its hidden label.
+            const named = this.widget.element.matches('[role]') ? this.widget.element : this.widget.element.querySelector('[role]');
+            named?.setAttribute('aria-label', cell.defs[subfield].label);
+            this.box.append(this.widget.element);
+        }
+        this.refresh(params);
+    }
+    getGui() {
+        return this.box;
+    }
+    refresh(params) {
+        const { cell, subfield, data } = params;
+        this.widget?.update({
+            value: data?.values[subfield],
+            values: data?.values ?? {},
+            parent: cell.form.getState().values,
+            readonly: params.locked(data),
+            required: false,
+            invalid: false,
+        });
+        return true;
+    }
+    destroy() {
+        this.widget?.destroy?.();
+    }
+}
+/** The delete button at the end of each line: hidden on a line the table keeps (`lineDelete`). */
 class DeleteRenderer {
     button;
+    params;
     init(params) {
         this.button = document.createElement('button');
         this.button.type = 'button';
@@ -79,17 +216,91 @@ class DeleteRenderer {
         this.button.textContent = '×';
         this.button.setAttribute('aria-label', params.cell.labels.deleteLine);
         this.button.addEventListener('click', () => {
-            if (params.data)
-                params.cell.form.removeLine(params.cell.field, params.data.key);
+            const key = this.params.data?.key;
+            if (key && this.params.deletable(key))
+                this.params.cell.form.removeLine(this.params.cell.field, key);
         });
+        this.refresh(params);
     }
     getGui() {
         return this.button;
     }
+    refresh(params) {
+        this.params = params;
+        this.button.hidden = !params.data || !params.deletable(params.data.key);
+        return true;
+    }
+}
+/** A line's tick, choosing it for the table's buttons for chosen lines. */
+class PickRenderer {
+    box;
+    params;
+    init(params) {
+        this.box = document.createElement('input');
+        this.box.type = 'checkbox';
+        this.box.className = 'fd-checkbox fd-line-pick';
+        this.box.addEventListener('change', () => {
+            if (this.params.data)
+                this.params.picking.choose(this.params.data.key, this.box.checked);
+        });
+        this.refresh(params);
+    }
+    getGui() {
+        return this.box;
+    }
+    refresh(params) {
+        this.params = params;
+        this.box.checked = !!params.data && params.picking.isChosen(params.data.key);
+        this.box.disabled = params.picking.readonly();
+        this.box.setAttribute('aria-label', params.picking.label((params.node.rowIndex ?? 0) + 1));
+        return true;
+    }
+}
+/** The head's tick: every line chosen, or none. */
+class PickAllHeader {
+    box;
+    init(params) {
+        this.box = document.createElement('input');
+        this.box.type = 'checkbox';
+        this.box.className = 'fd-checkbox fd-line-pick fd-line-pick-all';
+        this.box.setAttribute('aria-label', params.picking.allLabel);
+        this.box.addEventListener('change', () => params.picking.chooseAll(this.box.checked));
+        params.picking.head(this.box);
+    }
+    getGui() {
+        return this.box;
+    }
     refresh() {
         return true;
     }
 }
+/** The button that puts a copy of a line right after it. */
+class CopyRenderer {
+    button;
+    params;
+    init(params) {
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.className = 'fd-line-copy';
+        this.button.textContent = '⧉';
+        this.button.addEventListener('click', (event) => {
+            event.stopPropagation();
+            if (this.params.data)
+                this.params.copy(this.params.data.key);
+        });
+        this.refresh(params);
+    }
+    getGui() {
+        return this.button;
+    }
+    refresh(params) {
+        this.params = params;
+        const label = params.label((params.node.rowIndex ?? 0) + 1);
+        this.button.setAttribute('aria-label', label);
+        this.button.title = label;
+        return true;
+    }
+}
 /** The header of the last column: a button that opens the column chooser. */
 class ChooserHeader {
     button;
@@ -129,6 +340,8 @@ class FieldiaCellEditor {
     /** The line field this editor writes: the column's, or a section's or note's text. */
     column = '';
     def;
+    /** A date typed beside Fieldia's own calendar (options.weekNumbers): its month needs room the cell does not have. */
+    calendar = false;
     note = null;
     floating = null;
     init(params) {
@@ -139,7 +352,10 @@ class FieldiaCellEditor {
         const kind = cell.kindOf(params.data);
         const column = (this.column = kind && cell.kinds ? cell.kinds.text : params.subfield);
         const def = (this.def = kind ? kindTextField(cell.defs[column], kind) : cell.defs[column]);
-        const node = { type: 'field', id: `${cell.fieldId}.${key}.${column}`, field: column };
+        // A cell typed in its own way (hours as HH:MM, a per cent) is typed so in its editor too.
+        const look = kind ? undefined : cell.looks?.[column];
+        const node = { type: 'field', id: `${cell.fieldId}.${key}.${column}`, field: column, ...(look?.widget ? { widget: look.widget } : {}), ...(look?.options ? { options: look.options } : {}) };
+        this.calendar = (def.type === 'date' || def.type === 'datetime') && look?.options?.['weekNumbers'] === true;
         const context = {
             form: lineForm(cell.form, cell.field, key),
             name: column,
@@ -164,9 +380,12 @@ class FieldiaCellEditor {
         if (cell.rowMode)
             this.floatList();
         if (this.isPopup()) {
-            // AG Grid places a popup over its cell but leaves its size to the editor.
+            // AG Grid places a popup over its cell but leaves its size to the editor; a distribution's lines take the room they need.
             const { width, height } = params.eGridCell.getBoundingClientRect();
-            Object.assign(this.box.style, { width: `${width}px`, height: `${height}px` });
+            if (def.type === 'json')
+                Object.assign(this.box.style, { minWidth: `${Math.max(width, 360)}px` });
+            else
+                Object.assign(this.box.style, { width: `${width}px`, height: `${height}px` });
         }
         // The form never changes values in place, so holding them is enough.
         this.before = this.line()?.values ?? {};
@@ -177,6 +396,21 @@ class FieldiaCellEditor {
             else if (event.key === 'Escape')
                 params.cell.cancel(key, this.before);
         });
+        // A day picked from a date's calendar is the whole answer: the cell keeps it and closes, as a
+        // spreadsheet's does. The browser says change while a date is typed too (once the year makes
+        // one), so a change right after a key is typing, which Enter or Tab commits. A date with a time
+        // stays open for its time, and a whole line open at once stays open.
+        if (def.type === 'date' && !cell.rowMode) {
+            let typedAt = 0;
+            this.box.addEventListener('keydown', () => (typedAt = Date.now()), true);
+            this.box.addEventListener('change', (event) => {
+                if (event.target.type !== 'date' || Date.now() - typedAt < 500)
+                    return;
+                params.stopEditing();
+            });
+            // Fieldia's own calendar (options.weekNumbers) sets the day itself, and says it was picked.
+            this.box.addEventListener('fd-picked', () => params.stopEditing());
+        }
         // Like a spreadsheet, a cell reached from the keyboard has its text selected,
         // so typing replaces it; a click still puts the caret where it lands.
         let pointing = false;
@@ -192,7 +426,7 @@ class FieldiaCellEditor {
             // A cell the form found wrong stays marked while it is fixed.
             const invalid = !!cell.form.getState().errors[`${cell.field}.${key}.${column}`];
             this.box.classList.toggle('fd-grid-editor-invalid', invalid);
-            this.widget.update({ value: line?.values[column], values: line?.values ?? {}, readonly: false, required: def.required === true, invalid });
+            this.widget.update({ value: line?.values[column], values: line?.values ?? {}, parent: cell.form.getState().values, readonly: false, required: def.required === true, invalid });
         };
         show();
         this.leave = cell.form.subscribe(show);
@@ -292,12 +526,12 @@ class FieldiaCellEditor {
     getValue() {
         return this.line()?.values[this.column];
     }
-    /** Lists that open below their input need room the cell does not have (a whole open line floats them instead). */
+    /** Lists that open below their input need room the cell does not have (a whole open line floats them instead); so do a distribution's lines. */
     isPopup() {
         if (this.params.cell.rowMode)
             return false;
         const type = this.def.type;
-        return type === 'many2one' || type === 'many2many' || type === 'reference';
+        return type === 'many2one' || type === 'many2many' || type === 'reference' || type === 'json' || this.calendar;
     }
     getPopupPosition() {
         return 'over';
@@ -330,8 +564,28 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     const kinds = def.lineKinds;
     const sequence = def.sequenceField;
     // The fields that say what a line is and keep the lines' order never show as columns.
-    const columns = (node.columns ?? Object.keys(def.fields)).filter((column) => def.fields[column] && column !== kinds?.field && column !== sequence);
+    // Lines a line holds are edited in its form, never drawn in its row.
+    const columns = (node.columns ?? Object.keys(def.fields)).filter((column) => def.fields[column] && def.fields[column].type !== 'one2many' && column !== kinds?.field && column !== sequence);
     const kindOf = (line) => (line ? lineKind(def, line.values) : null);
+    // Its columns run the way the page reads; a column held at the start or the end of the line is held at that side.
+    const rtl = !!locale && isRightToLeft(locale);
+    const lineStart = rtl ? 'right' : 'left';
+    const lineEnd = rtl ? 'left' : 'right';
+    // The table's own rules, read by the form for each line as the form changes; a table with none asks nothing.
+    const ruled = !!(node.cells || node.rowTones || node.rowBold !== undefined || node.rowButtons || node.lineDelete !== undefined);
+    let lineStates = new Map();
+    /** Accounts' names an analytic distribution's cells show, by model and id, as they are found. */
+    const accountNames = new Map();
+    /** The analytic distributions among the columns, by column: their names found and said. */
+    const distributions = new Map();
+    /** Whether a line may be deleted now: always, unless the table's lineDelete keeps it. */
+    const deletable = (key) => node.lineDelete === undefined || (lineStates.get(key) ?? form.lineState(node.id, key)).deletable;
+    const ruleOf = (line, column) => (line ? lineStates.get(line.key)?.cells[column] : undefined);
+    /** Columns hidden by the record now. */
+    let ruleHidden = new Set();
+    /** The record's fields its money takes its currency from (`parent.currency_id`), and their values when last drawn. */
+    const parentCurrencies = [...new Set(Object.values(def.fields).flatMap((sub) => (sub.type === 'monetary' && sub.currencyField?.startsWith('parent.') ? [sub.currencyField.slice('parent.'.length)] : [])))];
+    let currencyShown = '';
     // Columns a person may hide or show, and where their choices (and widths, and order) are kept.
     const optional = node.optionalColumns ?? {};
     const optionalIds = columns.filter((column) => column in optional);
@@ -358,6 +612,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         layer: element,
         locale,
         dialogs,
+        // Columns typed in a widget's own way, or with settings of their own (a calendar's week numbers): drawn ones are used in their cells instead.
+        looks: Object.fromEntries(Object.entries(node.cells ?? {}).flatMap(([column, rules]) => rules.widget ? (DRAWN_IN_CELLS.has(rules.widget) ? [] : [[column, { widget: rules.widget, ...(rules.options ? { options: rules.options } : {}) }]]) : rules.options ? [[column, { options: rules.options }]] : [])),
     };
     installGridStyles(document);
     element.className = 'fd-grid-lines';
@@ -372,7 +628,52 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     problems.hidden = true;
     const adds = document.createElement('div');
     adds.className = 'fd-lines-adds';
-    element.append(host, problems, adds);
+    // Lines chosen for the table's buttons for them: a bar of those buttons over the grid while any is.
+    const choosing = !!node.selectedButtons?.length;
+    const chosen = new Set();
+    let pickAll = null;
+    const chosenCount = document.createElement('span');
+    chosenCount.className = 'fd-lines-chosen-count';
+    chosenCount.setAttribute('role', 'status');
+    /** A press that waits for its run, and is not pressed again meanwhile. */
+    const pressed = async (button, run) => {
+        if (button.hasAttribute('aria-busy'))
+            return;
+        button.setAttribute('aria-busy', 'true');
+        try {
+            await run();
+        }
+        finally {
+            button.removeAttribute('aria-busy');
+        }
+    };
+    const ownButton = (own, className) => {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = className;
+        button.dataset['node'] = own.id;
+        const icon = drawIcon(document, own.icon);
+        if (icon)
+            button.append(icon);
+        button.append(own.label);
+        return button;
+    };
+    const chosenButtons = (node.selectedButtons ?? []).map((own) => {
+        const button = ownButton(own, `fd-button fd-button-${own.style ?? 'secondary'} fd-lines-chosen-button`);
+        // In the table's order, whatever order they were ticked in.
+        button.addEventListener('click', () => void pressed(button, () => form.runLinesAction(node.id, own.id, lines().filter((line) => chosen.has(line.key)).map((line) => line.key))));
+        return { id: own.id, button };
+    });
+    const bar = document.createElement('div');
+    bar.className = 'fd-lines-chosen';
+    bar.hidden = true;
+    bar.append(chosenCount, ...chosenButtons.map((b) => b.button));
+    // Lines as cards too (cards: narrow or always): the stylesheet shows them in the grid's place on a narrow form.
+    const cardList = document.createElement('div');
+    cardList.className = 'fd-line-cards';
+    if (node.cards)
+        element.dataset['cards'] = node.cards;
+    element.append(...(choosing ? [bar] : []), ...(node.cards ? [cardList] : []), host, problems, adds);
     let readonly = false;
     const lines = () => form.getState().values[name] ?? [];
     /** A line field no one types in: read-only, or worked out from the line's others. */
@@ -410,8 +711,9 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         if (!before)
             return void fresh.delete(key);
         cancelling.delete(key);
+        // A line added a moment ago is taken back, unless the table keeps it: then it stays, as it was begun.
         if (fresh.delete(key))
-            return form.removeLine(name, key);
+            return deletable(key) ? form.removeLine(name, key) : undefined;
         const current = lines();
         if (current.some((l) => l.key === key))
             form.setValue(name, current.map((l) => (l.key === key ? { ...l, values: before } : l)));
@@ -463,6 +765,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         const wide = ['char', 'text', 'html', 'many2one', 'many2many', 'reference', 'selection'].includes(sub.type);
         /** Whether this column is where a section's or note's text starts. */
         const spans = (api) => spanStart(api)?.getColId() === column;
+        /** An analytic distribution (a json line field shown as `distribution`): its cell says its accounts, its editor opens its lines. */
+        const distributed = sub.type === 'json' && node.cells?.[column]?.widget === 'distribution';
         const base = {
             colId: column,
             headerName: sub.label,
@@ -476,7 +780,12 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
                     return p.data?.values[column];
                 return kinds && spans(p.api) ? p.data?.values[kinds.text] : null;
             },
-            valueFormatter: (p) => kindOf(p.data) || (p.node?.rowPinned && !totals.includes(column)) ? String(p.value ?? '') : displayValue(sub, p.value, p.data?.values ?? {}, locale),
+            valueFormatter: (p) => kindOf(p.data) || (p.node?.rowPinned && !totals.includes(column))
+                ? String(p.value ?? '')
+                : // Hidden by its line, the cell stays, blank, so the column lines up.
+                    ruleOf(p.data, column)?.invisible
+                        ? ''
+                        : cellText(sub, p.value, p.data?.values ?? {}, locale, form.getState().values, node.cells?.[column]),
             type: numeric ? 'rightAligned' : undefined,
             // A section or note runs across every column but the delete button.
             colSpan: (p) => (kindOf(p.data) && spans(p.api) ? spanWidth(p.api) : 1),
@@ -485,6 +794,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             cellClassRules: {
                 'fd-grid-kind-text': (p) => !!kindOf(p.data),
                 'fd-grid-invalid': (p) => !p.node.rowPinned && !!problemAt(p.data, column, p.api),
+                'fd-cell-bold': (p) => !!ruleOf(p.data, column)?.bold,
+                ...Object.fromEntries(TONES.map((tone) => [`fd-tone-${tone}`, (p) => ruleOf(p.data, column)?.tone === tone])),
             },
             tooltipValueGetter: (p) => (p.node?.rowPinned ? undefined : problemAt(p.data, column, p.api)),
             suppressKeyboardEvent: keys,
@@ -492,16 +803,88 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             minWidth: wide ? 140 : sub.type === 'monetary' ? 150 : 96,
             flex: wide ? 2 : sub.type === 'monetary' ? 1.3 : 1,
             hide: optional[column] === 'hide',
+            ...(node.cells?.[column]?.width ? { width: node.cells[column].width * 8 + 32, flex: 0 } : {}),
+            // Columns as wide as what they hold (fit: content), sized once the lines are drawn.
+            ...(node.fit === 'content' && !node.cells?.[column]?.width ? { flex: undefined, minWidth: 64 } : {}),
+            // Columns that shrink to fit (fit: shrink), as Flectra's list beside a chatter: narrower before the table scrolls, headers wrapping.
+            ...(node.fit === 'shrink' ? { minWidth: wide ? 72 : sub.type === 'monetary' ? 80 : 48, wrapHeaderText: true, autoHeaderHeight: true } : {}),
             editable: (p) => {
                 if (readonly || p.node.rowPinned)
                     return false;
                 if (kindOf(p.data))
                     return spans(p.api);
-                return sub.type !== 'boolean' && EDITABLE.has(sub.type) && !locked(sub);
+                const rules = ruleOf(p.data, column);
+                return sub.type !== 'boolean' && (EDITABLE.has(sub.type) || distributed) && !locked(sub) && !rules?.readonly && !rules?.invisible;
             },
             cellEditor: FieldiaCellEditor,
             cellEditorParams: { cell, subfield: column },
         };
+        if (distributed) {
+            const model = distributionModel(node.cells?.[column]?.options);
+            const asked = new Set();
+            const params = {
+                model,
+                locale,
+                nameOf: (id) => accountNames.get(`${model}:${id}`),
+                find(line, ids) {
+                    const fresh = ids.filter((id) => !asked.has(`${model}:${id}`));
+                    if (!fresh.length)
+                        return;
+                    for (const id of fresh)
+                        asked.add(`${model}:${id}`);
+                    form.searchLine(name, line.key, column, '', fresh.length, { model, ids: fresh.map((id) => (/^\d+$/.test(id) ? Number(id) : id)) }).then((found) => {
+                        for (const record of found)
+                            accountNames.set(`${model}:${record.id}`, record.label);
+                        if (api.isDestroyed())
+                            return;
+                        api.refreshCells({ columns: [column], force: true, suppressFlash: true });
+                        // The cards say the accounts by their names too.
+                        cardsDrawn = '';
+                        drawCards();
+                    }, () => undefined);
+                },
+            };
+            distributions.set(column, params);
+            return {
+                ...base,
+                // Its accounts' names take room, as words do.
+                minWidth: node.fit === 'shrink' ? 96 : 180,
+                flex: 2,
+                cellRendererSelector: (p) => (kindOf(p.data) || p.node.rowPinned ? undefined : { component: DistributionRenderer, params }),
+                // Tab goes round the lines of its open editor; from its last box, on to the next cell.
+                suppressKeyboardEvent: (p) => {
+                    if (p.editing && p.event.key === 'Tab') {
+                        const editor = p.event.target?.closest?.('.fd-grid-editor');
+                        const boxes = editor ? [...editor.querySelectorAll('input, button, select')].filter((b) => !b.closest('[hidden]') && !b.disabled) : [];
+                        const at = boxes.indexOf(p.event.target);
+                        const to = at + (p.event.shiftKey ? -1 : 1);
+                        if (at >= 0 && to >= 0 && to < boxes.length)
+                            return true;
+                    }
+                    return keys(p);
+                },
+            };
+        }
+        const drawn = node.cells?.[column]?.widget;
+        if (drawn && DRAWN_IN_CELLS.has(drawn) && drawn !== 'badge') {
+            const look = { widget: drawn, ...(node.cells?.[column]?.options ? { options: node.cells[column].options } : {}) };
+            return {
+                ...base,
+                // Used in the cell itself: no editor opens over it.
+                editable: false,
+                cellRendererSelector: (p) => kindOf(p.data) || p.node.rowPinned
+                    ? undefined
+                    : { component: DrawnRenderer, params: { cell, subfield: column, look, locked: (line) => readonly || locked(sub) || !!ruleOf(line, column)?.readonly } },
+                // Keys inside the widget are its own: its stars' arrows, its menu's.
+                suppressKeyboardEvent: (p) => p.event.target?.closest?.('.fd-grid-drawn') ? true : keys(p),
+            };
+        }
+        if (node.cells?.[column]?.badge || drawn === 'badge') {
+            return {
+                ...base,
+                cellRendererSelector: (p) => (kindOf(p.data) || p.node.rowPinned ? undefined : { component: BadgeRenderer, params: { toneOf: (line) => ruleOf(line, column)?.tone ?? null } }),
+            };
+        }
         if (sub.type === 'boolean') {
             return {
                 ...base,
@@ -526,23 +909,108 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             resizable: false,
             sortable: false,
             suppressMovable: true,
-            lockPosition: 'left',
+            lockPosition: lineStart,
             suppressKeyboardEvent: keys,
         });
     }
-    // AG Grid copies column definitions deeply, so the button calls through, never a copy.
-    // With dialogs, a line can be opened to see and edit every one of its fields at once.
-    const openLine = async (line) => {
-        if (!dialogs)
-            return;
-        const fields = Object.fromEntries(Object.entries(def.fields).filter(([key]) => key !== kinds?.field && key !== sequence));
-        // The dialog shows what the onchange makes of the line as it is edited; the line itself waits for Save & Close.
-        const values = await dialogs.editValues({ title: def.label, fields, values: line.values, readonly, recompute: (edited) => form.previewLine(name, line.key, edited) });
-        if (!values)
+    // A tick at the start of each item, choosing it for the table's buttons for chosen lines; the head's chooses every one.
+    const picking = {
+        label: (n) => fill(labels.chooseLine, { name: fill(labels.lineN, { n }) }),
+        allLabel: labels.chooseAllLines,
+        isChosen: (key) => chosen.has(key),
+        choose(key, on) {
+            if (on)
+                chosen.add(key);
+            else
+                chosen.delete(key);
+            showChosen(true);
+        },
+        chooseAll(on) {
+            chosen.clear();
+            if (on)
+                for (const line of lines())
+                    if (!kindOf(line))
+                        chosen.add(line.key);
+            showChosen(true);
+        },
+        head: (box) => {
+            pickAll = box;
+            showChosen(false);
+        },
+        readonly: () => readonly,
+    };
+    if (choosing) {
+        columnDefs.unshift({
+            colId: '__pick',
+            headerName: '',
+            headerComponent: PickAllHeader,
+            headerComponentParams: { picking },
+            width: 36,
+            minWidth: 36,
+            maxWidth: 36,
+            cellClass: 'fd-grid-tools fd-grid-pick',
+            resizable: false,
+            sortable: false,
+            suppressMovable: true,
+            lockPosition: lineStart,
+            cellRendererSelector: (p) => (p.node.rowPinned || kindOf(p.data) ? undefined : { component: PickRenderer, params: { picking } }),
+            suppressKeyboardEvent: keys,
+        });
+    }
+    // A copy of a line, its values too, right after it: never its saved id or its place in the order.
+    const copyLine = (key) => {
+        const all = lines();
+        const at = all.findIndex((l) => l.key === key);
+        if (readonly || at < 0)
             return;
-        // Written in one go, so the form recalculates once.
-        form.setValue(name, lines().map((l) => (l.key === line.key ? { ...l, values: { ...l.values, ...values } } : l)));
+        const values = { ...all[at].values };
+        if (sequence)
+            delete values[sequence];
+        const made = form.addLine(name, values);
+        if (sequence)
+            form.moveLine(name, made, at + 1);
+        else {
+            const now = [...lines()];
+            now.splice(at + 1, 0, ...now.splice(now.findIndex((l) => l.key === made), 1));
+            form.setValue(name, now);
+        }
     };
+    if (node.options?.['copy'] === true) {
+        columnDefs.push({
+            colId: '__copy',
+            headerName: '',
+            width: 40,
+            minWidth: 40,
+            cellClass: 'fd-grid-tools',
+            resizable: false,
+            sortable: false,
+            suppressMovable: true,
+            lockPosition: lineEnd,
+            cellRendererSelector: (p) => (p.node.rowPinned || kindOf(p.data) ? undefined : { component: CopyRenderer, params: { copy: copyLine, label: (n) => fill(labels.copy, { name: fill(labels.lineN, { n }) }) } }),
+            suppressKeyboardEvent: keys,
+        });
+    }
+    // AG Grid copies column definitions deeply, so the button calls through, never a copy.
+    // With dialogs, a line can be opened to see and edit every one of its fields at once.
+    // Its own record's page, by the table's model (lineOpens: "record"), or every one of its fields.
+    const openLine = (line) => (dialogs ? openLineDialog(form, name, node, line, dialogs, readonly) : undefined);
+    if (node.rowButtons?.length) {
+        columnDefs.push({
+            colId: '__row_buttons',
+            headerName: '',
+            // An icon takes a small square; words, what they need.
+            width: 16 + node.rowButtons.reduce((total, b) => total + (b.icon ? 28 : 16 + b.label.length * 7), 0),
+            cellClass: 'fd-grid-tools',
+            resizable: false,
+            sortable: false,
+            suppressMovable: true,
+            lockPosition: lineEnd,
+            cellRendererSelector: (p) => p.node.rowPinned || kindOf(p.data)
+                ? undefined
+                : { component: RowButtonsRenderer, params: { buttons: node.rowButtons, stateOf: (key) => lineStates.get(key), press: (id, key) => form.runRowAction(node.id, id, key) } },
+            suppressKeyboardEvent: keys,
+        });
+    }
     if (dialogs) {
         columnDefs.push({
             colId: '__open',
@@ -554,7 +1022,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             resizable: false,
             sortable: false,
             suppressMovable: true,
-            lockPosition: 'right',
+            lockPosition: lineEnd,
             cellRendererSelector: (p) => (p.node.rowPinned || kindOf(p.data) ? undefined : { component: OpenRenderer, params: { open: openLine, label: labels.openLine } }),
             suppressKeyboardEvent: keys,
         });
@@ -563,7 +1031,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     columnDefs.push({
         colId: '__delete',
         headerName: '',
-        lockPosition: 'right',
+        lockPosition: lineEnd,
         ...(optionalIds.length ? { headerComponent: ChooserHeader, headerComponentParams: { chooser } } : {}),
         width: 44,
         minWidth: 44,
@@ -572,7 +1040,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         resizable: false,
         sortable: false,
         suppressMovable: true,
-        cellRendererSelector: (p) => (p.node.rowPinned ? undefined : { component: DeleteRenderer, params: { cell } }),
+        cellRendererSelector: (p) => (p.node.rowPinned ? undefined : { component: DeleteRenderer, params: { cell, deletable } }),
         suppressKeyboardEvent: keys,
     });
     const api = createGrid(host, {
@@ -590,6 +1058,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             headerHeight: HEADER_HEIGHT,
         }),
         columnDefs,
+        enableRtl: rtl,
         rowData: lines(),
         pinnedBottomRowData: totals.length ? [totalsRow(lines())] : undefined,
         getRowId: (p) => p.data.key,
@@ -599,6 +1068,13 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             const kind = kindOf(p.data);
             return kind ? `fd-grid-${kind}` : undefined;
         },
+        // A line's tone and bold, read again whenever its rules may have changed.
+        rowClassRules: ruled
+            ? {
+                'fd-line-bold': (p) => !!(p.data && lineStates.get(p.data.key)?.bold),
+                ...Object.fromEntries(TONES.map((tone) => [`fd-tone-${tone}`, (p) => !!p.data && lineStates.get(p.data.key)?.tone === tone])),
+            }
+            : undefined,
         domLayout: 'autoHeight',
         // Lines have few columns: all of them are drawn.
         suppressColumnVirtualisation: true,
@@ -629,6 +1105,21 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         defaultColDef: { sortable: false, resizable: true },
     }, { modules: [AllCommunityModule] });
     apis.set(element, api);
+    // Out of sight under display: none — a tab not shown, a field hidden by its condition — AG Grid measures
+    // itself again every frame, for as long as it stays hidden. Taken off the page meanwhile, it rests;
+    // put back the moment it has a box again, it draws itself to fit.
+    const away = document.createComment('fd-grid-away');
+    const View = document.defaultView;
+    const sizes = View && 'ResizeObserver' in View
+        ? new View.ResizeObserver(([entry]) => {
+            const hidden = entry.contentRect.width === 0 && entry.contentRect.height === 0;
+            if (hidden && host.isConnected)
+                host.replaceWith(away);
+            else if (!hidden && away.isConnected)
+                away.replaceWith(host);
+        })
+        : null;
+    sizes?.observe(element);
     // ---- columns a person arranged: kept, and brought back ----
     // A person's widths, order and choices are kept for the next visit. AG Grid
     // tells of each change a moment after it; bringing a layout back is told too,
@@ -642,14 +1133,26 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         // A grid taking itself apart also sends column events: they are not choices.
         if (automatic.has(source) || !preferences || api.isDestroyed())
             return;
-        const state = (api.getColumnState() ?? []).map(({ colId, width, flex, hide }) => ({ colId, width: width ?? null, flex: flex ?? null, hide: !!hide }));
+        // A column the record hides is kept as the person last had it: the rule's hiding is not their choice.
+        const state = (api.getColumnState() ?? []).map(({ colId, width, flex, hide }) => ({ colId, width: width ?? null, flex: flex ?? null, hide: ruleHidden.has(colId) ? personHidden.has(colId) : !!hide }));
         preferences.set(columnsKey, state);
     }
+    /** The columns the person hid with the chooser, or the page starts hidden. */
+    const personHidden = new Set(optionalIds.filter((column) => optional[column] === 'hide'));
+    const hiddenByPerson = (column) => personHidden.has(column);
     const saved = preferences?.get(columnsKey);
     if (Array.isArray(saved)) {
         const known = new Set(api.getColumns()?.map((c) => c.getColId()));
         const state = saved.filter((s) => typeof s?.colId === 'string' && known.has(s.colId));
         api.applyColumnState({ state, applyOrder: true });
+        for (const s of state) {
+            if (!optionalIds.includes(s.colId))
+                continue;
+            if (s.hide)
+                personHidden.add(s.colId);
+            else
+                personHidden.delete(s.colId);
+        }
     }
     // ---- the column chooser: a short list of the columns a person may hide ----
     const chooserBox = document.createElement('div');
@@ -671,13 +1174,21 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         if (!chooserBox.hidden)
             return closeChooser(fromKeyboard);
         opener = button;
-        chooserBox.replaceChildren(...optionalIds.map((column) => {
+        chooserBox.replaceChildren(
+        // A column the record hides now is not the person's to show.
+        ...optionalIds.filter((column) => !ruleHidden.has(column)).map((column) => {
             const label = document.createElement('label');
             const box = document.createElement('input');
             box.type = 'checkbox';
             box.className = 'fd-checkbox';
             box.checked = api.getColumn(column)?.isVisible() ?? false;
-            box.addEventListener('change', () => api.setColumnsVisible([column], box.checked));
+            box.addEventListener('change', () => {
+                if (box.checked)
+                    personHidden.delete(column);
+                else
+                    personHidden.add(column);
+                api.setColumnsVisible([column], box.checked);
+            });
             label.append(box, document.createTextNode(def.fields[column].label));
             return label;
         }));
@@ -727,10 +1238,131 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         button.addEventListener('click', () => addAndEdit(values));
         adds.append(button);
     };
-    addButton(labels.addLine, {}, 'line');
+    // The buttons' words, as the plain table takes them from the node's options.
+    const words = (key) => {
+        const said = node.options?.[key];
+        return typeof said === 'string' && said.trim() ? said : null;
+    };
+    addButton(words('addLabel') ?? labels.addLine, {}, 'line');
     if (kinds) {
-        addButton(labels.addSection, { [kinds.field]: kinds.section ?? 'section' }, 'section');
-        addButton(labels.addNote, { [kinds.field]: kinds.note ?? 'note' }, 'note');
+        addButton(words('addSectionLabel') ?? labels.addSection, { [kinds.field]: kinds.section ?? 'section' }, 'section');
+        addButton(words('addNoteLabel') ?? labels.addNote, { [kinds.field]: kinds.note ?? 'note' }, 'note');
+    }
+    // Buttons in the control row, beside the add buttons: the record's, shown by a condition on it (Flectra's <control>).
+    const controls = (node.controlButtons ?? []).map((own) => {
+        const button = ownButton(own, 'fd-button fd-button-link fd-lines-add fd-lines-control');
+        button.addEventListener('click', () => void pressed(button, () => form.runAction(own.id)));
+        adds.append(button);
+        return { id: own.id, button };
+    });
+    /** What the cards were last drawn from: drawn again only when it changes. */
+    let cardsDrawn = '';
+    /** Each line as a card: its first column as its title, the rest by their labels, its tone, its buttons, ↗ and ×. */
+    function drawCards() {
+        if (!node.cards)
+            return;
+        const current = lines();
+        const hidden = new Set(columns.filter((column) => ruleHidden.has(column) || api.getColumn(column)?.isVisible() === false));
+        const shownColumns = columns.filter((column) => !hidden.has(column));
+        const signature = JSON.stringify([current, [...lineStates], shownColumns, readonly, form.getState().values]);
+        if (signature === cardsDrawn)
+            return;
+        cardsDrawn = signature;
+        const parent = form.getState().values;
+        const cards = current.map((line) => {
+            const card = document.createElement('div');
+            card.className = 'fd-line-card';
+            card.dataset['line'] = line.key;
+            const kind = kindOf(line);
+            if (kind && kinds) {
+                card.classList.add(`fd-line-card-${kind}`);
+                card.textContent = String(line.values[kinds.text] ?? '');
+                return card;
+            }
+            const state = lineStates.get(line.key);
+            if (state?.tone)
+                card.dataset['tone'] = state.tone;
+            card.classList.toggle('fd-line-bold', !!state?.bold);
+            const shownHere = shownColumns.filter((column) => !state?.cells[column]?.invisible);
+            const [first, ...rest] = shownHere;
+            const text = (column) => {
+                // A distribution says its accounts by their names, as its cell does, once they are found.
+                const shares = distributions.get(column);
+                if (!shares)
+                    return cellText(def.fields[column], line.values[column], line.values, locale, parent, node.cells?.[column]);
+                const unknown = distributionIds(line.values[column]).map(String).filter((id) => shares.nameOf(id) === undefined);
+                if (unknown.length)
+                    shares.find(line, unknown);
+                return distributionWords(line.values[column], locale, shares.nameOf);
+            };
+            const title = document.createElement(dialogs ? 'button' : 'div');
+            title.className = 'fd-line-card-title';
+            title.textContent = first ? text(first) || fill(labels.lineN, { n: current.indexOf(line) + 1 }) : '';
+            if (dialogs && title instanceof HTMLButtonElement) {
+                title.type = 'button';
+                title.addEventListener('click', () => void openLine(line));
+            }
+            const list = document.createElement('dl');
+            for (const column of rest) {
+                const dt = document.createElement('dt');
+                dt.textContent = def.fields[column].label;
+                const dd = document.createElement('dd');
+                dd.textContent = text(column);
+                const tone = state?.cells[column]?.tone;
+                if (tone)
+                    dd.dataset['tone'] = tone;
+                list.append(dt, dd);
+            }
+            const tools = document.createElement('div');
+            tools.className = 'fd-line-card-tools';
+            for (const own of node.rowButtons ?? []) {
+                if (!state?.buttons[own.id])
+                    continue;
+                const button = ownButton(own, 'fd-button fd-button-link fd-line-button');
+                button.dataset['rowButton'] = own.id;
+                delete button.dataset['node'];
+                button.addEventListener('click', () => void pressed(button, () => form.runRowAction(node.id, own.id, line.key)));
+                tools.append(button);
+            }
+            if (!readonly && deletable(line.key)) {
+                const remove = document.createElement('button');
+                remove.type = 'button';
+                remove.className = 'fd-line-delete';
+                remove.textContent = '×';
+                remove.setAttribute('aria-label', labels.deleteLine);
+                remove.addEventListener('click', () => form.removeLine(name, line.key));
+                tools.append(remove);
+            }
+            card.append(title, list, tools);
+            return card;
+        });
+        const items = current.filter((line) => !kindOf(line));
+        const sums = totals.filter((column) => !hidden.has(column)).map((column) => {
+            const sum = items.reduce((total, line) => total + Number(line.values[column] ?? 0), 0);
+            return `${def.fields[column].label}: ${cellText(def.fields[column], sum, items[0]?.values ?? {}, locale, parent, node.cells?.[column])}`;
+        });
+        const total = sums.length ? Object.assign(document.createElement('div'), { className: 'fd-line-cards-total', textContent: sums.join(' · ') }) : null;
+        cardList.replaceChildren(...cards, ...(total ? [total] : []));
+    }
+    /** The bar and the ticks, as the lines chosen are now; `redraw` draws the lines' ticks again. */
+    function showChosen(redraw) {
+        if (!choosing)
+            return;
+        const items = lines().filter((line) => !kindOf(line));
+        for (const key of [...chosen])
+            if (!items.some((line) => line.key === key))
+                chosen.delete(key);
+        bar.hidden = readonly || chosen.size === 0;
+        chosenCount.textContent = fill(labels.linesChosen, { n: chosen.size });
+        for (const { id, button } of chosenButtons)
+            button.hidden = form.node(id).invisible;
+        if (pickAll) {
+            pickAll.checked = items.length > 0 && chosen.size === items.length;
+            pickAll.indeterminate = chosen.size > 0 && chosen.size < items.length;
+            pickAll.disabled = readonly || !items.length;
+        }
+        if (redraw)
+            api.refreshCells({ columns: ['__pick'], force: true, suppressFlash: true });
     }
     // A focused cell that has no editor still answers keys: Space ticks yes/no,
     // and Enter or Space presses the delete button. (AG Grid's onCellKeyDown
@@ -768,7 +1400,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         }
         else if (column === '__delete') {
             event.preventDefault();
-            form.removeLine(name, line.key);
+            if (deletable(line.key))
+                form.removeLine(name, line.key);
         }
     });
     // A table grows with its lines until it is long; then it keeps a height of
@@ -795,9 +1428,11 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         update(state) {
             if (state.readonly !== readonly) {
                 readonly = state.readonly;
-                api.setGridOption('columnDefs', columnDefs.filter((c) => !(readonly && (c.colId === '__delete' || c.colId === '__handle'))));
+                api.setGridOption('columnDefs', columnDefs.filter((c) => !(readonly && ['__delete', '__handle', '__copy', '__pick'].includes(c.colId))));
             }
             adds.hidden = readonly;
+            for (const { id, button } of controls)
+                button.hidden = form.node(id).invisible;
             const current = state.value ?? [];
             if (current !== shown) {
                 shown = current;
@@ -805,6 +1440,35 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
                 fitHeight(current.length);
                 if (totals.length)
                     api.setGridOption('pinnedBottomRowData', [totalsRow(current)]);
+                // Columns as wide as what they hold, once more as the lines change.
+                if (node.fit === 'content')
+                    api.autoSizeAllColumns();
+                // The ticks and copies name a line by where it is: it may have moved.
+                if (choosing || node.options?.['copy'] === true)
+                    api.refreshCells({ columns: ['__pick', '__copy'], force: true, suppressFlash: true });
+            }
+            // Money in the record's currency: its cells written again once that currency changes.
+            if (parentCurrencies.length) {
+                const now = JSON.stringify(parentCurrencies.map((field) => state.values[field] ?? null));
+                if (now !== currencyShown) {
+                    currencyShown = now;
+                    api.refreshCells({ force: true, suppressFlash: true });
+                }
+            }
+            // The table's own rules as the form has them now: redrawn only when they changed.
+            if (ruled) {
+                const states = new Map(current.filter((line) => !kindOf(line)).map((line) => [line.key, form.lineState(node.id, line.key)]));
+                const hidden = new Set(columns.filter((column) => form.columnHidden(node.id, column)));
+                const before = JSON.stringify([[...lineStates], [...ruleHidden]]);
+                lineStates = states;
+                if (JSON.stringify([[...states], [...hidden]]) !== before) {
+                    const turned = columns.filter((column) => hidden.has(column) !== ruleHidden.has(column));
+                    ruleHidden = hidden;
+                    for (const column of turned)
+                        api.setColumnsVisible([column], !hidden.has(column) && !hiddenByPerson(column));
+                    api.refreshCells({ force: true, suppressFlash: true });
+                    api.redrawRows();
+                }
             }
             const found = readonly ? [] : lineProblems();
             const signature = found.map((p) => `${p.index}.${p.column}:${p.message}`).join('|');
@@ -817,10 +1481,13 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
                 problems.textContent = listed.join(' · ');
                 problems.hidden = !found.length;
             }
+            showChosen(false);
+            drawCards();
             element.setAttribute('aria-invalid', String(state.invalid || found.length > 0));
         },
         destroy() {
             document.removeEventListener('mousedown', outside);
+            sizes?.disconnect();
             api.destroy();
             apis.delete(element);
         },