@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/list-canvas.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listCanvas = listCanvas;
+const viewer_1 = require("@fieldia/viewer");
+const widgets_1 = require("@fieldia/widgets");
+const canvas_drag_1 = require("./canvas-drag");
+const chrome_language_1 = require("./chrome-language");
+const icons_1 = require("./icons");
+const kinds_1 = require("./kinds");
+const list_commands_1 = require("./list-commands");
+const menu_1 = require("./menu");
+const samples_1 = require("./samples");
+const steps_marks_1 = require("./steps-marks");
+/** Numbers line up on the end of their column, as the viewer lines them up. */
+const NUMBERS = new Set(['integer', 'float', 'monetary']);
+/** Rows of made-up records drawn, and how many the made-up list holds. */
+const ROWS = 5;
+const TOTAL = 128;
+function listCanvas(options) {
+    const { el, doc, designer } = options;
+    const w = designer.words.list;
+    (0, viewer_1.installListStyles)(doc);
+    /** What the viewer itself says on the list — its search box, its pager, the rows chosen — in the page's language, as the form will. */
+    const viewerWords = (page) => viewer_1.VIEWER_LABELS[(0, chrome_language_1.pageLocale)(page)];
+    // ---- the search bar and the pager ----------------------------------------------------
+    const facets = el('span', { class: 'fd-facets' });
+    const searchWords = el('span', { class: 'fd-search-placeholder' });
+    const search = el('div', { class: 'fd-search fd-canvas-search', role: 'button', tabindex: '0', 'aria-label': w.searchAndFilters, title: w.searchTitle }, el('div', { class: 'fd-search-field' }, (0, icons_1.designerIcon)(doc, 'search'), facets, searchWords));
+    const openFilters = () => {
+        designer.select(null);
+        options.more('filters');
+    };
+    search.addEventListener('click', openFilters);
+    search.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openFilters();
+        }
+    });
+    const pagerText = el('span', { class: 'fd-pager-text' });
+    const step = (text) => el('button', { type: 'button', class: 'fd-button fd-pager-button', tabindex: '-1', 'aria-hidden': 'true', disabled: '' }, text);
+    const bar = el('div', { class: 'fd-list-bar' }, search, el('div', { class: 'fd-pager' }, pagerText, step('‹'), step('›')));
+    // ---- the buttons for the rows chosen -----------------------------------------------------
+    const actions = el('div', { class: 'fd-canvas-list-actions' });
+    const chosen = el('span', { class: 'fd-list-count' });
+    const addAction = el('button', { type: 'button', class: 'fd-canvas-add-part', 'data-add-part': 'action' }, (0, icons_1.designerIcon)(doc, 'plus'), w.addButton);
+    addAction.addEventListener('click', () => {
+        const created = designer.addListAction(designer.words.defaults.newButton);
+        if (created)
+            focusAction(created);
+    });
+    const selection = el('div', { class: 'fd-list-selection fd-canvas-selection' }, chosen, el('span', { class: 'fd-canvas-selection-hint' }, w.showsWhenChosen), actions, addAction);
+    const views = new Map();
+    function closedAction(action) {
+        const button = el('button', { type: 'button', class: `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part`, 'data-part': action.id }, action.label);
+        button.addEventListener('click', () => {
+            designer.select(action.id);
+            focusAction(action.id, false);
+        });
+        return button;
+    }
+    function openAction(action) {
+        const input = el('input', { class: 'fd-part-input', 'aria-label': w.words, autocomplete: 'off', size: String(Math.max(4, action.label.length + 1)) });
+        input.addEventListener('input', () => {
+            input.size = Math.max(4, input.value.length + 1);
+            designer.updateListAction(action.id, { label: input.value });
+        });
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                input.blur();
+            }
+        });
+        const remove = el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': w.delete, title: w.delete }, (0, icons_1.designerIcon)(doc, 'delete'));
+        remove.addEventListener('click', () => designer.removeListAction(action.id));
+        const tools = el('div', { class: 'fd-field-bar fd-part-bar', role: 'toolbar', 'aria-label': action.label }, remove);
+        const element = el('span', { class: `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part fd-editing`, 'data-part': action.id }, tools, input);
+        return { element, key: '', input };
+    }
+    function drawActions(list, selected) {
+        const live = new Set();
+        const drawn = (list.actions ?? []).map((action) => {
+            live.add(action.id);
+            const editing = selected === action.id;
+            const key = `${editing}:${JSON.stringify(action)}`;
+            let view = views.get(action.id);
+            // The button being typed in stays the same box, focused.
+            if (!(view && (editing ? view.input !== null : view.key === key))) {
+                view = editing ? openAction(action) : { element: closedAction(action), key, input: null };
+                views.set(action.id, view);
+            }
+            view.key = key;
+            if (view.input && doc.activeElement !== view.input)
+                view.input.value = action.label;
+            if (view.input)
+                view.element.className = `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part fd-editing`;
+            return view.element;
+        });
+        drawn.forEach((child, index) => {
+            if (actions.children[index] !== child)
+                actions.insertBefore(child, actions.children[index] ?? null);
+        });
+        while (actions.children.length > drawn.length)
+            actions.lastElementChild?.remove();
+        for (const id of [...views.keys()])
+            if (!live.has(id))
+                views.delete(id);
+    }
+    function focusAction(id, selectAll = true) {
+        const input = views.get(id)?.input;
+        if (!input)
+            return;
+        input.focus();
+        if (selectAll)
+            input.select();
+        else
+            input.setSelectionRange(input.value.length, input.value.length);
+    }
+    // ---- the table ------------------------------------------------------------------------------
+    const table = el('table', { class: 'fd-list-table' });
+    const scroll = el('div', { class: 'fd-list-scroll fd-canvas-list-scroll', 'data-drop-section': 'columns', 'data-drop-flow': 'row' }, table);
+    let tableKey = '';
+    function addColumnMenu(anchor) {
+        const page = designer.getPage();
+        const columns = page.layout.columns;
+        const own = Object.entries(page.fields)
+            .filter(([name]) => !columns.includes(name))
+            .map(([name, field]) => ({ name, field }));
+        const choices = [...own, ...designer.modelFields()].filter(({ field }) => (0, list_commands_1.canBeColumn)(field));
+        (0, menu_1.openMenu)({
+            el,
+            anchor,
+            title: w.addColumn,
+            items: choices.map(({ name, field }) => ({ id: name, label: field.label, icon: (0, kinds_1.kindOfField)(field, { type: 'field', id: name, field: name }) ?? 'short-answer' })),
+            note: w.addColumnNote(choices.length > 0),
+            onPick: (name) => designer.addColumn(name),
+        });
+    }
+    function columnBar(name, index, count) {
+        const tool = (label, icon, run) => {
+            const button = el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': label, title: label }, (0, icons_1.designerIcon)(doc, icon));
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                run();
+            });
+            return button;
+        };
+        return el('div', { class: 'fd-field-bar fd-column-bar', role: 'toolbar', 'aria-label': w.column }, ...(index > 0 ? [tool(w.moveLeft, 'left', () => designer.moveColumn(name, index - 1))] : []), ...(index < count - 1 ? [tool(w.moveRight, 'right', () => designer.moveColumn(name, index + 1))] : []), tool(w.removeColumn, 'delete', () => designer.removeColumn(name)));
+    }
+    function drawTable(page, list, selected) {
+        const key = JSON.stringify([list.columns, list.sort?.[0], list.columns.map((name) => page.fields[name]), selected]);
+        if (key === tableKey)
+            return;
+        tableKey = key;
+        const box = () => el('input', { type: 'checkbox', class: 'fd-list-checkbox', tabindex: '-1', 'aria-hidden': 'true', disabled: '' });
+        const order = list.sort?.[0];
+        const heads = list.columns.map((name, index) => {
+            const def = page.fields[name];
+            const picked = selected === (0, list_commands_1.columnId)(name);
+            const th = el('th', { scope: 'col', 'data-node': name, tabindex: '0', class: ['fd-canvas-column', NUMBERS.has(def.type) ? 'fd-num' : '', picked ? 'fd-picked' : ''].filter(Boolean).join(' ') }, el('span', { class: 'fd-list-sort' }, def.label));
+            if (order?.field === name)
+                th.setAttribute('aria-sort', order.desc ? 'descending' : 'ascending');
+            if (picked)
+                th.append(columnBar(name, index, list.columns.length));
+            const pick = () => designer.select((0, list_commands_1.columnId)(name));
+            th.addEventListener('click', pick);
+            th.addEventListener('keydown', (event) => {
+                if (event.target === th && (event.key === 'Enter' || event.key === ' ')) {
+                    event.preventDefault();
+                    pick();
+                }
+            });
+            return th;
+        });
+        const add = el('button', { type: 'button', class: 'fd-canvas-add-part', 'aria-label': w.addColumn, title: w.addColumn }, (0, icons_1.designerIcon)(doc, 'plus'), w.column);
+        add.addEventListener('click', () => addColumnMenu(add));
+        const rows = (0, samples_1.sampleRows)(page.fields, list.columns, ROWS).map((values) => el('tr', { class: 'fd-list-row' }, el('td', { class: 'fd-list-check' }, box()), ...list.columns.map((name) => {
+            const td = el('td', { 'data-node': name, class: [NUMBERS.has(page.fields[name].type) ? 'fd-num' : '', selected === (0, list_commands_1.columnId)(name) ? 'fd-picked' : ''].filter(Boolean).join(' ') || undefined });
+            td.textContent = (0, widgets_1.displayValue)(page.fields[name], values[name], values);
+            td.addEventListener('click', () => designer.select((0, list_commands_1.columnId)(name)));
+            return td;
+        }), el('td', { class: 'fd-canvas-add-column' })));
+        table.replaceChildren(el('thead', {}, el('tr', {}, el('th', { class: 'fd-list-check', scope: 'col' }, box()), ...heads, el('th', { class: 'fd-canvas-add-column' }, add))), el('tbody', {}, ...rows));
+    }
+    const element = el('div', { class: 'fd-canvas fd-list-canvas' }, el('div', { class: 'fd-list' }, bar, selection, scroll));
+    const drag = (0, canvas_drag_1.canvasDrag)({
+        words: designer.words,
+        canvas: element,
+        cards: '.fd-list-table th[data-node]',
+        drop(source, _section, index) {
+            if ('node' in source)
+                designer.moveColumn(source.node, index);
+            else
+                options.dropTool(source.tool, index);
+        },
+    });
+    return {
+        element,
+        drag,
+        focusAction,
+        update(state) {
+            const { page, selected } = state;
+            if (page.layout.type !== 'list')
+                return;
+            const list = page.layout;
+            const on = new Set(list.defaultFilters ?? []);
+            facets.replaceChildren(...(list.filters ?? []).filter((f) => on.has(f.id)).map((f) => el('span', { class: 'fd-facet' }, el('span', { class: 'fd-facet-text' }, f.label))));
+            const size = list.pageSize ?? 40;
+            const said = viewerWords(page);
+            searchWords.textContent = said.search;
+            chosen.textContent = said.selected.replace('{n}', '2');
+            pagerText.textContent = said.range.replace('{from}', '1').replace('{to}', String(Math.min(size, TOTAL))).replace('{total}', String(TOTAL));
+            drawActions(list, selected);
+            // steps lane: a button that does something wears a mark.
+            (0, steps_marks_1.pressMarks)(actions, page, designer);
+            drawTable(page, list, selected);
+        },
+        destroy() {
+            drag.destroy();
+            views.clear();
+        },
+    };
+}
+//# sourceMappingURL=list-canvas.js.map

