@fieldia/designer 0.19.1 → 0.21.0

package/src/lib/list-properties.js

@@ -5,8 +5,10 @@ exports.columnProperties = columnProperties;
 exports.listActionProperties = listActionProperties;
 const core_1 = require("@fieldia/core");
 const kinds_1 = require("./kinds");
+const list_commands_1 = require("./list-commands");
 const menu_1 = require("./menu");
 const steps_panel_1 = require("./steps-panel");
+const number_box_1 = require("./number-box");
 /**
  * The panels of a list page: the list's own — the rows a page holds, its
  * order, where the search looks, its named filters and its groupings — a
@@ -94,7 +96,12 @@ function filterRow(el, designer, id) {
         const field = fieldOf(current.field);
         save({ op: test.value, ...(current.value === undefined && field ? { value: firstValue(field) } : {}) });
     });
+    /** The value the filter holds now, as the page last drew it. */
+    let heldValue;
+    /** Its number box, drawn again when the page changes. */
+    let numberShown = null;
     function valueControl(field, condition) {
+        numberShown = null;
         if (field.type === 'selection' || field.type === 'boolean') {
             const options = field.type === 'boolean' ? [['true', w.yes], ['false', w.no]] : field.options.map((o) => [String(o.value), o.label]);
             const box = select(el, w.filterValue, options);
@@ -105,15 +112,21 @@ function filterRow(el, designer, id) {
             });
             return box;
         }
-        const numeric = ['integer', 'float', 'monetary'].includes(field.type);
-        const kind = numeric ? 'number' : field.type === 'date' || field.type === 'datetime' ? 'date' : 'text';
-        const box = el('input', { class: 'fd-input', type: kind, 'aria-label': w.filterValue });
+        if (['integer', 'float', 'monetary'].includes(field.type)) {
+            // A number read as every box reads one, kept as it is left; a whole number for a whole-number field.
+            const number = (0, number_box_1.settingNumber)(el, designer, {
+                label: w.filterValue,
+                integer: field.type === 'integer',
+                saved: () => (typeof heldValue === 'number' ? heldValue : null),
+                commit: (n) => save({ value: n }),
+            });
+            numberShown = number;
+            number.refresh();
+            return number.input;
+        }
+        const box = el('input', { class: 'fd-input', type: field.type === 'date' || field.type === 'datetime' ? 'date' : 'text', 'aria-label': w.filterValue });
         box.value = String(condition.value ?? '');
