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

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;

package/dist/ui/blocks/table.js

@@ -1,4 +1,5 @@
 import { CARD_CSS, PeriodFollower, requiredAttr, wholeAttr } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
 import { exampleBadge, stateFor } from '../block.js';
 import { downloadCsv, toCsv } from '../csv.js';
 import { clear, h } from '../dom.js';
@@ -20,8 +21,8 @@ th,td{padding:.5rem .75rem;text-align:start;border-bottom:1px solid var(--cube-c
 th{font-weight:600;white-space:nowrap}
 th button{min-height:auto;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600}
 th button:hover{background:none;text-decoration:underline}
-th[aria-sort=ascending] button::after{content:" ▲";content:" ▲"/""}
-th[aria-sort=descending] button::after{content:" ▼";content:" ▼"/""}
+th[aria-sort=ascending] .arrow::after{content:" ▲"}
+th[aria-sort=descending] .arrow::after{content:" ▼"}
 .num{text-align:end;white-space:nowrap}
 tbody tr{cursor:pointer}
 tbody tr:hover{background:var(--cube-color-primary-subtle)}
@@ -51,13 +52,19 @@ function merge(target, field, value) {
     const current = target[field];
     target[field] = isOps(current) && isOps(value) ? { ...current, ...value } : value;
 }
-/** -1, 0 or 1; numbers as numbers, anything else (ISO dates) as text. */
+/** -1, 0 or 1; numbers (also a number written as text) as numbers, anything else (ISO dates) as text. */
 function compare(a, b) {
-    if (typeof a === 'number' && typeof b === 'number')
-        return Math.sign(a - b);
-    const x = String(a);
-    const y = String(b);
-    return x < y ? -1 : x > y ? 1 : 0;
+    const x = toNumber(a);
+    const y = toNumber(b);
+    if (x !== null && y !== null)
+        return Math.sign(x - y);
+    const p = String(a);
+    const q = String(b);
+    return p < q ? -1 : p > q ? 1 : 0;
+}
+/** Whether a base value leaves a "contains" (ilike) control nothing: a fixed value, or an ilike of its own. */
+function textFixed(base) {
+    return base !== undefined && (!isOps(base) || 'ilike' in base);
 }
 /**
  * What the controls ask for, within the base (the `filter` attribute and the followed period): a bound takes the
@@ -112,6 +119,8 @@ export function tableBlock(Base, scope) {
         chosen = null;
         shownIds = null;
         updates = 0;
+        /** The builder warnings given already: a reload does not repeat them. */
+        warned = new Set();
         shownFields() {
             return this.context?.columns.map((column) => column.name) ?? [];
         }
@@ -200,7 +209,7 @@ export function tableBlock(Base, scope) {
                 named.push(['search', search]);
             for (const [attribute, field] of named) {
                 if (!schema.filterable.includes(field)) {
-                    throw new TypeError(NL.invalid.notFilterable(this.localName, attribute, field));
+                    throw new AuthorError(NL.invalid.notFilterable(this.localName, attribute, field));
                 }
             }
         }
@@ -213,7 +222,7 @@ export function tableBlock(Base, scope) {
                 return doc.querySelector(selector);
             }
             catch {
-                throw new TypeError(NL.invalid.selector(this.localName, 'detail', selector));
+                throw new AuthorError(NL.invalid.selector(this.localName, 'detail', selector));
             }
         }
         /** The list query of the controls as they are now. */
@@ -289,7 +298,7 @@ export function tableBlock(Base, scope) {
             catch (error) {
                 if (run !== this.updates || error?.name === 'AbortError')
                     return;
-                this.showRowsState(fetchState(error));
+                this.showRowsState(stateFor(error));
             }
         }
         later(resetPage) {
@@ -309,11 +318,13 @@ export function tableBlock(Base, scope) {
             const tools = [];
             const searchField = this.attr('search')?.trim() ?? '';
             if (searchField !== '') {
+                if (textFixed(context.base[searchField]))
+                    this.warnFixed('search', searchField);
                 const input = h(doc, 'input', { type: 'search' });
                 tools.push(this.control(input, SEARCH, NL.search, true));
             }
             for (const column of filterColumns)
-                tools.push(this.filterControl(column));
+                tools.push(this.filterControl(column, context.base[column.name]));
             if (this.flag('export')) {
                 this.exportButton = h(doc, 'button', {
                     type: 'button',
@@ -344,7 +355,9 @@ export function tableBlock(Base, scope) {
             const thead = h(doc, 'thead', {}, h(doc, 'tr', {}, ...context.columns.map((column) => {
                 const sortable = schema?.sortable.includes(column.name) === true;
                 const th = h(doc, 'th', { scope: 'col', class: NUMERIC.includes(column.format) ? 'num' : null }, sortable
-                    ? h(doc, 'button', { type: 'button', onclick: () => this.sortOn(column.name) }, column.label)
+                    ? h(doc, 'button', { type: 'button', onclick: () => this.sortOn(column.name) }, column.label, 
+                    // The arrow is decoration: aria-sort already says the direction.
+                    h(doc, 'span', { class: 'arrow', 'aria-hidden': 'true' }))
                     : column.label, ...(this.exampleField(context.session, context.resource, column.name)
                     ? [' ', exampleBadge(doc)]
                     : []));
@@ -376,13 +389,28 @@ export function tableBlock(Base, scope) {
             });
             return h(doc, 'div', { class: 'control' }, h(doc, 'label', { for: id }, label), control);
         }
-        /** The control for one `filters` field, and its part of the query. */
-        filterControl(column) {
+        /**
+         * The `filter` attribute keeps what it fixes (the base wins), so a control on such a field changes nothing:
+         * the builder is told once, in the console.
+         */
+        warnFixed(attribute, field) {
+            const name = this.localName;
+            const message = `${name}: filter already fixes "${field}", so ${attribute} on it changes nothing.`;
+            if (this.warned.has(message))
+                return;
+            this.warned.add(message);
+            console.warn(message);
+        }
+        /** The control for one `filters` field, and its part of the query; `base` is what the base holds for it. */
+        filterControl(column, base) {
             const name = column.name;
             const value = (key) => this.values.get(key)?.trim() ?? '';
             const choices = choicesFor(column);
             const boolean = choices === null && column.format === 'boolean';
             if (choices !== null || boolean) {
+                // `within` keeps an operator base over the chosen value.
+                if (isOps(base))
+                    this.warnFixed('filters', name);
                 const options = choices ?? [{ value: 'true', label: NL.yes }, { value: 'false', label: NL.no }];
                 const select = h(doc, 'select', {}, h(doc, 'option', { value: '' }, NL.all), ...options.map((option) => h(doc, 'option', { value: option.value }, option.label)));
                 const numeric = NUMERIC.includes(column.format);
@@ -396,6 +424,8 @@ export function tableBlock(Base, scope) {
             }
             const dates = column.format === 'date' || column.format === 'datetime';
             if (!dates && !NUMERIC.includes(column.format)) {
+                if (textFixed(base))
+                    this.warnFixed('filters', name);
                 this.parts.set(name, () => (value(name) === '' ? null : { ilike: `%${value(name)}%` }));
                 return this.control(h(doc, 'input', { type: 'text' }), name, column.label, true);
             }
@@ -472,6 +502,10 @@ export function tableBlock(Base, scope) {
                 return;
             }
             const tbody = h(doc, 'tbody', {}, ...response.data.map((row) => this.row(context, row)));
+            // Roving tabindex: one row is in the Tab order, the chosen one if shown, else the first.
+            if (tbody.querySelector('tr[tabindex="0"]') === null) {
+                tbody.firstElementChild?.setAttribute('tabindex', '0');
+            }
             table.replaceChild(tbody, table.querySelector('tbody'));
             frame.appendChild(table);
             if (this.pager !== null)
@@ -500,16 +534,28 @@ export function tableBlock(Base, scope) {
             const example = (column) => this.exampleField(context.session, context.resource, column.name);
             const chosen = this.chosen !== null && String(row.id ?? '') === this.chosen;
             const tr = h(doc, 'tr', {
-                tabindex: '0',
+                tabindex: chosen ? '0' : '-1',
                 class: chosen ? 'chosen' : null,
                 'aria-current': chosen ? 'true' : null,
                 onclick: choose,
                 onkeydown: ((event) => {
-                    if (event.key !== 'Enter' && event.key !== ' ')
+                    if (event.altKey || event.ctrlKey || event.metaKey)
+                        return;
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        // Space would scroll the page.
+                        event.preventDefault();
+                        choose();
+                        return;
+                    }
+                    const target = this.rowFor(tr, event.key);
+                    if (target === undefined)
                         return;
-                    // Space would scroll the page.
                     event.preventDefault();
-                    choose();
+                    if (target === null)
+                        return;
+                    tr.setAttribute('tabindex', '-1');
+                    target.setAttribute('tabindex', '0');
+                    target.focus();
                 }),
             }, ...context.columns.map((column) => {
                 const classes = [NUMERIC.includes(column.format) && 'num', example(column) && 'example'];
@@ -517,11 +563,28 @@ export function tableBlock(Base, scope) {
             }));
             return tr;
         }
+        /** The row an arrow, Home or End key moves to: null at an end, undefined for any other key. */
+        rowFor(tr, key) {
+            const body = tr.parentElement;
+            switch (key) {
+                case 'ArrowDown':
+                    return tr.nextElementSibling;
+                case 'ArrowUp':
+                    return tr.previousElementSibling;
+                case 'Home':
+                    return body?.firstElementChild;
+                case 'End':
+                    return body?.lastElementChild;
+                default:
+                    return undefined;
+            }
+        }
         select(context, row, tr) {
             const id = row.id ?? null;
             this.chosen = id === null ? null : String(id);
             for (const other of Array.from(tr.parentElement?.children ?? [])) {
                 other.classList.toggle('chosen', other === tr);
+                other.setAttribute('tabindex', other === tr ? '0' : '-1');
                 if (other === tr)
                     other.setAttribute('aria-current', 'true');
                 else
@@ -601,7 +664,3 @@ export function tableBlock(Base, scope) {
     return CubeTable;
 }
 let controlIds = 0;
-/** The state for a failed request: the browser's own (English) text of a network failure is never shown. */
-function fetchState(error) {
-    return error instanceof TypeError ? { kind: 'error', detail: null } : stateFor(error);
-}

package/dist/ui/dom.js

@@ -1,4 +1,5 @@
 // The UI builds every node through these helpers: no HTML string is ever parsed, so row data cannot become markup.
+import { AuthorError } from './author-error.js';
 import { NL } from './texts.js';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /**
@@ -37,7 +38,7 @@ export function svg(doc, tag, attrs = {}, ...children) {
 function refuseUnsafe(name, setsAttribute) {
     const lower = name.toLowerCase();
     if (lower === 'style' || (setsAttribute && lower.startsWith('on'))) {
-        throw new TypeError(NL.invalid.attribute(name));
+        throw new AuthorError(NL.invalid.attribute(name));
     }
 }
 export function clear(node) {

package/dist/ui/format.js

@@ -1,3 +1,4 @@
+import { AuthorError } from './author-error.js';
 import { NL } from './texts.js';
 /** The formats that hold a number: right-aligned, read and written as numbers. */
 export const NUMERIC_FORMATS = ['number', 'integer', 'currency', 'percent'];
@@ -132,7 +133,7 @@ export function parseMeasure(measure) {
     const m = MEASURE.exec(measure.trim());
     const fn = m?.[1];
     if (fn === undefined || (fn !== 'count' && m?.[2] === undefined)) {
-        throw new TypeError(NL.invalid.measure(measure));
+        throw new AuthorError(NL.invalid.measure(measure));
     }
     return { fn, field: m?.[2] ?? null };
 }
@@ -142,7 +143,7 @@ export function parseDimension(by) {
     const field = m?.[1];
     const truncation = m?.[2];
     if (field === undefined || (truncation !== undefined && !TRUNCATIONS.includes(truncation))) {
-        throw new TypeError(NL.invalid.dimension(by));
+        throw new AuthorError(NL.invalid.dimension(by));
     }
     return { field, truncation: truncation ?? null };
 }

package/dist/ui/manifest.js

@@ -628,11 +628,13 @@ export const BLOCK_SPECS = {
         },
         children: ['cube-input', 'cube-result'],
         properties: {
-            formula: '(values) => results, a synchronous function: an async one gives a Promise, which shows "—". '
+            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 "—".',
+                + '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 "—").',
         },
@@ -759,6 +761,7 @@ export const BLOCK_SPECS = {
             + 'live, write cube-columns). A card moves by drag and drop or by a button per other column, named '
             + '"Verplaats naar …": at once on screen, then saved; a refusal puts it back with an alert. Read-only '
             + 'without update or with a readonly status field: update is optional, a view-only board needs only list. '
+            + 'Choosing a card (click, Enter or Space) emits cube-select and can fill a cube-detail. '
             + 'Columns stack on a narrow screen.',
         actions: ['list', 'update'],
         attributes: {
@@ -792,7 +795,7 @@ export const BLOCK_SPECS = {
                 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.',
+                    + 'front for descending; a moved card takes its place in that order; without sort it goes on top.',
                 example: '-due_on',
             },
             filter: {
@@ -807,11 +810,19 @@ export const BLOCK_SPECS = {
                 summary: 'Cards shown per column, at most 200; a column with more says "en nog N".',
                 default: '50',
             },
+            detail: {
+                type: 'selector',
+                required: false,
+                summary: 'CSS selector of a cube-detail whose record-id is set to the id of the chosen card.',
+                example: '#taak',
+            },
         },
         children: ['cube-column', 'cube-field'],
         events: {
             'cube-move': 'A move was saved; detail is { resource, id, from, to } with the old and new status values. '
                 + 'cube-data-change follows, so tables of the same resource reload.',
+            'cube-select': 'The user chose a card (click, Enter or Space; not a move); detail is { resource, id, row } with the '
+                + 'row as listed.',
         },
         example: '<cube-board resource="tasks" status-field="status" title-field="title" fields="owner">'
             + '<cube-column value="todo" label="Te doen"></cube-column>'

package/dist/ui/query.js

@@ -1,3 +1,4 @@
+import { AuthorError } from './author-error.js';
 import { parseDimension, isoDate, parseLocalDate } from './format.js';
 import { NL } from './texts.js';
 const LOOKUP = /^([a-z][a-z0-9_]*)\.([A-Za-z_][A-Za-z0-9_]*)$/;
@@ -15,7 +16,7 @@ export function blockFilter(el) {
         filter = null;
     }
     if (filter === null || typeof filter !== 'object' || Array.isArray(filter)) {
-        throw new TypeError(NL.invalid.json(el.localName, 'filter'));
+        throw new AuthorError(NL.invalid.json(el.localName, 'filter'));
     }
     return filter;
 }
@@ -28,7 +29,7 @@ function isPeriod(value) {
 export function periodFilter(field, range) {
     const to = parseLocalDate(range.to);
     if (to === null)
-        throw new TypeError(NL.invalid.periodEnd(range.to));
+        throw new AuthorError(NL.invalid.periodEnd(range.to));
     to.setDate(to.getDate() + 1);
     return { [field]: { gte: range.from, lt: isoDate(to) } };
 }
@@ -42,12 +43,12 @@ export async function resolvePeriodSource(host, selector) {
     const source = host.ownerDocument.querySelector(selector);
     const registry = (host.ownerDocument.defaultView ?? window).customElements;
     if (source === null || registry.get(source.localName) === undefined) {
-        throw new TypeError(NL.invalid.periodSource(selector));
+        throw new AuthorError(NL.invalid.periodSource(selector));
     }
     const picker = source;
     await picker.updateComplete;
     if (!isPeriod(picker.value))
-        throw new TypeError(NL.invalid.periodSource(selector));
+        throw new AuthorError(NL.invalid.periodSource(selector));
     return picker;
 }
 /** The date field a period filters on: explicit, else the field of a truncated `by`. */
@@ -59,7 +60,7 @@ export function dateFieldFor(dateField, by, tag) {
         if (dimension.truncation !== null)
             return dimension.field;
     }
-    throw new TypeError(NL.invalid.dateField(tag));
+    throw new AuthorError(NL.invalid.dateField(tag));
 }
 /**
  * Labels for ids from `<resource>.<field>`: one list per 200 ids. An id without a row, or whose list was refused
@@ -70,7 +71,7 @@ export async function lookupLabels(session, lookup, ids, signal) {
     const resource = match?.[1];
     const field = match?.[2];
     if (resource === undefined || field === undefined)
-        throw new TypeError(NL.invalid.lookup(lookup));
+        throw new AuthorError(NL.invalid.lookup(lookup));
     const unique = [...new Set(ids.filter((id) => id !== null && id !== undefined).map((id) => id))];
     const labels = new Map();
     for (let start = 0; start < unique.length; start += LOOKUP_CHUNK) {

package/dist/ui/texts.d.ts

@@ -107,6 +107,16 @@ export declare const NL: {
             readonly 'ja/nee': "Ja/nee";
         };
     };
+    readonly trial: {
+        readonly banner: (time: string | null, leest: readonly string[]) => string;
+        readonly expired: "Deze proefversie is verlopen. Vraag in je gesprek om een nieuwe.";
+        readonly closed: "Deze proefversie is gesloten.";
+        readonly refreshing: "Nieuwe versie wordt geladen…";
+        readonly wider: "Er is een nieuwe versie die meer gegevens leest.";
+        readonly load: "Laden";
+        readonly elsewhere: "Laad de pagina opnieuw.";
+        readonly reload: "Opnieuw laden";
+    };
     readonly invalid: {
         readonly json: (tag: string, name: string) => string;
         readonly number: (tag: string, name: string) => string;
@@ -116,6 +126,8 @@ export declare const NL: {
         readonly value: (tag: string, name: string, value: string) => string;
         readonly formula: "cube-calc: formula moet een functie zijn";
         readonly calcSingle: "cube-calc: formula gaf één waarde, maar er zijn meer cube-results; geef een object met hun namen";
+        readonly duplicate: (tag: string, value: string) => string;
+        readonly calcAsync: "cube-calc: formula gaf een Promise; geef de uitkomst direct terug, niet async";
         readonly dateField: (tag: string) => string;
         readonly compare: (tag: string) => string;
         readonly periodSource: (selector: string) => string;

package/dist/ui/texts.js

@@ -100,6 +100,20 @@ export const NL = {
         none: 'Er ontbreekt niets: alles in dit voorstel bestaat al in de DMP.',
         types: { tekst: 'Tekst', getal: 'Getal', bedrag: 'Bedrag', datum: 'Datum', keuze: 'Keuze', 'ja/nee': 'Ja/nee' },
     },
+    trial: {
+        banner: (time, leest) => ['Proefversie', 'alleen jij', 'alleen lezen']
+            .concat(time === null ? [] : [`verloopt om ${time}`])
+            .concat(leest.length === 0 ? [] : [`leest: ${leest.join(', ')}`])
+            .concat('Plak geen gegevens uit deze proefversie in je AI-gesprek.')
+            .join(' · '),
+        expired: 'Deze proefversie is verlopen. Vraag in je gesprek om een nieuwe.',
+        closed: 'Deze proefversie is gesloten.',
+        refreshing: 'Nieuwe versie wordt geladen…',
+        wider: 'Er is een nieuwe versie die meer gegevens leest.',
+        load: 'Laden',
+        elsewhere: 'Laad de pagina opnieuw.',
+        reload: 'Opnieuw laden',
+    },
     invalid: {
         json: (tag, name) => `${tag}: ${name} is geen geldige JSON`,
         number: (tag, name) => `${tag}: ${name} is geen geldig getal`,
@@ -109,6 +123,8 @@ export const NL = {
         value: (tag, name, value) => `${tag}: ${name} "${value}" is geen geldige waarde`,
         formula: 'cube-calc: formula moet een functie zijn',
         calcSingle: 'cube-calc: formula gaf één waarde, maar er zijn meer cube-results; geef een object met hun namen',
+        duplicate: (tag, value) => `${tag}: name "${value}" komt twee keer voor`,
+        calcAsync: 'cube-calc: formula gaf een Promise; geef de uitkomst direct terug, niet async',
         dateField: (tag) => `${tag}: date-field ontbreekt bij period`,
         compare: (tag) => `${tag}: compare werkt alleen samen met period`,
         periodSource: (selector) => `Geen periodekiezer gevonden voor "${selector}"`,

package/dist/ui/trial-banner.d.ts

@@ -0,0 +1,27 @@
+import type { TrialConfig } from '../trial.js';
+/** What the banner needs from the window: the page's own, or a test's with fake timers and a fake fetch. */
+export interface TrialScope {
+    document: Document;
+    CSSStyleSheet: typeof CSSStyleSheet;
+    setTimeout: typeof setTimeout;
+    clearTimeout: typeof clearTimeout;
+    fetch: typeof fetch;
+    location: Pick<Location, 'assign' | 'reload'>;
+    /** Without it a status request has no timeout. */
+    AbortController?: typeof AbortController;
+    /** Default `Date.now`. */
+    now?: () => number;
+}
+/** Spec section 7: every 5 s while the page is visible, every 60 s while it is hidden. */
+export declare const POLL_VISIBLE_MS = 5000;
+export declare const POLL_HIDDEN_MS = 60000;
+/** A 429's numeric Retry-After is honoured up to this long, and never past the expiry. */
+export declare const RETRY_AFTER_CAP_MS = 60000;
+/** A status request that hangs this long is given up as a network error, so the polling goes on. */
+export declare const STATUS_TIMEOUT_MS = 10000;
+/**
+ * Puts `cube-trial-banner` at the top of `<body>` and polls the trial's status: it says what the page is, ends when
+ * the trial does, and follows a newer version (by itself only when that one reads nothing more).
+ * Returns a function that stops the polling.
+ */
+export declare function showTrialBanner(scope: TrialScope, config: TrialConfig): () => void;