@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/designer.mjs

@@ -0,0 +1,1265 @@
+import { validatePage, wideColumns, } from '@fieldia/core';
+import { conditionToHide, conditionToHold, splitShownWhile, withShownWhile } from './conditions.mjs';
+import { findHeaderPart, headerCommands } from './header-commands.mjs';
+import { listCommands } from './list-commands.mjs';
+import { kindCommands } from './kind-commands.mjs';
+import { choiceCommands } from './choice-commands.mjs';
+import { inputCommands } from './input-commands.mjs';
+import { structureCommands } from './structure-commands.mjs';
+import { tableCommands } from './table-commands.mjs';
+import { fixCheck, pageChecks } from './page-checks.mjs';
+import { COLUMN_TYPES, columnKind, kindById, kindFits, kindName, kindOfField, kindsFor, registerKinds, storedAs } from './kinds.mjs';
+import { replaceWith, templatesFor } from './templates.mjs';
+import * as ops from './layout-ops.mjs';
+import * as settings from './layout-settings.mjs';
+import * as twelfths from './layout-twelfths.mjs';
+import * as several from './layout-several.mjs';
+import { allIds, containers, findContainer, findNode, findTab, firstSection, nextName, shownFields } from './page-tree.mjs';
+import { across, setSpan } from './layout-tree.mjs';
+import { Refusal } from './refusal.mjs';
+import { translationCommands } from './translations.mjs';
+import { pageJsonCommands } from './page-json.mjs';
+import { rulesCommands } from './rules-commands.mjs';
+import { keepWhatRulesRead } from './rules-reads.mjs';
+import { stepsCommands } from './steps-commands.mjs';
+import { forgetGoneTargets } from './steps-places.mjs';
+import * as clipboard from './clipboard-ops.mjs';
+import * as moves from './outline-moves.mjs';
+import { outlineRows } from './outline-rows.mjs';
+import { LOOK_PRESETS, wholeLook } from './look-presets.mjs';
+import { browserLooks } from './look-store.mjs';
+import { setFold } from './group-fold.mjs';
+import { editChecker } from './validate-edit.mjs';
+import { DESIGNER_WORDS, designerLocale, isDefaultOption } from './designer-words.mjs';
+import { answersName, formParts, freeFieldName, refuseCycle, savedFormsCache, updateFormPart } from './saved-forms.mjs';
+/**
+ * The editing model behind the designer: no DOM, so it is tested in Node.
+ *
+ * Every edit is a command that produces a new page. The page is validated
+ * before it replaces the old one, so an edit that would break the page is
+ * refused with the reason, never applied. Each edit is one undo step; a run of
+ * typing in one label merges into one. Drafts are saved apart from published
+ * versions, so editing never changes a form people are filling in.
+ *
+ * Given the backend's model, it offers the model's fields as they are: a
+ * field from the model keeps what it holds, and only changes editor.
+ */
+/** A role's name, as the format takes it: `!` before it to hide a part from people holding it. */
+const ROLE = /^!?[A-Za-z0-9_][A-Za-z0-9_.:-]*$/;
+export { columnKind, kindFits, kindName, kindOfField, kindsFor, QUESTION_KINDS, SCREEN_KINDS, storedAs } from './kinds.mjs';
+export { isBlank, SCREEN_TEMPLATES, SURVEY_TEMPLATES } from './templates.mjs';
+export { askAssistant } from './assistant.mjs';
+export { pageChanges, pageChecks } from './page-checks.mjs';
+export { createBrowserLookStore, createMemoryLookStore } from './look-store.mjs';
+export { DESIGNER_WORDS, designerLocale } from './designer-words.mjs';
+/** Words as a name for code: Latin letters and digits; `empty` for words written in another script, as Arabic is. */
+const slug = (text, sep = '_', empty = 'page') => text
+    .normalize('NFKD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, sep)
+    .replace(new RegExp(`^\\${sep}+|\\${sep}+$`, 'g'), '') || empty;
+/**
+ * A page with nothing on it yet, titled: a survey with its first page, a
+ * screen with its first section, a sheet with its record's name, a list with
+ * its column. What it names (Page 1, Section 1) is in the designer's
+ * language (`locale`), English unless said; and a page begun in another
+ * language is written in it (`language`), so its form speaks it too.
+ */
+export function blankPage(kind, title, options = {}) {
+    const locale = designerLocale(options.locale) ?? 'en';
+    const w = DESIGNER_WORDS[locale].defaults;
+    const id = slug(title, '-');
+    const written = locale === 'en' ? {} : { language: locale };
+    if (kind === 'survey') {
+        return {
+            fieldia: '0.1',
+            id,
+            title,
+            ...written,
+            data: { kind: 'responses' },
+            fields: {},
+            layout: { type: 'wizard', id: 'steps', children: [{ type: 'step', id: 'step-1', label: w.page(1), children: [] }] },
+        };
+    }
+    if (kind === 'list') {
+        // A list shows at least one column: the records' names, to begin with.
+        return {
+            fieldia: '0.1',
+            id,
+            title,
+            ...written,
+            data: { kind: 'record', model: slug(title, '.') },
+            fields: { name: { type: 'char', label: w.name } },
+            layout: { type: 'list', id: 'list', columns: ['name'] },
+        };
+    }
+    if (kind === 'sheet') {
+        // A record named in big letters at the top, as a business record is.
+        return {
+            fieldia: '0.1',
+            id,
+            title,
+            ...written,
+            data: { kind: 'record', model: slug(title, '.') },
+            fields: { name: { type: 'char', label: w.name, required: true } },
+            layout: { type: 'sheet', id: 'sheet', title: { field: 'name', placeholder: w.name }, children: [{ type: 'section', id: 'section-1', columns: 2, children: [] }] },
+        };
+    }
+    return {
+        fieldia: '0.1',
+        id,
+        title,
+        ...written,
+        data: { kind: 'record', model: slug(title, '.') },
+        fields: {},
+        layout: { type: 'sections', id: 'sections', children: [{ type: 'section', id: 'section-1', title: w.section(1), columns: 2, children: [] }] },
+    };
+}
+export function createMemoryPageStore() {
+    const pages = new Map();
+    const entry = (id) => {
+        if (!pages.has(id))
+            pages.set(id, { draft: null, versions: [] });
+        return pages.get(id);
+    };
+    const copy = (value) => JSON.parse(JSON.stringify(value));
+    return {
+        pages,
+        async load(id) {
+            const found = entry(id);
+            return copy({ draft: found.draft, versions: found.versions });
+        },
+        async saveDraft(page) {
+            entry(page.id).draft = copy(page);
+        },
+        async publish(page) {
+            const found = entry(page.id);
+            const version = found.versions.length + 1;
+            found.versions.push({ version, publishedAt: new Date().toISOString(), page: copy(page) });
+            return version;
+        },
+        async list() {
+            return [...pages]
+                .filter(([, found]) => found.versions.length)
+                .map(([id, found]) => ({ id, title: found.versions[found.versions.length - 1].page.title || id }));
+        },
+    };
+}
+const clone = (value) => JSON.parse(JSON.stringify(value));
+export function createDesigner(options) {
+    const store = options.store;
+    const locale = designerLocale(options.locale);
+    const words = DESIGNER_WORDS[locale ?? 'en'];
+    const appKinds = registerKinds(options.kinds ?? []);
+    /** A kind this designer offers: Fieldia's, or one of this app's. */
+    const kindOf = (id) => {
+        const kind = appKinds.find((k) => k.id === id) ?? kindById(id);
+        if (kind.app && !appKinds.includes(kind))
+            throw new Error(`Unknown question kind "${id}"`);
+        return kind;
+    };
+    const model = clone(options.model ?? {});
+    /** A field the backend already has: its definition is the model's, not the designer's. */
+    const fromModel = (name) => Object.prototype.hasOwnProperty.call(model, name);
+    let page = clone(options.page);
+    let selected = null;
+    let picked = [];
+    let issues = [];
+    let past = [];
+    let future = [];
+    let mergeKey = null;
+    let versions = clone(options.versions ?? []);
+    const listeners = new Set();
+    let saving = Promise.resolve();
+    let saveAgain = false;
+    let saveRunning = false;
+    const published = () => versions[versions.length - 1]?.page ?? null;
+    /** The picks: an editor that sets only `selected` picks that one alone. */
+    const pickedNow = () => (selected === null ? [] : picked.includes(selected) ? picked : [selected]);
+    /** What was picked as each page was left, to pick again when undo or redo comes back to it. */
+    const pickedWhenLeft = new WeakMap();
+    const leave = (left) => pickedWhenLeft.set(left, { picked: pickedNow(), selected });
+    /** Back at a page: what is picked stays while any of it is on the page; when none is, what was picked as it was left. */
+    function arrive() {
+        const ids = allIds(page);
+        const now = pickedNow();
+        const back = now.some((id) => ids.has(id)) ? { picked: now, selected } : (pickedWhenLeft.get(page) ?? { picked: [], selected: null });
+        picked = back.picked.filter((id) => ids.has(id));
+        selected = back.selected !== null && picked.includes(back.selected) ? back.selected : (picked[picked.length - 1] ?? null);
+    }
+    /** Whether the draft differs from the version published last: compared once for each page and version, however often the state is asked for. */
+    let compared = null;
+    function unpublished() {
+        const last = published();
+        if (compared?.page !== page || compared.published !== last)
+            compared = { page, published: last, differs: JSON.stringify(page) !== JSON.stringify(last) };
+        return compared.differs;
+    }
+    /** The checks of the page, worked out once for each page, and again as saved forms placed in it load. */
+    let checksOf = null;
+    /** How many times a saved form has come from the store: what depends on them is worked out again. */
+    let formsCame = 0;
+    const forms = savedFormsCache(store, () => {
+        formsCame++;
+        notify();
+    });
+    const state = () => ({
+        page,
+        selected,
+        picked: pickedNow(),
+        canUndo: past.length > 0,
+        canRedo: future.length > 0,
+        issues,
+        unpublished: unpublished(),
+        versions,
+    });
+    const notify = () => {
+        const snapshot = state();
+        for (const listener of [...listeners])
+            listener(snapshot);
+    };
+    function saveDraft() {
+        if (!store)
+            return;
+        if (saveRunning) {
+            saveAgain = true;
+            return;
+        }
+        saveRunning = true;
+        saving = (async () => {
+            do {
+                saveAgain = false;
+                await store.saveDraft(clone(page)).catch(() => undefined);
+            } while (saveAgain);
+            saveRunning = false;
+        })();
+    }
+    /** An edit's page checked as validatePage would, at the cost of what it changed. */
+    const checkEdit = editChecker();
+    /**
+     * Apply an edit to a copy, validate it, and keep it — or refuse it, saying
+     * why. `after` runs once it is kept, before anyone is told: what the edit
+     * picks is told with it, as one change, so a view draws it once.
+     */
+    function apply(edit, merge = null, after) {
+        const draft = clone(page);
+        try {
+            edit(draft);
+        }
+        catch (error) {
+            if (!(error instanceof Refusal))
+                throw error;
+            issues = [error.in(words)];
+            notify();
+            return false;
+        }
+        // rules lane: a field a rule still reads keeps its definition, so the rule can be seen and put right.
+        keepWhatRulesRead(page, draft);
+        // steps lane: a tab or step taken away takes the steps that go to it, and its own, with it.
+        forgetGoneTargets(draft);
+        const checked = checkEdit(page, draft);
+        if (!checked.ok) {
+            issues = checked.issues.map((issue) => words.refusals.invalid(issue.path, issue.message));
+            notify();
+            return false;
+        }
+        if (!(merge && merge === mergeKey))
+            past = [...past, page];
+        mergeKey = merge;
+        future = [];
+        leave(page);
+        // What the edit left alone stays the same objects, so the views can skip it.
+        page = checked.page;
+        issues = [];
+        after?.();
+        notify();
+        saveDraft();
+        return true;
+    }
+    /** A new part after another, or in a container at a place: in a group in twelfths, a row of its own. */
+    function placeAfter(draft, node, where = {}) {
+        const new_ = (holder, index) => twelfths.putAt(draft, holder, index, [node], (p) => twelfths.landingSpan(draft, p, holder));
+        if (where.after) {
+            const found = findNode(draft, where.after);
+            if (!found)
+                throw new Refusal((w) => w.refusals.noElement(where.after));
+            new_(found.parent, found.index + 1);
+            return;
+        }
+        const all = containers(draft);
+        const parent = where.parent ? all.find((c) => c.id === where.parent) : all[all.length - 1];
+        if (!parent)
+            throw new Refusal((w) => w.refusals.noStepOrSection(String(where.parent)));
+        new_(parent, where.index === undefined ? parent.children.length : Math.max(0, Math.min(where.index, parent.children.length)));
+    }
+    function refuseInSurvey(draft, kind) {
+        if (kind.group === 'records' && draft.data.kind === 'responses')
+            throw new Refusal((w) => w.refusals.surveyHasNoRecords);
+    }
+    /** A field of the node, when it is one of the given types and the page's own to change: `owned` says what the model keeps otherwise. */
+    function fieldOfType(draft, id, types, refusal, owned) {
+        const name = fieldNode(draft, id).field;
+        const field = draft.fields[name];
+        if (!types.includes(field.type))
+            throw new Refusal(refusal);
+        if (fromModel(name))
+            throw new Refusal((w) => owned(w, field.label));
+        return field;
+    }
+    /** A layout edit, one undo step: what it made or moved is picked after, `lead` leading when it is among them. */
+    function layoutEdit(edit, lead = null) {
+        let made = null;
+        const ok = apply((draft) => void (made = edit(draft)), null, () => {
+            if (made === null)
+                return;
+            picked = [].concat(made);
+            selected = lead !== null && picked.includes(lead) ? lead : (picked[0] ?? null);
+        });
+        return ok && made !== null ? made : false;
+    }
+    /** Picks of parts no longer on the page are let go; the one picked last of the rest leads. */
+    function forgetGone() {
+        const ids = allIds(page);
+        picked = pickedNow().filter((id) => ids.has(id));
+        if (selected !== null && !ids.has(selected))
+            selected = picked[picked.length - 1] ?? null;
+    }
+    function fieldNode(draft, id) {
+        const found = findNode(draft, id);
+        if (!found || found.node.type !== 'field')
+            throw new Refusal((w) => w.refusals.noQuestion(id));
+        return found.node;
+    }
+    const header = headerCommands({
+        apply,
+        select(id) {
+            selected = id;
+            notify();
+        },
+        model,
+    });
+    const list = listCommands({
+        apply,
+        select(id) {
+            selected = id;
+            notify();
+        },
+        selected: () => selected,
+        model,
+    });
+    const kinds = kindCommands({ apply, fromModel });
+    const choices = choiceCommands({ apply, fromModel, words });
+    const inputs = inputCommands({ apply, fromModel, words });
+    const structures = structureCommands({ apply, fromModel });
+    const designer = {
+        ...header,
+        ...list,
+        ...kinds,
+        ...choices,
+        ...inputs,
+        ...structures,
+        ...tableCommands({ apply }),
+        words,
+        locale,
+        getPage: () => page,
+        modelFields() {
+            const shown = shownFields(page);
+            return Object.keys(model)
+                .filter((name) => !shown.has(name))
+                .map((name) => ({ name, field: clone(model[name]) }));
+        },
+        addModelField(name, where) {
+            let created = '';
+            const ok = apply((draft) => {
+                if (!fromModel(name))
+                    throw new Refusal((w) => w.refusals.noModelField(name));
+                if (shownFields(draft).has(name))
+                    throw new Refusal((w) => w.refusals.onThePageAlready(model[name].label));
+                // A definition the page already keeps for it stays; otherwise the model's.
+                draft.fields[name] = draft.fields[name] ?? clone(model[name]);
+                const ids = allIds(draft);
+                created = nextName((id) => ids.has(id), 'q', '-');
+                placeAfter(draft, { type: 'field', id: created, field: name }, where);
+            }, null, () => (selected = created));
+            return ok ? created : false;
+        },
+        isFromModel(id) {
+            const found = findNode(page, id);
+            return found?.node.type === 'field' && fromModel(found.node.field);
+        },
+        kindsFor(id) {
+            const found = findNode(page, id);
+            if (!found || found.node.type !== 'field')
+                return [];
+            const name = found.node.field;
+            const offered = kindsFor(page.fields[name], { fromModel: fromModel(name), survey: page.data.kind === 'responses', app: appKinds });
+            // The kind it is shown as now is always one, even where the page would not offer it to add (a photo on a form).
+            const now = kindOfField(page.fields[name], found.node);
+            return now && !offered.some((k) => k.id === now) ? [kindOf(now), ...offered] : offered;
+        },
+        getState: state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        select(id) {
+            selected = id;
+            picked = id === null ? [] : [id];
+            notify();
+        },
+        addQuestion(kindId, where) {
+            const kind = kindOf(kindId);
+            let created = '';
+            const ok = apply((draft) => {
+                refuseInSurvey(draft, kind);
+                const ids = allIds(draft);
+                const field = freeFieldName(draft);
+                const id = nextName((name) => ids.has(name), 'q', '-');
+                draft.fields[field] = kind.field(words.defaults.untitledQuestion, words);
+                const node = { type: 'field', id, field, ...(kind.widget ? { widget: kind.widget } : {}) };
+                created = id;
+                placeAfter(draft, node, where);
+            }, null, () => (selected = created));
+            return ok ? created : false;
+        },
+        updateQuestion(id, patch) {
+            const textOnly = Object.keys(patch).length === 1 && ('label' in patch || 'help' in patch || 'placeholder' in patch);
+            return apply((draft) => {
+                const node = fieldNode(draft, id);
+                // Where the focus goes as the record opens is the place's, whatever the field.
+                if (patch.focus !== undefined) {
+                    if (patch.focus)
+                        node.focus = true;
+                    else
+                        delete node.focus;
+                }
+                if (fromModel(node.field)) {
+                    // The backend's definition stays as it is: what this page says goes on the field's place on it.
+                    if (patch.label !== undefined)
+                        node.label = patch.label;
+                    if (patch.required !== undefined) {
+                        if (patch.required)
+                            node.required = true;
+                        else
+                            delete node.required;
+                    }
+                    if (patch.help !== undefined) {
+                        if (patch.help)
+                            node.help = patch.help;
+                        else
+                            delete node.help;
+                    }
+                    if (patch.placeholder !== undefined) {
+                        if (patch.placeholder)
+                            node.placeholder = patch.placeholder;
+                        else
+                            delete node.placeholder;
+                    }
+                    return;
+                }
+                const field = draft.fields[node.field];
+                if (patch.label !== undefined)
+                    field.label = patch.label;
+                if (patch.required !== undefined) {
+                    if (patch.required)
+                        field.required = true;
+                    else
+                        delete field.required;
+                }
+                if (patch.help !== undefined) {
+                    if (patch.help)
+                        field.help = patch.help;
+                    else
+                        delete field.help;
+                }
+                if (patch.placeholder !== undefined) {
+                    if (patch.placeholder)
+                        node.placeholder = patch.placeholder;
+                    else
+                        delete node.placeholder;
+                }
+            }, textOnly ? `${Object.keys(patch)[0]}:${id}` : null);
+        },
+        setOptions(id, labels) {
+            return apply((draft) => {
+                const node = fieldNode(draft, id);
+                const field = draft.fields[node.field];
+                if (field.type !== 'selection')
+                    throw new Refusal((w) => w.refusals.noOptions(id));
+                if (fromModel(node.field))
+                    throw new Refusal((w) => w.refusals.optionsFromModel(field.label));
+                const old = field.options;
+                const used = new Set();
+                const placeholder = (o) => !!o && /^option_\d+$/.test(String(o.value)) && isDefaultOption(o.label);
+                const clean = labels.map((label) => label.trim()).filter(Boolean);
+                // The same words are the same option: one put between others, or taken from among them, leaves theirs alone.
+                const claimed = new Set();
+                const same = clean.map((label) => {
+                    const at = old.findIndex((o, k) => !claimed.has(k) && o.label === label);
+                    if (at !== -1)
+                        claimed.add(at);
+                    return at;
+                });
+                field.options = clean.map((label, i) => {
+                    let value;
+                    if (same[i] !== -1)
+                        value = old[same[i]].value;
+                    else {
+                        // Words changed in place keep the value the answers already use, unless it was a placeholder.
+                        const there = claimed.has(i) ? undefined : old[i];
+                        if (there)
+                            claimed.add(i);
+                        value = there && !placeholder(there) ? there.value : slug(label, '_', `option_${i + 1}`);
+                    }
+                    while (used.has(value))
+                        value = `${value}_${i + 1}`;
+                    used.add(value);
+                    // An option kept keeps its picture, points and flags.
+                    const kept = old.find((o) => o.value === value);
+                    return { ...kept, value, label };
+                });
+            }, 
+            // Typing in one option list is one undo step, like typing in a label.
+            `options:${id}:${labels.length}`);
+        },
+        changeKind(id, kindId) {
+            const kind = kindOf(kindId);
+            return apply((draft) => {
+                refuseInSurvey(draft, kind);
+                const node = fieldNode(draft, id);
+                const old = draft.fields[node.field];
+                if (fromModel(node.field)) {
+                    // What the backend stores stays as it is: only the editor changes.
+                    if (!kindFits(kind, old)) {
+                        const fitting = kindsFor(old, { fromModel: true, survey: draft.data.kind === 'responses', app: appKinds });
+                        throw new Refusal((w) => w.kinds.onlyShownAs(old.label, storedAs(old, w), w.kinds.orList(fitting.map((k) => kindName(k, w)))));
+                    }
+                    if (kind.widget)
+                        node.widget = kind.widget;
+                    else
+                        delete node.widget;
+                    return;
+                }
+                const next = kind.field(old.label, words);
+                if (old.type === 'selection' && next.type === 'selection') {
+                    next.options = old.options;
+                    // "Other" stays where the new kind has it too; a dropdown has none.
+                    if (old.other && (kind.id === 'multiple-choice' || kind.id === 'checkboxes'))
+                        next.other = true;
+                }
+                if (old.help)
+                    next.help = old.help;
+                if (old.required)
+                    next.required = true;
+                draft.fields[node.field] = next;
+                if (kind.widget)
+                    node.widget = kind.widget;
+                else
+                    delete node.widget;
+            });
+        },
+        moveNode(id, delta) {
+            return apply((draft) => {
+                const found = findNode(draft, id);
+                const tab = found ? null : findTab(draft, id);
+                const list = (found?.parent.children ?? tab?.tabs.children);
+                const index = found?.index ?? tab?.index;
+                if (!list || index === undefined)
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                const to = index + delta;
+                if (to < 0 || to >= list.length)
+                    throw new Refusal((w) => w.refusals.cannotMoveFurther);
+                const [moved] = list.splice(index, 1);
+                list.splice(to, 0, moved);
+            });
+        },
+        placeNode(id, parentId, index, options = {}) {
+            const pick = () => {
+                if (!options.pick)
+                    return;
+                selected = id;
+                picked = [id];
+            };
+            return apply((draft) => {
+                const found = findNode(draft, id);
+                if (!found)
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                const parent = containers(draft).find((c) => c.id === parentId);
+                if (!parent)
+                    throw new Refusal((w) => w.refusals.noStepOrSection(parentId));
+                const came = ops.cameFrom(draft, id);
+                // Its row closes up behind it; it is no wider than its new section, and as wide a share of a row in twelfths.
+                ops.detach(draft, id);
+                const holder = parent;
+                twelfths.putAt(draft, holder, Math.max(0, Math.min(index, parent.children.length)), [found.node], (p) => twelfths.landingSpan(draft, p, holder, came), () => came?.cols);
+            }, null, pick);
+        },
+        duplicateNode(id) {
+            let created = '';
+            const ok = apply((draft) => {
+                const found = findNode(draft, id);
+                if (!found || found.node.type !== 'field')
+                    throw new Refusal((w) => w.refusals.noQuestion(id));
+                const ids = allIds(draft);
+                const field = freeFieldName(draft);
+                created = nextName((name) => ids.has(name), 'q', '-');
+                draft.fields[field] = clone(draft.fields[found.node.field]);
+                found.parent.children.splice(found.index + 1, 0, { ...clone(found.node), id: created, field });
+            });
+            return ok ? created : false;
+        },
+        removeNode(id) {
+            const ok = apply((draft) => {
+                const root = draft.layout;
+                const found = findNode(draft, id);
+                const tab = found ? null : findTab(draft, id);
+                const topIndex = root.children.findIndex((child) => child.id === id);
+                if (topIndex !== -1) {
+                    // A whole page (wizard step), or what sits at the top of a screen or a sheet.
+                    if (root.children.length === 1)
+                        throw new Refusal((w) => w.refusals.oneStepOrSection);
+                    root.children.splice(topIndex, 1);
+                }
+                else if (found)
+                    ops.detach(draft, id); // Its row closes up.
+                else if (tab) {
+                    tab.tabs.children.splice(tab.index, 1);
+                    // Tabs with no tab left go too.
+                    if (!tab.tabs.children.length) {
+                        const holder = findNode(draft, tab.tabs.id);
+                        if (holder)
+                            holder.parent.children.splice(holder.index, 1);
+                    }
+                }
+                else
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                // Drop the fields nothing shows any more.
+                const shown = shownFields(draft);
+                for (const name of Object.keys(draft.fields))
+                    if (!shown.has(name))
+                        delete draft.fields[name];
+            }, null, () => {
+                if (selected === id)
+                    selected = null;
+            });
+            return ok;
+        },
+        addContainer(label, where = {}) {
+            let created = '';
+            const ok = apply((draft) => {
+                const ids = allIds(draft);
+                const root = draft.layout;
+                const section = () => {
+                    created = nextName((name) => ids.has(name), 'section', '-');
+                    return { type: 'section', id: created, title: label, columns: 2, children: [] };
+                };
+                if (where.parent) {
+                    const tab = findTab(draft, where.parent);
+                    if (!tab)
+                        throw new Refusal((w) => w.refusals.noTab(where.parent));
+                    tab.tab.children.push(section());
+                }
+                else if (root.type === 'wizard') {
+                    created = nextName((name) => ids.has(name), 'step', '-');
+                    const at = where.after ? root.children.findIndex((step) => step.children.some((n) => n.id === where.after)) : -1;
+                    if (where.after && at === -1)
+                        throw new Refusal((w) => w.refusals.noQuestion(where.after));
+                    if (at === -1)
+                        root.children.push({ type: 'step', id: created, label, children: [] });
+                    else {
+                        const step = root.children[at];
+                        const cut = step.children.findIndex((n) => n.id === where.after) + 1;
+                        root.children.splice(at + 1, 0, { type: 'step', id: created, label, children: step.children.splice(cut) });
+                    }
+                }
+                else if (root.type === 'sections' || root.type === 'sheet')
+                    root.children.push(section());
+                else
+                    throw new Refusal((w) => w.refusals.nothingToAddTo);
+            });
+            return ok ? created : false;
+        },
+        setLayoutKind(kind) {
+            return apply((draft) => {
+                const root = draft.layout;
+                if (root.type === kind)
+                    throw new Refusal((w) => (kind === 'sheet' ? w.refusals.sheetAlready : w.refusals.sectionsAlready));
+                const ids = allIds(draft);
+                const rootId = ids.has(kind) ? root.id : kind;
+                if (kind === 'sheet') {
+                    if (root.type !== 'sections')
+                        throw new Refusal((w) => w.refusals.onlySectionsBecomeSheet);
+                    draft.layout = { type: 'sheet', id: rootId, children: root.children };
+                    return;
+                }
+                if (root.type !== 'sheet')
+                    throw new Refusal((w) => w.refusals.onlySheetBecomesSections);
+                if (root.children.some((n) => n.type === 'tabs'))
+                    throw new Refusal((w) => w.refusals.takeTabsOut);
+                const parts = ['statusbar', 'buttons', 'statButtons', 'ribbon', 'alerts', 'badges', 'sidePanel'].filter((part) => root[part] !== undefined);
+                if (parts.length)
+                    throw new Refusal((w) => w.refusals.cannotShowSheetParts(parts.join(', ')));
+                if (root.title) {
+                    const first = firstSection(draft);
+                    if (!first)
+                        throw new Refusal((w) => w.refusals.sectionForTitle);
+                    first.children.unshift({ type: 'field', id: nextName((name) => ids.has(name), 'q', '-'), field: root.title.field });
+                }
+                draft.layout = { type: 'sections', id: rootId, children: root.children };
+            });
+        },
+        setTitleLabel(label) {
+            return apply((draft) => {
+                const root = draft.layout;
+                if (root.type !== 'sheet')
+                    throw new Refusal((w) => w.refusals.onlySheetHasTitle);
+                if (!root.title)
+                    throw new Refusal((w) => w.refusals.titleLabelNeedsTitle);
+                if (label.trim())
+                    root.title.label = label;
+                else
+                    delete root.title.label;
+            }, 'title-label');
+        },
+        setTitleField(nodeId) {
+            return apply((draft) => {
+                const root = draft.layout;
+                if (root.type !== 'sheet')
+                    throw new Refusal((w) => w.refusals.onlySheetHasTitle);
+                const ids = allIds(draft);
+                // The field that was the title goes where the new one was, or first in the first section.
+                const old = root.title ? { type: 'field', id: nextName((name) => ids.has(name), 'q', '-'), field: root.title.field } : null;
+                if (nodeId === null) {
+                    if (!old)
+                        return;
+                    delete root.title;
+                    const first = firstSection(draft);
+                    if (!first)
+                        throw new Refusal((w) => w.refusals.titleNeedsSection);
+                    first.children.unshift(old);
+                    return;
+                }
+                const found = findNode(draft, nodeId);
+                if (!found || found.node.type !== 'field')
+                    throw new Refusal((w) => w.refusals.noQuestion(nodeId));
+                const def = draft.fields[found.node.field];
+                if (def.type !== 'char')
+                    throw new Refusal((w) => w.refusals.titleIsText);
+                found.parent.children.splice(found.index, 1, ...(old ? [old] : []));
+                root.title = { field: found.node.field, placeholder: def.label };
+            });
+        },
+        addTabs(where = {}) {
+            let created = '';
+            const ok = apply((draft) => {
+                const root = draft.layout;
+                if (root.type !== 'sheet')
+                    throw new Refusal((w) => w.refusals.tabsOnSheet);
+                const ids = allIds(draft);
+                const name = (prefix) => {
+                    const id = nextName((n) => ids.has(n), prefix, '-');
+                    ids.add(id);
+                    return id;
+                };
+                created = name('tabs');
+                const tabs = { type: 'tabs', id: created, children: [{ type: 'tab', id: name('tab'), label: words.defaults.tab(1), children: [{ type: 'section', id: name('section'), columns: 2, children: [] }] }] };
+                const after = where.after ? root.children.findIndex((n) => n.id === where.after) : -1;
+                if (where.after && after === -1)
+                    throw new Refusal((w) => w.refusals.noElementOnSheet(where.after));
+                root.children.splice(after === -1 ? root.children.length : after + 1, 0, tabs);
+            });
+            return ok ? created : false;
+        },
+        addTab(tabsId, label) {
+            let created = '';
+            const ok = apply((draft) => {
+                const holder = findNode(draft, tabsId);
+                if (!holder || holder.node.type !== 'tabs')
+                    throw new Refusal((w) => w.refusals.noTabs(tabsId));
+                const ids = allIds(draft);
+                created = nextName((n) => ids.has(n), 'tab', '-');
+                ids.add(created);
+                holder.node.children.push({ type: 'tab', id: created, label, children: [{ type: 'section', id: nextName((n) => ids.has(n), 'section', '-'), columns: 2, children: [] }] });
+            });
+            return ok ? created : false;
+        },
+        renameContainer(id, label) {
+            return apply((draft) => {
+                const container = findContainer(draft, id);
+                if (!container)
+                    throw new Refusal((w) => w.refusals.noStepOrSection(id));
+                // gap lane: a group that folds does so by its title.
+                if (container.collapsible && !label.trim())
+                    throw new Refusal((w) => w.refusals.foldsByTitle(container.title ?? ''));
+                if ('label' in container)
+                    container.label = label;
+                else
+                    container.title = label;
+            }, `rename:${id}`);
+        },
+        setCondition(id, condition) {
+            return apply((draft) => {
+                const container = findContainer(draft, id);
+                const found = container ? null : findNode(draft, id);
+                // A badge, a counter or a button of a sheet's header shows only for some records too.
+                const target = container ?? found?.node ?? findHeaderPart(draft, id)?.part ?? statusbarOf(draft, id);
+                if (!target)
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                const rules = !condition
+                    ? { join: 'all', rules: [] }
+                    : 'rules' in condition
+                        ? condition
+                        : { join: 'all', rules: [{ field: condition.field, op: 'is', value: condition.equals }] };
+                // Shown only while the record is edited, or read: that stays as it is.
+                const mode = splitShownWhile(target.invisible).mode;
+                if (!rules.rules.length) {
+                    const kept = withShownWhile(undefined, mode);
+                    if (kept)
+                        target.invisible = kept;
+                    else
+                        delete target.invisible;
+                    return;
+                }
+                const own = found?.node.type === 'field' ? found.node.field : null;
+                if (own && rules.rules.some((rule) => rule.field === own))
+                    throw new Refusal((w) => w.refusals.questionOwnAnswer);
+                target.invisible = withShownWhile(conditionToHide(rules), mode);
+            });
+        },
+        setShownWhile(id, mode) {
+            return apply((draft) => {
+                const target = (findContainer(draft, id) ?? findNode(draft, id)?.node ?? findHeaderPart(draft, id)?.part ?? statusbarOf(draft, id));
+                if (!target)
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                if (target.invisible === true)
+                    throw new Refusal((w) => w.refusals.alwaysHidden);
+                const { rest } = splitShownWhile(target.invisible);
+                const next = withShownWhile(typeof rest === 'string' ? rest : undefined, mode);
+                if (next)
+                    target.invisible = next;
+                else
+                    delete target.invisible;
+            });
+        },
+        setRoles(id, roles) {
+            return apply((draft) => {
+                const target = (findContainer(draft, id) ?? findNode(draft, id)?.node ?? findHeaderPart(draft, id)?.part ?? statusbarOf(draft, id));
+                if (!target)
+                    throw new Refusal((w) => w.refusals.noElement(id));
+                const wrong = roles?.find((role) => !ROLE.test(role));
+                if (wrong !== undefined)
+                    throw new Refusal((w) => w.refusals.notARole(wrong));
+                if (roles?.length)
+                    target.roles = [...new Set(roles)];
+                else
+                    delete target.roles;
+            });
+        },
+        setRule(id, which, condition) {
+            return apply((draft) => {
+                const found = findNode(draft, id);
+                if (!found || found.node.type !== 'field')
+                    throw new Refusal((w) => w.refusals.noField(id));
+                const node = found.node;
+                const rules = !condition
+                    ? { join: 'all', rules: [] }
+                    : 'rules' in condition
+                        ? condition
+                        : { join: 'all', rules: [{ field: condition.field, op: 'is', value: condition.equals }] };
+                if (rules.rules.some((rule) => rule.field === node.field))
+                    throw new Refusal((w) => w.refusals.fieldOwnAnswer);
+                const field = draft.fields[node.field];
+                if (which === 'required' && rules.rules.length && field?.required === true) {
+                    // The model's own word stands; a field of the page's own becomes required only when the rule holds.
+                    if (fromModel(node.field))
+                        throw new Refusal((w) => w.refusals.alwaysRequired(field.label));
+                    delete field.required;
+                }
+                if (rules.rules.length)
+                    node[which] = conditionToHold(rules);
+                else
+                    delete node[which];
+            });
+        },
+        setColumns: (sectionId, columns) => apply((draft) => settings.setColumns(draft, sectionId, columns)),
+        setColspan: (nodeId, span) => apply((draft) => settings.setColspan(draft, nodeId, span)),
+        arrangeSection(sectionId, items) {
+            return apply((draft) => {
+                const section = findContainer(draft, sectionId);
+                if (!section)
+                    throw new Refusal((w) => w.refusals.noSection(sectionId));
+                const fields = section.children.filter((n) => n.type === 'field');
+                const others = section.children.filter((n) => n.type !== 'field');
+                const byId = new Map(fields.map((n) => [n.id, n]));
+                if (items.length !== fields.length || items.some((item) => !byId.has(item.id))) {
+                    throw new Refusal((w) => w.refusals.arrangementMismatch);
+                }
+                const columns = wideColumns(section.columns);
+                section.children = [
+                    ...items.map(({ id, colspan }) => {
+                        const node = byId.get(id);
+                        const span = Math.max(1, Math.min(columns, Math.round(colspan)));
+                        if (span === 1)
+                            delete node.colspan;
+                        else
+                            node.colspan = span;
+                        return node;
+                    }),
+                    ...others,
+                ];
+            });
+        },
+        setPageInfo(info) {
+            return apply((draft) => {
+                if (info.title !== undefined)
+                    draft.title = info.title;
+                if (info.description !== undefined) {
+                    if (info.description)
+                        draft.description = info.description;
+                    else
+                        delete draft.description;
+                }
+            }, `page:${Object.keys(info).join(',')}`);
+        },
+        setRelation(id, model) {
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['many2one', 'many2many', 'one2many'], (w) => w.refusals.onlyLinksPoint, (w, label) => w.refusals.pointsFromModel(label));
+                if (!model.trim())
+                    throw new Refusal((w) => w.refusals.sayWhichRecords);
+                field.relation = model.trim();
+            }, `relation:${id}`);
+        },
+        setCurrency(id, code) {
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['monetary'], (w) => w.refusals.onlyAmountCurrency, (w, label) => w.refusals.currencyFromModel(label));
+                const currency = code.trim().toUpperCase();
+                if (!/^[A-Z]{3}$/.test(currency))
+                    throw new Refusal((w) => w.refusals.currencyLetters);
+                field.currency = currency;
+                delete field.currencyField;
+            });
+        },
+        setRange(id, range) {
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['integer'], (w) => w.refusals.onlyRange, (w, label) => w.refusals.rangeFromModel(label));
+                const { min, max } = range;
+                if (!Number.isInteger(min) || !Number.isInteger(max) || min >= max)
+                    throw new Refusal((w) => w.refusals.rangeWhole);
+                Object.assign(field, { min, max });
+            });
+        },
+        setOther(id, on) {
+            return apply((draft) => {
+                const ask = (w) => w.refusals.onlyOther;
+                const field = fieldOfType(draft, id, ['selection'], ask, (w, label) => w.refusals.otherFromModel(label));
+                const kind = kindOfField(field, fieldNode(draft, id));
+                if (kind !== 'multiple-choice' && kind !== 'checkboxes')
+                    throw new Refusal(ask);
+                if (on)
+                    field.other = true;
+                else
+                    delete field.other;
+            });
+        },
+        setWidgetOptions(id, patch) {
+            return apply((draft) => {
+                const node = fieldNode(draft, id);
+                const options = { ...(node.options ?? {}) };
+                for (const [key, value] of Object.entries(patch)) {
+                    if (value === null || value === '')
+                        delete options[key];
+                    else
+                        options[key] = value;
+                }
+                if (Object.keys(options).length)
+                    node.options = options;
+                else
+                    delete node.options;
+            }, `widget:${id}:${Object.keys(patch).join(',')}`);
+        },
+        setFileRules(id, rules) {
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['binary', 'image'], (w) => w.refusals.onlyFiles, (w, label) => w.refusals.filesFromModel(label));
+                if (rules.accept !== undefined) {
+                    if (field.type === 'image')
+                        throw new Refusal((w) => w.refusals.imageOnly);
+                    if (rules.accept.length)
+                        field.accept = [...rules.accept];
+                    else
+                        delete field.accept;
+                }
+                if (rules.maxSize !== undefined) {
+                    if (rules.maxSize === null)
+                        delete field.maxSize;
+                    else if (!Number.isInteger(rules.maxSize) || rules.maxSize <= 0)
+                        throw new Refusal((w) => w.refusals.largestFile);
+                    else
+                        field.maxSize = rules.maxSize;
+                }
+                if (rules.multiple === true)
+                    field.multiple = true;
+                else if (rules.multiple === false) {
+                    delete field.multiple;
+                    delete field.minFiles;
+                    delete field.maxFiles;
+                }
+                const counts = [['minFiles', 0, (w) => w.refusals.atLeastFiles], ['maxFiles', 1, (w) => w.refusals.atMostFiles]];
+                for (const [key, least, refusal] of counts) {
+                    const count = rules[key];
+                    if (count === undefined)
+                        continue;
+                    if (count !== null && !field.multiple)
+                        throw new Refusal((w) => w.refusals.severalFirst);
+                    if (count === null)
+                        delete field[key];
+                    else if (!Number.isInteger(count) || count < least)
+                        throw new Refusal(refusal);
+                    else
+                        field[key] = count;
+                }
+                if ((field.minFiles ?? 0) > (field.maxFiles ?? Infinity))
+                    throw new Refusal((w) => w.refusals.leastOverMost);
+            });
+        },
+        place: (part, drop) => layoutEdit((draft) => ops.place(draft, part, drop, { model, words })),
+        describeDrop: (drop, moving) => ops.describeDrop(page, drop, moving, words),
+        dropRefusal: (drop, moving) => ops.dropRefusal(page, drop, moving, words),
+        wrap: (ids, kind) => layoutEdit((draft) => ops.wrap(draft, ids, kind, words)),
+        ungroup: (id) => layoutEdit((draft) => ops.ungroup(draft, id)) !== false,
+        duplicate: (ids) => layoutEdit((draft) => ops.duplicate(draft, ids)),
+        remove: (ids) => apply((draft) => ops.remove(draft, ids), null, forgetGone),
+        pick(id, options = {}) {
+            const now = pickedNow();
+            const off = !!options.add && now.includes(id);
+            picked = !options.add ? [id] : off ? now.filter((p) => p !== id) : [...now, id];
+            selected = off ? (picked[picked.length - 1] ?? null) : id;
+            notify();
+        },
+        setSectionLook: (id, look) => apply((draft) => settings.setSectionLook(draft, id, look), `section-look:${id}:${Object.keys(look).join(',')}`),
+        setFieldLabels: (id, place) => apply((draft) => settings.setFieldLabels(draft, id, place)),
+        setFieldHelpShown: (id, shown) => apply((draft) => settings.setFieldHelpShown(draft, id, shown)),
+        setLook: (patch) => apply((draft) => settings.setLook(draft, patch), `look:${Object.keys(patch).join(',')}`),
+        setPartLook: (kind, patch) => {
+            const colours = !!patch && Object.values(patch).every((value) => typeof value === 'string' && value.startsWith('#'));
+            return apply((draft) => settings.setPartLook(draft, kind, patch), colours ? `part-look:${kind}:${Object.keys(patch).join(',')}` : null);
+        },
+        addBlock: (kind, where) => layoutEdit((draft) => ops.addBlock(draft, kind, where, words)),
+        setLineColumns(id, columns) {
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['one2many'], (w) => w.refusals.onlyLinesColumns, (w, label) => w.refusals.columnsFromModel(label));
+                if (!columns.length)
+                    throw new Refusal((w) => w.refusals.linesNeedColumn);
+                const old = field.fields;
+                const taken = new Set(columns.map((c) => c.name).filter((name) => !!name && name in old));
+                const fields = {};
+                for (const column of columns) {
+                    let name = column.name && column.name in old ? column.name : null;
+                    if (!name) {
+                        // A new column is named after its label, as a backend names a field.
+                        const base = slug(column.label, '_', 'column').replace(/^(\d)/, 'c_$1');
+                        name = base;
+                        for (let n = 2; taken.has(name); n++)
+                            name = `${base}_${n}`;
+                        taken.add(name);
+                    }
+                    // A column of the same kind keeps its field: a whole number stays whole, a link stays a link.
+                    const kept = old[name];
+                    if (kept && columnKind(kept) === column.kind)
+                        fields[name] = { ...kept, label: column.label };
+                    else if (column.kind === 'other')
+                        throw new Refusal((w) => w.refusals.newColumnKind);
+                    else
+                        fields[name] = { type: COLUMN_TYPES[column.kind], label: column.label };
+                }
+                field.fields = fields;
+            }, 
+            // Typing in a column's label is one undo step, as in an option.
+            `columns:${id}:${columns.length}`);
+        },
+        undo() {
+            const previous = past[past.length - 1];
+            if (!previous)
+                return;
+            past = past.slice(0, -1);
+            future = [page, ...future];
+            leave(page);
+            page = previous;
+            arrive();
+            mergeKey = null;
+            issues = [];
+            notify();
+            saveDraft();
+        },
+        redo() {
+            const next = future[0];
+            if (!next)
+                return;
+            future = future.slice(1);
+            past = [...past, page];
+            leave(page);
+            page = next;
+            arrive();
+            mergeKey = null;
+            issues = [];
+            notify();
+            saveDraft();
+        },
+        async publish() {
+            const checked = validatePage(page);
+            if (!checked.ok)
+                throw new Error(words.refusals.cannotPublish);
+            const version = store ? await store.publish(clone(page)) : versions.length + 1;
+            versions = [...versions, { version, publishedAt: new Date().toISOString(), page: clone(page) }];
+            notify();
+            return version;
+        },
+        checks() {
+            if (checksOf?.page !== page || checksOf.forms !== formsCame)
+                checksOf = { page, forms: formsCame, checks: pageChecks(page, { valid: checkEdit.passed(page), forms, words }) };
+            return [...checksOf.checks];
+        },
+        fixCheck: (check) => fixCheck(designer, check),
+        revertTo(version) {
+            const found = versions.find((v) => v.version === version);
+            if (!found) {
+                issues = [words.refusals.noVersion(version)];
+                notify();
+                return false;
+            }
+            return apply((draft) => {
+                Object.assign(draft, clone(found.page));
+            });
+        },
+        async settled() {
+            await saving;
+        },
+        // translations lane
+        ...translationCommands({ apply, getPage: () => page }),
+        // panel lane
+        setEach: (ids, change) => apply((draft) => several.setEach(draft, ids, change, fromModel)),
+        // json lane
+        ...pageJsonCommands({ getPage: () => page, apply }),
+        lists: () => clone(options.lists ?? []),
+        setOptionsFrom(id, from) {
+            const found = findNode(page, id);
+            const was = found?.node.type === 'field' ? page.fields[found.node.field]?.optionsFrom : undefined;
+            // Typing a list's name is one step, as typing a label is.
+            const naming = !!from && !!was && JSON.stringify(was.dependsOn ?? []) === JSON.stringify(from.dependsOn ?? []);
+            return apply((draft) => {
+                const field = fieldOfType(draft, id, ['selection'], (w) => w.refusals.onlyChoiceFromList, (w, label) => w.refusals.choicesFromModel(label));
+                if (!from) {
+                    delete field.optionsFrom;
+                    // Written again: one option to start from, when there were none.
+                    if (!field.options.length)
+                        field.options = [{ value: 'option_1', label: words.defaults.option(1) }];
+                    return;
+                }
+                field.optionsFrom = { list: from.list, ...(from.dependsOn?.length ? { dependsOn: [...from.dependsOn] } : {}) };
+            }, naming ? `list-name:${id}` : null);
+        },
+        // canvas lane
+        updateBlock: (id, patch) => apply((draft) => settings.updateBlock(draft, id, patch), `block:${id}:${Object.keys(patch).join(',')}`),
+        setWidths: (widths, options) => apply((draft) => settings.setWidths(draft, widths, options?.twelfths)),
+        // rules lane
+        ...rulesCommands({ apply, getPage: () => page, fromModel }),
+        // extend lane
+        appKinds: () => [...appKinds],
+        templates: () => templatesFor(page, options.templates, locale ?? 'en'),
+        replacePage(next) {
+            return apply((draft) => replaceWith(draft, next), null, () => {
+                selected = null;
+                picked = [];
+            });
+        },
+        assistant: () => options.assistant ?? null,
+        // outline lane
+        pickMany(ids) {
+            const there = new Set([...allIds(page), ...outlineRows(page).map((row) => row.id)]);
+            picked = [...new Set(ids)].filter((id) => there.has(id));
+            selected = picked[picked.length - 1] ?? null;
+            notify();
+        },
+        // The part that led the pick still leads it.
+        moveParts: (ids, parentId, index) => layoutEdit((draft) => moves.moveParts(draft, ids, parentId, index), selected),
+        moveRefusal: (ids, parentId) => moves.moveRefusal(page, ids, parentId, words),
+        describeMove: (ids, parentId, index) => moves.describeMove(page, ids, parentId, index, words),
+        copyParts: (ids) => clipboard.copyParts(page, ids) ?? false,
+        pasteParts(text) {
+            let pasted = null;
+            const pick = () => {
+                if (!pasted)
+                    return;
+                picked = [...pasted.ids];
+                selected = picked[picked.length - 1] ?? null;
+            };
+            if (!apply((draft) => void (pasted = clipboard.pasteParts(draft, text, pickedNow(), { model })), null, pick) || !pasted)
+                return false;
+            return pasted;
+        },
+        // gap lane
+        setLookPreset(id) {
+            return apply((draft) => {
+                const preset = LOOK_PRESETS.find((p) => p.id === id);
+                if (!preset)
+                    throw new Refusal((w) => w.refusals.noLook(id));
+                settings.setLook(draft, wholeLook(preset.look));
+            });
+        },
+        useLook: (look) => apply((draft) => settings.setLook(draft, wholeLook(look))),
+        looks: () => options.looks ?? browserLooks(),
+        setFold: (id, fold) => apply((draft) => setFold(draft, id, fold)),
+        // embed lane
+        canPlaceForms: () => typeof store?.list === 'function',
+        async savedForms() {
+            if (!store?.list)
+                return [];
+            return (await store.list()).filter((ref) => ref.id !== page.id);
+        },
+        savedForm(id, version) {
+            const all = forms.versions(id);
+            if (!all)
+                return all;
+            return { versions: all, page: forms.page(id, version) ?? null };
+        },
+        loadSavedForm: (id) => forms.load(id),
+        addForm(pageId, where) {
+            return layoutEdit((draft) => {
+                refuseCycle(forms, { page: pageId }, draft);
+                const ids = allIds(draft);
+                const title = forms.page(pageId)?.title || pageId;
+                const node = { type: 'form', id: nextName((n) => ids.has(n), 'form', '-'), page: pageId, name: answersName(draft, title) };
+                placeAfter(draft, node, where);
+                // A whole form takes a whole row of the group it lands in.
+                const holder = findNode(draft, node.id)?.parent;
+                if (holder)
+                    setSpan(node, across(draft, holder));
+                return node.id;
+            });
+        },
+        setForm: (id, patch) => apply((draft) => {
+            updateFormPart(draft, id, patch);
+            const part = formParts(draft).find((p) => p.id === id);
+            if (patch.page !== undefined || patch.version !== undefined)
+                refuseCycle(forms, part, draft);
+        }, `form:${id}:${Object.keys(patch).join(',')}`),
+        canOpenForm: () => typeof options.openForm === 'function',
+        openForm: (id) => options.openForm?.(id),
+        // steps lane
+        ...stepsCommands({ apply, getPage: () => page }),
+    };
+    return designer;
+}
+/** Open a page from a store: its latest draft, or else its latest version. */
+createDesigner.open = async (id, store, options = {}) => {
+    const { draft, versions } = await store.load(id);
+    const page = draft ?? versions[versions.length - 1]?.page;
+    if (!page)
+        throw new Error(`The store has no page "${id}"`);
+    return createDesigner({ page, store, versions, model: options.model, lists: options.lists, kinds: options.kinds, looks: options.looks, openForm: options.openForm, locale: options.locale });
+};
+/** A sheet's status steps, by the id the designer picks them by: they show for some records only, and to some roles, as any part. */
+function statusbarOf(page, id) {
+    return id === '#statusbar' && page.layout.type === 'sheet' ? page.layout.statusbar : undefined;
+}
+//# sourceMappingURL=designer.mjs.map