-        box.addEventListener('input', () => {
-            if (numeric && box.value.trim() === '')
-                return;
-            save({ value: numeric ? Number(box.value) : box.value });
-        });
+        box.addEventListener('input', () => save({ value: box.value }));
         return box;
     }
     return {
@@ -134,11 +147,13 @@ function filterRow(el, designer, id) {
             which.value = single.field;
             test.replaceChildren(...testsFor(field, designer.words).map(([op, words]) => el('option', { value: op }, words)));
             test.value = single.op;
+            heldValue = single.value;
             const key = `${single.field}:${single.op}`;
             if (key !== valueKey) {
                 valueKey = key;
                 valueBox.replaceChildren(...(single.op === 'set' || single.op === 'notset' ? [] : [valueControl(field, single)]));
             }
+            numberShown?.refresh();
         },
         focus() {
             name.focus();
@@ -190,7 +205,23 @@ function mapSection(el, designer) {
     // How the map sits in its page: its height, the gestures it takes, the closest it zooms to show its records.
     const height = el('select', { class: 'fd-input fd-select', 'aria-label': w.mapHeight });
     const allGestures = el('input', { type: 'checkbox' });
-    const fitZoom = el('input', { class: 'fd-input', type: 'number', min: '1', max: '22', placeholder: '16', 'aria-label': w.fitZoom });
+    // A whole number, 1 to 22, refused with its range rather than brought into it in silence; emptied, the usual 16.
+    let zoomHeld = null;
+    const fitZoom = (0, number_box_1.settingNumber)(el, designer, {
+        label: w.fitZoom,
+        attrs: { class: 'fd-input', placeholder: '16' },
+        integer: true,
+        min: 1,
+        max: 22,
+        optional: true,
+        saved: () => zoomHeld,
+        commit: (n) => change((map) => {
+            if (n === null)
+                delete map.fitZoom;
+            else
+                map.fitZoom = n;
+        }),
+    });
     const rows = {
         lat: prop(el, w.latitude, lat),
         lng: prop(el, w.longitude, lng),
@@ -203,7 +234,7 @@ function mapSection(el, designer) {
         areaField: prop(el, w.areaField, areaField),
         areas: prop(el, w.areas, areas),
     };
-    const details = el('div', { class: 'fd-props' }, prop(el, w.where, where), rows.lat, rows.lng, prop(el, w.pinShows, label), prop(el, w.pinLook, look), rows.photo, rows.icon, rows.iconFrom, rows.turn, rows.home, prop(el, w.cardTitle, title), prop(el, w.cardPicture, picture), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.cardShows), cardFields, addToCard), el('label', { class: 'fd-q-required' }, cardLabels, el('span', {}, w.cardLabels)), el('label', { class: 'fd-q-required' }, cardLead, el('span', {}, w.cardLead)), prop(el, w.cardLink, cardLink), el('label', { class: 'fd-q-required' }, cardChoose, el('span', {}, w.cardChoose)), prop(el, w.opensAs, opens), el('label', { class: 'fd-q-required' }, bubbles, el('span', {}, w.bubbles)), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.mapTools), tools), el('label', { class: 'fd-q-required' }, heat, el('span', {}, w.heat)), rows.weight, rows.areas, rows.areaField, areaWhy, prop(el, w.mapHeight, height), el('label', { class: 'fd-q-required' }, allGestures, el('span', {}, w.allGestures)), prop(el, w.fitZoom, fitZoom), el('p', { class: 'fd-properties-hint' }, w.mapNote));
+    const details = el('div', { class: 'fd-props' }, prop(el, w.where, where), rows.lat, rows.lng, prop(el, w.pinShows, label), prop(el, w.pinLook, look), rows.photo, rows.icon, rows.iconFrom, rows.turn, rows.home, prop(el, w.cardTitle, title), prop(el, w.cardPicture, picture), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.cardShows), cardFields, addToCard), el('label', { class: 'fd-q-required' }, cardLabels, el('span', {}, w.cardLabels)), el('label', { class: 'fd-q-required' }, cardLead, el('span', {}, w.cardLead)), prop(el, w.cardLink, cardLink), el('label', { class: 'fd-q-required' }, cardChoose, el('span', {}, w.cardChoose)), prop(el, w.opensAs, opens), el('label', { class: 'fd-q-required' }, bubbles, el('span', {}, w.bubbles)), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.mapTools), tools), el('label', { class: 'fd-q-required' }, heat, el('span', {}, w.heat)), rows.weight, rows.areas, rows.areaField, areaWhy, prop(el, w.mapHeight, height), el('label', { class: 'fd-q-required' }, allGestures, el('span', {}, w.allGestures)), prop(el, w.fitZoom, fitZoom.input), el('p', { class: 'fd-properties-hint' }, w.mapNote));
     const element = el('div', { class: 'fd-prop', 'data-part': 'map' }, el('span', { class: 'fd-prop-name' }, w.map), onRow, noPlace, details);
     const fieldsOf = (page, kinds) => everyField(page, designer).filter(({ field }) => kinds(field));
     const fill = (box, choices, none) => box.replaceChildren(...(none === undefined ? [] : [el('option', { value: '' }, none)]), ...choices.map(({ name, field }) => el('option', { value: name }, field.label)));
