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

package/dist/cube-ui.manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest": 1,
   "package": "@cube-nl/dmp-sdk",
-  "version": "1.1.0-rc.1",
+  "version": "1.1.0-rc.2",
   "file": "cube-sdk.js",
   "blocks": {
     "cube-state": {
@@ -665,7 +665,7 @@
         "cube-result"
       ],
       "properties": {
-        "formula": "(values) => results, a synchronous function: an async one gives a Promise, which shows \"—\". Set from a script, never as an attribute: a string is refused, nothing is evaluated. values has each cube-input by name: a number, a text, a boolean, or null when empty or invalid. Return an object by cube-result name, or one number or text when there is a single cube-result. null, undefined, NaN and Infinity show \"—\".",
+        "formula": "(values) => results, a synchronous function: an async one is refused with an error. Set from a script, never as an attribute: a string is refused, nothing is evaluated. values has each cube-input by name: a number, a text, a boolean, or null when empty or invalid. Return an object by cube-result name, or one number or text when there is a single cube-result. null, undefined, NaN and Infinity show \"—\"; an object as the value of a number, integer, currency or percent result shows \"—\" like NaN. Names of cube-inputs, and of cube-results, must be unique.",
         "values": "Read-only: the values the formula got last.",
         "results": "Read-only: the results shown last, by cube-result name (null for \"—\")."
       },
@@ -825,7 +825,7 @@
         "sort": {
           "type": "string",
           "required": false,
-          "summary": "The order of the cards in each column: a field that is sortable on the resource, with - in front for descending.",
+          "summary": "The order of the cards in each column: a field that is sortable on the resource, with - in front for descending; a moved card takes its place in that order; without sort it goes on top.",
           "example": "-due_on"
         },
         "filter": {

package/dist/preview.d.ts

@@ -85,3 +85,5 @@ export declare class PreviewStore {
      */
     private authorize;
 }
+/** Nulls first, numbers as numbers, everything else as text (ISO dates sort correctly as text). */
+export declare function compare(a: unknown, b: unknown): number;

package/dist/preview.js

@@ -2,7 +2,14 @@ import { DmpError } from './errors.js';
 import { buildQuery } from './query.js';
 const RESOURCE_NAME = /^[a-z][a-z0-9_]*$/;
 const OPERATORS = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'like', 'ilike', 'is', 'between'];
-const SYMBOLS = [['>=', 'gte'], ['<=', 'lte'], ['<>', 'neq'], ['>', 'gt'], ['<', 'lt'], ['=', 'eq']];
+const SYMBOLS = [
+    ['>=', 'gte'],
+    ['<=', 'lte'],
+    ['<>', 'neq'],
+    ['>', 'gt'],
+    ['<', 'lt'],
+    ['=', 'eq'],
+];
 const FUNCTIONS = ['count', 'sum', 'avg', 'min', 'max'];
 const UNITS = ['day', 'week', 'month', 'quarter', 'year'];
 const MAX_FILTERS = 20;
@@ -176,7 +183,9 @@ function table(name, resource) {
     for (const [fieldName, choice] of choiceEntries) {
         choices.set(fieldName, choice.values);
     }
-    const known = (list) => Array.isArray(list) ? list.filter((item) => typeof item === 'string' && fields.has(item)) : null;
+    const known = (list) => Array.isArray(list)
+        ? list.filter((item) => typeof item === 'string' && fields.has(item))
+        : null;
     return {
         name,
         actions: Array.isArray(schema.actions)
@@ -502,7 +511,9 @@ function aggregator(table, fn) {
     }
     const allowed = table.aggregatable.get(target);
     if (allowed === undefined) {
-        throw problem(422, 'query_invalid', `Unknown aggregatable field: ${target}.`, { fn: [aggregatableHint(table)] });
+        throw problem(422, 'query_invalid', `Unknown aggregatable field: ${target}.`, {
+            fn: [aggregatableHint(table)],
+        });
     }
     if (!allowed.includes(name)) {
         throw problem(422, 'query_invalid', `${name} is not allowed on ${target}.`, {
@@ -521,9 +532,13 @@ function aggregator(table, fn) {
             case 'avg':
                 return numbers.length === 0 ? null : numbers.reduce((sum, value) => sum + value, 0) / numbers.length;
             case 'min':
-                return values.length === 0 ? null : values.reduce((low, value) => (compare(value, low) < 0 ? value : low));
+                return values.length === 0
+                    ? null
+                    : values.reduce((low, value) => (compare(value, low) < 0 ? value : low));
             default:
-                return values.length === 0 ? null : values.reduce((high, value) => (compare(value, high) > 0 ? value : high));
+                return values.length === 0
+                    ? null
+                    : values.reduce((high, value) => (compare(value, high) > 0 ? value : high));
         }
     };
 }
@@ -816,7 +831,7 @@ function same(actual, expected) {
     return actual === expected || (typeof actual !== 'object' && String(actual) === String(expected));
 }
 /** Nulls first, numbers as numbers, everything else as text (ISO dates sort correctly as text). */
-function compare(a, b) {
+export function compare(a, b) {
     if (a == null || b == null) {
         return a == null ? (b == null ? 0 : -1) : 1;
     }

package/dist/size.json

@@ -1,6 +1,6 @@
 {
-  "core_gzip": 17364,
-  "total_gzip": 43471,
-  "ui_gzip": 26107,
+  "core_gzip": 18169,
+  "total_gzip": 46472,
+  "ui_gzip": 28303,
   "budget_gzip": 40960
 }

package/dist/trial.d.ts

@@ -0,0 +1,32 @@
+/**
+ * What the DMP writes into a trial page (`<script type="application/json" id="cube-trial-config">`): the maker's
+ * app on the maker's own data, read-only, with a token that lives only in this page.
+ */
+export interface TrialConfig {
+    mode: 'trial';
+    /** The DMP's origin. */
+    dmpUrl: string;
+    /** The REST face's base URL. */
+    apiUrl: string;
+    /** The read-only trial token, `cubeproef_…`. Never stored, never logged. */
+    token: string;
+    /** ISO 8601. */
+    expiresAt: string;
+    /** `GET` answers whether the trial is still open (the auto-refresh polls it). */
+    statusUrl: string;
+    version: string | null;
+    soort: string | null;
+    /** The DMP's user id of the maker. */
+    userId: string | null;
+    /** The resources the trial reads, for the banner. */
+    leest: string[];
+}
+/**
+ * Reads the injected config and removes its element, so the token is out of the DOM. The SDK calls it once when the
+ * script evaluates; the result is what `trialConfig()` answers from then on (a later call that finds an element
+ * replaces it, one that finds none changes nothing and answers null). Anything but a complete `mode: 'trial'` config
+ * is warned about and means no trial: the app starts as it would without one.
+ */
+export declare function readTrialConfig(doc?: Document): TrialConfig | null;
+/** The trial config this page was served with, or null outside a trial. */
+export declare function trialConfig(): TrialConfig | null;

package/dist/trial.js

@@ -0,0 +1,55 @@
+const ELEMENT_ID = 'cube-trial-config';
+const REQUIRED = ['dmpUrl', 'apiUrl', 'token', 'expiresAt', 'statusUrl'];
+let current = null;
+/**
+ * Reads the injected config and removes its element, so the token is out of the DOM. The SDK calls it once when the
+ * script evaluates; the result is what `trialConfig()` answers from then on (a later call that finds an element
+ * replaces it, one that finds none changes nothing and answers null). Anything but a complete `mode: 'trial'` config
+ * is warned about and means no trial: the app starts as it would without one.
+ */
+export function readTrialConfig(doc) {
+    const element = doc?.getElementById(ELEMENT_ID) ?? null;
+    // Without the element there is nothing new to read: the config read before stays (the element is gone by now).
+    if (element === null) {
+        return null;
+    }
+    current = null;
+    element.remove();
+    let value = null;
+    try {
+        const parsed = JSON.parse(element.textContent ?? '');
+        value = parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : null;
+    }
+    catch {
+        // Reported below, without the content: it holds the token.
+    }
+    if (value?.mode !== 'trial' || REQUIRED.some((key) => typeof value[key] !== 'string' || value[key] === '')) {
+        console.warn(`#${ELEMENT_ID} is not a complete trial config; the app starts without it.`);
+        return null;
+    }
+    const text = (key) => (typeof value[key] === 'string' ? value[key] : null);
+    const leest = value.leest;
+    current = {
+        mode: 'trial',
+        dmpUrl: value.dmpUrl,
+        apiUrl: value.apiUrl,
+        token: value.token,
+        expiresAt: value.expiresAt,
+        statusUrl: value.statusUrl,
+        version: text('version'),
+        soort: text('soort'),
+        userId: text('userId'),
+        leest: Array.isArray(leest) ? leest.filter((name) => typeof name === 'string') : [],
+    };
+    return current;
+}
+/** The trial config this page was served with, or null outside a trial. */
+export function trialConfig() {
+    return current;
+}
+// At evaluation, before any app code runs: the element must be gone before the app could read or dump the DOM.
+if (typeof document !== 'undefined') {
+    readTrialConfig(document);
+}

package/dist/ui/aggregate-block.js

@@ -1,6 +1,7 @@
 // What the aggregate blocks (cube-kpi, cube-chart, cube-top) share: their required attributes, the measure and
 // filter they ask with, the period picker they follow and how they write a value.
 import { isDmpError } from '../errors.js';
+import { AuthorError } from './author-error.js';
 import { BlockStateError } from './block.js';
 import { formatValue, parseMeasure } from './format.js';
 import { blockFilter, dateFieldFor, lookupLabels, periodFilter, resolvePeriodSource, } from './query.js';
@@ -19,7 +20,7 @@ export const LABEL_CSS = `
 export function requiredAttr(el, name) {
     const value = el.getAttribute(name)?.trim() ?? '';
     if (value === '')
-        throw new TypeError(NL.invalid.missing(el.localName, name));
+        throw new AuthorError(NL.invalid.missing(el.localName, name));
     return value;
 }
 /** The fields an aggregate block reads: the measured one, the `by` field (without its truncation), the date field. */

package/dist/ui/author-error.d.ts

@@ -0,0 +1,3 @@
+/** A wrong attribute or markup by the app's builder: the one error whose (Dutch) message a block shows. */
+export declare class AuthorError extends TypeError {
+}

package/dist/ui/author-error.js

@@ -0,0 +1,3 @@
+/** A wrong attribute or markup by the app's builder: the one error whose (Dutch) message a block shows. */
+export class AuthorError extends TypeError {
+}

package/dist/ui/block.d.ts

@@ -13,8 +13,9 @@ export declare class BlockStateError extends Error {
     constructor(state: BlockState);
 }
 /**
- * What a failure looks like to the person on the page. Only a TypeError carries its message: the blocks throw
- * those for a wrong attribute, in Dutch. A server's text is never shown.
+ * What a failure looks like to the person on the page. Only an AuthorError carries its message: the blocks throw
+ * those for a wrong attribute, in Dutch. A server's text, a network failure or a client's English programmer error
+ * never does.
  */
 export declare function stateFor(error: unknown): BlockState;
 /**
@@ -29,6 +30,11 @@ export declare abstract class CubeBlockShape extends HTMLElement {
     static css: string;
     /** False for blocks that render without data (cube-state): they never take the session to render. */
     static needsSession: boolean;
+    /**
+     * False for a block that already shows what its own cube-data-change reports (cube-board): it does not reload on
+     * it.
+     */
+    static reloadsOnOwnChange: boolean;
     static observedAttributes: string[];
     /** The block's content root inside its shadow root. */
     readonly body: HTMLElement;

package/dist/ui/block.js

@@ -1,6 +1,7 @@
 import { CubeApp } from '../app.js';
 import { isDmpError } from '../errors.js';
 import { BLOCK_ATTRIBUTES } from './attributes.js';
+import { AuthorError } from './author-error.js';
 import { clear, h } from './dom.js';
 import { BASE_CSS, sheet } from './styles.js';
 import { NL } from './texts.js';
@@ -13,8 +14,9 @@ export class BlockStateError extends Error {
     }
 }
 /**
- * What a failure looks like to the person on the page. Only a TypeError carries its message: the blocks throw
- * those for a wrong attribute, in Dutch. A server's text is never shown.
+ * What a failure looks like to the person on the page. Only an AuthorError carries its message: the blocks throw
+ * those for a wrong attribute, in Dutch. A server's text, a network failure or a client's English programmer error
+ * never does.
  */
 export function stateFor(error) {
     if (error instanceof BlockStateError)
@@ -25,7 +27,7 @@ export function stateFor(error) {
         if (error.status === 403)
             return { kind: 'forbidden', detail: null };
     }
-    if (error instanceof TypeError)
+    if (error instanceof AuthorError)
         return { kind: 'error', detail: error.message };
     return { kind: 'error', detail: null };
 }
@@ -56,6 +58,7 @@ export function blockBase(scope, options = {}) {
         static tag = '';
         static css = '';
         static needsSession = true;
+        static reloadsOnOwnChange = true;
         static get observedAttributes() {
             return [...(BLOCK_ATTRIBUTES[this.tag] ?? [])];
         }
@@ -67,6 +70,8 @@ export function blockBase(scope, options = {}) {
         badge = null;
         onSessionChange = () => this.schedule();
         onDataChange = (event) => {
+            if (event.composedPath()[0] === this && !this.constructor.reloadsOnOwnChange)
+                return;
             const resource = event.detail?.resource;
             const own = this.getAttribute('resource')?.trim() ?? '';
             if (typeof resource === 'string' && own !== '' && resource.trim() === own)
@@ -153,6 +158,10 @@ export function blockBase(scope, options = {}) {
                     return;
                 this.badge?.remove();
                 this.showState(stateFor(error));
+                // The page shows only the generic text; the builder finds the real reason in the console.
+                if (error instanceof TypeError && !(error instanceof AuthorError)) {
+                    console.warn(`${this.localName}:`, error);
+                }
             }
             finally {
                 // An aborted run leaves the flag to the newer run (or to disconnect).
@@ -206,7 +215,7 @@ export function blockBase(scope, options = {}) {
                 return fallback;
             const value = Number(raw);
             if (!Number.isFinite(value))
-                throw new TypeError(NL.invalid.number(this.localName, name));
+                throw new AuthorError(NL.invalid.number(this.localName, name));
             return value;
         }
         json(name) {
@@ -217,7 +226,7 @@ export function blockBase(scope, options = {}) {
                 return JSON.parse(raw);
             }
             catch {
-                throw new TypeError(NL.invalid.json(this.localName, name));
+                throw new AuthorError(NL.invalid.json(this.localName, name));
             }
         }
         emit(name, detail = null) {

package/dist/ui/blocks/app-shell.js

@@ -126,7 +126,7 @@ export function appShellBlock(Base, scope) {
             let wanted = '';
             if (hash.startsWith(PREFIX)) {
                 try {
-                    wanted = decodeURIComponent(hash.slice(PREFIX.length));
+                    wanted = decodeURIComponent(hash.slice(PREFIX.length).split('?')[0] ?? '');
                 }
                 catch {
                     wanted = '';

package/dist/ui/blocks/board.js

@@ -26,6 +26,34 @@ dd{margin:0;min-width:0}
 .not-saved{display:inline-block;margin-bottom:.75rem}
 `;
 const keyOf = (row) => String(row.id);
+/** As the server reads `sort`: comma-separated, a leading - for descending. */
+function sortKeys(sort) {
+    return sort.split(',').map((item) => item.trim()).filter((item) => item !== '').map((item) => ({
+        field: item.replace(/^[-+]/, ''),
+        descending: item.startsWith('-'),
+    }));
+}
+/** As the preview sorts: nulls first, numbers as numbers, booleans as 0/1, everything else as text. */
+function compare(a, b) {
+    if (a == null || b == null)
+        return a == null ? (b == null ? 0 : -1) : 1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (typeof a === 'boolean' || typeof b === 'boolean') {
+        return Number(a === true || a === 1 || a === '1') - Number(b === true || b === 1 || b === '1');
+    }
+    const left = String(a);
+    const right = String(b);
+    return left < right ? -1 : left > right ? 1 : 0;
+}
+function sortOrder(order, a, b) {
+    for (const { field, descending } of order) {
+        const result = compare(a[field], b[field]);
+        if (result !== 0)
+            return descending ? -result : result;
+    }
+    return 0;
+}
 /** Why a move was refused, in words for the person; never the server's or the browser's own text. */
 function reason(error) {
     if (isDmpError(error) && (error.status === 409 || error.status === 412))
@@ -43,6 +71,7 @@ export function boardBlock(Base, scope) {
     class CubeBoard extends Base {
         static tag = 'cube-board';
         static css = CSS;
+        static reloadsOnOwnChange = false;
         /** Outside the body, so the reload after a refusal keeps the reason on screen. */
         alert = h(doc, 'div', { class: 'alert', role: 'alert', hidden: true });
         loaded = null;
@@ -50,8 +79,6 @@ export function boardBlock(Base, scope) {
         /** Moves queued or on their way: a reload waits for them, or it would show a card where it no longer is. */
         pending = 0;
         stale = false;
-        /** Set while its own cube-data-change is under way: the board already shows what it saved. */
-        own = false;
         dragged = null;
         /** The card to focus once the board is drawn again. */
         focusKey = null;
@@ -66,8 +93,6 @@ export function boardBlock(Base, scope) {
             return loaded === null ? [] : [loaded.status, loaded.title, ...loaded.fields.map((field) => field.name)];
         }
         refresh() {
-            if (this.own)
-                return Promise.resolve();
             if (this.pending > 0) {
                 this.stale = true;
                 return Promise.resolve();
@@ -88,14 +113,23 @@ export function boardBlock(Base, scope) {
             const filter = blockFilter(this);
             const size = Math.min(wholeAttr(this, 'page-size', 1, 50), 200);
             const sort = this.attr('sort')?.trim() ?? '';
+            const order = sortKeys(sort);
             const schema = await session.schema(resource);
             if (signal.aborted)
                 return;
             const field = schema?.fields.find((candidate) => candidate.name === status);
+            // A card cannot be updated without its id; a resource without one gives a read-only board.
+            const hasId = schema === null || schema.fields.some((candidate) => candidate.name === 'id');
             const names = fieldList(this.attr('fields'));
             const fields = names === null ? [] : columnsFor(schema, names, readFieldConfigs(this));
             const query = {
-                fields: [...new Set(['id', title, status, ...fields.map((column) => column.name)])],
+                fields: [...new Set([
+                        ...(hasId ? ['id'] : []),
+                        title,
+                        status,
+                        ...fields.map((column) => column.name),
+                        ...order.map((key) => key.field),
+                    ])],
                 page: { size },
             };
             if (sort !== '')
@@ -117,7 +151,9 @@ export function boardBlock(Base, scope) {
                 title,
                 fields,
                 columns: answers,
-                canMove: schema !== null && schema.actions.includes('update') && field?.readonly === false,
+                canMove: hasId && schema !== null && schema.actions.includes('update') && field?.readonly === false,
+                order,
+                numeric: field?.type === 'integer' || field?.type === 'number',
             };
             this.loaded = loaded;
             this.tracks.clear();
@@ -150,6 +186,7 @@ export function boardBlock(Base, scope) {
             const more = column.total - column.rows.length;
             return h(doc, 'section', {
                 class: 'card',
+                role: 'group',
                 'aria-labelledby': heading,
                 ondragover: (event) => {
                     if (loaded.canMove && this.dragged !== null)
@@ -200,7 +237,10 @@ export function boardBlock(Base, scope) {
             cards.set(key, card);
             return card;
         }
-        /** Takes the card out of its column and puts it on top of `to`; null when it is not on the board. */
+        /**
+         * Takes the card out of its column and puts it in `to`: at its place by `sort`, else on top; null when it is
+         * not on the board.
+         */
         place(loaded, key, to) {
             const target = loaded.columns.find((column) => column.value === to);
             for (const column of loaded.columns) {
@@ -210,7 +250,13 @@ export function boardBlock(Base, scope) {
                     continue;
                 column.rows.splice(index, 1);
                 column.total--;
-                target.rows.unshift(row);
+                if (loaded.order.length === 0) {
+                    target.rows.unshift(row);
+                }
+                else {
+                    const after = target.rows.findIndex((other) => sortOrder(loaded.order, other, row) > 0);
+                    target.rows.splice(after === -1 ? target.rows.length : after, 0, row);
+                }
                 target.total++;
                 return { row, from: column.value };
             }
@@ -244,7 +290,7 @@ export function boardBlock(Base, scope) {
         }
         async send(loaded, track, row, from, to) {
             const key = keyOf(row);
-            const body = { [loaded.status]: to };
+            const body = { [loaded.status]: loaded.numeric && Number.isFinite(Number(to)) ? Number(to) : to };
             const attempt = attemptFor(this.attempt, JSON.stringify([loaded.resource, key, body]));
             this.attempt = attempt;
             try {
@@ -262,12 +308,7 @@ export function boardBlock(Base, scope) {
                     this.attempt = null;
                 track.confirmed = to;
                 this.emit('cube-move', { resource: loaded.resource, id: row.id, from, to });
-                this.own = true;
                 this.emit('cube-data-change', { resource: loaded.resource });
-                // After the reload the event scheduled, which is a microtask queued before this one.
-                queueMicrotask(() => {
-                    this.own = false;
-                });
             }
             catch (error) {
                 // The DMP answered, so the attempt is over; without an answer the same move may go again with its key.

package/dist/ui/blocks/calc.js

@@ -1,4 +1,5 @@
 import { CARD_CSS, LABEL_CSS, requiredAttr } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
 import { BlockStateError } from '../block.js';
 import { clear, h } from '../dom.js';
 import { parseOptions } from '../fields.js';
@@ -16,6 +17,7 @@ border-top:1px solid var(--cube-color-border)}
 .result output{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
 .result.emphasis output{font-size:2rem;font-weight:700;line-height:1.2}
 .alert{margin:1rem 0 0;color:var(--cube-color-danger,#b42318)}
+.alert:empty{margin:0}
 `;
 const INPUT_TYPES = ['number', 'integer', 'currency', 'percent', 'text', 'select', 'checkbox'];
 const RESULT_FORMATS = ['number', 'integer', 'currency', 'percent', 'text'];
@@ -25,7 +27,7 @@ function choice(el, name, values) {
     const raw = el.getAttribute(name)?.trim() ?? '';
     const value = raw === '' ? values[0] : raw;
     if (!values.includes(value))
-        throw new TypeError(NL.invalid.value(el.localName, name, value));
+        throw new AuthorError(NL.invalid.value(el.localName, name, value));
     return value;
 }
 function numberAttr(el, name) {
@@ -34,7 +36,7 @@ function numberAttr(el, name) {
         return null;
     const value = Number(raw);
     if (!Number.isFinite(value) || (name === 'step' && value <= 0)) {
-        throw new TypeError(NL.invalid.number(el.localName, name));
+        throw new AuthorError(NL.invalid.number(el.localName, name));
     }
     return value;
 }
@@ -119,15 +121,18 @@ export function calcBlock(Base, scope) {
             const inputs = children.filter((el) => el.localName === 'cube-input').map(inputFor);
             const results = children.filter((el) => el.localName === 'cube-result').map(resultFor);
             if (results.length === 0)
-                throw new TypeError(NL.invalid.missing(this.localName, 'cube-result'));
+                throw new AuthorError(NL.invalid.missing(this.localName, 'cube-result'));
+            unique('cube-input', inputs.map((input) => input.editor.name));
+            unique('cube-result', results.map((result) => result.name));
             const label = this.attr('label');
             const heading = label === null || label.trim() === ''
                 ? null
                 : h(doc, 'p', { class: 'label', id: `cube-calc-${++nextId}` }, label);
-            const alert = h(doc, 'p', { class: 'alert', role: 'alert', hidden: true });
+            // Always in the DOM, so a screen reader already knows the live region when the first failure lands.
+            const alert = h(doc, 'p', { class: 'alert', role: 'alert' });
             const form = h(doc, 'form', { novalidate: true, 'aria-labelledby': heading?.id ?? null }, h(doc, 'div', { class: 'inputs' }, ...inputs.map((input) => input.editor.element)), h(doc, 'div', { class: 'results', 'aria-live': 'polite' }, ...results.map((r) => r.element)), alert);
             form.addEventListener('submit', (event) => event.preventDefault());
-            form.addEventListener('input', () => this.calculate(true));
+            form.addEventListener('input', () => this.calculate(true, true));
             form.addEventListener('change', () => this.showErrors());
             clear(this.body);
             this.body.appendChild(h(doc, 'div', { class: 'card' }, heading, form));
@@ -143,7 +148,7 @@ export function calcBlock(Base, scope) {
                 input.editor.setError('error' in read ? read.error : null);
             }
         }
-        calculate(announce) {
+        calculate(announce, typing = false) {
             const drawn = this.drawn;
             if (drawn === null)
                 return;
@@ -162,20 +167,34 @@ export function calcBlock(Base, scope) {
             try {
                 const fn = this.formula;
                 const out = fn === null ? null : fn({ ...values });
+                if ((typeof out === 'object' || typeof out === 'function') && out !== null
+                    && typeof out.then === 'function') {
+                    // Always async, so typing on would not help either.
+                    this.drawn = null;
+                    this.showState({ kind: 'error', detail: NL.invalid.calcAsync, retry: false });
+                    return;
+                }
                 const single = out === null || typeof out !== 'object';
                 if (single && out !== null && out !== undefined && drawn.results.length > 1) {
+                    // While typing the formula may just have taken another branch: a failed calculation, no error.
+                    if (typing)
+                        throw new AuthorError(NL.invalid.calcSingle);
                     this.drawn = null;
                     this.showState({ kind: 'error', detail: NL.invalid.calcSingle, retry: false });
                     return;
                 }
                 for (const result of drawn.results) {
                     const value = single ? out : out[result.name];
-                    const broken = typeof value === 'number' && !Number.isFinite(value);
+                    const broken = (typeof value === 'number' && !Number.isFinite(value))
+                        || (result.format !== 'text' && typeof value === 'object' && value !== null);
                     failed ||= broken;
                     results[result.name] = broken || value === undefined ? null : value;
                 }
             }
-            catch {
+            catch (error) {
+                // Once per failure streak, like the alert: the developer gets the cause, the reader a calm message.
+                if (drawn.alert.textContent === '')
+                    console.warn(error);
                 failed = true;
                 for (const result of drawn.results)
                     results[result.name] = null;
@@ -186,17 +205,21 @@ export function calcBlock(Base, scope) {
                 });
             }
             // Set once per failure: a new text on every keystroke would make the reader say it again and again.
-            if (failed && drawn.alert.hidden)
+            if (failed && drawn.alert.textContent === '')
                 drawn.alert.textContent = NL.calcFailed;
             if (!failed)
                 drawn.alert.textContent = '';
-            drawn.alert.hidden = !failed;
             this.shownValues = values;
             this.shownResults = results;
             if (announce)
                 this.emit('cube-change', { values: { ...values }, results: { ...results } });
         }
     }
+    function unique(tag, names) {
+        const twice = names.find((name, index) => names.indexOf(name) !== index);
+        if (twice !== undefined)
+            throw new AuthorError(NL.invalid.duplicate(tag, twice));
+    }
     function inputFor(el) {
         const name = requiredAttr(el, 'name');
         const label = requiredAttr(el, 'label');
@@ -204,7 +227,7 @@ export function calcBlock(Base, scope) {
         const format = (type === 'select' ? 'text' : type === 'checkbox' ? 'boolean' : type);
         const options = type === 'checkbox' ? null : parseOptions(el.getAttribute('options'));
         if (type === 'select' && options === null)
-            throw new TypeError(NL.invalid.missing(el.localName, 'options'));
+            throw new AuthorError(NL.invalid.missing(el.localName, 'options'));
         // `value` is written as a person would type it: a percentage as 21.
         const raw = el.getAttribute('value');
         const parsed = raw === null ? { value: null } : parseInput(raw, format);
@@ -228,7 +251,7 @@ export function calcBlock(Base, scope) {
             formatValue(0, 'currency', { currency });
         }
         catch {
-            throw new TypeError(NL.invalid.value(el.localName, 'currency', currency));
+            throw new AuthorError(NL.invalid.value(el.localName, 'currency', currency));
         }
         const id = `cube-result-${++nextId}`;
         const output = h(doc, 'output', { id, name });

package/dist/ui/blocks/kpi.js

@@ -1,4 +1,5 @@
 import { aggregateFields, aggregateQuery, CARD_CSS, PeriodFollower, requiredAttr, toNumber, valueFormatter, } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
 import { clear, h } from '../dom.js';
 import { NL } from '../texts.js';
 const CHANGE = new Intl.NumberFormat('nl-NL', { minimumFractionDigits: 1, maximumFractionDigits: 1 });
@@ -25,7 +26,7 @@ export function kpiBlock(Base, scope) {
                 return;
             const resource = requiredAttr(this, 'resource');
             if (this.flag('compare') && !this.attr('period'))
-                throw new TypeError(NL.invalid.compare(this.localName));
+                throw new AuthorError(NL.invalid.compare(this.localName));
             const query = await aggregateQuery(this, this.period, signal);
             if (query === null)
                 return;