package/src/lib/list-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-canvas.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/list-canvas.ts"],"names":[],"mappings":"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"}

package/src/lib/list-canvas.mjs

@@ -0,0 +1,221 @@
+import { installListStyles, VIEWER_LABELS } from '@fieldia/viewer';
+import { displayValue } from '@fieldia/widgets';
+import { canvasDrag } from './canvas-drag.mjs';
+import { pageLocale } from './chrome-language.mjs';
+import { designerIcon } from './icons.mjs';
+import { kindOfField } from './kinds.mjs';
+import { canBeColumn, columnId } from './list-commands.mjs';
+import { openMenu } from './menu.mjs';
+import { sampleRows } from './samples.mjs';
+import { pressMarks } from './steps-marks.mjs';
+/** Numbers line up on the end of their column, as the viewer lines them up. */
+const NUMBERS = new Set(['integer', 'float', 'monetary']);
+/** Rows of made-up records drawn, and how many the made-up list holds. */
+const ROWS = 5;
+const TOTAL = 128;
+export function listCanvas(options) {
+    const { el, doc, designer } = options;
+    const w = designer.words.list;
+    installListStyles(doc);
+    /** What the viewer itself says on the list — its search box, its pager, the rows chosen — in the page's language, as the form will. */
+    const viewerWords = (page) => VIEWER_LABELS[pageLocale(page)];
+    // ---- the search bar and the pager ----------------------------------------------------
+    const facets = el('span', { class: 'fd-facets' });
+    const searchWords = el('span', { class: 'fd-search-placeholder' });
+    const search = el('div', { class: 'fd-search fd-canvas-search', role: 'button', tabindex: '0', 'aria-label': w.searchAndFilters, title: w.searchTitle }, el('div', { class: 'fd-search-field' }, designerIcon(doc, 'search'), facets, searchWords));
+    const openFilters = () => {
+        designer.select(null);
+        options.more('filters');
+    };
+    search.addEventListener('click', openFilters);
+    search.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openFilters();
+        }
+    });
+    const pagerText = el('span', { class: 'fd-pager-text' });
+    const step = (text) => el('button', { type: 'button', class: 'fd-button fd-pager-button', tabindex: '-1', 'aria-hidden': 'true', disabled: '' }, text);
+    const bar = el('div', { class: 'fd-list-bar' }, search, el('div', { class: 'fd-pager' }, pagerText, step('‹'), step('›')));
+    // ---- the buttons for the rows chosen -----------------------------------------------------
+    const actions = el('div', { class: 'fd-canvas-list-actions' });
+    const chosen = el('span', { class: 'fd-list-count' });
+    const addAction = el('button', { type: 'button', class: 'fd-canvas-add-part', 'data-add-part': 'action' }, designerIcon(doc, 'plus'), w.addButton);
+    addAction.addEventListener('click', () => {
+        const created = designer.addListAction(designer.words.defaults.newButton);
+        if (created)
+            focusAction(created);
+    });
+    const selection = el('div', { class: 'fd-list-selection fd-canvas-selection' }, chosen, el('span', { class: 'fd-canvas-selection-hint' }, w.showsWhenChosen), actions, addAction);
+    const views = new Map();
+    function closedAction(action) {
+        const button = el('button', { type: 'button', class: `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part`, 'data-part': action.id }, action.label);
+        button.addEventListener('click', () => {
+            designer.select(action.id);
+            focusAction(action.id, false);
+        });
+        return button;
+    }
+    function openAction(action) {
+        const input = el('input', { class: 'fd-part-input', 'aria-label': w.words, autocomplete: 'off', size: String(Math.max(4, action.label.length + 1)) });
+        input.addEventListener('input', () => {
+            input.size = Math.max(4, input.value.length + 1);
+            designer.updateListAction(action.id, { label: input.value });
+        });
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                input.blur();
+            }
+        });
+        const remove = el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': w.delete, title: w.delete }, designerIcon(doc, 'delete'));
+        remove.addEventListener('click', () => designer.removeListAction(action.id));
+        const tools = el('div', { class: 'fd-field-bar fd-part-bar', role: 'toolbar', 'aria-label': action.label }, remove);
+        const element = el('span', { class: `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part fd-editing`, 'data-part': action.id }, tools, input);
+        return { element, key: '', input };
+    }
+    function drawActions(list, selected) {
+        const live = new Set();
+        const drawn = (list.actions ?? []).map((action) => {
+            live.add(action.id);
+            const editing = selected === action.id;
+            const key = `${editing}:${JSON.stringify(action)}`;
+            let view = views.get(action.id);
+            // The button being typed in stays the same box, focused.
+            if (!(view && (editing ? view.input !== null : view.key === key))) {
+                view = editing ? openAction(action) : { element: closedAction(action), key, input: null };
+                views.set(action.id, view);
+            }
+            view.key = key;
+            if (view.input && doc.activeElement !== view.input)
+                view.input.value = action.label;
+            if (view.input)
+                view.element.className = `fd-button fd-button-${action.style ?? 'secondary'} fd-canvas-part fd-editing`;
+            return view.element;
+        });
+        drawn.forEach((child, index) => {
+            if (actions.children[index] !== child)
+                actions.insertBefore(child, actions.children[index] ?? null);
+        });
+        while (actions.children.length > drawn.length)
+            actions.lastElementChild?.remove();
+        for (const id of [...views.keys()])
+            if (!live.has(id))
+                views.delete(id);
+    }
+    function focusAction(id, selectAll = true) {
+        const input = views.get(id)?.input;
+        if (!input)
+            return;
+        input.focus();
+        if (selectAll)
+            input.select();
+        else
+            input.setSelectionRange(input.value.length, input.value.length);
+    }
+    // ---- the table ------------------------------------------------------------------------------
+    const table = el('table', { class: 'fd-list-table' });
+    const scroll = el('div', { class: 'fd-list-scroll fd-canvas-list-scroll', 'data-drop-section': 'columns', 'data-drop-flow': 'row' }, table);
+    let tableKey = '';
+    function addColumnMenu(anchor) {
+        const page = designer.getPage();
+        const columns = page.layout.columns;
+        const own = Object.entries(page.fields)
+            .filter(([name]) => !columns.includes(name))
+            .map(([name, field]) => ({ name, field }));
+        const choices = [...own, ...designer.modelFields()].filter(({ field }) => canBeColumn(field));
+        openMenu({
+            el,
+            anchor,
+            title: w.addColumn,
+            items: choices.map(({ name, field }) => ({ id: name, label: field.label, icon: kindOfField(field, { type: 'field', id: name, field: name }) ?? 'short-answer' })),
+            note: w.addColumnNote(choices.length > 0),
+            onPick: (name) => designer.addColumn(name),
+        });
+    }
+    function columnBar(name, index, count) {
+        const tool = (label, icon, run) => {
+            const button = el('button', { type: 'button', class: 'fd-bar-button', 'aria-label': label, title: label }, designerIcon(doc, icon));
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                run();
+            });
+            return button;
+        };
+        return el('div', { class: 'fd-field-bar fd-column-bar', role: 'toolbar', 'aria-label': w.column }, ...(index > 0 ? [tool(w.moveLeft, 'left', () => designer.moveColumn(name, index - 1))] : []), ...(index < count - 1 ? [tool(w.moveRight, 'right', () => designer.moveColumn(name, index + 1))] : []), tool(w.removeColumn, 'delete', () => designer.removeColumn(name)));
+    }
+    function drawTable(page, list, selected) {
+        const key = JSON.stringify([list.columns, list.sort?.[0], list.columns.map((name) => page.fields[name]), selected]);
+        if (key === tableKey)
+            return;
+        tableKey = key;
+        const box = () => el('input', { type: 'checkbox', class: 'fd-list-checkbox', tabindex: '-1', 'aria-hidden': 'true', disabled: '' });
+        const order = list.sort?.[0];
+        const heads = list.columns.map((name, index) => {
+            const def = page.fields[name];
+            const picked = selected === columnId(name);
+            const th = el('th', { scope: 'col', 'data-node': name, tabindex: '0', class: ['fd-canvas-column', NUMBERS.has(def.type) ? 'fd-num' : '', picked ? 'fd-picked' : ''].filter(Boolean).join(' ') }, el('span', { class: 'fd-list-sort' }, def.label));
+            if (order?.field === name)
+                th.setAttribute('aria-sort', order.desc ? 'descending' : 'ascending');
+            if (picked)
+                th.append(columnBar(name, index, list.columns.length));
+            const pick = () => designer.select(columnId(name));
+            th.addEventListener('click', pick);
+            th.addEventListener('keydown', (event) => {
+                if (event.target === th && (event.key === 'Enter' || event.key === ' ')) {
+                    event.preventDefault();
+                    pick();
+                }
+            });
+            return th;
+        });
+        const add = el('button', { type: 'button', class: 'fd-canvas-add-part', 'aria-label': w.addColumn, title: w.addColumn }, designerIcon(doc, 'plus'), w.column);
+        add.addEventListener('click', () => addColumnMenu(add));
+        const rows = sampleRows(page.fields, list.columns, ROWS).map((values) => el('tr', { class: 'fd-list-row' }, el('td', { class: 'fd-list-check' }, box()), ...list.columns.map((name) => {
+            const td = el('td', { 'data-node': name, class: [NUMBERS.has(page.fields[name].type) ? 'fd-num' : '', selected === columnId(name) ? 'fd-picked' : ''].filter(Boolean).join(' ') || undefined });
+            td.textContent = displayValue(page.fields[name], values[name], values);
+            td.addEventListener('click', () => designer.select(columnId(name)));
+            return td;
+        }), el('td', { class: 'fd-canvas-add-column' })));
+        table.replaceChildren(el('thead', {}, el('tr', {}, el('th', { class: 'fd-list-check', scope: 'col' }, box()), ...heads, el('th', { class: 'fd-canvas-add-column' }, add))), el('tbody', {}, ...rows));
+    }
+    const element = el('div', { class: 'fd-canvas fd-list-canvas' }, el('div', { class: 'fd-list' }, bar, selection, scroll));
+    const drag = canvasDrag({
+        words: designer.words,
+        canvas: element,
+        cards: '.fd-list-table th[data-node]',
+        drop(source, _section, index) {
+            if ('node' in source)
+                designer.moveColumn(source.node, index);
+            else
+                options.dropTool(source.tool, index);
+        },
+    });
+    return {
+        element,
+        drag,
+        focusAction,
+        update(state) {
+            const { page, selected } = state;
+            if (page.layout.type !== 'list')
+                return;
+            const list = page.layout;
+            const on = new Set(list.defaultFilters ?? []);
+            facets.replaceChildren(...(list.filters ?? []).filter((f) => on.has(f.id)).map((f) => el('span', { class: 'fd-facet' }, el('span', { class: 'fd-facet-text' }, f.label))));
+            const size = list.pageSize ?? 40;
+            const said = viewerWords(page);
+            searchWords.textContent = said.search;
+            chosen.textContent = said.selected.replace('{n}', '2');
+            pagerText.textContent = said.range.replace('{from}', '1').replace('{to}', String(Math.min(size, TOTAL))).replace('{total}', String(TOTAL));
+            drawActions(list, selected);
+            // steps lane: a button that does something wears a mark.
+            pressMarks(actions, page, designer);
+            drawTable(page, list, selected);
+        },
+        destroy() {
+            drag.destroy();
+            views.clear();
+        },
+    };
+}
+//# sourceMappingURL=list-canvas.mjs.map