@@ -236,7 +267,7 @@ function mapSection(el, designer) {
             delete map.pin;
         if (card && !Object.keys(card).length)
             delete map.card;
-        designer.setListOptions({ map });
+        return designer.setListOptions({ map });
     };
     const pinOf = (map) => (map.pin ??= {});
     /** Where a new map puts its records: the first point, or the two numbers named for latitude and longitude. */
@@ -334,13 +365,6 @@ function mapSection(el, designer) {
         else
             delete map.gestures;
     }));
-    fitZoom.addEventListener('change', () => change((map) => {
-        const zoom = Math.round(Number(fitZoom.value));
-        if (fitZoom.value.trim() === '' || !Number.isFinite(zoom))
-            delete map.fitZoom;
-        else
-            map.fitZoom = Math.min(22, Math.max(1, zoom));
-    }));
     addToCard.addEventListener('click', () => {
         const page = designer.getPage();
         const lines = current()?.card?.fields ?? [];
@@ -436,18 +460,24 @@ function mapSection(el, designer) {
             height.replaceChildren(...heights.map(([value, text]) => el('option', { value }, text)));
             height.value = own;
             allGestures.checked = map.gestures === 'all';
-            if (!focused(fitZoom))
-                fitZoom.value = map.fitZoom === undefined ? '' : String(map.fitZoom);
+            zoomHeld = map.fitZoom ?? null;
+            fitZoom.refresh();
         },
     };
 }
 // ---- the list --------------------------------------------------------------------------------
 function listProperties(el, designer) {
     const w = designer.words.list;
-    const size = el('input', { class: 'fd-input', type: 'number', min: '1', max: '500', placeholder: '40', 'aria-label': w.rowsOnPage });
-    size.addEventListener('input', () => {
-        if (size.value.trim() !== '')
-            designer.setListOptions({ pageSize: Number(size.value) });
+    // A whole number, 1 to 500, kept as it is left: never the 60 that "600" passes on its way.
+    let pageSize = 40;
+    const size = (0, number_box_1.settingNumber)(el, designer, {
+        label: w.rowsOnPage,
+        attrs: { class: 'fd-input', placeholder: '40' },
+        integer: true,
+        min: 1,
+        max: 500,
+        saved: () => pageSize,
+        commit: (n) => n !== null && designer.setListOptions({ pageSize: n }),
     });
     const sortBy = el('select', { class: 'fd-input fd-select', 'aria-label': w.sortedBy });
     const direction = select(el, w.direction, [['asc', w.ascending], ['desc', w.descending]]);
@@ -480,14 +510,35 @@ function listProperties(el, designer) {
             onPick: (name) => designer.setListOptions({ groupBy: [...taken, name] }),
         });
     });
+    // A box to choose each row; the search bar, or a keyword and each field's values; rows under their parent.
+    const choose = el('input', { type: 'checkbox', 'aria-label': w.choose });
+    choose.addEventListener('change', () => {
+        if (!designer.setListOptions({ choose: choose.checked }))
+            choose.checked = !choose.checked;
+    });
+    const chooseRow = el('div', { class: 'fd-prop', 'data-part': 'choose' }, el('label', { class: 'fd-q-required' }, choose, el('span', {}, w.choose)), el('p', { class: 'fd-properties-hint' }, w.chooseHint));
+    const sorts = el('input', { type: 'checkbox', 'aria-label': w.sortable });
+    sorts.addEventListener('change', () => {
+        if (!designer.setListOptions({ sortable: sorts.checked }))
+            sorts.checked = !sorts.checked;
+    });
+    const sortsRow = el('div', { class: 'fd-prop', 'data-part': 'sortable' }, el('label', { class: 'fd-q-required' }, sorts, el('span', {}, w.sortable)), el('p', { class: 'fd-properties-hint' }, w.sortableHint));
+    const searchWay = select(el, w.searchWay, [['bar', w.searchWays.bar], ['fields', w.searchWays.fields]]);
+    searchWay.addEventListener('change', () => designer.setListOptions({ search: searchWay.value }));
+    const filterBox = el('div', { class: 'fd-list-filter-fields' });
+    const filterFieldsRow = el('div', { class: 'fd-prop', 'data-part': 'filter-fields' }, el('span', { class: 'fd-prop-name' }, w.filterFields), filterBox, el('p', { class: 'fd-properties-hint' }, w.filterFieldsNote), el('p', { class: 'fd-properties-hint' }, w.filterLabelsNote));
+    const parent = el('select', { class: 'fd-input fd-select', 'aria-label': w.parentField });
+    parent.addEventListener('change', () => designer.setListOptions({ parentField: parent.value || null }));
+    const parentWhy = el('p', { class: 'fd-properties-hint', hidden: '' }, w.noParentField);
+    const parentRow = el('label', { class: 'fd-prop', 'data-part': 'parent' }, el('span', { class: 'fd-prop-name' }, w.parentField), parent, parentWhy);
     const onMap = mapSection(el, designer);
