@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/survey-editor.mjs

@@ -0,0 +1,647 @@
+import { createForm } from '@fieldia/core';
+import { createWidget, installStyles } from '@fieldia/widgets';
+import { branchMap, drawBranchMap } from './branch-map.mjs';
+import { canvasDrag } from './canvas-drag.mjs';
+import { designerBar, elementFactory, iconButton as makeIconButton, optionsEditor, putDownOnClickOutside } from './chrome.mjs';
+import { speakIn, widgetWords } from './chrome-language.mjs';
+import { conditionEditor } from './condition-editor.mjs';
+import { kindOfField, QUESTION_KINDS } from './designer.mjs';
+import { designerIcon } from './icons.mjs';
+import { kindById, kindName as nameOfKind } from './kinds.mjs';
+import { kindPreview } from './kind-previews.mjs';
+import { openMenu } from './menu.mjs';
+import { lookSheet } from './panel-look-sheet.mjs';
+import { clipboardKeys } from './clipboard-keys.mjs';
+import { shortcutKeys } from './shortcuts-sheet.mjs';
+import { rail as sideRail } from './rail.mjs';
+import { inlineSettings } from './inline-settings.mjs';
+import { cardRules } from './rules-card.mjs';
+import { ruleMarks } from './rules-marks.mjs';
+import { installDesignerStyles } from './styles.mjs';
+import { toolbox, toolboxGroups } from './toolbox.mjs';
+import { tryIt } from './try-it.mjs';
+import { translationsView } from './translations-view.mjs';
+import { jsonView } from './json-view.mjs';
+import { rulesOverview } from './rules-overview.mjs';
+import { startHere } from './templates-start.mjs';
+/** The kind a question was made as. The same as the designer's `kindOfField`, under the name it had first. */
+export const kindOfQuestion = kindOfField;
+/** The questions before one, on earlier pages and earlier on its own: the ones its condition may test. */
+function questionsBefore(page, id) {
+    const all = page.layout.children.flatMap((step) => step.children.filter((n) => n.type === 'field'));
+    const at = all.findIndex((n) => n.id === id);
+    return at === -1 ? all : all.slice(0, at);
+}
+const stepsOf = (page) => page.layout.children;
+/** The kinds whose dotted line says what goes there (`questions.preview`). */
+const PREVIEWED = new Set(['short-answer', 'paragraph', 'email', 'phone', 'website', 'number', 'amount', 'keywords', 'date', 'date-time', 'time']);
+/** A box whose line grows from the middle when it is typed in, the Google Forms way. */
+const lined = (el, input, extra = '') => el('span', { class: `fd-line ${extra}`.trim() }, input);
+export function mountSurveyEditor(host, options) {
+    const { designer } = options;
+    const doc = host.ownerDocument;
+    installStyles(doc);
+    installDesignerStyles(doc);
+    const el = elementFactory(doc);
+    const own = designer.words;
+    const w = own.questions;
+    const iconButton = (label, text, onClick, extra = '') => makeIconButton(el, label, text, onClick, extra);
+    const focused = (node) => doc.activeElement === node;
+    const skin = options.skin ?? 'outlined';
+    const root = el('div', { class: 'fd-form fd-designer fd-survey-designer', 'data-fd-skin': skin });
+    // The editor in its own language: the cards are its own, the form's words in them run their own way.
+    speakIn(root, host, designer, () => []);
+    /** The form's own words, typed in the cards: in their own direction, when the editor runs its language's way. */
+    const dataDirection = designer.locale ? { dir: 'auto' } : {};
+    const trial = tryIt({ el, doc, designer, skin, dataSource: options.dataSource, widgets: options.widgets, onChange: (trying) => (body.hidden = trying) });
+    /** Fieldia's kinds a survey asks, then the app's own. */
+    const kinds = [...QUESTION_KINDS, ...designer.appKinds()];
+    const bar = designerBar(root, designer, {
+        titleLabel: designer.words.bar.formTitle,
+        placeholder: designer.words.bar.untitledForm,
+        extra: [trial.toggle],
+        find: () => [...start.items(), ...findItems(), ...trial.items(), ...words.items(), ...ruleList.items(), ...json.items(), ...shortcuts.items()],
+        // A check about a question's words or options: its card is open by now, the cursor goes there.
+        goTo(id, part) {
+            const card = root.querySelector(`.fd-q[data-node="${id}"]`);
+            const target = card?.querySelector(part === 'label' ? '.fd-q-label' : '.fd-q-option input');
+            target?.focus();
+            target?.select();
+        },
+    });
+    const pages = el('div', { class: 'fd-designer-pages' });
+    const addPage = el('button', { type: 'button', class: 'fd-button' }, w.addPage);
+    addPage.addEventListener('click', () => {
+        const count = stepsOf(designer.getPage()).length;
+        designer.addContainer(own.defaults.page(count + 1));
+    });
+    // The card heading the form: its title and description, as people will see them.
+    const headTitle = el('input', { class: 'fd-survey-head-title', 'aria-label': w.formHeading, placeholder: own.bar.untitledForm, autocomplete: 'off', ...dataDirection });
+    headTitle.addEventListener('input', () => designer.setPageInfo({ title: headTitle.value }));
+    const headDescription = el('input', { class: 'fd-survey-head-description', 'aria-label': w.formDescription, placeholder: w.formDescription, autocomplete: 'off', ...dataDirection });
+    headDescription.addEventListener('input', () => designer.setPageInfo({ description: headDescription.value }));
+    const head = el('div', { class: 'fd-survey-head' }, lined(el, headTitle), lined(el, headDescription));
+    head.addEventListener('focusin', () => designer.getState().selected !== null && designer.select(null));
+    // Beside the card picked, following it down the page: a question after it, or a page.
+    const railQuestion = el('button', { type: 'button', class: 'fd-rail-button', 'aria-label': w.addQuestionAfter, title: w.addQuestion }, designerIcon(doc, 'plus'));
+    const railPage = el('button', { type: 'button', class: 'fd-rail-button', 'aria-label': w.addPageAfter, title: w.addPage }, designerIcon(doc, 'section'));
+    const rail = el('div', { class: 'fd-q-rail', role: 'toolbar', 'aria-label': w.add }, railQuestion, railPage);
+    railQuestion.addEventListener('click', () => add('short-answer', railTarget()));
+    railPage.addEventListener('click', addPageHere);
+    // Where answers lead: the pages on one line, those for some answers off it.
+    const mapScroll = el('div', { class: 'fd-branch-scroll' });
+    const map = el('details', { class: 'fd-branch-map', open: '', hidden: '' }, el('summary', { class: 'fd-branch-summary' }, w.whereAnswersLead), mapScroll);
+    let mapKey = '';
+    function drawMap(page, selected) {
+        const drawn = branchMap(page, designer.words);
+        map.hidden = drawn.nodes.length < 2;
+        const key = JSON.stringify([drawn, selected]);
+        if (map.hidden || key === mapKey)
+            return;
+        mapKey = key;
+        mapScroll.replaceChildren(drawBranchMap(doc, drawn, selected, (id) => {
+            designer.select(id);
+            stepViews.get(id)?.element.scrollIntoView?.({ block: 'nearest' });
+        }, designer.words));
+    }
+    // A blank survey: templates to start from.
+    const start = startHere({ el, doc, designer, root, survey: true, templates: options.templates, assistant: options.assistant ?? designer.assistant(), blankFocus: () => root.querySelector('.fd-add-question') });
+    const column = el('div', { class: 'fd-survey-column' }, head, start.element, map, pages, addPage, rail);
+    const editor = el('div', { class: 'fd-designer-editor fd-survey-canvas' }, column);
+    const tools = toolbox({
+        el,
+        doc,
+        kinds,
+        words: designer.words,
+        onPick: (spec) => add(spec.slice(spec.indexOf(':') + 1), target()),
+        onPress: (spec, event, tile) => drag.press({ tool: spec }, event, tile),
+    });
+    const side = sideRail({
+        el,
+        doc,
+        designer,
+        tools,
+        survey: true,
+        reveal: (id) => root.querySelector(`[data-node="${id}"]`)?.scrollIntoView?.({ block: 'nearest' }),
+    });
+    const body = el('div', { class: 'fd-designer-body fd-survey-body' }, side.element, editor);
+    const json = jsonView({ el, doc, designer, trial, body });
+    root.append(bar.element, bar.issues, body, trial.element, json.element);
+    const words = translationsView({ el, doc, designer, root, body, modes: trial.toggle });
+    const ruleList = rulesOverview({ el, doc, designer, root, body, modes: trial.toggle });
+    const clip = clipboardKeys({ root, designer, active: () => !trial.trying && !json.open });
+    const shortcuts = shortcutKeys({ el, root, survey: true, words: designer.words, active: () => !trial.trying && !json.open });
+    // The form's look: from the bar, in a sheet at the side; the cards wear it.
+    const look = lookSheet({ el, designer, root, bar: bar.element, wearer: editor });
+    // ---- find anything -----------------------------------------------------------
+    /** A kind to add, a question or a page to go to, a page to add. */
+    function findItems() {
+        const page = designer.getPage();
+        const steps = stepsOf(page);
+        const goTo = (id, selector) => {
+            designer.select(id);
+            const box = root.querySelector(selector);
+            box?.focus();
+            box?.setSelectionRange(box.value.length, box.value.length);
+        };
+        return [
+            ...kinds.map((kind) => ({ label: w.findAdd(nameOfKind(kind, own)), hint: w.newQuestion, run: () => add(kind.id, target()) })),
+            ...steps.flatMap((step) => step.children
+                .filter((n) => n.type === 'field')
+                .map((node) => ({ label: w.goTo(page.fields[node.field]?.label ?? node.id), hint: step.label, run: () => goTo(node.id, '.fd-q-selected .fd-q-label') }))),
+            ...steps.map((step) => ({ label: w.goToPage(step.label), hint: w.page, run: () => goTo(step.id, `.fd-design-step[data-node="${step.id}"] .fd-step-title`) })),
+            { label: w.addAPage, hint: w.page, run: () => addPage.click() },
+        ];
+    }
+    // ---- adding ------------------------------------------------------------------
+    /** Where a question picked in the toolbox goes: after the one picked, or at the end of the page picked, or of the last page. */
+    function target() {
+        const page = designer.getPage();
+        const selected = designer.getState().selected;
+        const steps = stepsOf(page);
+        if (selected && steps.some((s) => s.children.some((n) => n.id === selected)))
+            return { after: selected };
+        if (selected && steps.some((s) => s.id === selected))
+            return { parent: selected };
+        return { parent: steps[steps.length - 1].id };
+    }
+    /** Where the bar beside the card picked adds a question: after the question, at the top of the page, or at the top of the form. */
+    function railTarget() {
+        const page = designer.getPage();
+        const selected = designer.getState().selected;
+        const steps = stepsOf(page);
+        if (selected && steps.some((s) => s.children.some((n) => n.id === selected)))
+            return { after: selected };
+        const step = steps.find((s) => s.id === selected) ?? steps[0];
+        return { parent: step.id, index: 0 };
+    }
+    /** A page after the question picked, the questions under it going with it; or a page at the end. */
+    function addPageHere() {
+        const page = designer.getPage();
+        const selected = designer.getState().selected;
+        const question = selected && stepsOf(page).some((s) => s.children.some((n) => n.id === selected)) ? selected : null;
+        const created = designer.addContainer(own.defaults.page(stepsOf(page).length + 1), question ? { after: question } : {});
+        if (!created)
+            return;
+        designer.select(created);
+        const title = stepViews.get(created)?.element.querySelector('.fd-step-title');
+        title?.focus();
+        title?.select();
+    }
+    function add(kind, where) {
+        const created = designer.addQuestion(kind, where);
+        if (!created)
+            return;
+        // Drawn open by now: its words take the cursor, every word selected, so typing replaces them.
+        const label = cardViews.get(created)?.element.querySelector('.fd-q-label');
+        label?.focus();
+        label?.select();
+        placeRail();
+    }
+    const drag = canvasDrag({
+        words: designer.words,
+        canvas: editor,
+        cards: '.fd-q[data-node]',
+        drop: (source, step, index) => {
+            if ('tool' in source)
+                add(source.tool.slice(source.tool.indexOf(':') + 1), { parent: step, index });
+            else
+                designer.placeNode(source.node, step, index, { pick: true });
+        },
+    });
+    const cardViews = new Map();
+    let drawn = null;
+    const formFor = (page) => (drawn?.page === page ? drawn.form : (drawn = { page, form: createForm({ page }) }).form);
+    /** The question's real answer box, inert: here it is looked at, not answered. */
+    function answerPainter(box, id) {
+        let widget = null;
+        let painted = '';
+        return {
+            paint(page, node) {
+                const def = page.fields[node.field];
+                // Its own words in the page's language, as the form will have them.
+                const said = widgetWords(page);
+                const key = JSON.stringify([node, def, said.locale]);
+                if (key === painted && widget)
+                    return;
+                painted = key;
+                widget?.destroy?.();
+                const form = formFor(page);
+                widget = createWidget({ form, name: node.field, field: def, node, id: `fd-design-${id}`, document: doc, ...said }, options.widgets);
+                widget.update({ value: form.getState().values[node.field], values: form.getState().values, readonly: false, required: def.required === true, invalid: false });
+                box.replaceChildren(widget.element);
+            },
+            /** Something else was painted in the box: the next paint starts afresh. */
+            reset() {
+                widget = null;
+                painted = '';
+            },
+            destroy: () => widget?.destroy?.(),
+        };
+    }
+    /**
+     * How a question's answer reads before anyone answers it: a text question as
+     * a dotted line saying what goes there, a dropdown as its numbered options,
+     * the newer kinds as `kindPreview` draws them, anything else as its real
+     * answer box. Null for the real box.
+     */
+    function preview(page, node) {
+        const def = page.fields[node.field];
+        const kind = kindOfField(def, node);
+        const said = kind && PREVIEWED.has(kind) ? w.preview[kind] : null;
+        if (said && (kind === 'date' || kind === 'date-time' || kind === 'time'))
+            return el('div', { class: 'fd-q-preview fd-q-preview-short fd-q-preview-date' }, said, designerIcon(doc, kind === 'time' ? 'time' : 'date'));
+        if (said)
+            return el('div', { class: `fd-q-preview fd-q-preview-${kind === 'paragraph' ? 'long' : 'short'}` }, said);
+        if (kind === 'dropdown' && def.type === 'selection')
+            return el('ol', { class: 'fd-q-preview fd-q-preview-list' }, ...def.options.map((o, i) => el('li', {}, `${i + 1}. ${o.label}`)));
+        return kindPreview(el, page, node, kind, own);
+    }
+    /** Paints a question's answer into a box: the preview where there is one, else the real answer box. */
+    function answerBox(box, id) {
+        const painter = answerPainter(box, id);
+        let previewKey = '';
+        return {
+            paint(page, node) {
+                const shown = preview(page, node);
+                if (!shown) {
+                    previewKey = '';
+                    return painter.paint(page, node);
+                }
+                const key = shown.outerHTML;
+                if (key === previewKey)
+                    return;
+                previewKey = key;
+                painter.destroy();
+                box.replaceChildren(shown);
+                painter.reset();
+            },
+            destroy: () => painter.destroy(),
+        };
+    }
+    /** A question not picked: as people will see it. */
+    function closedCard(id) {
+        const text = el('span', { class: 'fd-q-text', ...dataDirection });
+        const title = el('div', { class: 'fd-q-title' }, text);
+        const help = el('div', { class: 'fd-help' });
+        const answer = el('div', { class: 'fd-q-answer', inert: '' });
+        const note = el('span', { class: 'fd-q-when-note' }, w.someAnswers);
+        // Forms' six dots, across the top when pointed at: what it is carried by.
+        // For the pointer only — the keys move it too — so no control of its own.
+        const grip = el('span', { class: 'fd-q-grip', 'data-grip': '', 'aria-hidden': 'true', title: w.dragTitle }, designerIcon(doc, 'grip'));
+        // Reached by Tab and opened by Enter or Space, as a click opens it (WCAG 2.1.1).
+        const element = el('div', { class: 'fd-q fd-q-closed', 'data-node': id, role: 'button', tabindex: '0' }, grip, title, help, answer);
+        const painter = answerBox(answer, id);
+        element.addEventListener('click', (event) => {
+            if (designer.getState().selected === id)
+                return;
+            const onWords = event.target.closest('.fd-q-text');
+            designer.select(id);
+            // Clicking its words opens it with the cursor in them.
+            if (onWords) {
+                const words = cardViews.get(id)?.element.querySelector('.fd-q-label');
+                words?.focus();
+                words?.setSelectionRange(words.value.length, words.value.length);
+            }
+        });
+        /** What the card was drawn from: a question an edit left alone is the same objects, and its card stays as it is. */
+        let drawn = null;
+        element.addEventListener('keydown', (event) => {
+            if (event.target !== element || (event.key !== 'Enter' && event.key !== ' '))
+                return;
+            event.preventDefault();
+            text.click();
+        });
+        return {
+            element,
+            open: false,
+            update(page, node) {
+                const def = page.fields[node.field];
+                if (drawn?.node === node && drawn.def === def)
+                    return;
+                drawn = { node, def };
+                text.textContent = def.label;
+                element.classList.toggle('fd-required', def.required === true);
+                help.textContent = def.help ?? '';
+                help.hidden = !def.help;
+                if (node.invisible !== undefined)
+                    title.append(note);
+                else
+                    note.remove();
+                painter.paint(page, node);
+            },
+            destroy: () => painter.destroy(),
+        };
+    }
+    /** The question picked: open to edit, the Google Forms way. */
+    function openCard(id) {
+        const grip = el('button', { type: 'button', class: 'fd-q-grip', 'data-grip': '', 'aria-label': w.dragToMove, title: w.dragTitle }, designerIcon(doc, 'grip'));
+        const label = el('input', { class: 'fd-q-label', 'aria-label': w.question, autocomplete: 'off', placeholder: w.question, ...dataDirection });
+        label.addEventListener('input', () => designer.updateQuestion(id, { label: label.value }));
+        const kindIcon = el('span', { class: 'fd-q-kind-icon' });
+        const kindName = el('span', { class: 'fd-q-kind-name' });
+        const kind = el('button', { type: 'button', class: 'fd-q-kind', 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, kindIcon, kindName, designerIcon(doc, 'chevron'));
+        kind.addEventListener('click', () => {
+            const page = designer.getPage();
+            const node = stepsOf(page).flatMap((s) => s.children).find((n) => n.id === id && n.type === 'field');
+            if (!node)
+                return;
+            const current = kindOfField(page.fields[node.field], node);
+            const offered = new Set(designer.kindsFor(id).map((k) => k.id));
+            // Google Forms' menu: a row for each kind, its icon first, the groups between lines.
+            const items = toolboxGroups(designer.kindsFor(id)).flatMap(([, ids]) => ids.filter((k) => offered.has(k)).map((k, i) => ({ id: k, label: nameOfKind(kindById(k), own), icon: k, checked: k === current, ...(i === 0 ? { divider: true } : {}) })));
+            openMenu({ el, anchor: kind, title: w.kindOfQuestion, items, roomy: true, onPick: (k) => designer.changeKind(id, k) });
+        });
+        const help = el('input', { class: 'fd-q-help', 'aria-label': w.description, placeholder: w.description, autocomplete: 'off', ...dataDirection });
+        help.addEventListener('input', () => designer.updateQuestion(id, { help: help.value }));
+        const helpBox = lined(el, help, 'fd-q-help-box');
+        /** A description asked for from ⋮, still empty: shown until the card closes. */
+        let wantHelp = false;
+        // Enter goes on to the description; with Ctrl and Shift it is the editor's, a question after this one.
+        const plainEnter = (event) => event.key === 'Enter' && !event.ctrlKey && !event.metaKey;
+        label.addEventListener('keydown', (event) => {
+            if (plainEnter(event)) {
+                event.preventDefault();
+                if (helpBox.hidden)
+                    label.blur();
+                else
+                    help.focus();
+            }
+        });
+        help.addEventListener('keydown', (event) => {
+            if (plainEnter(event)) {
+                event.preventDefault();
+                help.blur();
+            }
+        });
+        const choices = optionsEditor(el, designer, id);
+        const answer = el('div', { class: 'fd-q-answer', inert: '' });
+        const painter = answerBox(answer, id);
+        const settings = inlineSettings(el, designer, id);
+        const when = conditionEditor(el, designer, id, 'question');
+        const rules = cardRules(el, designer, id, { widgets: options.widgets, tryIt: () => trial.start() });
+        const tool = (label, icon, onClick, extra = '') => {
+            const button = el('button', { type: 'button', class: `fd-q-tool ${extra}`.trim(), 'aria-label': label, title: label }, designerIcon(doc, icon));
+            button.addEventListener('click', onClick);
+            return button;
+        };
+        const required = el('button', { type: 'button', class: 'fd-switch', role: 'switch', 'aria-checked': 'false', 'aria-label': w.required, 'data-required': '' });
+        required.addEventListener('click', () => designer.updateQuestion(id, { required: required.getAttribute('aria-checked') !== 'true' }));
+        const moreButton = tool(w.moreOptions, 'kebab', () => openMore());
+        moreButton.setAttribute('aria-haspopup', 'menu');
+        moreButton.setAttribute('aria-expanded', 'false');
+        // ⋮: the description, when it shows, and moving it — what Google Forms keeps there.
+        function openMore() {
+            const page = designer.getPage();
+            const step = stepsOf(page).find((s) => s.children.some((n) => n.id === id));
+            const at = step ? step.children.findIndex((n) => n.id === id) : -1;
+            const hasHelp = !helpBox.hidden;
+            const items = [
+                { id: 'help', label: w.description, checked: hasHelp },
+                ...(when.element.hidden && when.canStart() ? [{ id: 'when', label: w.showOnlyWhen }] : []),
+                ...rules.menuItems(),
+                ...(at > 0 ? [{ id: 'up', label: w.moveUp, divider: true }] : []),
+                ...(step && at !== -1 && at < step.children.length - 1 ? [{ id: 'down', label: w.moveDown, ...(at > 0 ? {} : { divider: true }) }] : []),
+            ];
+            openMenu({
+                el,
+                anchor: moreButton,
+                title: w.moreOptions,
+                items,
+                actions: true,
+                onPick(item) {
+                    if (item === 'help') {
+                        if (hasHelp) {
+                            wantHelp = false;
+                            designer.updateQuestion(id, { help: '' });
+                            helpBox.hidden = true;
+                        }
+                        else {
+                            wantHelp = true;
+                            helpBox.hidden = false;
+                            help.focus();
+                        }
+                    }
+                    else if (item === 'when')
+                        when.start();
+                    else if (item === 'up')
+                        designer.moveNode(id, -1);
+                    else if (item === 'down')
+                        designer.moveNode(id, 1);
+                    else
+                        rules.pick(item);
+                },
+            });
+        }
+        const foot = el('div', { class: 'fd-q-foot' }, tool(w.duplicate, 'duplicate', () => {
+            const copy = designer.duplicateNode(id);
+            if (copy)
+                designer.select(copy);
+        }), tool(w.delete, 'delete', () => designer.removeNode(id), 'fd-q-tool-danger'), el('span', { class: 'fd-q-sep', 'aria-hidden': 'true' }), el('span', { class: 'fd-q-required-words', 'aria-hidden': 'true' }, w.required), required, moreButton);
+        const element = el('div', { class: 'fd-q fd-q-selected fd-editing', 'data-node': id }, grip, el('div', { class: 'fd-q-head' }, lined(el, label, 'fd-q-label-box'), kind), helpBox, choices.element, answer, settings.element, rules.element, when.element, foot);
+        return {
+            element,
+            open: true,
+            update(page, node) {
+                const def = page.fields[node.field];
+                if (!focused(label))
+                    label.value = def.label;
+                if (!focused(help))
+                    help.value = def.help ?? '';
+                helpBox.hidden = !def.help && !wantHelp;
+                const current = kindOfQuestion(def, node);
+                const name = current ? nameOfKind(kindById(current), own) : w.custom;
+                kind.setAttribute('aria-label', w.kindNamed(name));
+                if (kindName.textContent !== name) {
+                    kindName.textContent = name;
+                    kindIcon.replaceChildren(designerIcon(doc, current ?? 'short-answer'));
+                }
+                required.setAttribute('aria-checked', String(def.required === true));
+                choices.update(def, node);
+                // Settings that stand in for the answer, as a matrix's rows and columns do, take its place.
+                const standsIn = settings.update(page, node);
+                answer.hidden = !choices.element.hidden || standsIn;
+                if (!answer.hidden)
+                    painter.paint(page, node);
+                when.update(page, questionsBefore(page, node.id), node.invisible);
+                rules.update(page, node);
+            },
+            destroy() {
+                painter.destroy();
+                rules.destroy();
+            },
+        };
+    }
+    const stepViews = new Map();
+    function makeStep(id) {
+        const section = el('section', { class: 'fd-design-step', 'data-node': id });
+        const number = el('span', { class: 'fd-step-number' });
+        const name = el('input', { class: 'fd-step-title', 'aria-label': w.pageTitle, placeholder: w.untitledPage, autocomplete: 'off', ...dataDirection });
+        name.addEventListener('input', () => designer.renameContainer(id, name.value));
+        name.addEventListener('focus', () => designer.getState().selected !== id && designer.select(id));
+        const removeStep = iconButton(w.deletePage, '✕', () => designer.removeNode(id), 'fd-icon-danger');
+        const when = conditionEditor(el, designer, id, 'page');
+        const condition = el('div', { class: 'fd-step-when' }, when.element);
+        const cards = el('div', { class: 'fd-step-cards', 'data-drop-section': id, 'data-drop-flow': 'column' });
+        const addQuestion = el('button', { type: 'button', class: 'fd-button fd-button-link fd-add-question' }, designerIcon(doc, 'short-answer'), w.addQuestion);
+        addQuestion.setAttribute('aria-label', w.addQuestion);
+        addQuestion.addEventListener('click', () => add('short-answer', { parent: id }));
+        // The page's own card, its number on a tab over it, as Google Forms heads a section.
+        section.append(el('header', { class: 'fd-step-head' }, number, el('div', { class: 'fd-step-head-row' }, lined(el, name, 'fd-step-title-box'), removeStep), condition), cards, addQuestion);
+        return {
+            element: section,
+            cards,
+            update(page, step, index, total) {
+                const numbered = w.pageOf(index + 1, total);
+                if (number.textContent !== numbered)
+                    number.textContent = numbered;
+                if (!focused(name) && name.value !== step.label)
+                    name.value = step.label;
+                removeStep.hidden = total === 1;
+                section.classList.toggle('fd-step-selected', designer.getState().selected === id);
+                // Only questions on earlier pages can decide whether this one shows.
+                const earlier = stepsOf(page).slice(0, index).flatMap((s) => s.children.filter((n) => n.type === 'field'));
+                condition.hidden = index === 0;
+                when.update(page, earlier, step.invisible);
+            },
+        };
+    }
+    // ---- the keyboard ---------------------------------------------------------------
+    // On the document: a click on a page leaves focus on the body, and keys pressed then never reach the editor's own element.
+    const onKey = (event) => {
+        const target = event.target;
+        if (target !== doc.body && !root.contains(target))
+            return;
+        if (trial.trying || json.open || event.defaultPrevented)
+            return;
+        const selected = designer.getState().selected;
+        if (!selected || !cardViews.has(selected))
+            return;
+        const typing = target.closest('input, textarea, select, [contenteditable]');
+        // Google Forms' keys, typing or not: a question after this one, a copy of it, up and down.
+        if ((event.ctrlKey || event.metaKey) && event.shiftKey && !event.altKey) {
+            const chord = event.key.toLowerCase();
+            const run = chord === 'enter'
+                ? () => add('short-answer', { after: selected })
+                : chord === 'd'
+                    ? () => {
+                        const copy = designer.duplicateNode(selected);
+                        if (copy)
+                            designer.select(copy);
+                    }
+                    : chord === 'k' || chord === 'j'
+                        ? () => designer.moveNode(selected, chord === 'k' ? -1 : 1)
+                        : null;
+            if (run) {
+                event.preventDefault();
+                run();
+                return;
+            }
+        }
+        if (event.key === 'Escape') {
+            // Escape leaves the box being typed in and puts the question down.
+            typing?.blur();
+            designer.select(null);
+            return;
+        }
+        if (typing)
+            return;
+        if (event.altKey && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            event.preventDefault();
+            designer.moveNode(selected, event.key === 'ArrowUp' ? -1 : 1);
+        }
+        else if (event.key === 'Delete' || event.key === 'Backspace') {
+            event.preventDefault();
+            designer.removeNode(selected);
+        }
+    };
+    doc.addEventListener('keydown', onKey);
+    // A click on the page around the cards closes the open one; one on a card, a page's card, the map or the bar beside it does not.
+    const stopPuttingDown = putDownOnClickOutside(root, designer, '.fd-q, .fd-step-head, .fd-survey-head, .fd-branch-map, .fd-q-rail', () => !trial.trying);
+    // ---- render ----------------------------------------------------------------------
+    function render(state) {
+        const page = state.page;
+        const steps = stepsOf(page);
+        bar.update(state);
+        start.update(state);
+        tools.update({ modelFields: [], tabs: false });
+        side.update(state);
+        if (!focused(headTitle))
+            headTitle.value = page.title ?? '';
+        drawMap(page, state.selected);
+        if (!focused(headDescription))
+            headDescription.value = page.description ?? '';
+        const liveSteps = new Set(steps.map((s) => s.id));
+        for (const [id, view] of stepViews) {
+            if (liveSteps.has(id))
+                continue;
+            view.element.remove();
+            stepViews.delete(id);
+        }
+        const liveCards = new Set(steps.flatMap((s) => s.children.map((n) => n.id)));
+        for (const [id, view] of cardViews) {
+            if (liveCards.has(id) && view.open === (state.selected === id))
+                continue;
+            view.destroy();
+            view.element.remove();
+            cardViews.delete(id);
+        }
+        steps.forEach((step, index) => {
+            let view = stepViews.get(step.id);
+            if (!view)
+                stepViews.set(step.id, (view = makeStep(step.id)));
+            if (pages.children[index] !== view.element)
+                pages.insertBefore(view.element, pages.children[index] ?? null);
+            view.update(page, step, index, steps.length);
+            const fields = step.children.filter((n) => n.type === 'field');
+            fields.forEach((node, at) => {
+                let card = cardViews.get(node.id);
+                if (!card)
+                    cardViews.set(node.id, (card = state.selected === node.id ? openCard(node.id) : closedCard(node.id)));
+                if (view.cards.children[at] !== card.element)
+                    view.cards.insertBefore(card.element, view.cards.children[at] ?? null);
+                card.update(page, node);
+            });
+            while (view.cards.children.length > fields.length)
+                view.cards.lastElementChild?.remove();
+        });
+        ruleMarks(pages, page, designer);
+        placeRail();
+    }
+    /** The bar beside the card picked, level with its top: a question's card, a page's, or the form's own. */
+    function placeRail() {
+        const selected = designer.getState().selected;
+        const beside = (selected && (cardViews.get(selected)?.element ?? stepViews.get(selected)?.element.querySelector('.fd-step-head'))) || head;
+        const top = beside.getBoundingClientRect().top - column.getBoundingClientRect().top;
+        rail.style.setProperty('--fd-rail-y', `${Math.max(0, Math.round(top))}px`);
+    }
+    // Cards above it grow and shrink as they are edited, and the window changes size: the bar keeps level.
+    const watcher = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => placeRail());
+    watcher?.observe(column);
+    host.append(root);
+    const leave = designer.subscribe(render);
+    render(designer.getState());
+    return {
+        element: root,
+        destroy() {
+            leave();
+            look.destroy();
+            watcher?.disconnect();
+            stopPuttingDown();
+            bar.destroy();
+            drag.destroy();
+            side.destroy();
+            clip.destroy();
+            shortcuts.destroy();
+            doc.removeEventListener('keydown', onKey);
+            for (const view of cardViews.values())
+                view.destroy();
+            trial.destroy();
+            words.destroy();
+            json.destroy();
+            ruleList.destroy();
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=survey-editor.mjs.map