package/src/lib/list-canvas.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-canvas.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/list-canvas.ts"],"names":[],"mappings":"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"}

package/src/lib/list-commands.d.mts

@@ -0,0 +1,57 @@
+import type { ButtonNode, Field, FilterCondition, FilterItem, Page } from '@fieldia/core';
+/**
+ * A list page, as the designer edits it: its columns, its order, how many
+ * rows a page holds, where the search bar looks, its named filters and
+ * groupings, and the buttons for the rows chosen. A field a list names comes
+ * onto the page from the model as the model has it, and leaves when nothing
+ * names it any more.
+ */
+export interface ListOptionsPatch {
+    sort?: {
+        field: string;
+        desc?: boolean;
+    }[];
+    pageSize?: number;
+    /** The fields the search bar looks in; empty for the columns. */
+    searchFields?: string[];
+    /** The fields people can group by; empty for none. */
+    groupBy?: string[];
+}
+export interface ListActionPatch {
+    label?: string;
+    action?: string;
+    style?: ButtonNode['style'];
+    confirm?: string;
+}
+export interface ListCommands {
+    /** A field as a column: at `index`, or last. */
+    addColumn(field: string, index?: number): boolean;
+    moveColumn(field: string, index: number): boolean;
+    removeColumn(field: string): boolean;
+    setListOptions(options: ListOptionsPatch): boolean;
+    /** A named filter for the search bar. Returns its id. */
+    addListFilter(label: string, filter: FilterCondition[]): string | false;
+    /** Its words, its conditions, and whether it is on when the list opens. */
+    updateListFilter(id: string, patch: {
+        label?: string;
+        filter?: FilterCondition[];
+        on?: boolean;
+    }): boolean;
+    removeListFilter(id: string): boolean;
+    /** A button for the rows chosen. Returns its id. */
+    addListAction(label: string): string | false;
+    updateListAction(id: string, patch: ListActionPatch): boolean;
+    removeListAction(id: string): boolean;
+}
+/** Whether a column can show this field. */
+export declare const canBeColumn: (field: Field) => boolean;
+/** How a column is picked on the canvas: by its field. */
+export declare const columnId: (field: string) => string;
+/** The fields a filter reads, through its groups. */
+export declare function filterFields(items: readonly FilterItem[]): string[];
+export declare function listCommands(context: {
+    apply(edit: (draft: Page) => void, merge?: string | null): boolean;
+    select(id: string | null): void;
+    selected(): string | null;
+    model: Record<string, Field>;
+}): ListCommands;

