@fieldia/grid 0.12.0 → 0.13.0

package/src/lib/grid.mjs

@@ -329,6 +329,18 @@ class ChooserHeader {
         return true;
     }
 }
+/** What an empty grid says in its body: the page's words (`emptyLabel`), or a short line of its own. */
+class EmptyOverlay {
+    line;
+    init(params) {
+        this.line = document.createElement('span');
+        this.line.className = 'fd-help fd-grid-empty';
+        this.line.textContent = params.words;
+    }
+    getGui() {
+        return this.line;
+    }
+}
 /** A cell being edited: the field's own Fieldia widget, writing straight into its line. */
 class FieldiaCellEditor {
     box;
@@ -340,22 +352,22 @@ 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;
+    /** A section or note being edited, not an item. */
+    kind = null;
     note = null;
-    floating = null;
+    /** A tags box in a whole line open at once, which makes its line as tall as it needs. */
+    grows = false;
     init(params) {
         this.params = params;
         // Not `column`: AG Grid's own params carry the column object under that name.
         const { cell } = params;
         const key = params.data.key;
-        const kind = cell.kindOf(params.data);
+        const kind = (this.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]);
         // 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,
@@ -375,15 +387,34 @@ class FieldiaCellEditor {
             this.box.dataset['kind'] = kind;
         this.box.setAttribute('aria-label', def.label);
         this.box.append(this.widget.element);
+        // A whole line open at once keeps its editors in the line (AG Grid has no popups then): a tags box makes the line as tall as it needs.
+        if (cell.rowMode && def.type === 'many2many') {
+            this.grows = true;
+            this.box.classList.add('fd-grid-editor-grows');
+            if (typeof ResizeObserver !== 'undefined')
+                new ResizeObserver(() => this.fitLine()).observe(this.box);
+        }
         if (kind === 'note')
             this.growing(this.box.querySelector('textarea'));
-        if (cell.rowMode)
-            this.floatList();
+        else if (def.type === 'text')
+            this.paragraph(this.box.querySelector('textarea'));
         if (this.isPopup()) {
             // 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();
             if (def.type === 'json')
                 Object.assign(this.box.style, { minWidth: `${Math.max(width, 360)}px` });
+            // Tags wrap in a box of their own, as wide as a few need and as tall as they take, never spilling over the lines around.
+            else if (def.type === 'many2many')
+                Object.assign(this.box.style, { minWidth: `${Math.max(width, 280)}px`, minHeight: `${height}px` });
+            // A paragraph is typed in a box of several lines, wide enough to read them, never spilling over the rows around.
+            else if (def.type === 'text')
+                Object.assign(this.box.style, { minWidth: `${Math.max(width, 320)}px`, minHeight: `${height}px` });
+            // A date is as wide as its day and time need (the stylesheet's max-content), its cell's width at the least.
+            else if (def.type === 'date' || def.type === 'datetime')
+                Object.assign(this.box.style, { minWidth: `${width}px`, height: `${height}px` });
+            // A link is searched by its name: wide enough to read one over a narrow column, on its row's line.
+            else if (def.type === 'many2one' || def.type === 'reference')
+                Object.assign(this.box.style, { minWidth: `${Math.max(width, 240)}px`, height: `${height}px` });
             else
                 Object.assign(this.box.style, { width: `${width}px`, height: `${height}px` });
         }
@@ -418,9 +449,11 @@ class FieldiaCellEditor {
         this.box.addEventListener('focusin', (event) => {
             const input = event.target;
             if (!pointing && input instanceof HTMLInputElement && input.type !== 'checkbox' && input.type !== 'radio')
-                input.select();
+                selectFromStart(input);
             pointing = false;
         });
+        // A value longer than its cell has room for takes the cell's padding too.
+        this.box.addEventListener('input', () => this.fit());
         const show = () => {
             const line = this.line();
             // A cell the form found wrong stays marked while it is fixed.
@@ -446,39 +479,65 @@ class FieldiaCellEditor {
         });
         // Enter makes a new line; Ctrl/Cmd+Enter finishes the note.
         area.addEventListener('keydown', (event) => {
-            if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey))
+            if (event.key !== 'Enter' || event.shiftKey || event.altKey)
                 return;
-            event.preventDefault();
+            // The popup's own handler hears the key as well as the cell's (whose suppressKeyboardEvent leaves Enter alone).
             _stopPropagationForAgGrid(event);
+            if (!(event.ctrlKey || event.metaKey))
+                return;
+            event.preventDefault();
             this.params.api.stopEditing();
         });
     }
     /**
-     * In a cell, a link's list would be cut off by the rows around it, so it
-     * floats in the grid's own box, under its input, while the line is open.
+     * A paragraph (a text field) is typed in a box of several lines over its
+     * cell: Enter makes a new line there (the grid leaves it alone), and
+     * Ctrl/Cmd+Enter finishes it, as a note's does.
      */