-    const element = el('div', { class: 'fd-props' }, prop(el, w.rowsOnPage, size), prop(el, w.sortedBy, sortBy), directionRow, el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.searchLooksIn), searchBox, el('p', { class: 'fd-properties-hint' }, w.noneTicked)), el('div', { class: 'fd-prop fd-prop-filters', 'data-part': 'filters' }, el('span', { class: 'fd-prop-name' }, w.filters), filtersBox, addFilter), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.groupBy), groupsBox, addGroup), onMap.element, el('p', { class: 'fd-properties-hint' }, w.rowOpens));
+    const element = el('div', { class: 'fd-props' }, prop(el, w.rowsOnPage, size.input), prop(el, w.sortedBy, sortBy), directionRow, chooseRow, sortsRow, prop(el, w.searchWay, searchWay), filterFieldsRow, parentRow, el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.searchLooksIn), searchBox, el('p', { class: 'fd-properties-hint' }, w.noneTicked)), el('div', { class: 'fd-prop fd-prop-filters', 'data-part': 'filters' }, el('span', { class: 'fd-prop-name' }, w.filters), filtersBox, addFilter), el('div', { class: 'fd-prop' }, el('span', { class: 'fd-prop-name' }, w.groupBy), groupsBox, addGroup), onMap.element, el('p', { class: 'fd-properties-hint' }, w.rowOpens));
     return {
         element,
         update(page) {
             const list = listOf(page);
-            if (!focused(size))
-                size.value = list.pageSize === undefined ? '' : String(list.pageSize);
+            pageSize = list.pageSize ?? 40;
+            size.refresh();
             const sortable = everyField(page, designer).filter(({ field }) => !UNSORTABLE.has(field.type));
             sortBy.replaceChildren(el('option', { value: '' }, w.appOrder), ...sortable.map(({ name, field }) => el('option', { value: name }, field.label)));
             const order = list.sort?.[0];
@@ -524,6 +575,37 @@ function listProperties(el, designer) {
             });
             while (filtersBox.children.length > drawn.length)
                 filtersBox.lastElementChild?.remove();
+            choose.checked = list.choose !== false;
+            sorts.checked = list.sortable !== false;
+            searchWay.value = list.search ?? 'bar';
+            // The filter bar's fields: those whose values it can list, ticked in the order the page keeps them.
+            filterFieldsRow.hidden = list.search !== 'fields';
+            const offered = list.filterFields ?? [];
+            const filterable = [...new Set([...offered, ...everyField(page, designer).filter(({ field }) => list_commands_1.FILTERABLE.has(field.type)).map(({ name }) => name)])];
+            // Each one offered has a name of its own on the bar, its label unless one is written; kept while it is being typed in.
+            const typing = filterBox.querySelector('.fd-list-filter-name:focus');
+            if (!typing || !filterable.includes(typing.dataset['field'] ?? '')) {
+                filterBox.replaceChildren(...filterable.map((name) => {
+                    const label = page.fields[name]?.label ?? designer.modelFields().find((m) => m.name === name)?.field.label ?? name;
+                    const box = el('input', { type: 'checkbox', 'aria-label': w.filterFieldNamed(label) });
+                    box.checked = offered.includes(name);
+                    box.addEventListener('change', () => designer.setListOptions({ filterFields: box.checked ? [...offered, name] : offered.filter((n) => n !== name) }));
+                    const choice = el('label', { class: 'fd-q-required' }, box, el('span', {}, label));
+                    if (!offered.includes(name))
+                        return choice;
+                    const own = el('input', { class: 'fd-input fd-list-filter-name', 'data-field': name, 'aria-label': w.filterLabelOf(label), title: w.filterLabelOf(label), placeholder: label });
+                    own.value = list.filterLabels?.[name] ?? '';
+                    own.addEventListener('change', () => designer.setListOptions({ filterLabel: { field: name, label: own.value } }));
+                    return el('div', { class: 'fd-list-filter-field' }, choice, own);
+                }));
+            }
+            // Rows under their parent: a link to the list's own records.
+            const own = page.data.kind === 'record' ? page.data.model : '';
+            const links = everyField(page, designer).filter(({ field }) => field.type === 'many2one' && field.relation === own);
+            parent.replaceChildren(el('option', { value: '' }, w.noParent), ...links.map(({ name, field }) => el('option', { value: name }, field.label)));
+            parent.value = list.parentField ?? '';
+            parentWhy.hidden = links.length > 0;
+            parentRow.hidden = !links.length && !list.parentField;
             const groups = list.groupBy ?? [];
             groupsBox.replaceChildren(...groups.map((name) => {
                 const label = page.fields[name]?.label ?? name;
@@ -556,7 +638,8 @@ function columnProperties(el, designer, name) {
     left.addEventListener('click', () => designer.moveColumn(name, at() - 1));
     right.addEventListener('click', () => designer.moveColumn(name, at() + 1));
     remove.addEventListener('click', () => designer.removeColumn(name));
-    const element = el('div', { class: 'fd-props' }, about, orderRow, el('div', { class: 'fd-props-actions' }, left, right, remove));
+    const cells = cellSettings(el, designer, name);
+    const element = el('div', { class: 'fd-props' }, about, orderRow, ...cells.rows, el('div', { class: 'fd-props-actions' }, left, right, remove));
     return {
         element,
         update(page) {
@@ -568,6 +651,7 @@ function columnProperties(el, designer, name) {
             orderRow.hidden = UNSORTABLE.has(field.type);
             const first = list.sort?.[0];
             order.value = first?.field === name ? (first.desc ? 'desc' : 'asc') : '';
+            cells.update(page);
             const index = list.columns.indexOf(name);
             left.hidden = index <= 0;
             right.hidden = index === list.columns.length - 1;
@@ -575,6 +659,142 @@ function columnProperties(el, designer, name) {
         },
     };
 }
+// ---- a column's cells ------------------------------------------------------------------------------
+/**
+ * How a column draws its cells, as a work tracker's backlog does: a state's
+ * dot in each value's colour, an icon before the words by another field's
+ * value (a bug's, a task's), a width in characters, the side its words keep to.
+ */
+function cellSettings(el, designer, name) {
+    const w = designer.words.list;
+    const cellNow = () => ({ ...listOf(designer.getPage()).cells?.[name] });
+    const save = (cell) => {
+        for (const key of Object.keys(cell))
+            if (cell[key] === undefined)
+                delete cell[key];
+        return designer.setListCell(name, Object.keys(cell).length ? cell : null);
+    };
+    const widget = select(el, w.cellWidget, [['', w.cellWidgets.words], ['dot', w.cellWidgets.dot]]);
+    widget.addEventListener('change', () => save({ ...cellNow(), widget: widget.value || undefined, ...(widget.value ? {} : { options: undefined }) }));
+    const widgetRow = prop(el, w.cellWidget, widget);
+    const dots = el('div', { class: 'fd-list-cell-looks' });
+    const dotsRow = el('div', { class: 'fd-prop', 'data-part': 'dots' }, dots);
+    const lead = el('select', { class: 'fd-input fd-select', 'aria-label': w.leadFrom });
+    lead.addEventListener('change', () => save({ ...cellNow(), lead: lead.value ? { field: lead.value, looks: {} } : undefined }));
+    const leadLooks = el('div', { class: 'fd-list-cell-looks' });
+    const leadRow = el('div', { class: 'fd-prop', 'data-part': 'lead' }, el('span', { class: 'fd-prop-name' }, w.leadFrom), lead, leadLooks);
+    // Its width, in characters of its words or in pixels for the whole column: a number and its unit.
+    // A whole number: 1 to 200 characters, or 8 to 4000 pixels; kept as it is left, refused with its range; emptied, as its words need.
+    const unit = select(el, w.cellWidthUnit, [['ch', w.cellWidthUnits.characters], ['px', w.cellWidthUnits.pixels]]);
+    const widthIn = (n) => (unit.value === 'px' ? `${n}px` : n);
+    const sizing = {
+        label: w.cellWidth,
+        integer: true,
+        min: 1,
+        max: 200,
+        optional: true,
+        saved: () => {
+            const now = cellNow().width;
+            return now === undefined ? null : Number.parseInt(String(now), 10);
+        },
+        commit: (n) => save({ ...cellNow(), width: n === null ? undefined : widthIn(n) }),
+    };
+    const width = (0, number_box_1.settingNumber)(el, designer, sizing);
+    const unitRange = () => {
+        sizing.min = unit.value === 'px' ? 8 : 1;
+        sizing.max = unit.value === 'px' ? 4000 : 200;
+    };
+    unit.addEventListener('change', () => {
+        unitRange();
+        // The same number in the other unit, when it is a width in that one too.
+        const n = sizing.saved();
+        if (typeof n === 'number' && (0, list_commands_1.widthIsGood)(widthIn(n)))
+            save({ ...cellNow(), width: widthIn(n) });
+    });
+    const widthRow = el('div', { class: 'fd-prop', 'data-part': 'width' }, el('span', { class: 'fd-prop-name' }, w.cellWidth), el('div', { class: 'fd-list-width' }, width.input, unit), el('p', { class: 'fd-properties-hint' }, w.cellWidthHint));
+    const side = select(el, w.cellSide, [['', w.cellSides.auto], ['start', w.cellSides.start], ['end', w.cellSides.end]]);
+    side.addEventListener('change', () => save({ ...cellNow(), align: (side.value || undefined) }));
+    // Its header's rule: at its end, none, or set in from its end by some pixels.
+    const rule = select(el, w.cellRule, [['', w.cellRules.end], ['none', w.cellRules.none], ['in', w.cellRules.in]]);
+    // Pixels in from the column's end, a whole number 0 to 400, kept as it is left: letters never become 0px.
+    const ruleNow = () => {
+        const now = cellNow().rule;
+        return typeof now === 'string' ? Number.parseInt(now, 10) : null;
+    };
+    const ruleIn = (0, number_box_1.settingNumber)(el, designer, {
+        label: w.cellRuleIn,
+        integer: true,
+        min: 0,
+        max: 400,
+        saved: ruleNow,
+        commit: (n) => n !== null && (0, list_commands_1.ruleIsGood)(`${n}px`) && save({ ...cellNow(), rule: `${n}px` }),
+    });
+    rule.addEventListener('change', () => {
+        if (rule.value === 'none')
+            return void save({ ...cellNow(), rule: false });
+        if (rule.value === '')
+            return void save({ ...cellNow(), rule: undefined });
+        save({ ...cellNow(), rule: `${ruleNow() ?? 0}px` });
+    });
+    const ruleInRow = prop(el, w.cellRuleIn, ruleIn.input);
+    const ruleRow = el('div', { class: 'fd-prop', 'data-part': 'rule' }, el('span', { class: 'fd-prop-name' }, w.cellRule), rule, el('p', { class: 'fd-properties-hint' }, w.cellRuleHint));
+    /** A value's colour, and its icon for a lead: a row for each option of a choice. */
+    const optionRows = (field, row) => field?.type === 'selection' ? field.options.map((option) => el('div', { class: 'fd-list-cell-look' }, el('span', { class: 'fd-list-cell-look-name' }, option.label), ...row(String(option.value), option.label))) : [];
+    return {
+        rows: [widgetRow, dotsRow, leadRow, widthRow, prop(el, w.cellSide, side), ruleRow, ruleInRow],
+        update(page) {
+            const field = page.fields[name];
+            const cell = page.layout.type === 'list' ? (page.layout.cells?.[name] ?? {}) : {};
+            widget.value = cell.widget === 'dot' ? 'dot' : '';
+            widgetRow.hidden = field?.type !== 'selection';
+            // Each state's dot colour, when the column draws its dot.
+            dotsRow.hidden = cell.widget !== 'dot';
+            const colours = (cell.options?.['colours'] ?? {});
+            dots.replaceChildren(...optionRows(field, (value, label) => {
+                const colour = el('input', { type: 'color', class: 'fd-insp-colour', 'aria-label': w.dotColour(label) });
+                colour.value = colours[value] ?? '#7e7e7e';
+                colour.addEventListener('input', () => save({ ...cellNow(), options: { ...cellNow().options, colours: { ...(cellNow().options?.['colours'] ?? {}), [value]: colour.value } } }));
+                return [colour];
+            }));
+            // An icon before the words: by a choice's value, each with its icon and colour.
+            const choices = everyField(page, designer).filter(({ field: f }) => f.type === 'selection');
+            lead.replaceChildren(el('option', { value: '' }, w.noLead), ...choices.map(({ name: n, field: f }) => el('option', { value: n }, f.label)));
+            lead.value = cell.lead?.field ?? '';
+            const from = cell.lead ? page.fields[cell.lead.field] : undefined;
+            leadLooks.replaceChildren(...optionRows(from, (value, label) => {
+                const look = cell.lead?.looks[value];
+                const icon = el('input', { class: 'fd-input', 'aria-label': w.leadIcon(label), placeholder: 'bug' });
+                icon.value = look?.icon ?? '';
+                const colour = el('input', { type: 'color', class: 'fd-insp-colour', 'aria-label': w.leadColour(label) });
+                colour.value = look?.colour ?? '#7e7e7e';
+                const write = () => {
+                    const now = cellNow();
+                    if (!now.lead)
+                        return;
+                    const looks = { ...now.lead.looks };
+                    if (icon.value.trim())
+                        looks[value] = { icon: icon.value.trim(), ...(look?.colour || colour.value !== '#7e7e7e' ? { colour: colour.value } : {}) };
+                    else
+                        delete looks[value];
+                    save({ ...now, lead: { field: now.lead.field, looks } });
+                };
+                icon.addEventListener('change', write);
+                colour.addEventListener('input', write);
+                return [icon, colour];
+            }));
+            const inPixels = typeof cell.width === 'string';
+            if (!focused(unit) && cell.width !== undefined)
+                unit.value = inPixels ? 'px' : 'ch';
+            unitRange();
+            width.refresh();
+            side.value = cell.align ?? '';
+            if (!focused(rule))
+                rule.value = cell.rule === false ? 'none' : cell.rule ? 'in' : '';
+            ruleIn.refresh();
+            ruleInRow.hidden = rule.value !== 'in';
+        },
+    };
+}
 // ---- a button for the rows chosen ----------------------------------------------------------------
 function listActionProperties(el, designer, id) {
     const w = designer.words.list;