flexdesk 0.5.0 → 0.6.1

package/src/flow/kit/references.js

@@ -0,0 +1,199 @@
+/**
+ * REFERENCE SYNTAXES — what a chip is recognised as, supplied by the consumer
+ * (36 §3.6).
+ *
+ * A syntax is a RECOGNISER FOR DRAWING, not a grammar. Which references are
+ * valid, and what one means, is the consumer's server's to say; a reference
+ * it would refuse still draws as a chip (toned `known: false` by the
+ * consumer's `describe`) and is kept exactly as text.
+ *
+ *     syntax.find(text)          → [{start, end, text, path}]
+ *     syntax.format(path)        → the text that refers to `path`
+ *     syntax.rename(text, map)   → `text` with every reference to an old step
+ *                                  id in `map` pointed at its new id
+ *     syntax.describe(match, ctx) → {label, tone, known}   ← the consumer sets this
+ *
+ * Three ship ready-made: TEMPLATE (`${a.b[0]}`), FORMULA (`[a.b]`) and
+ * PARAMETER (`{{name}}`). They are plain objects on purpose: a consumer sets
+ * `describe` — and, for a syntax whose paths name steps, `stepSegment` — on
+ * the shared object, or makes its own with `createReferenceSyntax`.
+ *
+ * ══ WHICH SEGMENT NAMES A STEP ═════════════════════════════════════════
+ *
+ * `rename` rewrites only the segment that names a STEP, and only the consumer
+ * knows which one that is — in one grammar it is the segment after a scope
+ * word, in another the first. A syntax renames nothing until it is told:
+ * `stepScope: 'scope'` says "the segment after `scope`", and `stepSegment:
+ * (segments) => index` says anything else. Renaming every segment that happens
+ * to equal an old id would rename a column called like a step.
+ */
+
+const TEMPLATE_PATTERN = /\$\{([A-Za-z_][A-Za-z0-9_-]*(?:\.[A-Za-z0-9_-]+|\[\d+\]|\["[^"\\]*"\])*)\}/g;
+const FORMULA_PATTERN = /\[([^[\]\n]+)\]/g;
+const PARAMETER_PATTERN = /\{\{([A-Za-z_][A-Za-z0-9_]*)\}\}/g;
+
+/**
+ * A path's segments, as `{text, start, end}` over the path: `a.b[0]["c.d"]` →
+ * `a`, `b`, `[0]`, `["c.d"]`. A dot inside brackets or quotes does not split.
+ */
+export function pathSegments(path) {
+    const out = [];
+    let start = 0;
+    let depth = 0;
+    let quote = false;
+    const s = String(path);
+    const push = (end) => { if (end > start) out.push({ text: s.slice(start, end), start, end }); };
+    for (let i = 0; i < s.length; i += 1) {
+        const ch = s[i];
+        if (quote) {
+            if (ch === '\\') i += 1;
+            else if (ch === '"') quote = false;
+            continue;
+        }
+        if (ch === '"' && depth > 0) { quote = true; continue; }
+        if (ch === '[') {
+            if (depth === 0) { push(i); start = i; }
+            depth += 1;
+        } else if (ch === ']' && depth > 0) {
+            depth -= 1;
+            if (depth === 0) { push(i + 1); start = i + 1; }
+        } else if (ch === '.' && depth === 0) {
+            push(i);
+            start = i + 1;
+        }
+    }
+    push(s.length);
+    return out;
+}
+
+/**
+ * @param {object} o
+ * @param {string} o.name
+ * @param {RegExp} o.pattern      group 1 is the path; made global if it is not
+ * @param {(path: string) => string} o.format
+ * @param {(match: object, ctx: object) => {label?: string, tone?: string, known?: boolean}} [o.describe]
+ * @param {string|string[]} [o.stepScope]   the segment after this word names a step
+ * @param {(segments: string[]) => number} [o.stepSegment]  which segment names a step, or -1
+ * @param {string} [o.tone]   its chips' tone when `describe` gives none — two syntaxes in one
+ *                            field are two tones
+ */
+export function createReferenceSyntax({ name, pattern, format, describe = null, stepScope = null,
+                                        stepSegment = null, tone = 'blue' }) {
+    if (!(pattern instanceof RegExp)) throw new Error(`Reference syntax "${name}" needs a RegExp pattern.`);
+    if (typeof format !== 'function') throw new Error(`Reference syntax "${name}" needs a format(path) function.`);
+    const flags = pattern.flags.includes('g') ? pattern.flags : `${pattern.flags}g`;
+    const syntax = {
+        name: String(name),
+        pattern: new RegExp(pattern.source, flags),
+        format,
+        describe,
+        tone,
+        stepScope,
+        stepSegment,
+
+        find(text) {
+            const out = [];
+            if (typeof text !== 'string' || !text) return out;
+            const re = new RegExp(syntax.pattern.source, syntax.pattern.flags);
+            let m;
+            while ((m = re.exec(text)) !== null) {
+                if (m[0] === '') { re.lastIndex += 1; continue; }
+                out.push({ start: m.index, end: m.index + m[0].length, text: m[0], path: m[1] ?? m[0] });
+            }
+            return out;
+        },
+
+        /** The index of the segment of `path` that names a step, or -1. */
+        stepIndex(path) {
+            const segs = pathSegments(path).map((s) => s.text);
+            if (typeof syntax.stepSegment === 'function') {
+                const i = syntax.stepSegment(segs);
+                return Number.isInteger(i) && i >= 0 && i < segs.length ? i : -1;
+            }
+            const scopes = [].concat(syntax.stepScope ?? []);
+            if (!scopes.length) return -1;
+            return scopes.includes(segs[0]) && segs.length > 1 ? 1 : -1;
+        },
+
+        rename(text, map) {
+            if (typeof text !== 'string' || !map) return text;
+            const lookup = map instanceof Map ? map : new Map(Object.entries(map));
+            if (!lookup.size) return text;
+            const matches = syntax.find(text);
+            if (!matches.length) return text;
+            let out = '';
+            let at = 0;
+            for (const m of matches) {
+                const i = syntax.stepIndex(m.path);
+                if (i < 0) continue;
+                const seg = pathSegments(m.path)[i];
+                if (!lookup.has(seg.text)) continue;
+                const path = m.path.slice(0, seg.start) + lookup.get(seg.text) + m.path.slice(seg.end);
+                out += text.slice(at, m.start) + syntax.format(path);
+                at = m.end;
+            }
+            return out + text.slice(at);
+        },
+    };
+    return syntax;
+}
+
+export const TEMPLATE_REFERENCES = createReferenceSyntax({
+    name: 'template', pattern: TEMPLATE_PATTERN, format: (path) => `\${${path}}`,
+});
+export const FORMULA_REFERENCES = createReferenceSyntax({
+    name: 'formula', pattern: FORMULA_PATTERN, format: (path) => `[${path}]`,
+});
+export const PARAMETER_REFERENCES = createReferenceSyntax({
+    name: 'parameter', pattern: PARAMETER_PATTERN, format: (name) => `{{${name}}}`, tone: 'violet',
+});
+
+/**
+ * Every reference of every syntax in `text`, as non-overlapping spans in text
+ * order, each carrying its `syntax`. Where two overlap, the one that starts
+ * first wins, then the longer, then the syntax listed first.
+ */
+export function findReferences(text, syntaxes = []) {
+    const all = [];
+    syntaxes.forEach((syntax, rank) => {
+        for (const m of syntax?.find?.(text) || []) all.push({ ...m, syntax, rank });
+    });
+    all.sort((a, b) => (a.start - b.start) || ((b.end - b.start) - (a.end - a.start)) || (a.rank - b.rank));
+    const out = [];
+    let end = -1;
+    for (const m of all) {
+        if (m.start < end) continue;
+        out.push({ start: m.start, end: m.end, text: m.text, path: m.path, syntax: m.syntax });
+        end = m.end;
+    }
+    return out;
+}
+
+/** `text` cut into `{text}` and `{ref}` parts, in order — what a chip input draws. */
+export function tokenize(text, syntaxes = []) {
+    const parts = [];
+    let at = 0;
+    for (const m of findReferences(text, syntaxes)) {
+        if (m.start > at) parts.push({ kind: 'text', text: text.slice(at, m.start) });
+        parts.push({ kind: 'ref', text: m.text, match: m });
+        at = m.end;
+    }
+    if (at < String(text ?? '').length) parts.push({ kind: 'text', text: text.slice(at) });
+    return parts;
+}
+
+/** How a chip reads: the syntax's `describe`, else the path, in the syntax's tone, known. */
+export function describeReference(match, ctx = {}) {
+    const d = typeof match?.syntax?.describe === 'function' ? match.syntax.describe(match, ctx) : null;
+    return {
+        label: d?.label ?? match?.path ?? match?.text ?? '',
+        tone: d?.tone ?? match?.syntax?.tone ?? null,
+        known: d?.known !== false,
+    };
+}
+
+/** Every syntax name in `names` that `references` (name → syntax) holds, as syntax objects. */
+export function resolveSyntaxes(names, references) {
+    const map = references instanceof Map ? references : new Map(Object.entries(references || {}));
+    return [].concat(names ?? []).map((n) => map.get(n)).filter(Boolean);
+}

package/src/flow/kit/settings_panel.js

@@ -0,0 +1,357 @@
+/**
+ * THE SETTINGS PANEL — one step's settings, or the flow's own (36 §3.4).
+ *
+ * The header is the type, the step's name, WHERE it is ("Inside Anything new?
+ * › Then"), its description and the line saying how later steps read it; under
+ * it, the step's fields, drawn from its schema by the widget registry, with
+ * the editor's synthetic fields (`extra`) among them and the consumer's own
+ * areas (`slots`) before and after.
+ *
+ * ══ TWO RULES IT KEEPS ══════════════════════════════════════════════════
+ *
+ * **A repaint puts focus back** on the rebuilt control of the same field —
+ * caret and selection where they were — or, when that field is gone, hands it
+ * to the editor (`onFocusLost`) to put on its surface. Never on `<body>`, where
+ * an editor's keys never arrive.
+ *
+ * **A repaint the reader did not ask for rebuilds no field.** Findings are
+ * applied to the fields in place (`setFindings`), and the consumer's slots are
+ * redrawn on their own (`repaintSlots`) — so a run overlay refreshed every
+ * second leaves a name being typed with its control, its caret and its own
+ * undo. Only `show()`, and a setting whose change reshapes the form (a reshape,
+ * or a key some field's `x-ui-when` reads), rebuild the fields.
+ *
+ * A refused control is disabled AND SAYS WHY beside it, on the screen — never
+ * only on a `title` nobody hovers.
+ */
+
+import { button, el, icon, toneClass } from './dom.js';
+import { createStrings, say } from './strings.js';
+import { fieldsFromSchema, visibleFields, whenKeys } from './settings_schema.js';
+import { renderField } from './widgets.js';
+import { matchFindingField } from './findings.js';
+import { openValuePicker } from './value_picker.js';
+import { ownsUndo } from './keys.js';
+
+const TITLE = 'data-twm-flow-title';
+
+/**
+ * @param {object} o
+ * @param {object} o.widgets                 `createWidgetRegistry()`'s
+ * @param {object} [o.references]            syntax name → syntax
+ * @param {object} [o.strings]
+ * @param {object} [o.services]              the consumer's bag, handed to every widget untouched
+ * @param {false|true|{reason: string}} [o.readOnly]
+ * @param {(stepId: string|null, key: string, value: any) => void} [o.onChange]
+ * @param {(stepId: string|null, label: string) => void} [o.onRename]   the title, typed
+ * @param {() => void} [o.onFocusLost]       a repaint took the focused control away
+ * @param {(q: {stepId, step, field, key}) => Promise<object[]|{groups, note}>} [o.values]
+ *        *Insert a value*'s groups for one field; absent, no field offers the picker
+ * @param {string} [o.valuesNote]            the picker's footer sentence
+ * @param {(step: object) => object[]|null} [o.columns]  a step's input columns (a data flow)
+ * @param {HTMLElement} [o.host]             appended here when given
+ */
+export function createSettingsPanel({ widgets, references = {}, strings = null, services = null, readOnly = false,
+                                      onChange = null, onRename = null, onFocusLost = null, values = null,
+                                      valuesNote = null, columns = null, host = null } = {}) {
+    if (!widgets?.get) throw new Error('createSettingsPanel needs a widget registry (createWidgetRegistry()).');
+    const S = createStrings(strings);
+    const root = el('section', 'twm-flow-panel');
+    root.setAttribute('role', 'region');
+    root.setAttribute('aria-label', say(S, 'settings'));
+    if (host) host.appendChild(root);
+
+    let ro = readOnly;
+    let spec = null;
+    let current = {};
+    let fields = [];          // the rendered fields, in order
+    let allFields = [];       // the schema's fields, before x-ui-when
+    let findings = [];
+    let findingsBox = null;
+    let slotBefore = null;
+    let slotAfter = null;
+    let destroyed = false;
+
+    const stepId = () => spec?.step?.id ?? null;
+    const isReadOnly = () => Boolean(ro);
+    const readOnlyReason = () => (ro && typeof ro === 'object' && ro.reason ? String(ro.reason) : '');
+
+    function pickerFor() {
+        if (!values) return null;
+        return async ({ anchor, insert, path, key }) => {
+            const answer = await values({ stepId: stepId(), step: spec?.step ?? null, field: path, key });
+            const groups = Array.isArray(answer) ? answer : (answer?.groups || []);
+            const note = Array.isArray(answer) ? valuesNote : (answer?.note ?? valuesNote);
+            if (destroyed || !anchor.isConnected) return;
+            openValuePicker({ anchor, groups, note, strings: S, onPick: (item) => insert(item.ref) });
+        };
+    }
+
+    function setValue(key, v, opts = {}) {
+        if (v === undefined) delete current[key]; else current[key] = v;
+        onChange?.(stepId(), key, v);
+        if (opts?.reshape || whenKeys(allFields).has(key)) repaint();
+    }
+
+    function fieldCtx() {
+        return {
+            widgets, referenceMap: references, strings: S, services, readOnly: isReadOnly(),
+            step: spec?.step ?? null, type: spec?.type ?? null, path: '',
+            openValuePicker: pickerFor(),
+            columns: columns ? () => columns(spec?.step ?? null) : () => null,
+            describeContext: { step: spec?.step ?? null, type: spec?.type ?? null, services },
+            set: setValue,
+        };
+    }
+
+    function paintHeader() {
+        const head = el('header', 'twm-flow-panel__head');
+        const chip = el('span', `twm-flow-panel__icon ${toneClass('twm-flow-panel__icon', spec.tone)}`);
+        chip.appendChild(icon(spec.icon || ''));
+        chip.setAttribute('aria-hidden', 'true');
+        const titles = el('div', 'twm-flow-panel__titles');
+        if (spec.typeLabel) titles.appendChild(el('span', 'twm-flow-panel__type', spec.typeLabel));
+        if (spec.rename && spec.step) {
+            const input = el('input', 'twm-flow-panel__title-input');
+            input.type = 'text';
+            input.value = spec.title ?? '';
+            input.placeholder = spec.placeholderTitle ?? spec.typeLabel ?? '';
+            input.setAttribute('aria-label', say(S, 'rename'));
+            input.setAttribute(TITLE, '');
+            input.readOnly = isReadOnly();
+            input.addEventListener('input', () => {
+                // What was typed is the title now: a repaint the reader asks for
+                // next (a reshape) must not draw the old one back.
+                spec.title = input.value;
+                onRename?.(stepId(), input.value);
+            });
+            titles.appendChild(input);
+        } else {
+            titles.appendChild(el('h3', 'twm-flow-panel__title', spec.title ?? ''));
+        }
+        if (spec.where) titles.appendChild(el('span', 'twm-flow-panel__where', spec.where));
+        head.append(chip, titles);
+        const acts = Array.isArray(spec.actions) ? spec.actions : [];
+        if (acts.length) {
+            const box = el('div', 'twm-flow-panel__actions');
+            for (const a of acts) {
+                const refusal = isReadOnly() ? (readOnlyReason() || say(S, 'readOnly')) : (a.disabled ? a.reason || '' : '');
+                const b = button({ label: a.label, icon: a.icon || null, danger: Boolean(a.danger),
+                                   primary: Boolean(a.primary), className: 'twm-flow-panel__action',
+                                   onClick: () => { if (!b.disabled) a.run?.(); } });
+                b.dataset.action = a.id ?? '';
+                b.disabled = Boolean(isReadOnly() || a.disabled);
+                const wrap = el('span', 'twm-flow-panel__action-wrap');
+                wrap.appendChild(b);
+                if (b.disabled && refusal && !isReadOnly()) wrap.appendChild(el('span', 'twm-flow-panel__refusal', refusal));
+                box.appendChild(wrap);
+            }
+            head.appendChild(box);
+        }
+        return head;
+    }
+
+    function paintSlots() {
+        for (const [box, name] of [[slotBefore, 'before'], [slotAfter, 'after']]) {
+            if (!box) continue;
+            box.replaceChildren();
+            const fn = spec?.slots?.[name];
+            if (typeof fn === 'function') fn(box);
+            box.hidden = box.childNodes.length === 0;
+        }
+    }
+
+    function paint() {
+        for (const f of fields) f.destroy?.();
+        fields = [];
+        root.replaceChildren();
+        if (!spec) return;
+        if (isReadOnly() && readOnlyReason()) root.appendChild(el('p', 'twm-flow-panel__readonly', readOnlyReason()));
+        root.appendChild(paintHeader());
+        if (spec.description) root.appendChild(el('p', 'twm-flow-panel__description', spec.description));
+        if (spec.idLine) root.appendChild(el('div', 'twm-flow-panel__id', spec.idLine));
+        findingsBox = el('ul', 'twm-flow-panel__findings');
+        findingsBox.hidden = true;
+        root.appendChild(findingsBox);
+        slotBefore = el('div', 'twm-flow-panel__slot');
+        slotBefore.dataset.slot = 'before';
+        root.appendChild(slotBefore);
+
+        const list = el('div', 'twm-flow-panel__fields');
+        allFields = Array.isArray(spec.fields) ? spec.fields : fieldsFromSchema(spec.type?.config_schema);
+        const drawn = visibleFields(allFields, current);
+        const extra = Array.isArray(spec.extra) ? spec.extra : [];
+        const placed = (e) => e.after ?? e.before ?? null;
+        const extrasAt = (key, where) => extra.filter((e) => (where === 'after' ? e.after === key : e.before === key));
+        const drawExtra = (e) => {
+            if (e.note !== undefined) {
+                list.appendChild(el('p', `twm-flow-panel__note${e.tone ? ` twm-flow-panel__note--${e.tone === 'warning' ? 'warning' : 'info'}` : ''}`, e.note));
+                return;
+            }
+            const f = renderField({ key: e.key, spec: e.spec || {}, required: Boolean(e.required) }, e.value, {
+                ...fieldCtx(),
+                set: (_k, v, opts) => {
+                    e.set?.(v, opts);
+                    if (opts?.reshape) repaint();
+                },
+            });
+            f.el.dataset.extra = '';
+            fields.push(f);
+            list.appendChild(f.el);
+        };
+        for (const e of extra.filter((x) => x.at === 'start')) drawExtra(e);
+        for (const f of drawn) {
+            for (const e of extrasAt(f.key, 'before')) drawExtra(e);
+            const field = renderField(f, current[f.key], fieldCtx());
+            fields.push(field);
+            list.appendChild(field.el);
+            for (const e of extrasAt(f.key, 'after')) drawExtra(e);
+        }
+        const keys = new Set(drawn.map((f) => f.key));
+        for (const e of extra) {
+            if (e.at === 'start') continue;
+            const anchor = placed(e);
+            if (anchor === null || !keys.has(anchor)) drawExtra(e);
+        }
+        root.appendChild(list);
+        slotAfter = el('div', 'twm-flow-panel__slot');
+        slotAfter.dataset.slot = 'after';
+        root.appendChild(slotAfter);
+        paintSlots();
+        applyFindings();
+    }
+
+    /** Where focus is in the panel, so a repaint can put it back. */
+    function heldFocus() {
+        const active = root.ownerDocument.activeElement;
+        if (!active || active === root || !root.contains(active)) return null;
+        if (active.hasAttribute?.(TITLE)) {
+            return { title: true, caret: { start: active.selectionStart, end: active.selectionEnd } };
+        }
+        const path = active.closest('[data-field]')?.dataset.field ?? null;
+        const field = path ? fields.map((f) => f.fieldAt(path)).find(Boolean) : null;
+        let caret = field?.caret?.() ?? null;
+        if (!caret && ownsUndo(active) && active.matches?.('input, textarea')) {
+            try {
+                if (Number.isInteger(active.selectionStart)) {
+                    caret = { start: active.selectionStart, end: active.selectionEnd, direction: active.selectionDirection };
+                }
+            } catch { /* a type without a caret */ }
+        }
+        return { path, caret, tag: active.tagName };
+    }
+
+    function restoreFocus(held) {
+        if (!held || destroyed || !root.isConnected) return;
+        if (held.title) {
+            const t = root.querySelector(`[${TITLE}]`);
+            if (t) {
+                t.focus({ preventScroll: true });
+                try { t.setSelectionRange(held.caret.start, held.caret.end); } catch { /* no caret */ }
+                return;
+            }
+        }
+        const field = held.path ? fields.map((f) => f.fieldAt(held.path)).find(Boolean) : null;
+        if (field && field.focus()) {
+            if (held.caret) {
+                if (field.control?.restoreCaret) field.restoreCaret(held.caret);
+                else {
+                    const box = root.ownerDocument.activeElement;
+                    try {
+                        const end = box.value.length;
+                        box.setSelectionRange(Math.min(held.caret.start, end), Math.min(held.caret.end, end),
+                                              held.caret.direction || 'none');
+                    } catch { /* no caret */ }
+                }
+            }
+            return;
+        }
+        onFocusLost?.();
+    }
+
+    function repaint() {
+        const held = heldFocus();
+        paint();
+        restoreFocus(held);
+    }
+
+    function applyFindings() {
+        if (!spec || !findingsBox) return;
+        const mine = findings.filter((f) => (f.node_id ?? null) === stepId());
+        const paths = fields.flatMap((f) => f.paths());
+        const byPath = new Map();
+        const loose = [];
+        for (const f of mine) {
+            const hit = matchFindingField(paths, f.field);
+            if (hit) {
+                if (!byPath.has(hit)) byPath.set(hit, []);
+                byPath.get(hit).push(f);
+            } else loose.push(f);
+        }
+        for (const field of fields) {
+            for (const p of field.paths()) {
+                const target = field.fieldAt(p);
+                const list = byPath.get(p) || [];
+                const errors = list.filter((f) => f.severity !== 'warning');
+                target.setError(list.map((f) => f.message).join(' '), errors.length ? 'error' : 'warning');
+            }
+        }
+        findingsBox.replaceChildren();
+        for (const f of loose) {
+            const li = el('li', `twm-flow-panel__finding${f.severity === 'warning' ? ' twm-flow-panel__finding--warning' : ''}`);
+            li.append(icon(f.severity === 'warning' ? 'warning' : 'error', 'twm-flow-panel__finding-icon'),
+                      el('span', 'twm-flow-panel__finding-text', String(f.message ?? '')));
+            findingsBox.appendChild(li);
+        }
+        findingsBox.hidden = loose.length === 0;
+    }
+
+    return {
+        el: root,
+        /** Draw a step's (or, with no `step`, the flow's) settings. */
+        show(next) {
+            const sameStep = spec && next && (spec.step?.id ?? null) === (next.step?.id ?? null);
+            const held = heldFocus();
+            spec = { ...next };
+            current = { ...(next.value ?? next.step?.config ?? {}) };
+            paint();
+            if (held && sameStep) restoreFocus(held);
+            else if (held) onFocusLost?.();
+        },
+        /** Empty the panel. */
+        clear() {
+            const held = heldFocus();
+            spec = null;
+            current = {};
+            paint();
+            if (held) onFocusLost?.();
+        },
+        get stepId() { return stepId(); },
+        get value() { return { ...current }; },
+        setFindings(list) {
+            findings = Array.isArray(list) ? list.filter((f) => f && typeof f === 'object')
+                : [...(list?.errors || []), ...(list?.warnings || [])];
+            applyFindings();
+        },
+        /** Focus the field a finding's `field` names (the longest prefix); false when none. */
+        focusField(path) {
+            const hit = matchFindingField(fields.flatMap((f) => f.paths()), path);
+            const field = hit ? fields.map((f) => f.fieldAt(hit)).find(Boolean) : null;
+            if (!field) return false;
+            field.el.scrollIntoView?.({ block: 'nearest' });
+            return field.focus();
+        },
+        /** Redraw the consumer's slots only — no field is rebuilt. */
+        repaintSlots() { paintSlots(); },
+        setReadOnly(next) {
+            ro = next;
+            repaint();
+        },
+        destroy() {
+            destroyed = true;
+            for (const f of fields) f.destroy?.();
+            fields = [];
+            root.remove();
+        },
+    };
+}