@cube-nl/dmp-sdk 1.0.0-rc.4 → 1.1.0-rc.2

package/dist/ui/blocks/chart.js

@@ -0,0 +1,166 @@
+import { aggregateFields, aggregateQuery, CARD_CSS, groupedAggregate, LABEL_CSS, PeriodFollower, rankGroups, requiredAttr, toNumber, valueFormatter, wholeAttr, } from '../aggregate-block.js';
+import { renderBars, renderLine } from '../chart-svg.js';
+import { clear, h } from '../dom.js';
+import { formatBucket, humanize, parseDimension } from '../format.js';
+import { NL } from '../texts.js';
+const DAY_MS = 86_400_000;
+/** The width drawn at before (or without) a measurement: a test DOM, a chart not laid out yet. */
+const FALLBACK_WIDTH = 600;
+const KINDS = ['line', 'bar'];
+const CSS = `${CARD_CSS}${LABEL_CSS}
+svg{display:block;overflow:visible}
+.grid{stroke:var(--cube-color-border)}
+.tick,.x{font-size:12px;fill:var(--cube-color-text-muted)}
+.tick{text-anchor:end}
+.x{text-anchor:middle}
+rect.s1,circle.s1{fill:var(--cube-color-series-1)}
+path.s1{fill:none;stroke:var(--cube-color-series-1);stroke-width:2}
+`;
+/** The API's bucket key for a UTC day (`2026-W01` is the ISO week, its year the ISO year). */
+function bucketKey(date, unit) {
+    const day = date.toISOString().slice(0, 10);
+    switch (unit) {
+        case 'day':
+            return day;
+        case 'week': {
+            const thursday = new Date(date.getTime() + (3 - ((date.getUTCDay() + 6) % 7)) * DAY_MS);
+            const year = thursday.getUTCFullYear();
+            const week = 1 + Math.floor((thursday.getTime() - Date.UTC(year, 0, 1)) / (7 * DAY_MS));
+            return `${year}-W${String(week).padStart(2, '0')}`;
+        }
+        case 'month':
+            return day.slice(0, 7);
+        case 'quarter':
+            return `${day.slice(0, 4)}-Q${Math.ceil((date.getUTCMonth() + 1) / 3)}`;
+        case 'year':
+            return day.slice(0, 4);
+    }
+}
+/** The axis text of a month: short, with the year on the first point and on January (`nov '25`, `dec`, `jan '26`). */
+function monthTick(key, first) {
+    const short = formatBucket(key, 'month', { short: true });
+    return first || key.endsWith('-01') ? NL.monthYear(short, key.slice(0, 4)) : short;
+}
+/** Every bucket key from `from` to `to` (ISO dates, inclusive), in order. */
+export function periodBuckets(from, to, unit) {
+    const keys = new Set();
+    const end = Date.parse(`${to}T00:00:00Z`);
+    for (let time = Date.parse(`${from}T00:00:00Z`); time <= end; time += DAY_MS) {
+        keys.add(bucketKey(new Date(time), unit));
+    }
+    return [...keys];
+}
+/** `<cube-chart>`: one measure over time (a line) or per category (bars), with a table for screen readers. */
+export function chartBlock(Base, scope) {
+    class CubeChart extends Base {
+        static tag = 'cube-chart';
+        static css = CSS;
+        shownFields() {
+            return aggregateFields(this);
+        }
+        period = new PeriodFollower(this);
+        /** Holds the drawing; its width is the width the chart draws in, one unit per CSS pixel. */
+        plot = h(scope.document, 'div', { class: 'plot' });
+        observer = null;
+        /** The last width the observer reported, and the width of the drawing now shown. */
+        observed = 0;
+        drawn = 0;
+        drawing = null;
+        connectedCallback() {
+            super.connectedCallback();
+            if (this.observer !== null || scope.ResizeObserver === undefined)
+                return;
+            this.observer = new scope.ResizeObserver((entries) => {
+                const width = Math.round(entries.at(-1)?.contentRect.width ?? 0);
+                if (width <= 0)
+                    return;
+                this.observed = width;
+                if (width !== this.drawn)
+                    this.draw();
+            });
+            this.observer.observe(this.plot);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.observer?.disconnect();
+            this.observer = null;
+        }
+        async load(signal, session) {
+            if (session === null)
+                return;
+            const resource = requiredAttr(this, 'resource');
+            const by = requiredAttr(this, 'by');
+            const { field, truncation } = parseDimension(by);
+            const height = wholeAttr(this, 'height', 80, 240);
+            const limit = wholeAttr(this, 'limit', 1, 12);
+            const query = await aggregateQuery(this, this.period, signal, by);
+            if (query === null)
+                return;
+            const { fn, period } = query;
+            const { data } = await groupedAggregate(session, resource, by, query, signal);
+            if (signal.aborted)
+                return;
+            const found = data.filter((row) => row[by] !== null && row[by] !== undefined);
+            if (found.length === 0) {
+                this.showState('empty');
+                return;
+            }
+            let points;
+            if (truncation !== null) {
+                const values = new Map(found.map((row) => [String(row[by]), toNumber(row[fn])]));
+                const keys = period === null
+                    ? [...values.keys()].sort()
+                    : periodBuckets(period.from, period.to, truncation);
+                // A bucket that starts after today has no data yet: a gap, not a drop to 0. Past gaps are 0.
+                const today = period?.today ?? period?.to ?? '';
+                const started = period === null || today < period.from
+                    ? new Set()
+                    : new Set(periodBuckets(period.from, today < period.to ? today : period.to, truncation));
+                points = keys.map((key, index) => ({
+                    key,
+                    label: formatBucket(key, truncation),
+                    ...(truncation === 'month' ? { tick: monthTick(key, index === 0) } : {}),
+                    value: period === null || !started.has(key) ? (values.get(key) ?? null) : (values.get(key) ?? 0),
+                }));
+            }
+            else {
+                const ranked = await rankGroups(this, session, found, { by, fn }, { descending: true, limit }, signal);
+                if (ranked === null)
+                    return;
+                if (ranked.length === 0) {
+                    this.showState('empty');
+                    return;
+                }
+                points = ranked;
+            }
+            const label = this.attr('label') ?? humanize(query.field ?? fn);
+            const kind = this.attr('kind');
+            this.render({ label, points, categories: truncation === null }, height, {
+                line: KINDS.includes(kind ?? '') ? kind === 'line' : truncation !== null,
+                format: valueFormatter(this, query.count),
+                byLabel: humanize(field),
+            });
+        }
+        render(series, height, options) {
+            const doc = scope.document;
+            this.drawing = { series, height, line: options.line, format: options.format };
+            const value = (n) => (n === null ? NL.emptyValue : options.format(n));
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, this.attr('label') === null ? '' : h(doc, 'p', { class: 'label', 'aria-hidden': 'true' }, series.label), this.plot, 
+            // In a clipped wrapper: an absolutely positioned table sizes to its content and would widen the page.
+            h(doc, 'div', { class: 'sr-only' }, h(doc, 'table', {}, h(doc, 'caption', {}, NL.asTable), h(doc, 'thead', {}, h(doc, 'tr', {}, h(doc, 'th', { scope: 'col' }, options.byLabel), h(doc, 'th', { scope: 'col' }, series.label))), h(doc, 'tbody', {}, ...series.points.map((point) => h(doc, 'tr', {}, h(doc, 'th', { scope: 'row' }, point.label), h(doc, 'td', {}, value(point.value)))))))));
+            this.draw();
+        }
+        /** Draws at the plot's width: as observed, else as laid out now, else the fallback. */
+        draw() {
+            if (this.drawing === null)
+                return;
+            const { series, height, line, format } = this.drawing;
+            const width = this.observed || Math.round(this.plot.clientWidth) || FALLBACK_WIDTH;
+            this.drawn = width;
+            clear(this.plot);
+            this.plot.appendChild((line ? renderLine : renderBars)(scope.document, series, { width, height }, format));
+        }
+    }
+    return CubeChart;
+}

