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

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.3",
   "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 \"—\")."
       },
@@ -788,7 +788,7 @@
     "cube-board": {
       "kind": "block",
       "since": "1.1.0",
-      "summary": "The rows of a resource as cards in a column per value of a status field, like a kanban board. Columns come from cube-column children, else from the enum of the status field (preview only: 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. Columns stack on a narrow screen.",
+      "summary": "The rows of a resource as cards in a column per value of a status field, like a kanban board. Columns come from cube-column children, else from the enum of the status field (preview only: 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"
@@ -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": {
@@ -839,6 +839,12 @@
           "required": false,
           "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": [
@@ -846,7 +852,8 @@
         "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-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><cube-column value=\"doing\" label=\"Bezig\"></cube-column><cube-column value=\"done\" label=\"Klaar\"></cube-column></cube-board>"
     },

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": 46959,
+  "ui_gzip": 28790,
   "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/attributes.js

@@ -66,7 +66,7 @@ export const BLOCK_ATTRIBUTES = {
     'cube-calc': ['label'],
     'cube-input': ['name', 'label', 'type', 'value', 'min', 'max', 'step', 'options'],
     'cube-result': ['name', 'label', 'format', 'currency', 'emphasis'],
-    'cube-board': ['resource', 'status-field', 'title-field', 'fields', 'sort', 'filter', 'page-size'],
+    'cube-board': ['resource', 'status-field', 'title-field', 'fields', 'sort', 'filter', 'page-size', 'detail'],
     'cube-column': ['value', 'label'],
     'cube-gap-list': ['scherm'],
 };

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.d.ts

@@ -3,6 +3,6 @@ import type { BlockScope } from '../define.js';
 /**
  * `<cube-board>`: the rows of a resource as cards in a column per value of a status field. A card moves by drag
  * and drop or by a button per other column ("Verplaats naar …"): at once on screen, then saved; a refusal puts it
- * back.
+ * back. A click on a card, or Enter or Space on it, chooses it: cube-select, and `detail` shows it.
  */
 export declare function boardBlock(Base: BlockClass, scope: BlockScope): BlockClass;

package/dist/ui/blocks/board.js

@@ -1,5 +1,6 @@
 import { isDmpError } from '../../errors.js';
 import { CARD_CSS, requiredAttr, wholeAttr } from '../aggregate-block.js';
+import { AuthorError } from '../author-error.js';
 import { BlockStateError, stateFor } from '../block.js';
 import { clear, h } from '../dom.js';
 import { columnsFor, fieldList, readFieldConfigs } from '../fields.js';
@@ -14,8 +15,11 @@ position:relative;overflow-x:auto}
 section{min-width:0}
 h3{margin:0 0 .5rem;font-size:1rem}
 article{margin-top:.5rem;padding:.75rem;border:1px solid var(--cube-color-border);
-border-radius:var(--cube-radius-small);background:var(--cube-color-bg);overflow-wrap:anywhere}
+border-radius:var(--cube-radius-small);background:var(--cube-color-bg);overflow-wrap:anywhere;
+cursor:pointer}
 article[draggable=true]{cursor:grab}
+article.chosen{border-color:var(--cube-color-primary);background:var(--cube-color-primary-subtle);
+box-shadow:inset 4px 0 0 var(--cube-color-primary)}
 .title{margin:0;font-weight:600}
 dl{display:grid;grid-template-columns:auto 1fr;gap:0 .5rem;margin:.25rem 0 0;font-size:.875rem}
 dd{margin:0;min-width:0}