-    floatList() {
-        const list = this.box.querySelector('.fd-listbox');
-        if (!list)
+    paragraph(area) {
+        if (!area)
             return;
-        const { layer, document: doc } = { layer: this.params.cell.layer, document: this.box.ownerDocument };
-        list.classList.add('fd-grid-floating-list');
-        layer.append(list);
-        const place = () => {
-            if (list.hidden || !this.box.isConnected)
+        area.addEventListener('keydown', (event) => {
+            if (event.key !== 'Enter' || event.shiftKey || event.altKey)
                 return;
-            const at = (this.box.querySelector('input') ?? this.box).getBoundingClientRect();
-            const frame = layer.getBoundingClientRect();
-            const rtl = doc.defaultView?.getComputedStyle(layer).direction === 'rtl';
-            list.style.insetBlockStart = `${at.bottom - frame.top + 2}px`;
-            list.style.insetInlineStart = `${rtl ? frame.right - at.right : at.left - frame.left}px`;
-            list.style.minWidth = `${this.params.eGridCell.getBoundingClientRect().width}px`;
-        };
-        const watch = new MutationObserver(place);
-        watch.observe(list, { attributes: true, attributeFilter: ['hidden'], childList: true });
-        this.floating = { list, watch };
-        place();
+            // The popup's own handler hears the key as well as the cell's (whose suppressKeyboardEvent leaves Enter alone).
+            _stopPropagationForAgGrid(event);
+            if (!(event.ctrlKey || event.metaKey))
+                return;
+            event.preventDefault();
+            this.params.api.stopEditing();
+        });
+    }
+    /** A value wider than the room inside the cell's padding takes the padding too, so more of it shows. */
+    fit() {
+        const input = this.box.querySelector('input:not([type="checkbox"]):not([type="radio"])');
+        if (!input)
+            return;
+        if (this.isPopup()) {
+            // A link's name longer than its box widens the box to show it whole, as far as the window allows.
+            const short = input.scrollWidth - input.clientWidth;
+            if ((this.def.type === 'many2one' || this.def.type === 'reference') && short > 0) {
+                const { left, width } = this.box.getBoundingClientRect();
+                const room = this.box.ownerDocument.defaultView.innerWidth - left - 16;
+                this.box.style.minWidth = `${Math.round(Math.max(width, Math.min(width + short + 8, LINK_EDITOR_MOST, room)))}px`;
+            }
+            return;
+        }
+        if (input.scrollWidth > input.clientWidth)
+            this.box.classList.add('fd-grid-editor-tight');
+    }
+    /** A line as tall as its tags box needs, never shorter than a line. */
+    fitLine() {
+        const { node, api } = this.params;
+        if (!this.box.isConnected || api.isDestroyed())
+            return;
+        const height = Math.max(ROW_HEIGHT, this.box.scrollHeight + 2);
+        if (height <= (node.rowHeight ?? 0))
+            return;
+        node.setRowHeight(height);
+        api.onRowHeightChanged();
     }
+    /** A note's box as tall as its text, and its row with it. */
     resize() {
         const area = this.note;
         if (!area)
@@ -510,6 +569,9 @@ class FieldiaCellEditor {
         return this.box;
     }
     afterGuiAttached() {
+        this.fit();
+        if (this.grows)
+            this.fitLine();
         // With a whole line open, every editor is attached: only the one clicked takes the focus.
         if (this.params.cellStartedEdit === false)
             return;
@@ -521,28 +583,34 @@ class FieldiaCellEditor {
         }
         const input = this.box.querySelector('input');
         if (input && input.type !== 'checkbox' && document.activeElement === input)
-            input.select();
+            selectFromStart(input);
     }
     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); so do a distribution's lines. */
+    /**
+     * 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, a date wider than its cell, and a paragraph's several lines (a note's grow in its own row).
+     */
     isPopup() {
         if (this.params.cell.rowMode)
             return false;
         const type = this.def.type;
-        return type === 'many2one' || type === 'many2many' || type === 'reference' || type === 'json' || this.calendar;
+        return type === 'many2one' || type === 'many2many' || type === 'reference' || type === 'json' || type === 'date' || type === 'datetime' || (type === 'text' && !this.kind);
     }
     getPopupPosition() {
         return 'over';
     }
     destroy() {
         this.leave();
-        this.floating?.watch.disconnect();
-        this.floating?.list.remove();
         this.widget.destroy?.();
         const { node, api, cell, data } = this.params;
         cell.finish(data.key);
+        // The line closed: it gives back the height its tags box took.
+        if (this.grows && !api.isDestroyed()) {
+            node.setRowHeight(null);
+            api.onRowHeightChanged();
+        }
         // A note's row grew by hand while it was typed; drawing it afresh measures
         // it again from its text (resetting the height would make it one line tall).
         if (this.note) {
@@ -553,12 +621,34 @@ class FieldiaCellEditor {
         }
     }
 }
+/**
+ * A box's text selected so typing replaces it, shown from its start: a
+ * browser scrolls a long value to its end as it is selected, and its start is
+ * what reads. (A date's own input has no text selection to set.)
+ */
+function selectFromStart(input) {
+    try {
+        input.setSelectionRange(0, input.value.length, 'backward');
+    }
+    catch {
+        input.select();
+    }
+    input.scrollLeft = 0;
+}
 // ---- the widget -------------------------------------------------------------------
 /** Past this many lines a table stops growing and scrolls inside, drawing only the rows in view. */
 const LONG_TABLE = 15;
 const ROW_HEIGHT = 40;
 const HEADER_HEIGHT = 38;
 const EDITABLE = new Set(['char', 'text', 'html', 'integer', 'float', 'monetary', 'date', 'datetime', 'selection', 'many2one', 'many2many', 'reference']);
+/** A badge's pill round its words, both sides: room its column keeps besides theirs. */
+const BADGE_PADDING = 20;
+/** The kinds of field that hold words: a line is named by the first of them. */
+const WORDS = new Set(['char', 'text', 'html', 'many2one', 'reference']);
+/** The kinds of field whose column is as wide as its values need, in characters, as Flectra's lists size them. */
+/** The widest a link's editor grows to show a long name, in pixels. */
+const LINK_EDITOR_MOST = 480;
+const FIXED_CHARS = { boolean: 4, integer: 4, float: 6, monetary: 14, date: 11, datetime: 17 };
 export const gridWidget = ({ form, name, field, node, id, document, labels = WIDGET_LABELS.en, preferences, locale, dialogs }) => {
     const def = field;
     const kinds = def.lineKinds;
@@ -621,6 +711,15 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     element.setAttribute('role', 'group');
     const host = document.createElement('div');
     host.className = 'fd-grid-host';
+    // A press on a tick in a line — chosen, or a yes or no — is the tick's alone: the grid focusing its cell would
+    // scroll a cell cut by the screen's edge into view, moving the tick from under the pointer, and the click would
+    // land on the cell instead. (A button in a cell the grid leaves alone.) The tick still takes the focus and the click.
+    for (const type of ['pointerdown', 'mousedown']) {
+        host.addEventListener(type, (event) => {
+            if (event.target.closest?.('.ag-cell input[type="checkbox"]'))
+                event.stopPropagation();
+        }, true);
+    }
     // What is wrong on which line, once a save has been refused.
     const problems = document.createElement('div');
     problems.className = 'fd-error fd-grid-problems';
@@ -730,6 +829,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         api.setFocusedCell(index, column);
         api.startEditingCell({ rowIndex: index, colKey: column });
     };
+    /** A paragraph (a text field) of an item, edited in its box of several lines over the cell. */
+    const paragraphCell = (line, column) => !cell.rowMode && !kindOf(line) && def.fields[column]?.type === 'text';
     /**
      * Keys the grid must leave alone, and the two that run off the end of the
      * table while editing: Enter on the last line and Tab on its last editable
@@ -741,8 +842,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         // Alt+Up/Down moves the line (below), it does not move the focus.
         if (!editing && event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown'))
             return true;
-        // In a note, Enter is a new line of the note (Ctrl/Cmd+Enter finishes it).
-        if (editing && event.key === 'Enter' && !event.ctrlKey && !event.metaKey && kindOf(node.data) === 'note')
+        // In a note, or a paragraph opened over its cell, Enter is a new line (Ctrl/Cmd+Enter finishes it).
+        if (editing && event.key === 'Enter' && !event.ctrlKey && !event.metaKey && (kindOf(node.data) === 'note' || paragraphCell(node.data, column.getColId())))
             return true;
         if (!editing || event.type !== 'keydown' || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey)
             return false;
@@ -758,8 +859,37 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         }
         return false;
     };
+    // Each column's share of the width by what it holds, as Flectra's lists size theirs: yes/no, numbers and dates by
+    // their kind, words and links by the longest the lines have — a long name gets the room a short code does not need.
+    const linesOf = (value) => (value ?? []).filter((line) => !kindOf(line));
+    const drawnFirst = linesOf(form.getState().values[name]);
+    /** A column whose values are drawn as pills (widget="badge"). */
+    const badged = (column) => !!node.cells?.[column]?.badge || node.cells?.[column]?.widget === 'badge';
+    /** Whether a column is as wide as its values, not a share of the width: yes/no, numbers, money, dates and badges, unless the grid shrinks to fit. */
+    const fixedWidth = (column) => (!!FIXED_CHARS[def.fields[column].type] || badged(column)) && node.fit !== 'shrink';
+    /** The room a column's values need, in pixels: its longest value, its kind's least, a short label — and the cell's padding. */
+    const roomOf = (column, lines = drawnFirst) => {
+        const sub = def.fields[column];
+        const least = FIXED_CHARS[sub.type] ?? 6;
+        let longest = sub.type === 'boolean' ? 0 : lines.reduce((most, line) => Math.max(most, cellText(sub, line.values[column], line.values, locale, form.getState().values, node.cells?.[column]).length), 0);
+        // A badge may turn to any of its choices: room for the longest, though no line holds it yet.
+        if (badged(column) && sub.type === 'selection')
+            longest = sub.options.reduce((most, option) => Math.max(most, option.label.length), longest);
+        // A long label over short numbers wraps onto a second line rather than widen its column; only its longest word sets a floor.
+        return Math.round(Math.min(Math.max(longest, least, labelWord(column)), 40) * 7.6 + 40) + (badged(column) ? BADGE_PADDING : 0);
+    };
+    /** Its label's longest word, in characters: a wrapping header breaks between words, never inside one. */
+    const labelWord = (column) => Math.min(Math.max(0, ...def.fields[column].label.split(/\s+/).map((word) => word.length)), 12);
+    /** The column a line is named by: its first of words (a name, a description, a link), else its first. */
+    const titleColumn = (shown) => shown.find((column) => WORDS.has(def.fields[column].type)) ?? shown[0];
+    /** A line's name by its place, "Line 3", when it has none to show. */
+    const placeName = (n) => {
+        const text = fill(labels.lineN, { n });
+        return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+    };
     const columnDefs = columns.map((column) => {
         const sub = def.fields[column];
+        const room = roomOf(column);
         const numeric = sub.type === 'integer' || sub.type === 'float' || sub.type === 'monetary';
         // Words get the room; numbers and yes/no take what they need.
         const wide = ['char', 'text', 'html', 'many2one', 'many2many', 'reference', 'selection'].includes(sub.type);
@@ -770,6 +900,10 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         const base = {
             colId: column,
             headerName: sub.label,
+            // A long label wraps onto a second line rather than be cut, so two columns never read the same; all of it on pointing at it.
+            headerTooltip: sub.label,
+            wrapHeaderText: true,
+            autoHeaderHeight: true,
             valueGetter: (p) => {
                 if (p.node?.rowPinned) {
                     if (totals.includes(column))
@@ -799,15 +933,15 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             },
             tooltipValueGetter: (p) => (p.node?.rowPinned ? undefined : problemAt(p.data, column, p.api)),
             suppressKeyboardEvent: keys,
-            // Money keeps room for a bold total in the millions (EGP 1,234,567.00).
-            minWidth: wide ? 140 : sub.type === 'monetary' ? 150 : 96,
-            flex: wide ? 2 : sub.type === 'monetary' ? 1.3 : 1,
+            // Numbers, money and dates as wide as their values, never cut; words share the rest by the room they need, giving way when it is tight.
+            minWidth: fixedWidth(column) ? 48 : Math.max(96, Math.round(labelWord(column) * 7.6 + 40)),
+            ...(fixedWidth(column) ? { width: room } : { flex: room }),
             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 } : {}),
+            ...(node.fit === 'shrink' ? { minWidth: wide ? 72 : sub.type === 'monetary' ? 80 : 48 } : {}),
             editable: (p) => {
                 if (readonly || p.node.rowPinned)
                     return false;
@@ -910,6 +1044,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             sortable: false,
             suppressMovable: true,
             lockPosition: lineStart,
+            // Held in sight at the line's start, however far the lines scroll sideways.
+            pinned: lineStart,
             suppressKeyboardEvent: keys,
         });
     }
@@ -953,6 +1089,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             sortable: false,
             suppressMovable: true,
             lockPosition: lineStart,
+            // Held in sight at the line's start, however far the lines scroll sideways.
+            pinned: lineStart,
             cellRendererSelector: (p) => (p.node.rowPinned || kindOf(p.data) ? undefined : { component: PickRenderer, params: { picking } }),
             suppressKeyboardEvent: keys,
         });
