@fieldia/core 0.9.2 → 0.11.0

package/src/lib/record/form.mjs

@@ -1,8 +1,15 @@
 import { compileModifier } from '../expression/modifier.mjs';
+import { localDay } from '../expression/functions.mjs';
 import { checkValue } from './check.mjs';
+import { checkInput } from './inputs.mjs';
+import { compileComputed } from './compute.mjs';
+import { compileSetWhen } from './set-when.mjs';
+import { checkRules, compileRules } from './rules.mjs';
+import { expressionEnv } from './env.mjs';
 import { MESSAGES } from './messages.mjs';
 import { saveProblemOf } from './data-source.mjs';
 import { hostScheduler } from './scheduler.mjs';
+import { createMoments, createRunner } from './run.mjs';
 import { emptyValue, expressionContext, initialValues, isEmpty, lineKind, structuredCopy, } from './values.mjs';
 /**
  * The record state behind a page: values, what changed, what is visible and
@@ -10,19 +17,54 @@ import { emptyValue, expressionContext, initialValues, isEmpty, lineKind, struct
  * binding renders from `getState()` and calls these methods.
  */
 export function createForm(options) {
+    return innerForm(options, []).form;
+}
+const isRecord = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
+/** A saved form's answers, as the one value they are in the form round it. */
+const asValue = (values) => values;
+/** `within` are the pages round this one, outermost first: a page among them placed again would hold itself. */
+function innerForm(options, within) {
     const { page } = options;
     const scheduler = options.scheduler ?? hostScheduler;
     const messages = options.messages ?? MESSAGES.en;
     const index = indexLayout(page.layout);
+    /** Each field node's answer rules, read once. */
+    const nodeRules = new Map();
+    for (const node of index.values()) {
+        const rules = node.source.validate;
+        if (node.kind === 'field' && rules)
+            nodeRules.set(node.id, compileRules(rules));
+    }
+    /** Whether any rule only warns: without one, there are never warnings to look for. */
+    const warns = [...nodeRules.values()].some((rules) => rules.some((compiled) => compiled.rule.level === 'warning'));
     const steps = page.layout.type === 'wizard' ? page.layout.children.map((step) => step.id) : [];
     const draftKey = () => `fieldia:draft:${page.id}:${state.recordId ?? 'new'}`;
-    let baseline = { ...initialValues(page.fields), ...structuredCopy(options.values ?? {}) };
+    const today = () => localDay(options.now?.() ?? new Date());
+    const computed = compileComputed(page, today);
+    const setWhen = compileSetWhen(page, today);
+    /** The saved forms placed on the page, by the part's id: each one's answers sit under its name, as JSON. */
+    const parts = new Map();
+    for (const node of index.values())
+        if (node.kind === 'form')
+            parts.set(node.id, node.source);
+    /** Those given their page, with the inner form that holds their answers. */
+    const attached = new Map();
+    /** The page's fields, and each saved form's answers as a JSON value: what is loaded, told as changed and saved. */
+    const fields = { ...page.fields };
+    for (const part of parts.values())
+        fields[part.name] = { type: 'json', label: part.title || part.name };
+    /** True while answers are handed to an inner form: what it says back then is no change of its own. */
+    let syncing = false;
+    let baseline = computed.apply({ ...initialValues(fields, today()), ...structuredCopy(options.values ?? {}) });
+    /** The setWhen conditions holding for the values as they last settled: one starts to hold only against these. */
+    let holding = setWhen.holding(baseline);
     let state = {
         status: options.recordId != null ? 'idle' : 'ready',
         recordId: options.recordId ?? null,
         values: structuredCopy(baseline),
         errors: {},
         dirty: [],
+        warnings: {},
         warning: null,
         warningField: null,
         error: null,
@@ -30,6 +72,7 @@ export function createForm(options) {
         step: steps[0] ?? null,
         skipped: [],
         saveProblem: null,
+        choices: {},
     };
     /** Field errors a refused save brought, each kept until its field changes from the value it was refused with. */
     let serverErrors = {};
@@ -39,11 +82,87 @@ export function createForm(options) {
     let autosaveTimer = null;
     const pending = new Set();
     const listeners = new Set();
+    /** The app's listeners, by event. */
+    const events = new Map();
+    /** The moments the run going to a step or tab right now was set off by: the `show` that entry runs knows them, and does not set them off again. */
+    let entering = [];
+    /** Whether wizard steps entered are told: from once the form has opened and run its `open` steps. */
+    let showing = false;
+    /** The wizard step last told as entered. */
+    let told = null;
     let contextCache = null;
+    /** The latest load of each field's choices: an answer to an older one is let go. */
+    const choiceLoads = {};
     function set(patch) {
+        const was = state.values;
+        const shown = state.errors;
         state = { ...state, ...patch };
+        // The problems found inside a saved form are shown on it, beside its own fields.
+        if (state.errors !== shown)
+            for (const part of attached.values())
+                part.inner.show(inside(state.errors, part.name));
         for (const listener of [...listeners])
             listener(state);
+        // Choices that change with a value that just changed are asked for again.
+        if (state.values !== was) {
+            for (const name in state.choices)
+                if (fromList(name).dependsOn?.some((other) => was[other] !== state.values[other]))
+                    loadChoices(name);
+        }
+        if (showing && state.step !== told)
+            tellStep(entering);
+    }
+    function emit(event, payload) {
+        const heard = events.get(event);
+        if (heard)
+            for (const listener of [...heard])
+                listener(payload);
+    }
+    /** A field written: told to the app, and — a person's change — the page's `change` steps for it run. */
+    function changed(field, by) {
+        emit('change', { field, value: state.values[field], values: state.values, by });
+        const list = page.on?.change?.[field];
+        if (by === 'person' && list)
+            void track(moment(`on.change.${field}`, list, [], true));
+    }
+    /** A wizard step entered: told to the app, and its `show` steps run. */
+    function tellStep(chain) {
+        const step = state.step;
+        if (step === told || step === null)
+            return;
+        told = step;
+        emit('step', { step });
+        const list = page.on?.show?.[step];
+        if (list)
+            void track(moment(`on.show.${step}`, list, chain, true));
+    }
+    /** Do something while `chain` is the run's that does it, so a step or tab it enters knows. */
+    function inRun(chain, act) {
+        const was = entering;
+        entering = chain;
+        try {
+            act();
+        }
+        finally {
+            entering = was;
+        }
+    }
+    const fromList = (name) => page.fields[name].optionsFrom;
+    function loadChoices(name) {
+        const { list } = fromList(name);
+        const load = (choiceLoads[name] = (choiceLoads[name] ?? 0) + 1);
+        const put = (choices) => load === choiceLoads[name] && set({ choices: { ...state.choices, [name]: choices } });
+        // What was shown stays while the next ones load, so the list does not flash empty.
+        const shown = state.choices[name]?.options ?? null;
+        put({ options: shown, loading: true });
+        const source = options.dataSource;
+        void track((source?.options ? source.options({ list, values: structuredCopy(state.values) }) : Promise.reject(new Error(`No list "${list}"`))).then((loaded) => put({ options: loaded }), (error) => put({ options: shown, error: error.message ?? String(error) })));
+    }
+    /** A field as its value is checked: a list's choices are those loaded, and until they are, any choice may be one. */
+    function checked(name) {
+        const def = page.fields[name];
+        const loaded = state.choices[name]?.options;
+        return def.type === 'selection' && def.optionsFrom && loaded ? { ...def, options: loaded, optionsFrom: undefined } : def;
     }
     function track(promise) {
         pending.add(promise);
@@ -51,44 +170,47 @@ export function createForm(options) {
         promise.then(done, done);
         return promise;
     }
-    function context() {
+    /** The values as expressions read them, and what else they read: the lines' rows, today. */
+    function reading() {
         if (contextCache?.values !== state.values) {
-            contextCache = { values: state.values, context: expressionContext(state.values, page.fields) };
+            const values = state.values;
+            contextCache = { values, context: expressionContext(values, page.fields), env: expressionEnv(values, page.fields, today) };
         }
-        return contextCache.context;
+        return contextCache;
     }
+    const context = () => reading().context;
     function fieldDef(name) {
-        const def = page.fields[name];
+        const def = fields[name];
         if (!def)
             throw new Error(`The page has no field "${name}"`);
         return def;
     }
     function dirtyFields(values) {
-        return Object.keys(page.fields).filter((name) => JSON.stringify(values[name] ?? null) !== JSON.stringify(baseline[name] ?? null));
+        return Object.keys(fields).filter((name) => JSON.stringify(values[name] ?? null) !== JSON.stringify(baseline[name] ?? null));
     }
     function nodeState(id) {
         const node = index.get(id);
         if (!node)
             throw new Error(`The page has no element "${id}"`);
-        const ctx = context();
-        let invisible = node.invisible.evaluate(ctx);
+        const { context: ctx, env } = reading();
+        let invisible = node.invisible.evaluate(ctx, env);
         for (let parent = node.parent; !invisible && parent; parent = index.get(parent)?.parent ?? null) {
-            invisible = index.get(parent)?.invisible.evaluate(ctx) ?? false;
+            invisible = index.get(parent)?.invisible.evaluate(ctx, env) ?? false;
         }
         // A section read-only right now makes everything inside it read-only too.
-        let readonly = node.readonly.evaluate(ctx);
+        let readonly = node.readonly.evaluate(ctx, env);
         for (let parent = node.parent; !readonly && parent; parent = index.get(parent)?.parent ?? null) {
-            readonly = index.get(parent)?.readonly.evaluate(ctx) ?? false;
+            readonly = index.get(parent)?.readonly.evaluate(ctx, env) ?? false;
         }
         const def = node.field ? page.fields[node.field] : undefined;
         return {
             invisible,
-            readonly: readonly || def?.readonly === true,
-            required: node.required.evaluate(ctx) || def?.required === true,
+            readonly: readonly || (def !== undefined && lockedField(def)),
+            required: node.required.evaluate(ctx, env) || def?.required === true,
         };
     }
-    /** Field nodes inside `root` (or the whole page), visible right now. */
-    function visibleFieldNodes(root) {
+    /** Field nodes — or saved forms placed on the page — inside `root` (or the whole page), visible right now. */
+    function visibleFieldNodes(root, kind = 'field') {
         const inside = (node) => {
             if (!root)
                 return true;
@@ -106,7 +228,52 @@ export function createForm(options) {
                     return true;
             return false;
         };
-        return [...index.values()].filter((node) => node.kind === 'field' && inside(node) && !skipped(node) && !nodeState(node.id).invisible);
+        return [...index.values()].filter((node) => node.kind === kind && inside(node) && !skipped(node) && !nodeState(node.id).invisible);
+    }
+    /** What a field node's answer rules say of its value now: the first error and the first warning. */
+    function ruleCheck(node) {
+        const rules = nodeRules.get(node.id);
+        if (!rules)
+            return {};
+        const name = node.field;
+        const def = page.fields[name];
+        const label = node.source.label ?? def.label;
+        const { context: ctx, env } = reading();
+        return checkRules(def, label, state.values[name], rules, { context: ctx, env, now: options.now?.() ?? new Date(), messages });
+    }
+    /** A tick box required and not ticked, as an "I agree" box: "no" answers a yes or no, never a box to tick. */
+    function unticked(node) {
+        const name = node.field;
+        const ticks = node.source.widget === 'tick' && page.fields[name].type === 'boolean';
+        return ticks && state.values[name] !== true && nodeState(node.id).required ? messages.tick : undefined;
+    }
+    /** A field node's error now: its field's own rules first, then its answer rules. */
+    function nodeError(node) {
+        const name = node.field;
+        return unticked(node) ?? checkInput(page.fields[name], node.source, state.values[name], messages) ?? checkValue(checked(name), state.values[name], nodeState(node.id).required, messages, today()) ?? ruleCheck(node).error;
+    }
+    /** Warnings for the visible fields of the page, without publishing them. */
+    function collectWarnings() {
+        const warnings = {};
+        if (!warns)
+            return warnings;
+        for (const node of visibleFieldNodes()) {
+            const warning = nodeRules.has(node.id) ? ruleCheck(node).warning : undefined;
+            if (warning)
+                warnings[node.field] ??= warning;
+        }
+        return warnings;
+    }
+    /** What would be found for these values, without publishing them or touching the form. */
+    function withValues(values, find) {
+        const previous = state;
+        state = { ...state, values };
+        try {
+            return find();
+        }
+        finally {
+            state = previous;
+        }
     }
     /** Errors for the visible fields under `root`, without publishing them. */
     function collectErrors(root) {
@@ -116,7 +283,7 @@ export function createForm(options) {
             if (errors[name])
                 continue;
             const def = page.fields[name];
-            const message = checkValue(def, state.values[name], nodeState(node.id).required, messages);
+            const message = nodeError(node);
             if (message)
                 errors[name] = message;
             if (def.type === 'one2many') {
@@ -126,25 +293,74 @@ export function createForm(options) {
                     for (const [sub, subDef] of Object.entries(def.fields)) {
                         if (kind && sub !== def.lineKinds?.text)
                             continue;
-                        const lineMessage = checkValue(subDef, line.values[sub], subDef.required === true, messages);
+                        const lineMessage = checkValue(subDef, line.values[sub], subDef.required === true, messages, today());
                         if (lineMessage)
                             errors[`${name}.${line.key}.${sub}`] = lineMessage;
                     }
                 }
             }
         }
+        // A saved form placed here answers for its fields by its own page's rules.
+        for (const node of visibleFieldNodes(root, 'form')) {
+            const part = attached.get(node.id);
+            if (part)
+                for (const [key, message] of Object.entries(part.inner.errorsNow()))
+                    errors[`${part.name}.${key}`] = message;
+        }
         return errors;
     }
-    function writeValues(values, extra = {}) {
+    /**
+     * Answers changed from outside a saved form — loaded, put back, set — handed
+     * to it, and what it holds after taken back: its defaults and worked-out
+     * values filled in. A new starting point (`start`) is handed to each.
+     */
+    function syncParts(values, how) {
+        let out = values;
+        for (const part of attached.values()) {
+            if (how !== 'start' && out[part.name] === part.inner.form.getState().values)
+                continue;
+            syncing = true;
+            try {
+                part.inner.take(isRecord(out[part.name]) ? out[part.name] : {}, how);
+            }
+            finally {
+                syncing = false;
+            }
+            out = { ...out, [part.name]: asValue(part.inner.form.getState().values) };
+        }
+        return out;
+    }
+    /**
+     * Values as they settle after a change: worked out, then set where a
+     * condition started to hold, then worked out again from what was set — a
+     * few rounds at most, so rules that set each other cannot run forever.
+     */
+    function settle(written) {
+        let values = computed.apply(written);
+        for (let round = 0; round < 8; round++) {
+            const result = setWhen.apply(values, holding);
+            holding = result.holding;
+            if (result.values === values)
+                break;
+            values = computed.apply(result.values);
+        }
+        return values;
+    }
+    /** Values to start again from, as loaded or restored: conditions holding in them hold already, and set nothing. */
+    function startFrom(values) {
+        const worked = computed.apply(values);
+        holding = setWhen.holding(worked);
+        return worked;
+    }
+    /** Write values someone or something changed. `fresh` values are a starting point instead (a restored draft). */
+    function writeValues(written, extra = {}, fresh = false) {
+        const values = syncParts(fresh ? startFrom(written) : settle(written), fresh ? 'fresh' : 'edit');
         const errors = Object.keys(state.errors).length ? revalidateShown(values) : state.errors;
-        set({ values, dirty: dirtyFields(values), errors, ...extra });
+        set({ values, dirty: dirtyFields(values), errors, warnings: withValues(values, collectWarnings), ...extra });
     }
     /** Once errors are on screen, keep them current as the person fixes things. */
     function revalidateShown(values) {
-        const previous = state;
-        state = { ...state, values };
-        const fresh = collectErrors(state.step ?? undefined);
-        state = previous;
+        const fresh = withValues(values, () => collectErrors(state.step ?? undefined));
         const kept = {};
         for (const key of Object.keys(state.errors))
             if (fresh[key])
@@ -190,7 +406,7 @@ export function createForm(options) {
             return;
         }
         if (drafts.restore === 'auto')
-            writeValues({ ...state.values, ...draft.values }, { draft: null });
+            writeValues({ ...state.values, ...draft.values }, { draft: null }, true);
         else
             set({ draft: { savedAt: draft.savedAt } });
     }
@@ -230,10 +446,10 @@ export function createForm(options) {
         // included; a stored one sends only what changed since it was loaded.
         const creating = state.recordId === null || state.recordId === undefined;
         const names = creating
-            ? Object.keys(page.fields).filter((name) => state.dirty.includes(name) || !isEmpty(page.fields[name], state.values[name]))
+            ? Object.keys(fields).filter((name) => state.dirty.includes(name) || !isEmpty(fields[name], state.values[name]))
             : state.dirty;
         for (const name of names) {
-            const def = page.fields[name];
+            const def = fields[name];
             const now = state.values[name];
             const before = creating ? emptyValue(def) : baseline[name];
             if (def.type === 'one2many')
@@ -252,13 +468,38 @@ export function createForm(options) {
             const name = node.field;
             shown[name] = structuredCopy(state.values[name]);
         }
+        // And each saved form shown, by its page: one not found shows nothing to answer.
+        for (const node of visibleFieldNodes(undefined, 'form')) {
+            const part = attached.get(node.id);
+            if (part)
+                shown[part.name] = structuredCopy(state.values[part.name]);
+        }
         return shown;
     }
-    async function save() {
+    async function save(chain = []) {
+        return (await saving(chain)) === null;
+    }
+    /**
+     * Save, or send: null once done, or why not. The page's `beforeSave` steps
+     * run first — before its own check, so they may fill in what it asks for —
+     * and a stop keeps it unsaved; `afterSave` runs once it is saved.
+     */
+    async function saving(chain) {
+        if (page.on?.beforeSave) {
+            const before = await moment('on.beforeSave', page.on.beforeSave, chain, false);
+            if (!before.done) {
+                // A check's problems, or an inner save's, are shown already; any other stop is this save's problem.
+                if (before.reason !== 'check' && before.reason !== 'save') {
+                    const problem = { kind: 'stopped', reason: before.reason, message: before.message ?? '' };
+                    set({ status: 'error', error: problem.message || null, saveProblem: problem });
+                }
+                return { reason: 'save', ...(before.message !== undefined ? { message: before.message } : {}) };
+            }
+        }
         const errors = collectErrors();
         if (Object.keys(errors).length) {
             set({ errors });
-            return false;
+            return { reason: 'save', message: Object.values(errors)[0] };
         }
         const source = options.dataSource;
         serverErrors = {};
@@ -267,34 +508,99 @@ export function createForm(options) {
             if (page.data.kind === 'responses') {
                 if (!source?.submit)
                     throw new Error('This page has no data source to send its answers to');
-                await source.submit({ pageId: page.id, values: shownValues() });
+                const sent = shownValues();
+                await source.submit({ pageId: page.id, values: sent });
                 forgetDraft();
                 set({ status: 'saved' });
-                return true;
+                emit('send', { values: sent });
+                void track(moment('on.afterSave', page.on?.afterSave, chain, false));
+                return null;
             }
             if (!source?.save)
                 throw new Error('This page has no data source to save to');
             const result = await source.save({
                 model: page.data.model,
                 id: state.recordId,
-                fields: page.fields,
+                fields,
                 changes: changes(),
                 values: structuredCopy(state.values),
             });
             forgetDraft();
-            const values = result.values ? { ...state.values, ...result.values } : state.values;
+            const values = syncParts(startFrom(result.values ? { ...state.values, ...result.values } : state.values), 'start');
             baseline = structuredCopy(values);
-            set({ status: 'saved', recordId: result.id, values, dirty: [] });
-            return true;
+            set({ status: 'saved', recordId: result.id, values, dirty: [], warnings: withValues(values, collectWarnings) });
+            emit('save', { recordId: state.recordId, values: state.values });
+            void track(moment('on.afterSave', page.on?.afterSave, chain, false));
+            return null;
         }
         catch (error) {
             const problem = saveProblemOf(error);
             const fields = problem.kind === 'fields' ? problem.fields ?? {} : {};
             serverErrors = Object.fromEntries(Object.entries(fields).map(([name, message]) => [name, { message, value: JSON.stringify(state.values[name] ?? null) }]));
             set({ status: 'error', error: problem.message, saveProblem: problem, errors: { ...fields } });
-            return false;
+            return { reason: 'save', message: problem.message };
         }
     }
+    /** The form has its values: told to the app, its `open` steps run, then the wizard step it shows is told. */
+    async function opening() {
+        emit('open', { recordId: state.recordId, values: state.values });
+        await moment('on.open', page.on?.open, [], true);
+        showing = true;
+        tellStep([]);
+    }
+    /** Write fields — a step's or the app's — worked out once, and tell each. */
+    function write(written, by) {
+        const names = Object.keys(written);
+        names.forEach(fieldDef);
+        if (!names.length)
+            return;
+        writeValues({ ...state.values, ...structuredCopy(written) });
+        for (const name of names)
+            afterEdit(name);
+        for (const name of names)
+            changed(name, by);
+    }
+    function addLine(field, values, by) {
+        const def = lineField(field);
+        const key = `new-${++lineKeys}`;
+        const current = state.values[field] ?? [];
+        const line = { key, values: { ...initialValues(def.fields, today()), ...structuredCopy(values) } };
+        // A new line comes last, so it is numbered after the last.
+        if (def.sequenceField && line.values[def.sequenceField] == null) {
+            const numbers = current.map((l) => l.values[def.sequenceField]).filter((n) => typeof n === 'number');
+            line.values[def.sequenceField] = numbers.length ? Math.max(...numbers) + 1 : 1;
+        }
+        const lines = [...current, line];
+        writeValues({ ...state.values, [field]: lines });
+        afterEdit(field);
+        changed(field, by);
+        return key;
+    }
+    /** Check the form, or only these fields, showing what is found as sending does. */
+    function check(names) {
+        names?.forEach(fieldDef);
+        const all = collectErrors();
+        const found = names ? Object.fromEntries(Object.entries(all).filter(([key]) => names.some((name) => key === name || key.startsWith(`${name}.`)))) : all;
+        set({ errors: found });
+        const first = Object.values(found)[0];
+        return first === undefined ? null : { reason: 'check', message: first };
+    }
+    /** Go to a wizard's step for a run; undefined when the target is no step of it, but a tab. */
+    function goToStep(target, chain) {
+        if (!steps.includes(target))
+            return undefined;
+        if (!form.steps().includes(target))
+            return { reason: 'cannot', message: `The step "${target}" does not apply now` };
+        let went = false;
+        inRun(chain, () => (went = form.goTo(target)));
+        return went ? null : { reason: 'check', message: Object.values(state.errors)[0] };
+    }
+    /** Run steps from the top — a button's, a moment's, the app's — and tell how it ended. */
+    async function runTop(list, scope) {
+        const result = await runner.runSteps(list, scope);
+        emit('run', { id: scope.id, steps: list, result });
+        return result;
+    }
     /** The model a link field's new record belongs to, or null when it cannot make one. */
     function creatable(def) {
         if (!options.dataSource?.create || !def || def.readonly)
@@ -350,15 +656,35 @@ export function createForm(options) {
         }
         set({ status: 'loading', error: null });
         try {
-            const loaded = await source.load({ model: page.data.model, id: state.recordId, fields: page.fields });
-            baseline = { ...initialValues(page.fields), ...loaded };
-            set({ status: 'ready', values: structuredCopy(baseline), dirty: [], errors: {} });
+            const loaded = await source.load({ model: page.data.model, id: state.recordId, fields });
+            baseline = syncParts(startFrom({ ...initialValues(fields, today()), ...loaded }), 'start');
+            set({ status: 'ready', values: structuredCopy(baseline), dirty: [], errors: {}, warnings: withValues(baseline, collectWarnings) });
             offerDraft();
+            void track(opening());
         }
         catch (error) {
             set({ status: 'error', error: error.message });
         }
     }
+    const runner = createRunner({
+        fields,
+        values: () => state.values,
+        recordId: () => state.recordId,
+        reading,
+        today,
+        write: (values) => write(values, 'step'),
+        addLine: (field, values) => void addLine(field, values, 'step'),
+        check,
+        save: saving,
+        reset: () => form.reset(),
+        goTo: goToStep,
+        showing: inRun,
+        host: options.host,
+        confirm: options.confirm,
+        onAction: options.onAction,
+        answered: (request, result) => emit('action', { request, result }),
+    });
+    const moment = createMoments((key, list, chain) => runTop(list, { id: key, chain }));
     const form = {
         page,
         getState: () => state,
@@ -367,20 +693,26 @@ export function createForm(options) {
             return () => listeners.delete(listener);
         },
         load: () => track(load()),
-        setValue(name, value) {
+        setValue(name, value, how) {
             fieldDef(name);
             writeValues({ ...state.values, [name]: structuredCopy(value) });
             afterEdit(name);
+            changed(name, how?.by ?? 'person');
         },
+        setValues: (values) => write(values, 'app'),
         node: nodeState,
-        fieldReadonly: (name) => fieldDef(name).readonly === true,
+        fieldReadonly: (name) => lockedField(fieldDef(name)),
+        loadChoices,
         problem(name) {
-            const def = fieldDef(name);
+            fieldDef(name);
             // Only a field someone can see is asked anything, and required wherever it is shown so.
             const shown = visibleFieldNodes().filter((node) => node.field === name);
             if (!shown.length)
                 return null;
-            return checkValue(def, state.values[name], shown.some((node) => nodeState(node.id).required), messages) ?? null;
+            const own = shown.map(unticked).find(Boolean) ??
+                shown.map((node) => checkInput(page.fields[name], node.source, state.values[name], messages)).find(Boolean) ??
+                checkValue(checked(name), state.values[name], shown.some((node) => nodeState(node.id).required), messages, today());
+            return own ?? shown.map((node) => ruleCheck(node).error).find((error) => error !== undefined) ?? null;
         },
         validate() {
             const errors = collectErrors();
@@ -391,24 +723,12 @@ export function createForm(options) {
         reset() {
             forgetDraft();
             serverErrors = {};
-            set({ values: structuredCopy(baseline), dirty: [], errors: {}, warning: null, warningField: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null });
+            holding = setWhen.holding(baseline);
+            const values = syncParts(structuredCopy(baseline), 'start');
+            set({ values, dirty: [], errors: {}, warnings: withValues(values, collectWarnings), warning: null, warningField: null, draft: null, step: steps[0] ?? null, skipped: [], saveProblem: null });
         },
         changes,
-        addLine(field, values = {}) {
-            const def = lineField(field);
-            const key = `new-${++lineKeys}`;
-            const current = state.values[field] ?? [];
-            const line = { key, values: { ...initialValues(def.fields), ...structuredCopy(values) } };
-            // A new line comes last, so it is numbered after the last.
-            if (def.sequenceField && line.values[def.sequenceField] == null) {
-                const numbers = current.map((l) => l.values[def.sequenceField]).filter((n) => typeof n === 'number');
-                line.values[def.sequenceField] = numbers.length ? Math.max(...numbers) + 1 : 1;
-            }
-            const lines = [...current, line];
-            writeValues({ ...state.values, [field]: lines });
-            afterEdit(field);
-            return key;
-        },
+        addLine: (field, values = {}) => addLine(field, values, 'person'),
         updateLine(field, key, name, value) {
             const def = lineField(field);
             if (!def.fields[name])
@@ -416,6 +736,7 @@ export function createForm(options) {
             const lines = (state.values[field] ?? []).map((line) => line.key === key ? { ...line, values: { ...line.values, [name]: structuredCopy(value) } } : line);
             writeValues({ ...state.values, [field]: lines });
             afterEdit(field);
+            changed(field, 'person');
         },
         moveLine(field, key, to) {
             const def = lineField(field);
@@ -445,12 +766,14 @@ export function createForm(options) {
             });
             writeValues({ ...state.values, [field]: renumbered });
             afterEdit(field);
+            changed(field, 'person');
         },
         removeLine(field, key) {
             lineField(field);
             const lines = (state.values[field] ?? []).filter((line) => line.key !== key);
             writeValues({ ...state.values, [field]: lines });
             afterEdit(field);
+            changed(field, 'person');
         },
         async search(field, query, limit = 8, options = {}) {
             return runSearch(fieldDef(field), field, context(), query, limit, options.model);
@@ -461,14 +784,14 @@ export function createForm(options) {
             const line = lines.find((l) => l.key === key);
             if (!line)
                 throw new Error(`"${field}" has no line "${key}"`);
-            const merged = { ...line.values, ...values };
+            const merged = computed.line(field, { ...line.values, ...values });
             const source = options.dataSource;
             if (!source?.onchange || page.data.kind !== 'record')
                 return merged;
             const changed = lines.map((l) => (l.key === key ? { ...l, values: merged } : l));
             const result = await source.onchange({ model: page.data.model, id: state.recordId, changed: field, values: structuredCopy({ ...state.values, [field]: changed }) });
             const after = (result.values?.[field] ?? []).find((l) => l.key === key);
-            return after ? { ...merged, ...after.values } : merged;
+            return after ? computed.line(field, { ...merged, ...after.values }) : merged;
         },
         async searchLine(field, key, subfield, query, limit = 8) {
             const def = lineField(field);
@@ -556,23 +879,43 @@ export function createForm(options) {
             if (!node || (node.kind !== 'button' && node.kind !== 'stat'))
                 throw new Error(`The page has no button "${id}"`);
             if (nodeState(id).invisible)
-                return;
+                return { done: false, reason: 'cannot', message: `The button "${id}" is hidden` };
             const source = node.source;
-            await track(Promise.resolve(options.onAction?.({
-                id,
-                action: source.action,
-                ...('params' in source && source.params ? { params: source.params } : {}),
-                recordId: state.recordId,
-                values: structuredCopy(state.values),
-                ...(chosen ? { recordIds: [...chosen.recordIds] } : {}),
-            })));
+            // Its steps, then its app action as a final call.
+            const list = [...(source.steps ?? [])];
+            if (source.action !== undefined)
+                list.push({ do: 'call', action: source.action, ...('params' in source && source.params ? { params: source.params } : {}) });
+            const scope = { id, chain: [], ...(chosen ? { recordIds: [...chosen.recordIds] } : {}) };
+            const confirm = 'confirm' in source ? source.confirm : undefined;
+            return track((async () => {
+                if (confirm && !(await runner.ask(confirm))) {
+                    const result = { done: false, reason: 'no', message: confirm };
+                    emit('run', { id, steps: list, result });
+                    return result;
+                }
+                return runTop(list, scope);
+            })());
+        },
+        run: (list, context = {}) => track(runTop(list, { id: context.id ?? 'run', chain: [], ...(context.recordIds ? { recordIds: [...context.recordIds] } : {}) })),
+        shown(tab) {
+            // A wizard's steps are told by the form itself, as they are entered.
+            if (steps.includes(tab))
+                return;
+            void track(moment(`on.show.${tab}`, page.on?.show?.[tab], entering, true));
+        },
+        on(event, listener) {
+            let heard = events.get(event);
+            if (!heard)
+                events.set(event, (heard = new Set()));
+            heard.add(listener);
+            return () => void heard.delete(listener);
         },
         restoreDraft() {
             const raw = options.drafts?.store.getItem(draftKey());
             if (!raw)
                 return;
             const draft = JSON.parse(raw);
-            writeValues({ ...state.values, ...draft.values }, { draft: null });
+            writeValues({ ...state.values, ...draft.values }, { draft: null }, true);
         },
         discardDraft() {
             forgetDraft();
@@ -582,17 +925,96 @@ export function createForm(options) {
             while (pending.size)
                 await Promise.allSettled([...pending]);
         },
+        embed(id, inner) {
+            const known = attached.get(id);
+            if (known)
+                return known.inner.form;
+            const part = parts.get(id);
+            if (!part)
+                throw new Error(`"${id}" is not a saved form placed on this page`);
+            const chain = [...within, page.id];
+            if (chain.includes(inner.id))
+                throw new Error(`a page cannot be placed inside itself: ${[...chain.slice(chain.indexOf(inner.id)), inner.id].join(' → ')}`);
+            const given = state.values[part.name];
+            // A record of no model of its own: its links search and its lists load, but it never loads, saves, sends or recalculates alone.
+            const made = innerForm({
+                page: { ...inner, data: { kind: 'responses' } },
+                dataSource: options.dataSource,
+                values: isRecord(given) ? given : {},
+                onAction: options.onAction,
+                host: options.host,
+                confirm: options.confirm,
+                scheduler,
+                messages,
+                now: options.now,
+            }, chain);
+            attached.set(id, { name: part.name, inner: made });
+            // A change inside it is told as a change of its answers here, whoever made it.
+            made.form.on('change', ({ by }) => {
+                if (!syncing)
+                    changed(part.name, by);
+            });
+            // A change made inside it is a change of this form's: shown, kept in a draft, saved.
+            made.form.subscribe((inside) => {
+                if (syncing || inside.values === state.values[part.name])
+                    return;
+                writeValues({ ...state.values, [part.name]: asValue(inside.values) });
+                afterEdit(part.name);
+            });
+            // What it starts with, its defaults and worked-out values filled in, is this form's starting point too — unless changed already.
+            const start = asValue(made.form.getState().values);
+            if (!state.dirty.includes(part.name))
+                baseline = { ...baseline, [part.name]: start };
+            const values = { ...state.values, [part.name]: start };
+            set({ values, dirty: dirtyFields(values) });
+            return made.form;
+        },
+        embedded: (id) => attached.get(id)?.inner.form ?? null,
         dispose() {
             if (draftTimer !== null)
                 scheduler.clearTimeout(draftTimer);
             if (autosaveTimer !== null)
                 scheduler.clearTimeout(autosaveTimer);
             listeners.clear();
+            events.clear();
+            for (const part of attached.values())
+                part.inner.form.dispose();
         },
     };
+    // A record's starting values may already break a warning rule; nothing listens yet.
+    state = { ...state, warnings: collectWarnings() };
     if (state.recordId == null)
         offerDraft();
-    return form;
+    // A new form has its values now: it opens once whoever made it has had the chance to listen.
+    if (state.recordId == null)
+        void track(Promise.resolve().then(opening));
+    return {
+        form,
+        take(values, how) {
+            if (how !== 'start')
+                return writeValues({ ...initialValues(page.fields, today()), ...values }, {}, how === 'fresh');
+            baseline = startFrom({ ...initialValues(page.fields, today()), ...structuredCopy(values) });
+            const start = syncParts(structuredCopy(baseline), 'start');
+            set({ values: start, dirty: [], errors: {}, warnings: withValues(start, collectWarnings), warning: null, warningField: null });
+        },
+        errorsNow: () => collectErrors(),
+        show(errors) {
+            if (JSON.stringify(errors) !== JSON.stringify(state.errors))
+                set({ errors });
+        },
+    };
+}
+/** The problems found inside a saved form, by its own fields' names. */
+function inside(errors, name) {
+    const found = {};
+    for (const [key, message] of Object.entries(errors))
+        if (key.startsWith(`${name}.`))
+            found[key.slice(name.length + 1)] = message;
+    return found;
+}
+/** A field no one types in: read-only by its definition, or worked out from others. */
+function lockedField(def) {
+    return def.readonly === true || def.compute !== undefined;
 }
 function lineOps(before, now) {
     const ops = [];
@@ -658,6 +1080,9 @@ function indexLayout(root) {
                 add(node, parent, 'other', { invisible: node.invisible, readonly: node.readonly });
                 walk(node.children, node.id);
             }
+            else if (node.type === 'form') {
+                add(node, parent, 'form', { invisible: node.invisible, readonly: node.readonly });
+            }
             else {
                 add(node, parent, 'other', { invisible: node.invisible });
             }