package/dist/ui/blocks/detail.d.ts

@@ -0,0 +1,8 @@
+import { type BlockClass } from '../block.js';
+import type { BlockScope } from '../define.js';
+/**
+ * `<cube-detail>`: one row of a resource as a list of label and value. With `editable` (and `update` allowed) the
+ * writable fields can be edited; a save sends only what changed, with the version the row was loaded with, so an
+ * edit made by someone else meanwhile is never overwritten.
+ */
+export declare function detailBlock(Base: BlockClass, scope: BlockScope): BlockClass;

package/dist/ui/blocks/detail.js

@@ -0,0 +1,270 @@
+import { isDmpError } from '../../errors.js';
+import { CARD_CSS, requiredAttr } from '../aggregate-block.js';
+import { exampleBadge } from '../block.js';
+import { clear, h } from '../dom.js';
+import { columnsFor, fieldLabel, fieldList, readFieldConfigs } from '../fields.js';
+import { formatValue } from '../format.js';
+import { EDITOR_CSS, editorFor } from '../inputs.js';
+import { NL } from '../texts.js';
+import { attemptFor, showAlert, showWriteFailure, userOf, WRITE_CSS } from '../write.js';
+const CSS = `${CARD_CSS}${EDITOR_CSS}${WRITE_CSS}
+dl{display:grid;grid-template-columns:minmax(8rem,max-content) 1fr;gap:.5rem 1rem;margin:0}
+dt{font-weight:600}
+dd{margin:0;min-width:0;overflow-wrap:anywhere}
+`;
+const writable = (column) => column.field !== undefined && !column.field.readonly;
+/** Whether `next` (as an editor read it) is what the row already holds, so it need not be sent. */
+function unchanged(column, before, next) {
+    const was = before === undefined || before === '' ? null : before;
+    if (was === next)
+        return true;
+    // A checkbox cannot show "nothing": unticked over an empty value is no change of its own.
+    if (was === null && next === false && column.format === 'boolean')
+        return true;
+    if (was === null || next === null)
+        return false;
+    // A date the DMP sends as a full timestamp is the same day the date picker shows.
+    if (column.format === 'date' && typeof was === 'string' && typeof next === 'string') {
+        return was.slice(0, 10) === next;
+    }
+    if (typeof next === 'number' && typeof was === 'string')
+        return Number(was) === next;
+    // A text box shows a stored number as its digits: the same digits are no change.
+    if (typeof next === 'string' && typeof was === 'number')
+        return String(was) === next;
+    // The picker shows minutes: seconds the DMP stored are not a change the person made.
+    if (column.format === 'datetime' && typeof was === 'string' && typeof next === 'string') {
+        const minute = (text) => Math.floor(Date.parse(text) / 60000);
+        return minute(was) === minute(next);
+    }
+    return typeof was === 'object' && JSON.stringify(was) === JSON.stringify(next);
+}
+/**
+ * `<cube-detail>`: one row of a resource as a list of label and value. With `editable` (and `update` allowed) the
+ * writable fields can be edited; a save sends only what changed, with the version the row was loaded with, so an
+ * edit made by someone else meanwhile is never overwritten.
+ */
+export function detailBlock(Base, scope) {
+    const doc = scope.document;
+    class CubeDetail extends Base {
+        static tag = 'cube-detail';
+        static css = CSS;
+        /** Outside the body, so a reload after saving keeps "Opgeslagen." where a screen reader already watches. */
+        status = h(doc, 'p', { class: 'status', role: 'status' });
+        loaded = null;
+        /**
+         * The record being edited: while it is open, a reload of that same record would wipe what was typed, so it
+         * waits until the edit closes. That includes a session change and a changed fields or editable attribute.
+         */
+        editing = null;
+        /** One key per save attempt; kept only to retry the same body after the answer never came. */
+        attempt = null;
+        /** The record a save just switched back to view: the reload that follows keeps "Opgeslagen." and focus. */
+        saved = null;
+        edit = null;
+        constructor() {
+            super();
+            this.shadowRoot?.appendChild(this.status);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.editing = null;
+        }
+        refresh() {
+            const open = this.editing;
+            if (open !== null
+                && open.resource === this.attr('resource')?.trim()
+                && open.id === this.recordId()
+                && open.user === userOf(this.loaded?.session)) {
+                return Promise.resolve();
+            }
+            this.editing = null;
+            return super.refresh();
+        }
+        shownFields() {
+            return this.loaded?.columns.map((column) => column.name) ?? [];
+        }
+        recordId() {
+            const id = this.attr('record-id')?.trim() ?? '';
+            return id === '' ? null : id;
+        }
+        async load(signal, session) {
+            if (session === null)
+                return;
+            this.loaded = null;
+            const resource = requiredAttr(this, 'resource');
+            const id = this.recordId();
+            const notice = this.saved !== null && this.saved.resource === resource && this.saved.id === id;
+            this.saved = null;
+            if (!notice)
+                this.status.textContent = '';
+            if (id === null) {
+                this.showState('empty', NL.chooseRow);
+                return;
+            }
+            const schema = await session.schema(resource);
+            if (signal.aborted)
+                return;
+            const names = fieldList(this.attr('fields'));
+            const response = await session
+                .resource(resource)
+                .get(id, names === null ? {} : { fields: names }, { signal });
+            if (signal.aborted)
+                return;
+            const row = response.data;
+            const loaded = {
+                session,
+                resource,
+                id,
+                columns: columnsFor(schema, names, readFieldConfigs(this), row),
+                row,
+                version: response.recordVersion,
+                canEdit: this.flag('editable') && this.allowsUpdate(schema),
+            };
+            this.loaded = loaded;
+            this.renderView(loaded);
+            if (notice)
+                this.edit?.focus();
+        }
+        allowsUpdate(schema) {
+            return schema !== null && schema.actions.includes('update');
+        }
+        renderView(loaded) {
+            this.edit = loaded.canEdit && loaded.columns.some(writable)
+                ? h(doc, 'button', { type: 'button', onclick: () => this.startEditing(loaded) }, NL.edit)
+                : null;
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, h(doc, 'dl', {}, ...loaded.columns.flatMap((column) => this.pair(loaded, column))), this.edit === null
+                ? null
+                : h(doc, 'div', { class: 'actions' }, this.edit, this.notSaved(loaded.session))));
+        }
+        pair(loaded, column) {
+            const example = this.exampleField(loaded.session, loaded.resource, column.name);
+            return [
+                h(doc, 'dt', {}, column.label, ...(example ? [' ', exampleBadge(doc)] : [])),
+                h(doc, 'dd', { class: example ? 'example' : null }, formatValue(loaded.row[column.name], column.format)),
+            ];
+        }
+        startEditing(loaded) {
+            this.editing = { resource: loaded.resource, id: loaded.id, user: userOf(loaded.session) };
+            this.status.textContent = '';
+            const editors = [];
+            const items = loaded.columns.map((column) => {
+                if (!writable(column))
+                    return h(doc, 'dl', {}, ...this.pair(loaded, column));
+                const editor = editorFor(doc, column, loaded.row[column.name], column.field?.nullable === false);
+                editors.push(editor);
+                return editor.element;
+            });
+            const alert = h(doc, 'div', { class: 'alert', role: 'alert', tabindex: '-1', hidden: true });
+            const save = h(doc, 'button', { type: 'submit' }, NL.save);
+            const cancel = h(doc, 'button', {
+                type: 'button',
+                class: 'secondary',
+                onclick: () => {
+                    this.editing = null;
+                    this.attempt = null;
+                    this.renderView(loaded);
+                    this.edit?.focus();
+                },
+            }, NL.cancel);
+            const form = h(doc, 'form', { novalidate: true }, alert, ...items, h(doc, 'div', { class: 'actions' }, save, cancel, this.notSaved(loaded.session)));
+            form.addEventListener('submit', (event) => {
+                event.preventDefault();
+                void this.save(loaded, editors, { alert, save, cancel: cancel });
+            });
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, form));
+            editors[0]?.element.querySelector('input,select,textarea')?.focus();
+        }
+        async save(loaded, editors, ui) {
+            if (ui.save.disabled)
+                return;
+            const body = {};
+            let invalid = false;
+            for (const editor of editors) {
+                const read = editor.read();
+                const column = loaded.columns.find((candidate) => candidate.name === editor.name);
+                if ('error' in read) {
+                    editor.setError(read.error);
+                    invalid = true;
+                    continue;
+                }
+                editor.setError(null);
+                if (!unchanged(column, loaded.row[editor.name], read.value))
+                    body[editor.name] = read.value;
+            }
+            if (invalid) {
+                showAlert(doc, ui.alert, NL.formInvalid);
+                return;
+            }
+            if (Object.keys(body).length === 0) {
+                this.editing = null;
+                this.renderView(loaded);
+                this.edit?.focus();
+                return;
+            }
+            const fingerprint = JSON.stringify([loaded.resource, loaded.id, body]);
+            this.attempt = attemptFor(this.attempt, fingerprint);
+            const options = { idempotencyKey: this.attempt.key };
+            if (loaded.version !== null)
+                options.ifMatch = loaded.version;
+            ui.save.disabled = true;
+            ui.cancel.disabled = true;
+            ui.alert.hidden = true;
+            try {
+                // The session as it is now: one that changed meanwhile drops this edit, and must not send it.
+                const session = await this.session();
+                if (this.editing !== null && this.editing.user !== userOf(session)) {
+                    this.editing = null;
+                    void this.refresh();
+                    return;
+                }
+                const response = await session.resource(loaded.resource).update(loaded.id, body, options);
+                this.attempt = null;
+                const row = response.data;
+                // Only while this edit is still on screen; the row was saved either way, so it is always announced.
+                if (this.loaded === loaded && this.editing !== null) {
+                    this.editing = null;
+                    const merged = { ...loaded.row, ...body, ...row };
+                    const saved = { ...loaded, row: merged, version: response.recordVersion };
+                    this.loaded = saved;
+                    this.saved = { resource: loaded.resource, id: loaded.id };
+                    this.renderView(saved);
+                    this.status.textContent = NL.saved;
+                    this.edit?.focus();
+                }
+                this.emit('cube-saved', { resource: loaded.resource, id: row.id ?? loaded.id, row });
+                // The detail listens for this too: its reload only brings the data up to date.
+                this.emit('cube-data-change', { resource: loaded.resource });
+            }
+            catch (error) {
+                if (this.loaded !== loaded || this.editing === null)
+                    return;
+                ui.cancel.disabled = false;
+                this.failed(error, editors, ui);
+            }
+        }
+        failed(error, editors, ui) {
+            // The DMP answered, so the attempt is over; without an answer the same body may go again with its key.
+            if (isDmpError(error))
+                this.attempt = null;
+            if (isDmpError(error) && (error.status === 409 || error.status === 412)) {
+                // Saving again would only meet the same newer version: the way on is to load it first.
+                const reload = h(doc, 'button', {
+                    type: 'button',
+                    class: 'secondary',
+                    onclick: () => {
+                        this.editing = null;
+                        void this.refresh();
+                    },
+                }, NL.reload);
+                showAlert(doc, ui.alert, NL.conflict, reload);
+                return;
+            }
+            ui.save.disabled = false;
+            showWriteFailure(doc, ui.alert, error, editors, (field) => fieldLabel(readFieldConfigs(this), field));
+        }
+    }
+    return CubeDetail;
+}