@@ -986,6 +1124,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             sortable: false,
             suppressMovable: true,
             lockPosition: lineEnd,
+            pinned: 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,
         });
@@ -1005,6 +1144,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             sortable: false,
             suppressMovable: true,
             lockPosition: lineEnd,
+            pinned: 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) } },
@@ -1023,6 +1163,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             sortable: false,
             suppressMovable: true,
             lockPosition: lineEnd,
+            pinned: lineEnd,
             cellRendererSelector: (p) => (p.node.rowPinned || kindOf(p.data) ? undefined : { component: OpenRenderer, params: { open: openLine, label: labels.openLine } }),
             suppressKeyboardEvent: keys,
         });
@@ -1032,6 +1173,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         colId: '__delete',
         headerName: '',
         lockPosition: lineEnd,
+        // A line's buttons held in sight at its end, however far the lines scroll sideways.
+        pinned: lineEnd,
         ...(optionalIds.length ? { headerComponent: ChooserHeader, headerComponentParams: { chooser } } : {}),
         width: 44,
         minWidth: 44,
@@ -1043,6 +1186,11 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         cellRendererSelector: (p) => (p.node.rowPinned ? undefined : { component: DeleteRenderer, params: { cell, deletable } }),
         suppressKeyboardEvent: keys,
     });