@@ -26,6 +30,38 @@ 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;
+}
+/** A column value as the status field holds it: a number for a numeric field. */
+function statusValue(loaded, value) {
+    return loaded.numeric && Number.isFinite(Number(value)) ? Number(value) : value;
+}
 /** 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))
@@ -36,13 +72,14 @@ function reason(error) {
 /**
  * `<cube-board>`: the rows of a resource as cards in a column per value of a status field. A card moves by drag
  * and drop or by a button per other column ("Verplaats naar …"): at once on screen, then saved; a refusal puts it
- * back.
+ * back. A click on a card, or Enter or Space on it, chooses it: cube-select, and `detail` shows it.
  */
 export function boardBlock(Base, scope) {
     const doc = scope.document;
     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,13 +87,14 @@ 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;
         attempt = null;
         ids = 0;
+        /** The resource the choice belongs to, and the id of the chosen card. */
+        shownResource = null;
+        chosen = null;
         constructor() {
             super();
             this.shadowRoot?.insertBefore(this.alert, this.body);
@@ -66,8 +104,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();
@@ -85,17 +121,31 @@ export function boardBlock(Base, scope) {
             const resource = requiredAttr(this, 'resource');
             const status = requiredAttr(this, 'status-field');
             const title = requiredAttr(this, 'title-field');
+            if (resource !== this.shownResource) {
+                this.chosen = null;
+                this.shownResource = resource;
+            }
+            this.detailTarget();
             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 +167,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 +202,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)
@@ -169,11 +222,28 @@ export function boardBlock(Base, scope) {
         card(loaded, column, row, cards) {
             const key = keyOf(row);
             const title = `b${++this.ids}`;
+            const chosen = row.id != null && key === this.chosen;
             const card = h(doc, 'article', {
                 tabindex: '0',
                 draggable: loaded.canMove ? 'true' : 'false',
                 'data-id': key,
                 'aria-labelledby': title,
+                class: chosen ? 'chosen' : null,
+                'aria-current': chosen ? 'true' : null,
+                // A move button is not a choice.
+                onclick: (event) => {
+                    if (event.target.closest('button') === null)
+                        this.select(loaded, row);
+                },
+                onkeydown: ((event) => {
+                    if (event.target !== card || event.altKey || event.ctrlKey || event.metaKey)
+                        return;
+                    if (event.key !== 'Enter' && event.key !== ' ')
+                        return;
+                    // Space would scroll the page.
+                    event.preventDefault();
+                    this.select(loaded, row);
+                }),
                 ondragstart: (event) => {
                     this.dragged = key;
                     event.dataTransfer?.setData('text/plain', key);
@@ -200,7 +270,47 @@ 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. */
+        /** The element `detail` names, or null without one; an invalid selector is the author's error. */
+        detailTarget() {
+            const selector = this.attr('detail')?.trim() ?? '';
+            if (selector === '')
+                return null;
+            try {
+                return doc.querySelector(selector);
+            }
+            catch {
+                throw new AuthorError(NL.invalid.selector(this.localName, 'detail', selector));
+            }
+        }
+        select(loaded, row) {
+            const id = row.id ?? null;
+            this.chosen = id === null ? null : String(id);
+            for (const card of Array.from(this.body.querySelectorAll('article'))) {
+                const chosen = card.getAttribute('data-id') === this.chosen;
+                card.classList.toggle('chosen', chosen);
+                if (chosen)
+                    card.setAttribute('aria-current', 'true');
+                else
+                    card.removeAttribute('aria-current');
+            }
+            this.emit('cube-select', { resource: loaded.resource, id, row });
+            if (id === null)
+                return;
+            let target = null;
+            try {
+                target = this.detailTarget();
+            }
+            catch (error) {
+                // Checked on load; an attribute changed since is reported the same way.
+                this.showState(stateFor(error));
+                return;
+            }
+            target?.setAttribute('record-id', String(id));
+        }
+        /**
+         * 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 +320,15 @@ export function boardBlock(Base, scope) {
                     continue;
                 column.rows.splice(index, 1);
                 column.total--;
-                target.rows.unshift(row);
+                // The board does not reload after its own move: the row as listed must say where it is now.
+                row[loaded.status] = statusValue(loaded, to);
+                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 +362,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]: statusValue(loaded, to) };
             const attempt = attemptFor(this.attempt, JSON.stringify([loaded.resource, key, body]));
             this.attempt = attempt;
             try {
@@ -262,12 +380,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.