package/dist/ui/blocks/field.d.ts

@@ -0,0 +1,8 @@
+import type { BlockScope } from '../define.js';
+/** Set on a cube-field once connected: whether the page itself marked the field `hidden`. */
+export declare const AUTHOR_HIDDEN: unique symbol;
+/**
+ * `<cube-field>`: configuration a table, detail or form reads; it renders nothing. It takes `hidden` on connect
+ * so stray text inside never shows, which is why the page's own `hidden` (leave the field out) is kept aside first.
+ */
+export declare function fieldElement(scope: BlockScope): CustomElementConstructor;

package/dist/ui/blocks/field.js

@@ -0,0 +1,16 @@
+/** Set on a cube-field once connected: whether the page itself marked the field `hidden`. */
+export const AUTHOR_HIDDEN = Symbol('cube-field hidden');
+/**
+ * `<cube-field>`: configuration a table, detail or form reads; it renders nothing. It takes `hidden` on connect
+ * so stray text inside never shows, which is why the page's own `hidden` (leave the field out) is kept aside first.
+ */
+export function fieldElement(scope) {
+    return class CubeField extends scope.HTMLElement {
+        [AUTHOR_HIDDEN];
+        connectedCallback() {
+            if (this[AUTHOR_HIDDEN] === undefined)
+                this[AUTHOR_HIDDEN] = this.hasAttribute('hidden');
+            this.hidden = true;
+        }
+    };
+}

