@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/screen-canvas.js

@@ -0,0 +1,691 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.screenCanvas = screenCanvas;
+const core_1 = require("@fieldia/core");
+const viewer_1 = require("@fieldia/viewer");
+const widgets_1 = require("@fieldia/widgets");
+const canvas_advanced_1 = require("./canvas-advanced");
+const canvas_blocks_1 = require("./canvas-blocks");
+const canvas_form_1 = require("./canvas-form");
+const canvas_drag_1 = require("./canvas-drag");
+const canvas_header_1 = require("./canvas-header");
+const canvas_keys_1 = require("./canvas-keys");
+const canvas_mode_1 = require("./canvas-mode");
+const canvas_resize_1 = require("./canvas-resize");
+const canvas_size_1 = require("./canvas-size");
+const canvas_multi_1 = require("./canvas-multi");
+const canvas_guides_1 = require("./canvas-guides");
+const canvas_width_1 = require("./canvas-width");
+const chrome_1 = require("./chrome");
+const field_bar_1 = require("./field-bar");
+const icons_1 = require("./icons");
+const inline_settings_1 = require("./inline-settings");
+const layout_tree_1 = require("./layout-tree");
+const rules_marks_1 = require("./rules-marks");
+const steps_marks_1 = require("./steps-marks");
+const page_tree_1 = require("./page-tree");
+const samples_1 = require("./samples");
+const canvas_fold_1 = require("./canvas-fold");
+const writes_1 = require("./writes");
+const chrome_language_1 = require("./chrome-language");
+/** What sits at the top of a screen or a sheet: sections, a sheet's tabs, and fields and blocks of their own. */
+const topOf = (page) => page.layout.children;
+function screenCanvas(options) {
+    const { designer, doc } = options;
+    const el = (0, chrome_1.elementFactory)(doc);
+    const words = designer.words;
+    const w = words.canvas;
+    /** The designer's own words on the screen drawn: its language and direction, when it has one. */
+    const own = (0, chrome_language_1.chromeLanguage)(designer);
+    const titleCard = el('button', { type: 'button', class: 'fd-canvas-title', hidden: '' });
+    titleCard.addEventListener('click', () => designer.select(null));
+    const body = el('div', { class: 'fd-canvas-body' });
+    const header = (0, canvas_header_1.canvasHeader)({ el, doc, designer });
+    // Several picked, in Advanced: a bar at the top of the canvas, taking no room.
+    const multi = (0, canvas_multi_1.multiBar)({ el, doc, designer });
+    const keys = (0, canvas_keys_1.canvasKeys)({ el, designer, rtl: () => doc.defaultView?.getComputedStyle(element).direction === 'rtl' });
+    // A form of its own, in the form's skin: its look and its widths are the page's, not the designer's.
+    // The size of screen shown, chosen on the stage at the canvas's top, with the keys' help; Advanced only.
+    // Or a width of the canvas's own, dragged to on its end edge: the size is then the one the form takes it for.
+    const win = doc.defaultView;
+    let size = (0, canvas_size_1.readSize)(win);
+    let width = (0, canvas_size_1.readWidth)(win);
+    /** A size picked, at its own width; or a width dragged or keyed to, at the size it falls in — kept in this browser when it is let go. */
+    function showSize(next, own, keep) {
+        const redraw = next !== size;
+        size = next;
+        width = own;
+        if (keep) {
+            (0, canvas_size_1.writeSize)(win, next);
+            (0, canvas_size_1.writeWidth)(win, own);
+        }
+        sizes.set(next, own);
+        ownWidth();
+        if (redraw)
+            api.update(designer.getState());
+    }
+    const sizes = (0, canvas_size_1.sizeSwitch)(el, doc, size, (next) => showSize(next, null, true), width, words);
+    const stage = el('div', { class: 'fd-canvas-stage', ...own }, sizes.element, sizes.note, keys.help);
+    const element = el('div', { class: 'fd-canvas fd-form', 'data-fd-skin': options.skin ?? 'outlined' }, multi.element, stage, header.top, header.card, titleCard, body, keys.said);
+    const resize = (0, canvas_resize_1.canvasResize)({
+        el,
+        canvas: element,
+        rtl: () => win?.getComputedStyle(element).direction === 'rtl',
+        size: () => size,
+        change: (next, at, done) => showSize(at, next, done),
+        reset: () => showSize(size, null, true),
+        say: keys.say,
+        words,
+    });
+    /** The canvas as wide as its own width, in Advanced; else as wide as its size. */
+    function ownWidth() {
+        const own = mode === 'advanced' ? width : null;
+        (0, writes_1.setData)(element, 'width', own === null ? undefined : '');
+        if (own === null)
+            element.style.removeProperty('--fd-canvas-width');
+        else
+            element.style.setProperty('--fd-canvas-width', `${own}px`);
+    }
+    const blocks = (0, canvas_blocks_1.blockViews)({ el, doc, designer });
+    const savedForms = (0, canvas_form_1.formViews)({ el, doc, designer, skin: options.skin, widgets: options.widgets });
+    let page = designer.getPage();
+    let selected = null;
+    let picked = [];
+    let mode = 'simple';
+    /** The size shown: the one chosen, in Advanced; a desktop, in Simple. */
+    const shownSize = () => (mode === 'advanced' ? size : 'desktop');
+    let visible = [];
+    /** The look the canvas wears now. */
+    let worn = null;
+    /** Every part drawn this time round, by id. */
+    let drawnIds = new Set();
+    // The widgets are drawn from a form of the page, made again only when the page, or the record filling it, changes.
+    let sample = null;
+    let drawn = null;
+    const form = () => {
+        if (drawn?.page === page && drawn.sample === sample)
+            return drawn.form;
+        const values = sample === null ? undefined : (0, samples_1.sampleRows)(page.fields, Object.keys(page.fields), sample + 1)[sample];
+        drawn = { page, sample, form: (0, core_1.createForm)({ page, values }) };
+        return drawn.form;
+    };
+    const cards = new Map();
+    function dropCard(card) {
+        card.widget?.destroy?.();
+        card.element.remove();
+    }
+    /** Six dots beside a field, shown when it is pointed at or picked: what it is carried by. For the pointer only — the keys move it too — so no control of its own. */
+    const gripOf = () => el('span', { class: 'fd-card-grip', 'data-grip': '', 'aria-hidden': 'true', title: words.options.grip }, (0, icons_1.designerIcon)(doc, 'grip'));
+    function buildCard(id, editing, ownChoice) {
+        const widgetBox = el('div', { class: 'fd-canvas-widget', inert: '' });
+        if (!editing) {
+            const label = el('label', { class: 'fd-label' });
+            const help = el('div', { class: 'fd-help' });
+            // Reached by Tab and picked by Enter or Space, as a click picks it (WCAG 2.1.1).
+            const element = el('div', { class: 'fd-field fd-canvas-field', 'data-node': id, role: 'button', tabindex: '0' }, gripOf(), label, widgetBox, help);
+            return { element, editing, widgetBox, widget: null, painted: '', label, help, bar: null, options: null, settings: null, drawn: null };
+        }
+        const bar = (0, field_bar_1.fieldBar)({ el, doc, designer, id, more: options.more });
+        const label = el('input', { class: 'fd-canvas-label-input', 'data-inline': 'label', 'aria-label': w.label, autocomplete: 'off' });
+        label.addEventListener('input', () => {
+            sizeToWords(label);
+            designer.updateQuestion(id, { label: label.value });
+        });
+        const help = el('input', { class: 'fd-canvas-help-input fd-help', 'data-inline': 'help', 'aria-label': w.help, placeholder: w.addHelp, autocomplete: 'off' });
+        help.addEventListener('input', () => designer.updateQuestion(id, { help: help.value }));
+        // Enter goes from the label to the help, and from the help out.
+        label.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                help.focus();
+            }
+        });
+        help.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                help.blur();
+            }
+        });
+        const choices = ownChoice ? (0, chrome_1.optionsEditor)(el, designer, id) : null;
+        const settings = (0, inline_settings_1.inlineSettings)(el, designer, id);
+        const element = el('div', { class: 'fd-field fd-canvas-field fd-editing', 'data-node': id }, gripOf(), bar.element, el('div', { class: 'fd-label fd-canvas-label-row' }, label), ...(choices ? [choices.element] : [widgetBox]), settings.element, help);
+        return { element, editing, widgetBox, widget: null, painted: '', label, help, bar, options: choices, settings, drawn: null };
+    }
+    /** As wide as its words, so the required mark stays beside them. */
+    function sizeToWords(input) {
+        input.size = Math.max(4, input.value.length + 1);
+    }
+    function drawCard(node, labels, place) {
+        const def = page.fields[node.field];
+        const editing = selected === node.id;
+        // Only the card being edited types its options in place: asked of it alone, as asking walks the page.
+        const ownChoice = editing && def.type === 'selection' && !designer.isFromModel(node.id);
+        let card = cards.get(node.id);
+        if (card && (card.editing !== editing || (editing && !!card.options !== ownChoice))) {
+            dropCard(card);
+            card = undefined;
+        }
+        if (!card)
+            cards.set(node.id, (card = buildCard(node.id, editing, ownChoice)));
+        const element = card.element;
+        // A card not being edited, drawn from the same field, picked or not as before, for the same record: as it is.
+        const isPicked = picked.includes(node.id) && picked.length > 1;
+        const was = card.drawn;
+        if (!editing && was?.node === node && was.def === def && was.labels === labels && was.picked === isPicked && was.sample === sample && was.language === page.language)
+            return element;
+        card.drawn = editing ? null : { node, def, labels, picked: isPicked, sample, language: page.language };
+        element.dataset['type'] = def.type;
+        const labelsAt = (0, viewer_1.labelPlace)(node, def.type, labels);
+        if (labelsAt)
+            element.dataset['labels'] = labelsAt;
+        else
+            delete element.dataset['labels'];
+        element.classList.toggle('fd-canvas-picked', isPicked);
+        if (node.colspan)
+            element.style.setProperty('--fd-span', String(node.colspan));
+        else
+            element.style.removeProperty('--fd-span');
+        element.classList.toggle('fd-required', def.required === true || node.required === true);
+        element.classList.toggle('fd-hidden-sometimes', node.invisible !== undefined);
+        const labelText = node.label ?? def.label;
+        const helpText = node.help ?? def.help ?? '';
+        if (card.editing) {
+            const label = card.label;
+            const help = card.help;
+            if (doc.activeElement !== label) {
+                label.value = labelText;
+                sizeToWords(label);
+            }
+            if (doc.activeElement !== help)
+                help.value = helpText;
+            // In a first row the bar leaves the names above readable: it goes below the field under tabs, over the name under a group's.
+            const firstRow = place.index < place.columns;
+            element.classList.toggle('fd-bar-below', place.under === 'tabs' && firstRow);
+            element.classList.toggle('fd-bar-over-name', place.under === 'name' && firstRow);
+            card.bar?.update(page);
+            card.options?.update(def, node);
+            // A table's columns, typed in, stand in for the table itself.
+            card.widgetBox.hidden = card.settings?.update(page, node) === true;
+        }
+        else {
+            card.label.textContent = labelText;
+            card.help.textContent = helpText;
+            card.help.hidden = !helpText;
+        }
+        if (!card.options)
+            paint(card, node);
+        return element;
+    }
+    /** The field's real widget, inert: on the canvas it is looked at and moved, not typed in. */
+    function paint(card, node) {
+        const def = page.fields[node.field];
+        // Its own words in the page's language, as the form will have them.
+        const said = (0, chrome_language_1.widgetWords)(designer.getPage());
+        const key = JSON.stringify([node, def, sample, said.locale]);
+        if (card.painted === key && card.widget)
+            return;
+        card.painted = key;
+        card.widget?.destroy?.();
+        const f = form();
+        const widget = (0, widgets_1.createWidget)({ form: f, name: node.field, field: def, node, id: `fd-canvas-${node.id}`, document: doc, ...said }, options.widgets);
+        widget.update({ value: f.getState().values[node.field], values: f.getState().values, readonly: false, required: def.required === true, invalid: false });
+        card.widget = widget;
+        card.widgetBox.replaceChildren(widget.element);
+    }
+    const sections = new Map();
+    // How far a group's name and words stand above its first row, measured as they change size: a bar lifted over the name clears it in any font.
+    const nameRoom = doc.defaultView?.ResizeObserver
+        ? new doc.defaultView.ResizeObserver((entries) => {
+            for (const section of new Set(entries.map((entry) => entry.target.parentElement))) {
+                const grid = section?.querySelector(':scope > .fd-grid');
+                const legend = section?.querySelector(':scope > legend');
+                if (!section || !grid || !legend)
+                    continue;
+                section.style.setProperty('--fd-name-room', `${Math.round(grid.getBoundingClientRect().top - legend.getBoundingClientRect().top)}px`);
+            }
+        })
+        : null;
+    /** A group is a fieldset, named by its title; an arrangement is no group to name, and a fieldset cannot lay parts on the columns round it. */
+    function makeSection(id, tag) {
+        const title = el('button', { type: 'button', class: 'fd-canvas-section-title' });
+        const titleInput = el('input', { class: 'fd-canvas-section-title-input', 'aria-label': w.sectionTitle, placeholder: words.parts.untitledSection, autocomplete: 'off' });
+        titleInput.addEventListener('input', () => designer.renameContainer(id, titleInput.value));
+        titleInput.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter')
+                titleInput.blur();
+        });
+        title.addEventListener('click', () => {
+            designer.select(id);
+            titleInput.focus();
+            titleInput.select();
+        });
+        const fold = (0, canvas_fold_1.foldMark)(el, doc, words);
+        const legend = el('legend', { class: 'fd-section-title' }, fold.element, title, titleInput);
+        const description = el('p', { class: 'fd-section-description', hidden: '' });
+        const grid = el('div', { class: 'fd-grid', 'data-drop-grid': '', 'data-container': id });
+        const empty = el('p', { class: 'fd-canvas-empty', ...own }, w.dropHere);
+        // Simple mode's word on an arrangement it keeps as Advanced laid it out.
+        const advanced = el('button', { type: 'button', class: 'fd-button' }, w.openAdvanced);
+        advanced.addEventListener('click', () => options.openAdvanced?.());
+        const lock = el('div', { class: 'fd-simple-lock', hidden: '', ...own }, el('span', { class: 'fd-simple-lock-how' }), el('span', {}, w.simpleKeeps), advanced);
+        const element = el(tag, { class: 'fd-section fd-canvas-section', 'data-node': id, 'data-drop-section': id }, legend, description, grid, empty, lock);
+        nameRoom?.observe(legend);
+        nameRoom?.observe(description);
+        return { element, legend, title, titleInput, description, grid, empty, lock, fold };
+    }
+    /** Where a part's colspan is, for the grid it sits in. */
+    function span(element, colspan) {
+        if (colspan)
+            element.style.setProperty('--fd-span', String(colspan));
+        else
+            element.style.removeProperty('--fd-span');
+    }
+    function drawSection(section, place, under) {
+        const plan = (0, viewer_1.planSection)(section, place);
+        const tag = plan.arrangement ? 'div' : 'fieldset';
+        let view = sections.get(section.id);
+        if (view && view.element.tagName.toLowerCase() !== tag) {
+            view.element.remove();
+            view = undefined;
+        }
+        if (!view)
+            sections.set(section.id, (view = makeSection(section.id, tag)));
+        visible.push(section.id);
+        const element = view.element;
+        (0, writes_1.setData)(element, 'style', plan.style);
+        (0, writes_1.setData)(element, 'place', plan.at || undefined);
+        (0, writes_1.setAttr)(element, 'data-on-page', plan.style === 'card' && place.onPage ? '' : null);
+        element.classList.toggle('fd-canvas-arrangement', plan.arrangement);
+        span(element, section.colspan);
+        if (section.labelWidth)
+            element.style.setProperty('--fd-label-width', `${section.labelWidth}px`);
+        else
+            element.style.removeProperty('--fd-label-width');
+        const isPicked = selected === section.id;
+        element.classList.toggle('fd-canvas-selected', isPicked);
+        element.classList.toggle('fd-canvas-picked', picked.includes(section.id) && picked.length > 1);
+        // An arrangement has no title to show or type: it only holds parts.
+        (0, writes_1.setHidden)(view.legend, plan.arrangement);
+        (0, writes_1.setText)(view.title, section.title || words.parts.untitledSection);
+        view.title.classList.toggle('fd-canvas-untitled', !section.title);
+        (0, writes_1.setHidden)(view.title, isPicked);
+        (0, writes_1.setHidden)(view.titleInput, !isPicked);
+        if (doc.activeElement !== view.titleInput && view.titleInput.value !== (section.title ?? ''))
+            view.titleInput.value = section.title ?? '';
+        view.fold.update(section);
+        (0, writes_1.setHidden)(view.description, !section.description);
+        (0, writes_1.setText)(view.description, section.description ?? '');
+        // On its grid's tracks it has no columns of its own; else its own, and those it keeps on smaller screens.
+        const grid = view.grid;
+        const columns = plan.at === 'tracks' ? null : section.columns;
+        if (columns === null)
+            grid.style.removeProperty('--fd-columns');
+        else
+            grid.style.setProperty('--fd-columns', String(typeof columns === 'object' ? columns.wide : (columns ?? 1)));
+        // The columns of the size shown, whatever the canvas's own width: on a grid's tracks, or sharing a cell, as the form lays them.
+        if (plan.at)
+            grid.style.removeProperty('--fd-cols');
+        else
+            grid.style.setProperty('--fd-cols', String((0, canvas_size_1.columnsAt)(section.columns, shownSize(), options.skin ?? 'outlined')));
+        for (const width of ['medium', 'narrow']) {
+            const count = typeof columns === 'object' && columns !== null ? columns[width] : undefined;
+            if (count === undefined) {
+                grid.removeAttribute(`data-columns-${width}`);
+                grid.style.removeProperty(`--fd-columns-${width}`);
+            }
+            else {
+                grid.setAttribute(`data-columns-${width}`, String(count));
+                grid.style.setProperty(`--fd-columns-${width}`, String(count));
+            }
+        }
+        const inner = section.children.map((child, index) => drawItem(child, plan.inner, { index, under: under === 'tabs' || plan.arrangement ? under : 'name', columns: plan.inner.columns }));
+        arrange(grid, inner);
+        (0, writes_1.setHidden)(view.empty, section.children.length > 0);
+        const locked = mode === 'simple' && plan.arrangement && isPicked;
+        (0, writes_1.setHidden)(view.lock, !locked);
+        if (locked)
+            view.lock.firstElementChild.textContent = (0, canvas_mode_1.lockWords)(page, section, words);
+        return element;
+    }
+    /** Any part where it sits: a field, a group or an arrangement, tabs, or a block between fields. */
+    function drawItem(node, place, at) {
+        drawnIds.add(node.id);
+        if (node.type === 'field')
+            return drawCard(node, place.labels, at);
+        if (node.type === 'section')
+            return drawSection(node, place, at.index < at.columns ? at.under : null);
+        if (node.type === 'tabs')
+            return drawTabs(node, place);
+        if (node.type === 'form') {
+            const frame = savedForms.draw(node, selected === node.id);
+            frame.classList.toggle('fd-canvas-picked', picked.includes(node.id) && picked.length > 1);
+            return frame;
+        }
+        const element = blocks.draw(node, selected === node.id);
+        element.classList.toggle('fd-canvas-selected', selected === node.id);
+        element.classList.toggle('fd-canvas-picked', picked.includes(node.id) && picked.length > 1);
+        return element;
+    }
+    const tabsViews = new Map();
+    function makeTabs(id) {
+        const list = el('div', { class: 'fd-tablist', role: 'tablist' });
+        const add = el('button', { type: 'button', class: 'fd-canvas-add-tab', 'aria-label': w.addTab, title: w.addTab }, '+');
+        const grid = el('div', { class: 'fd-grid', 'data-drop-grid': '' });
+        grid.style.setProperty('--fd-columns', '1');
+        const panel = el('div', { class: 'fd-tabpanel', role: 'tabpanel' }, grid);
+        const element = el('div', { class: 'fd-tabs fd-canvas-tabs', 'data-node': id }, el('div', { class: 'fd-canvas-tabs-head' }, list, add), panel);
+        const view = { element, list, panel, grid, add, active: null };
+        add.addEventListener('click', () => {
+            const tabs = (0, layout_tree_1.locate)(designer.getPage(), id)?.node;
+            const created = tabs && designer.addTab(id, words.defaults.tab(tabs.children.length + 1));
+            if (!created)
+                return;
+            view.active = created;
+            designer.select(created);
+        });
+        return view;
+    }
+    function drawTabs(node, place) {
+        let view = tabsViews.get(node.id);
+        if (!view)
+            tabsViews.set(node.id, (view = makeTabs(node.id)));
+        const holding = node.children.find((tab) => (0, page_tree_1.tabHolds)(tab, selected));
+        if (holding)
+            view.active = holding.id;
+        if (!node.children.some((tab) => tab.id === view?.active))
+            view.active = node.children[0]?.id ?? null;
+        const shown = view;
+        shown.element.classList.toggle('fd-canvas-selected', selected === node.id);
+        shown.element.classList.toggle('fd-canvas-picked', picked.includes(node.id) && picked.length > 1);
+        span(shown.element, node.colspan);
+        const buttons = node.children.map((tab) => {
+            const button = el('button', { type: 'button', role: 'tab', class: 'fd-tab fd-canvas-tab', 'data-node': tab.id, 'aria-selected': String(tab.id === shown.active) }, tab.label || w.untitledTab);
+            button.classList.toggle('fd-canvas-selected', selected === tab.id);
+            button.addEventListener('click', () => {
+                shown.active = tab.id;
+                designer.select(tab.id);
+            });
+            return button;
+        });
+        shown.list.replaceChildren(...buttons);
+        const open = node.children.find((tab) => tab.id === shown.active);
+        // The open tab's parts sit where the tabs do: on the page, or in the box round them.
+        if (open) {
+            shown.panel.dataset['dropSection'] = open.id;
+            shown.grid.dataset['container'] = open.id;
+        }
+        const inner = { columns: 1, onPage: place.onPage, labels: place.labels };
+        arrange(shown.grid, (open?.children ?? []).map((child, i) => drawItem(child, inner, { index: i, under: i === 0 ? 'tabs' : null, columns: 1 })));
+        return shown.element;
+    }
+    /** Put these children in this order, moving only what is out of place. */
+    /**
+     * Put a container's parts in this order, moving only what is out of place: a part moved loses the focus,
+     * so the one being typed in stays put. What the canvas draws over the parts (the guides) is left alone.
+     */
+    function arrange(parent, children) {
+        const now = [...parent.children].filter((c) => !c.classList.contains('fd-guides'));
+        children.forEach((child, index) => {
+            if (now[index] === child)
+                return;
+            parent.insertBefore(child, now[index] ?? null);
+            const was = now.indexOf(child);
+            if (was !== -1)
+                now.splice(was, 1);
+            now.splice(index, 0, child);
+        });
+        for (const extra of now.slice(children.length))
+            extra.remove();
+    }
+    // ---- picking -----------------------------------------------------------------
+    element.addEventListener('click', (event) => {
+        const target = event.target;
+        // The bar, the boxes and the lists of the field being edited handle themselves.
+        if (target.closest('.fd-field-bar, input, textarea, select, button, .fd-q-option-box, .fd-multi'))
+            return;
+        // In Advanced, Shift, ⌘ or Ctrl adds a part to what is picked, or lets it go.
+        const adding = mode === 'advanced' && (event.shiftKey || event.metaKey || event.ctrlKey);
+        const any = target.closest('[data-node]');
+        if (adding && any && body.contains(any) && any.getAttribute('role') !== 'tab') {
+            designer.pick(any.dataset['node'], { add: true });
+            return;
+        }
+        const card = target.closest('.fd-canvas-field[data-node]');
+        if (card) {
+            const id = card.dataset['node'];
+            if (selected === id && picked.length <= 1)
+                return;
+            // Clicking a field's words opens it with the cursor in those words.
+            const part = target.closest('.fd-label') ? 'label' : target.closest('.fd-help') ? 'help' : null;
+            designer.select(id);
+            if (part)
+                focusIn(id, part, false);
+            return;
+        }
+        // A block, a group, an arrangement or tabs: the nearest part round what was clicked.
+        const part = target.closest('[data-node]');
+        if (part && body.contains(part) && part.getAttribute('role') !== 'tab') {
+            const id = part.dataset['node'];
+            if (selected !== id || picked.length > 1)
+                designer.select(id);
+            return;
+        }
+        if (target === element || target === body)
+            designer.select(null);
+    });
+    // A field not picked, focused: Enter or Space picks it, the cursor going to its label as a click on its words does.
+    element.addEventListener('keydown', (event) => {
+        const card = event.target;
+        if ((event.key !== 'Enter' && event.key !== ' ') || !card.matches('.fd-canvas-field[data-node]:not(.fd-editing)'))
+            return;
+        event.preventDefault();
+        const id = card.dataset['node'];
+        designer.select(id);
+        focusIn(id, 'label', false);
+    });
+    function focusIn(id, part, selectAll) {
+        const card = cards.get(id);
+        if (!card?.editing)
+            return;
+        const input = (part === 'label' ? card.label : card.help);
+        input.focus();
+        if (selectAll)
+            input.select();
+        else
+            input.setSelectionRange(input.value.length, input.value.length);
+    }
+    // Simple carries fields among fields, as before; Advanced drops any part beside, under, into or between others.
+    const simpleDrag = (0, canvas_drag_1.canvasDrag)({
+        canvas: element,
+        words,
+        parts: '[data-node]:not([role="tab"])',
+        enabled: () => mode === 'simple',
+        drop: (source, section, index) => {
+            if ('node' in source) {
+                designer.placeNode(source.node, section, index, { pick: true });
+            }
+            else
+                options.dropTool(source.tool, section, index);
+        },
+    });
+    const advanced = (0, canvas_advanced_1.advancedDrag)({
+        canvas: element,
+        root: body,
+        designer,
+        rtl: () => doc.defaultView?.getComputedStyle(element).direction === 'rtl',
+        // A new field comes with its name selected, to be typed over where it stands.
+        placed: (id, source) => 'tool' in source && source.tool.startsWith('kind:') && focusIn(id, 'label', true),
+    });
+    advanced.setEnabled(false);
+    // Advanced's width handle and gutter, on the part picked.
+    // Advanced's guides: the columns of the grid the picked part sits on.
+    const guides = (0, canvas_guides_1.canvasGuides)({ root: body, designer });
+    const widths = (0, canvas_width_1.widthMarks)({ canvas: element, root: body, designer, rtl: () => doc.defaultView?.getComputedStyle(element).direction === 'rtl' });
+    /**
+     * What is measured goes in the next frame, once the whole editor has written
+     * this change, so the page is laid out once — measured now, it would be laid
+     * out here and again after: the width handle goes where the part picked is,
+     * and the picked field's bar, lined up with the field's far edge, is nudged
+     * back inside the canvas where that edge would put it past the near one, as
+     * over a phone's first column. The bar is read before the handle is written,
+     * and moved only when it must. The handle on the canvas's own edge says the
+     * canvas's width as it now is, read with the rest and written last.
+     */
+    let widthsFor = null;
+    let frameAsked = false;
+    let gone = false;
+    let nudged = { bar: null, by: 0 };
+    function nextFrame(state) {
+        if (state)
+            widthsFor = state;
+        const view = win;
+        if (!view?.requestAnimationFrame) {
+            if (state)
+                widths.update(state, mode === 'advanced');
+            return;
+        }
+        if (frameAsked)
+            return;
+        frameAsked = true;
+        view.requestAnimationFrame(() => {
+            frameAsked = false;
+            const latest = widthsFor;
+            widthsFor = null;
+            if (gone)
+                return;
+            // Read, all of it, before anything is written.
+            const sized = mode === 'advanced' ? resize.read() : null;
+            const nudge = barNudge();
+            if (latest)
+                widths.update(latest, mode === 'advanced');
+            nudge?.();
+            sized?.();
+        });
+    }
+    /** Where the picked field's bar must move to stay inside the canvas, read now; the move, to write after. */
+    function barNudge() {
+        const bar = selected === null ? null : cards.get(selected)?.bar?.element;
+        if (!bar?.isConnected)
+            return null;
+        const by = nudged.bar === bar ? nudged.by : 0;
+        const at = bar.getBoundingClientRect();
+        const room = element.getBoundingClientRect();
+        const natural = at.left - by;
+        const next = Math.round(Math.max(room.left + 4, Math.min(natural, room.right - 4 - at.width)) - natural);
+        if (nudged.bar === bar && next === by)
+            return null;
+        return () => {
+            nudged = { bar, by: next };
+            bar.style.setProperty('--fd-bar-nudge', `${next}px`);
+        };
+    }
+    const resized = doc.defaultView?.ResizeObserver ? new doc.defaultView.ResizeObserver(() => nextFrame(null)) : null;
+    resized?.observe(element);
+    const drag = {
+        press: (source, event, tile) => (mode === 'advanced' ? advanced : simpleDrag).press(source, event, tile),
+        destroy() {
+            simpleDrag.destroy();
+            advanced.destroy();
+        },
+    };
+    const api = {
+        element,
+        drag,
+        keys,
+        setSample(index) {
+            sample = index;
+        },
+        setMode(next) {
+            mode = next;
+            element.dataset['mode'] = next;
+            advanced.setEnabled(next === 'advanced');
+        },
+        update(state) {
+            (0, writes_1.setData)(element, 'size', shownSize());
+            ownWidth();
+            page = state.page;
+            selected = state.selected;
+            picked = state.picked;
+            visible = [];
+            drawnIds = new Set();
+            // The page's look, worn as the form wears it: an attribute or token for each setting, none left from before — when it changed.
+            if (worn === null || worn.look !== page.look) {
+                worn = { look: page.look };
+                for (const name of ['font', 'density', 'corners', 'scheme', 'accent'])
+                    element.removeAttribute(`data-${name}`);
+                for (const token of ['--fd-label-width', '--fd-look-accent', '--fd-look-accent-text', '--fd-look-accent-dark', '--fd-look-accent-dark-text'])
+                    element.style.removeProperty(token);
+                (0, viewer_1.applyLook)(element, page.look);
+            }
+            // The page's own parts sit as the form puts them: one column, on the page — in a sheet, in its card.
+            const root = page.layout;
+            const sheet = root.type === 'sheet';
+            (0, writes_1.setData)(body, 'node', root.id);
+            (0, writes_1.setData)(body, 'container', root.id);
+            body.classList.toggle('fd-sections', !sheet);
+            const top = { columns: 1, onPage: !sheet, labels: page.look?.labels };
+            arrange(body, topOf(page).map((node, index) => drawItem(node, top, { index, under: null, columns: 1 })));
+            // Gone from the page, or in a tab not on show: their views go.
+            for (const [id, card] of cards) {
+                if (drawnIds.has(id))
+                    continue;
+                dropCard(card);
+                cards.delete(id);
+            }
+            for (const [id, view] of tabsViews)
+                if (!drawnIds.has(id)) {
+                    view.element.remove();
+                    tabsViews.delete(id);
+                }
+            for (const [id, view] of sections) {
+                if (visible.includes(id))
+                    continue;
+                view.element.remove();
+                sections.delete(id);
+            }
+            blocks.keep(drawnIds);
+            savedForms.keep(drawnIds);
+            (0, writes_1.setHidden)(titleCard, root.type !== 'sheet' || !root.title);
+            if (root.type === 'sheet' && root.title) {
+                // A made-up record names itself in the title; else the field's name stands in, as a placeholder does.
+                const value = sample === null ? null : form().getState().values[root.title.field];
+                titleCard.textContent = typeof value === 'string' && value ? value : (page.fields[root.title.field]?.label ?? root.title.field);
+                titleCard.classList.toggle('fd-canvas-title-filled', typeof value === 'string' && !!value);
+            }
+            titleCard.classList.toggle('fd-canvas-selected', selected === null);
+            header.update(page, selected, form);
+            guides.update(state, mode === 'advanced');
+            nextFrame(state);
+            multi.update(state, mode === 'advanced');
+            (0, rules_marks_1.ruleMarks)(element, page, designer);
+            // steps lane: a button that does something wears a mark.
+            (0, steps_marks_1.pressMarks)(element, page, designer);
+        },
+        visibleSections: () => [...visible],
+        focus: (id, part, selectAll = false) => focusIn(id, part, selectAll),
+        focusPart: (id) => header.focus(id),
+        focusTitle(id) {
+            const input = sections.get(id)?.titleInput;
+            input?.focus();
+            input?.select();
+        },
+        destroy() {
+            gone = true;
+            drag.destroy();
+            widths.destroy();
+            resize.destroy();
+            header.destroy();
+            nameRoom?.disconnect();
+            resized?.disconnect();
+            for (const card of cards.values())
+                dropCard(card);
+            cards.clear();
+            savedForms.destroy();
+            sections.clear();
+            tabsViews.clear();
+            body.replaceChildren();
+        },
+    };
+    return api;
+}
+//# sourceMappingURL=screen-canvas.js.map