+    // The buttons' words and the empty table's, 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;
+    };
     const api = createGrid(host, {
         theme: themeQuartz.withParams({
             fontFamily: 'var(--fd-font)',
@@ -1079,8 +1227,9 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         // Lines have few columns: all of them are drawn.
         suppressColumnVirtualisation: true,
         readOnlyEdit: true,
-        // An empty table shows its Add a line button below, not a message inside.
-        suppressNoRowsOverlay: true,
+        // An empty table says so in a short line where its rows would be, never a blank row.
+        noRowsOverlayComponent: EmptyOverlay,
+        noRowsOverlayComponentParams: { words: words('emptyLabel') ?? labels.noLines },
         singleClickEdit: true,
         // A page may ask for a whole line to open at once.
         editType: node.editMode === 'row' ? 'fullRow' : undefined,
@@ -1090,10 +1239,13 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         // A line dragged by its handle moves among the others as it goes; where
         // it is let go, the form moves it too and numbers the lines again.
         rowDragManaged: !!sequence,
+        // A line dragged is named by its words (a yes or no names nothing), else by its place.
         rowDragText: (p) => {
             const line = p.rowNode?.data;
-            const text = line && (kindOf(line) && kinds ? line.values[kinds.text] : line.values[columns[0]]);
-            return text && typeof text === 'object' ? String(text.label ?? '') : String(text ?? '');
+            const column = titleColumn(columns.filter((c) => api.getColumn(c)?.isVisible() !== false));
+            const value = line && (kindOf(line) && kinds ? line.values[kinds.text] : column ? line.values[column] : null);
+            const text = value && typeof value === 'object' ? String(value.label ?? '') : String(value ?? '');
+            return text.trim() || placeName((p.rowNode?.rowIndex ?? 0) + 1);
         },
         onRowDragEnd: (event) => {
             const key = event.node.data?.key;
@@ -1124,7 +1276,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     // 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,
     // and keeping it again changes nothing.
-    api.addEventListener('columnResized', (event) => event.finished && remember(event.source));
+    // A person widens a column by dragging its edge; widths the grid sets itself (by its lines) are not theirs.
+    api.addEventListener('columnResized', (event) => event.finished && event.source !== 'api' && remember(event.source));
     api.addEventListener('columnMoved', (event) => event.finished && remember(event.source));
     api.addEventListener('columnVisible', (event) => remember(event.source));
     /** Sizing the grid does by itself is not a choice to keep. */
@@ -1141,6 +1294,15 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
     const personHidden = new Set(optionalIds.filter((column) => optional[column] === 'hide'));
     const hiddenByPerson = (column) => personHidden.has(column);
     const saved = preferences?.get(columnsKey);
+    /** The words' columns are sized by the lines once: when the first come, unless the person arranged the columns. */
+    let sizedByLines = drawnFirst.length > 0 || Array.isArray(saved) || node.fit === 'content';
+    function sizeByLines(lines) {
+        if (sizedByLines || !lines.length)
+            return;
+        sizedByLines = true;
+        const state = columns.filter((column) => !node.cells?.[column]?.width).map((colId) => (fixedWidth(colId) ? { colId, width: roomOf(colId, lines), flex: null } : { colId, flex: roomOf(colId, lines) }));
+        api.applyColumnState({ state });
+    }
     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));
@@ -1238,11 +1400,6 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
         button.addEventListener('click', () => addAndEdit(values));
         adds.append(button);
     };
-    // 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(words('addSectionLabel') ?? labels.addSection, { [kinds.field]: kinds.section ?? 'section' }, 'section');
@@ -1284,7 +1441,8 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
                 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 first = titleColumn(shownHere);
+            const rest = shownHere.filter((column) => column !== first);
             const text = (column) => {
                 // A distribution says its accounts by their names, as its cell does, once they are found.
                 const shares = distributions.get(column);
@@ -1297,7 +1455,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
             };
             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 }) : '';
+            title.textContent = first ? text(first) || placeName(current.indexOf(line) + 1) : '';
             if (dialogs && title instanceof HTMLButtonElement) {
                 title.type = 'button';
                 title.addEventListener('click', () => void openLine(line));
@@ -1443,6 +1601,7 @@ export const gridWidget = ({ form, name, field, node, id, document, labels = WID
                 // Columns as wide as what they hold, once more as the lines change.
                 if (node.fit === 'content')
                     api.autoSizeAllColumns();
+                sizeByLines(linesOf(current));
                 // 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 });