package/dist/ui/blocks/form.d.ts

@@ -0,0 +1,8 @@
+import type { BlockClass } from '../block.js';
+import type { BlockScope } from '../define.js';
+/**
+ * `<cube-form>`: a new row of a resource. Only writable fields get an editor; read-only fields and `id` are never
+ * shown and never sent. One submit makes one row: a double click sends once, and a retry after a network error
+ * sends the same idempotency key, so the DMP never creates it twice.
+ */
+export declare function formBlock(Base: BlockClass, scope: BlockScope): BlockClass;

package/dist/ui/blocks/form.js

@@ -0,0 +1,153 @@
+import { isDmpError } from '../../errors.js';
+import { CARD_CSS, requiredAttr } from '../aggregate-block.js';
+import { clear, h } from '../dom.js';
+import { columnsFor, fieldLabel, fieldList, readFieldConfigs } from '../fields.js';
+import { EDITOR_CSS, editorFor } from '../inputs.js';
+import { NL } from '../texts.js';
+import { attemptFor, showWriteFailure, WRITE_CSS } from '../write.js';
+const CSS = `${CARD_CSS}${EDITOR_CSS}${WRITE_CSS}`;
+/** The attributes the form was drawn for (with the user): a load for the same key would only wipe what was typed. */
+const SHOWN_BY = ['resource', 'fields', 'submit-label', 'success-text'];
+/**
+ * `<cube-form>`: a new row of a resource. Only writable fields get an editor; read-only fields and `id` are never
+ * shown and never sent. One submit makes one row: a double click sends once, and a retry after a network error
+ * sends the same idempotency key, so the DMP never creates it twice.
+ */
+export function formBlock(Base, scope) {
+    const doc = scope.document;
+    class CubeForm extends Base {
+        static tag = 'cube-form';
+        static css = CSS;
+        /** Outside the body, so a screen reader watching it already hears the confirmation. */
+        status = h(doc, 'p', { class: 'status', role: 'status' });
+        drawn = null;
+        shown = null;
+        attempt = null;
+        constructor() {
+            super();
+            this.shadowRoot?.appendChild(this.status);
+        }
+        shownFields() {
+            return this.drawn?.columns.map((column) => column.name) ?? [];
+        }
+        key() {
+            // Signing out or in redraws: what someone else typed is not theirs to send.
+            const user = this.drawn?.session.user()?.id ?? null;
+            return JSON.stringify([...SHOWN_BY.map((name) => this.attr(name)), user]);
+        }
+        /** A text attribute, or `fallback` when it is absent or blank. */
+        text(name, fallback) {
+            const value = this.attr(name)?.trim() ?? '';
+            return value === '' ? fallback : value;
+        }
+        refresh() {
+            // A data change (this form's own create, or another block's save) must not wipe the form or its thanks.
+            if (this.shown === this.key())
+                return Promise.resolve();
+            this.shown = null;
+            return super.refresh();
+        }
+        async load(signal, session) {
+            if (session === null)
+                return;
+            this.drawn = null;
+            this.attempt = null;
+            const resource = requiredAttr(this, 'resource');
+            const schema = await session.schema(resource);
+            if (signal.aborted)
+                return;
+            if (schema === null || !schema.actions.includes('create')) {
+                this.showState({ kind: 'forbidden', detail: null, retry: false });
+                return;
+            }
+            const writable = schema.fields.filter((field) => !field.readonly && field.name !== 'id');
+            const listed = fieldList(this.attr('fields'));
+            const names = (listed ?? writable.map((field) => field.name))
+                .filter((name) => writable.some((field) => field.name === name));
+            const columns = columnsFor(schema, names, readFieldConfigs(this));
+            if (columns.length === 0) {
+                this.showState({ kind: 'error', detail: NL.noWritableFields, retry: false });
+                return;
+            }
+            this.drawn = { session, resource, columns };
+            this.shown = this.key();
+            this.renderForm(false);
+        }
+        renderForm(focus) {
+            const drawn = this.drawn;
+            this.status.textContent = '';
+            const editors = drawn.columns.map((column) => editorFor(doc, column, null, column.field?.nullable === false && column.format !== 'boolean'));
+            const alert = h(doc, 'div', { class: 'alert', role: 'alert', tabindex: '-1', hidden: true });
+            const save = h(doc, 'button', { type: 'submit' }, this.text('submit-label', NL.save));
+            const form = h(doc, 'form', { novalidate: true }, alert, ...editors.map((editor) => editor.element), h(doc, 'div', { class: 'actions' }, save, this.notSaved(drawn.session)));
+            form.addEventListener('submit', (event) => {
+                event.preventDefault();
+                void this.submit(drawn, editors, alert, save);
+            });
+            clear(this.body);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, form));
+            if (focus)
+                inputOf(editors[0])?.focus();
+        }
+        async submit(drawn, editors, alert, save) {
+            // Disabled synchronously below, before the first await: a second submit in the same tick stops here.
+            if (save.disabled)
+                return;
+            const body = {};
+            let firstInvalid = null;
+            for (const editor of editors) {
+                const read = editor.read();
+                editor.setError('error' in read ? read.error : null);
+                if ('error' in read)
+                    firstInvalid ??= editor;
+                else if (read.value !== null)
+                    body[editor.name] = read.value;
+            }
+            if (firstInvalid !== null) {
+                alert.hidden = true;
+                inputOf(firstInvalid)?.focus();
+                return;
+            }
+            this.attempt = attemptFor(this.attempt, JSON.stringify([drawn.resource, body]));
+            const key = this.attempt.key;
+            save.disabled = true;
+            alert.hidden = true;
+            try {
+                const session = await this.session();
+                const response = await session.resource(drawn.resource).create(body, { idempotencyKey: key });
+                this.attempt = null;
+                const row = response.data;
+                // The row exists either way; only the thanks belongs to the form it was sent from.
+                if (this.drawn === drawn)
+                    this.done();
+                this.emit('cube-created', { resource: drawn.resource, row });
+                this.emit('cube-data-change', { resource: drawn.resource });
+            }
+            catch (error) {
+                // The DMP answered, so the attempt is over; without an answer the same body may go again with its key.
+                if (isDmpError(error))
+                    this.attempt = null;
+                if (this.drawn !== drawn)
+                    return;
+                save.disabled = false;
+                showWriteFailure(doc, alert, error, editors, (field) => fieldLabel(readFieldConfigs(this), field));
+            }
+        }
+        done() {
+            const another = h(doc, 'button', { type: 'button', onclick: () => this.renderForm(true) }, NL.another);
+            clear(this.body);
+            const note = this.drawn === null ? null : this.notSaved(this.drawn.session);
+            this.body.appendChild(h(doc, 'div', { class: 'card' }, h(doc, 'div', { class: 'actions' }, another, note)));
+            this.status.textContent = this.text('success-text', NL.formSaved);
+            // A tick later, so the polite status is queued before the focus change makes the reader speak the button.
+            scope.setTimeout(() => {
+                if (another.isConnected)
+                    another.focus();
+            }, 0);
+        }
+    }
+    return CubeForm;
+}
+function inputOf(editor) {
+    return editor?.element.querySelector('input,select,textarea') ?? null;
+}

package/dist/ui/blocks/gap-list.d.ts

@@ -0,0 +1,4 @@
+import type { BlockClass } from '../block.js';
+import type { BlockScope } from '../define.js';
+/** `<cube-gap-list>`: what a wireframe shows that the DMP does not have yet, and why, for the people who build it. */
+export declare function gapListBlock(Base: BlockClass, scope: BlockScope): BlockClass;