package/src/lib/list-commands.d.ts

@@ -0,0 +1,57 @@
+import type { ButtonNode, Field, FilterCondition, FilterItem, Page } from '@fieldia/core';
+/**
+ * A list page, as the designer edits it: its columns, its order, how many
+ * rows a page holds, where the search bar looks, its named filters and
+ * groupings, and the buttons for the rows chosen. A field a list names comes
+ * onto the page from the model as the model has it, and leaves when nothing
+ * names it any more.
+ */
+export interface ListOptionsPatch {
+    sort?: {
+        field: string;
+        desc?: boolean;
+    }[];
+    pageSize?: number;
+    /** The fields the search bar looks in; empty for the columns. */
+    searchFields?: string[];
+    /** The fields people can group by; empty for none. */
+    groupBy?: string[];
+}
+export interface ListActionPatch {
+    label?: string;
+    action?: string;
+    style?: ButtonNode['style'];
+    confirm?: string;
+}
+export interface ListCommands {
+    /** A field as a column: at `index`, or last. */
+    addColumn(field: string, index?: number): boolean;
+    moveColumn(field: string, index: number): boolean;
+    removeColumn(field: string): boolean;
+    setListOptions(options: ListOptionsPatch): boolean;
+    /** A named filter for the search bar. Returns its id. */
+    addListFilter(label: string, filter: FilterCondition[]): string | false;
+    /** Its words, its conditions, and whether it is on when the list opens. */
+    updateListFilter(id: string, patch: {
+        label?: string;
+        filter?: FilterCondition[];
+        on?: boolean;
+    }): boolean;
+    removeListFilter(id: string): boolean;
+    /** A button for the rows chosen. Returns its id. */
+    addListAction(label: string): string | false;
+    updateListAction(id: string, patch: ListActionPatch): boolean;
+    removeListAction(id: string): boolean;
+}
+/** Whether a column can show this field. */
+export declare const canBeColumn: (field: Field) => boolean;
+/** How a column is picked on the canvas: by its field. */
+export declare const columnId: (field: string) => string;
+/** The fields a filter reads, through its groups. */
+export declare function filterFields(items: readonly FilterItem[]): string[];
+export declare function listCommands(context: {
+    apply(edit: (draft: Page) => void, merge?: string | null): boolean;
+    select(id: string | null): void;
+    selected(): string | null;
+    model: Record<string, Field>;
+}): ListCommands;