pgkiln 0.44.0 → 0.46.0

package/src/runtime/grid.ts

@@ -1,3 +1,4 @@
+import { componentSetting } from './component-settings.ts';
 import pg from 'pg';
 import { literal } from '../binds.ts';
 import { savepoint, type Client } from '../db.ts';
@@ -8,7 +9,8 @@ import { checksumValid, urlChecksum } from '../security.ts';
 import { isAuthorized, pageAllowed } from './authz.ts';
 import { publicError, toState, type PageContext } from './context.ts';
 import { arrange, cleanLayout, currentLayout, defaultLayout, layoutJson, layoutParam, MAX_FROZEN, MAX_WIDTH, MIN_WIDTH, parseLayout, type GridLayout, type Placed } from './grid-layout.ts';
-import { lovContains, lovOptions, type LovOption } from './items.ts';
+import { appDateMask, dateField, lovContains, lovOptions, type LovOption } from './items.ts';
+import { parseDateMask } from './format.ts';
 import { resolveRestRegion, restAllows, restGridCall, restWritable } from './rest-sources.ts';
 import { fillItems, linkAttrs } from './links.ts';
 import { detailsOf, masterColumnOf, masterItemOf, selectHref, selectRowOf } from './master-detail.ts';
@@ -101,7 +103,7 @@ const rowToken = (ctx: PageContext, r: Region, pk: string) => urlChecksum(ctx.ap
 
 // ---------------------------------------------------------------- render
 
-function control(col: GridColumn, name: string, value: string, label: string) {
+function control(ctx: PageContext, col: GridColumn, name: string, value: string, label: string) {
   const aria = raw(` aria-label="${label.replace(/"/g, '"')}"`);
   if (col.options)
     return html`<select name="${name}"${aria}><option value=""></option>${col.options.map(
@@ -110,12 +112,24 @@ function control(col: GridColumn, name: string, value: string, label: string) {
   if (col.typeOid === 16)
     return html`<input type="checkbox" name="${name}" value="true"${value === 'true' ? raw(' checked') : ''}${aria}>`;
   if (NUMERIC.has(col.typeOid)) return html`<input type="number" step="any" inputmode="decimal" name="${name}" value="${value}"${aria}>`;
-  if (col.typeOid === 1082) return html`<input type="date" name="${name}" value="${value}"${aria}>`;
+  // (sprint 84) a date in the application's date format, with pgkiln's date picker
+  if (col.typeOid === 1082) return dateField(ctx, { id: `f_${name}`, iso: value, mask: appDateMask(ctx), attrs: html` name="${name}"${aria}` });
   if (col.typeOid === 1114 || col.typeOid === 1184)
     return html`<input type="datetime-local" name="${name}" value="${value.slice(0, 16).replace(' ', 'T')}"${aria}>`;
   return html`<input type="text" name="${name}" value="${value}"${aria}>`;
 }
 
+/**
+ * (APEX: cell navigation mode) An editable cell's value as text, with its column's format mask or the
+ * option's display value: with JavaScript the cell reads as this text until it is edited (app.css,
+ * app.js); the control holds the raw value. Not for a checkbox, which reads as itself.
+ */
+function cellText(col: GridColumn, value: string, shown: string) {
+  if (col.typeOid === 16 || value === '') return '';
+  const text = col.options ? col.options.find((o) => o.value === value)?.display ?? value : shown;
+  return html`<span class="grid-text${NUMERIC.has(col.typeOid) && !col.options ? ' num' : ''}" aria-hidden="true">${text}</span>`;
+}
+
 /** Width of each leading column (master selection, delete, row actions), see app.css .grid-lead. */
 const LEAD_WIDTH = 44;
 
@@ -169,7 +183,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
   const base = reportState(ctx, r);
   const views = gridViews(r);
   const view: View = views.includes(base.view) ? base.view : 'report';
-  const pageSize = Math.max(1, Math.min(200, Number(r.config.page_size) || 25));
+  const pageSize = Math.max(1, Math.min(200, Number(r.config.page_size) || componentSetting(ctx.app.component_settings, 'grid_rows')));
   // the single row view: one row of the search at a time (r<id>_row=N from 1), or a new row (r<id>_row=new)
   const rowParam = ctx.params.get(key(r, 'row'));
   const adding = view === 'row' && rowParam === 'new';
@@ -240,7 +254,13 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
   // master-detail: this grid selects rows for detail regions; or it follows a master
   const select = selectRowOf(ctx.page, r);
   const selIdx = select ? fields.findIndex((f) => f.name.toLowerCase() === select.column.toLowerCase()) : -1;
-  const selected = select ? ctx.session.state[select.item] ?? null : null;
+  let selected = select ? ctx.session.state[select.item] ?? null : null;
+  // as in APEX, a page shows the first master row selected: when nothing is selected, or the
+  // selected row is not among the rows shown (after a search or filter); the regions below follow it
+  if (select && selIdx >= 0 && ctx.wholePage && view === 'report' && info.rows.length) {
+    const shown = info.rows.map((row) => toState(row[selIdx]) ?? '');
+    if (selected === null || !shown.includes(selected)) ctx.session.state[select.item] = selected = shown[0];
+  }
   const details = select ? detailsOf(ctx.page, r, ctx.vis!.regions) : [];
   const masterCol = masterColumnOf(r);
   const masterValue = masterItemOf(r) ? ctx.session.state[masterItemOf(r)!] ?? '' : '';
@@ -297,7 +317,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
       return i === -1 ? undefined : (toState(row[i]) ?? '');
     });
 
-  // read-only cells show their column's format mask; editable cells keep the raw value
+  // read-only cells show their column's format mask; an editable cell's control keeps the raw value
   const fmtOf = columnFormats(ctx, r);
   const rows = info.rows.map((row, i) => {
     const pk = toState(row[pkIdx]) ?? '';
@@ -311,7 +331,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
       if (!col.editable) return html`<td class="${colCls(p, pIdx, NUMERIC.has(col.typeOid) ? 'num' : null)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${cell(row[col.idx], col.typeOid, fmtOf(col.name))}</td>`;
       const name = `${g}_${i}_c${col.ci}`;
       const value = pi !== undefined ? (col.typeOid === 16 ? (pv(`${g}_${pi}_c${col.ci}`) === 'true' ? 'true' : 'false') : (pv(`${g}_${pi}_c${col.ci}`) ?? dbValue)) : dbValue;
-      return html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${control(col, name, value, `${lbl}, row ${i + 1}`)}</td>`;
+      return html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${cellText(col, value, value === dbValue ? cell(row[col.idx], col.typeOid, fmtOf(col.name)) : value)}${control(ctx, col, name, value, `${lbl}, row ${i + 1}`)}</td>`;
     });
     const deleted = pi !== undefined && pv(`${g}_${pi}_del`) === 'true';
     const selValue = selIdx >= 0 ? toState(row[selIdx]) ?? '' : null;
@@ -348,7 +368,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
         const lbl = label(col.name);
         if (masterCol && col.name === masterCol) return html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${masterValue}</td>`;
         return writable.has(col.name)
-          ? html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${control({ ...col, editable: true }, `${g}_n${j}_c${col.ci}`, values[col.ci] ?? '', `${lbl}, new row`)}</td>`
+          ? html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}>${control(ctx, { ...col, editable: true }, `${g}_n${j}_c${col.ci}`, values[col.ci] ?? '', `${lbl}, new row`)}</td>`
           : html`<td class="${colCls(p, pIdx)}" data-col="${col.ci}" data-label="${lbl}"${hiddenAttr(p)}></td>`;
       })}
     </tr>`;
@@ -399,7 +419,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
       orig[col.ci] = dbValue;
       if (!col.editable) return field(p, cell(row[col.idx], col.typeOid, fmtOf(col.name)), false);
       const value = pi !== undefined ? (col.typeOid === 16 ? (pv(`${g}_${pi}_c${col.ci}`) === 'true' ? 'true' : 'false') : (pv(`${g}_${pi}_c${col.ci}`) ?? dbValue)) : dbValue;
-      return field(p, control(col, `${g}_0_c${col.ci}`, value, label(col.name)), true);
+      return field(p, control(ctx, col, `${g}_0_c${col.ci}`, value, label(col.name)), true);
     });
     const deleted = pi !== undefined && pv(`${g}_${pi}_del`) === 'true';
     const links = [
@@ -420,7 +440,7 @@ export async function renderGrid(ctx: PageContext, r: Region): Promise<Raw> {
       const col = p.col;
       if (masterCol && col.name === masterCol) return [field(p, masterValue, false)];
       if (!writable.has(col.name)) return [];
-      return [field(p, control({ ...col, editable: true }, `${g}_n0_c${col.ci}`, pv(`${g}_n0_c${col.ci}`) ?? '', label(col.name)), true)];
+      return [field(p, control(ctx, { ...col, editable: true }, `${g}_n0_c${col.ci}`, pv(`${g}_n0_c${col.ci}`) ?? '', label(col.name)), true)];
     });
     return html`<div class="grid-record grid-new" data-new-row="0"><div class="form-grid">${fieldsHtml}</div></div>
     ${recordNav()}`;
@@ -700,7 +720,12 @@ export async function gridDml(ctx: PageContext, p: Process): Promise<string | nu
     const lov = r.config.columns?.[name]?.lov;
     return !lov || v === '' || (await lovContains(ctx, lov, [v]));
   };
-  const norm = (ci: number, v: string | undefined) => (cols[ci].dataTypeID === 16 ? (v === 'true' ? 'true' : 'false') : v ?? '');
+  // (sprint 84) a date typed in the date format (or YYYY-MM-DD) → YYYY-MM-DD; other text goes to the database as it is (which refuses it)
+  const dateMask = appDateMask(ctx);
+  const norm = (ci: number, v: string | undefined) =>
+    cols[ci].dataTypeID === 16 ? (v === 'true' ? 'true' : 'false')
+    : cols[ci].dataTypeID === 1082 && v?.trim() ? (parseDateMask(v, dateMask, ctx.locale.lang) ?? v)
+    : v ?? '';
 
   const errors: string[] = [];
   let inserted = 0, updated = 0, deleted = 0;

package/src/runtime/items.ts

@@ -8,11 +8,13 @@ import type { Item } from '../metadata.ts';
 import { bindValues, publicError, stripSemicolon, toState, type PageContext } from './context.ts';
 import { canPreview, fileInfo, fileList, fileUrl, formatSize, isMultiple, maxFiles, removals } from './files.ts';
 import { restSql } from './rest-sources.ts';
+import { expandShortcuts } from './shortcuts.ts';
+import { componentSetting, type ComponentSettings } from './component-settings.ts';
 import { markdownHtml, sanitizeHtml } from '../richtext.ts';
 import { qrSvg, type Ecc } from '../qrcode.ts';
 import { formatNumber, isPlainNumber, maskError } from '../numformat.ts';
 import { addressControl, imageControl } from './data-items.ts';
-import { applyMask, formatMaskError, monthNames } from './format.ts';
+import { applyMask, formatMaskError, monthNames, parseDateMask } from './format.ts';
 
 const TRUTHY = new Set(['true', 't', 'on', '1', 'yes', 'y']);
 export const isTruthy = (v: string | null | undefined) => !!v && TRUTHY.has(v.toLowerCase());
@@ -77,9 +79,10 @@ async function lovColumns(ctx: PageContext, sql: string) {
 
 /** Rows of a popup LOV's dialog: at most 100 per page. */
 export const POPUP_PAGE_MAX = 100;
-export const popupPageSize = (item: Item, asked?: unknown) => {
-  const n = Math.floor(Number(asked ?? item.config?.page_size ?? 25));
-  return Number.isFinite(n) && n >= 1 ? Math.min(n, POPUP_PAGE_MAX) : 25;
+export const popupPageSize = (item: Item, asked?: unknown, settings?: ComponentSettings) => {
+  const def = componentSetting(settings, 'popup_lov_rows');
+  const n = Math.floor(Number(asked ?? item.config?.page_size ?? def));
+  return Number.isFinite(n) && n >= 1 ? Math.min(n, POPUP_PAGE_MAX) : def;
 };
 
 export interface LovPage {
@@ -160,9 +163,9 @@ export const LOV_CHECKED = new Set(['select', 'radio', 'checkbox_group', 'multis
 
 /** Rows a list of values reads when its item sets no config.max_rows (1 to 50,000). */
 export const LOV_MAX_ROWS = 5000;
-export const lovMax = (item: Item) => {
+export const lovMax = (item: Item, settings?: ComponentSettings) => {
   const n = Math.floor(Number(item.config?.max_rows));
-  return Number.isFinite(n) && n >= 1 ? Math.min(n, 50_000) : LOV_MAX_ROWS;
+  return Number.isFinite(n) && n >= 1 ? Math.min(n, 50_000) : settings ? componentSetting(settings, 'lov_max_rows') : LOV_MAX_ROWS;
 };
 
 const LOV_TYPES = new Set(['select', 'radio', 'checkbox_group', 'multiselect', 'popup_lov', 'combobox']);
@@ -174,22 +177,43 @@ export const splitValues = (v: string) => (v ? v.split(':') : []);
 /** A combobox holds several values (colon-separated) unless {"multiple": false}. */
 export const comboMultiple = (item: Item) => item.config?.multiple !== false;
 /** The highest star of a rating item ({"max": 5}, 3 to 10). */
-export const ratingMax = (item: Item) => Math.min(Math.max(Math.round(Number(item.config?.max)) || 5, 3), 10);
+export const ratingMax = (item: Item, settings?: ComponentSettings) => Math.min(Math.max(Math.round(Number(item.config?.max)) || componentSetting(settings, 'rating_max'), 3), 10);
 /** A date range item's value "from:to" (ISO dates, either may be empty). */
 export const splitRange = (v: string | null | undefined): [string, string] => {
   const [from = '', to = ''] = (v ?? '').split(':');
   return [from, to];
 };
 
+/** (sprint 84) The application's date format, else ISO: every date field is text in it, with pgkiln's date picker. */
+export const appDateMask = (ctx: PageContext) => ctx.locale.dateMask?.trim() || 'YYYY-MM-DD';
+/** (sprint 84) A date typed in the application's date format (or YYYY-MM-DD) as YYYY-MM-DD; null when it isn't one. */
+export const appDateReader = (ctx: PageContext) => (text: string) => parseDateMask(text, appDateMask(ctx), ctx.locale.lang);
+
 /**
- * (sprint 76) The date mask a date item shows its value in: its own format mask (a date mask), else the
- * application's date format; null: the browser's date field (in the browser's notation).
+ * (sprint 76) The date mask a date or date range item shows its value in: its own format mask (a date mask),
+ * else the application's date format, else YYYY-MM-DD; null for other items.
  */
 export function itemDateMask(ctx: PageContext, item: Item): string | null {
-  if (item.type !== 'date') return null;
+  if (item.type !== 'date' && item.type !== 'daterange') return null;
   const own = typeof item.config?.format_mask === 'string' ? item.config.format_mask.trim() : '';
   if (own && /(YYYY|YY|MM|DD|MON)/i.test(own) && !formatMaskError(own)) return own;
-  return ctx.locale.dateMask?.trim() || null;
+  return appDateMask(ctx);
+}
+
+/**
+ * (sprint 84; APEX: the date picker) A date as text in a date mask, with a calendar button that opens pgkiln's
+ * date picker (app.js). Without JavaScript the text is typed (in the mask, or as YYYY-MM-DD) and read back on
+ * submit. `attrs`: extra attributes of the text field (name, form, min/max, aria).
+ */
+export function dateField(ctx: PageContext, o: { id: string; iso: string; mask: string; attrs?: Raw | string; editable?: boolean; typed?: string }) {
+  const iso = /^\d{4}-\d{2}-\d{2}/.test(o.iso) ? o.iso.slice(0, 10) : '';
+  const shown = iso ? applyMask(iso, o.mask, ctx.locale.lang) : (o.typed ?? o.iso);
+  const editable = o.editable !== false;
+  const t = ctx.locale.t;
+  // a number pad on phones, unless the mask has month or day names
+  const numeric = /MON|DAY|DY/i.test(o.mask.replace(/"[^"]*"/g, '')) ? '' : raw(' inputmode="numeric"');
+  return html`<span class="input-with-button date-field"><input type="text" id="${o.id}"${o.attrs ?? ''} value="${shown}" placeholder="${o.mask}" autocomplete="off"${numeric} data-date-mask="${o.mask}" data-months="${JSON.stringify(monthNames(ctx.locale.lang))}"${editable ? '' : raw(' readonly')}>${
+    editable ? html`<button type="button" class="btn" data-date-pick="${o.id}" aria-label="${t('item.choose_date')}" title="${t('item.choose_date')}" aria-haspopup="dialog">${icon('calendar')}</button>` : ''}</span>`;
 }
 
 /** A number or display item's number format mask ({"format_mask": "999G990D00"}), when it is a valid one. */
@@ -226,7 +250,7 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
   let lovError: Raw | '' = '';
   if (hasLov(item)) {
     try {
-      options = await lovOptions(ctx, item.lov, lovMax(item));
+      options = await lovOptions(ctx, item.lov, lovMax(item, ctx.app.component_settings));
     } catch (e) {
       lovError = html`<small class="error">${await publicError(ctx, e, `list of values of ${item.name}`)}</small>`;
     }
@@ -249,9 +273,9 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
     // rebuilt from the allow-list every time: the value may come from the table, not from this form
     control = html`<div class="display-value rich-text" id="${id}">${raw((item.type === 'markdown' ? markdownHtml(value) : sanitizeHtml(value)) || ' ')}</div>`;
   } else if (!editable && item.type === 'rating') {
-    const n = /^\d+$/.test(value) ? Math.min(Number(value), ratingMax(item)) : 0;
+    const n = /^\d+$/.test(value) ? Math.min(Number(value), ratingMax(item, ctx.app.component_settings)) : 0;
     control = n
-      ? html`<div class="display-value rating-value" id="${id}"><span aria-hidden="true">${'★'.repeat(n)}<span class="rating-off">${'★'.repeat(ratingMax(item) - n)}</span></span><span class="sr-only">${ctx.locale.t('item.rating_of', { n, max: ratingMax(item) })}</span></div>`
+      ? html`<div class="display-value rating-value" id="${id}"><span aria-hidden="true">${'★'.repeat(n)}<span class="rating-off">${'★'.repeat(ratingMax(item, ctx.app.component_settings) - n)}</span></span><span class="sr-only">${ctx.locale.t('item.rating_of', { n, max: ratingMax(item, ctx.app.component_settings) })}</span></div>`
       : html`<div class="display-value" id="${id}"> </div>`;
   } else if (!editable && item.type === 'combobox') {
     const values = comboMultiple(item) ? splitValues(value) : value ? [value] : [];
@@ -352,7 +376,7 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
       case 'rating': {
         // radio buttons (keyboard and screen readers as usual); CSS draws them as stars
         useLegend = true;
-        const max = ratingMax(item);
+        const max = ratingMax(item, ctx.app.component_settings);
         const stars = [];
         for (let n = 1; n <= max; n++)
           stars.push(
@@ -381,9 +405,11 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
         useLegend = true;
         const [from, to] = splitRange(value);
         const t = ctx.locale.t;
+        // (sprint 84) each part in the date format with the date picker; the picker keeps the from on or before the to
+        const mask = itemDateMask(ctx, item)!;
         control = html`<div class="date-range" data-range="${id}">
-          <span class="range-part"><label class="sub" for="${id}">${t('item.range_from')}</label><input type="date" id="${id}" name="${id}" value="${from}"${to ? html` max="${to}"` : ''}${aria}></span>
-          <span class="range-part"><label class="sub" for="${id}_TO">${t('item.range_to')}</label><input type="date" id="${id}_TO" name="${id}" value="${to}"${from ? html` min="${from}"` : ''}${aria}></span>
+          <span class="range-part"><label class="sub" for="${id}">${t('item.range_from')}</label>${dateField(ctx, { id, iso: from, mask, attrs: html` name="${id}"${aria}` })}</span>
+          <span class="range-part"><label class="sub" for="${id}_TO">${t('item.range_to')}</label>${dateField(ctx, { id: `${id}_TO`, iso: to, mask, attrs: html` name="${id}"${aria}` })}</span>
         </div>`;
         break;
       }
@@ -395,21 +421,10 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
         control = html`<div class="input-with-button"><input type="text" id="${id}" name="${id}" value="${value}" inputmode="decimal" placeholder="52.01160,4.35710"${aria}>
           <button type="button" class="btn" data-locate="${id}">${icon('map')} ${ctx.locale.t('item.locate')}</button></div>`;
         break;
-      case 'date': {
-        // (sprint 76) in the application's date format: a text field and a calendar button (app.js), read back on submit
-        const mask = itemDateMask(ctx, item);
-        if (!mask) {
-          control = html`<input type="date" id="${id}" name="${id}" value="${value}"${aria}${editable ? '' : raw(' readonly')}>`;
-          break;
-        }
-        const iso = /^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : '';
-        const shown = iso ? applyMask(iso, mask, ctx.locale.lang) : value;
-        const months = monthNames(ctx.locale.lang);
-        control = html`<div class="input-with-button date-field"><input type="text" id="${id}" name="${id}" value="${shown}" placeholder="${mask}" autocomplete="off" data-date-mask="${mask}" data-months="${JSON.stringify(months)}"${aria}${editable ? '' : raw(' readonly')}>
-          ${editable ? html`<input type="date" class="date-native" value="${iso}" tabindex="-1" aria-hidden="true" data-date-for="${id}">
-          <button type="button" class="btn" data-date-pick="${id}" aria-label="${ctx.locale.t('item.choose_date')}" title="${ctx.locale.t('item.choose_date')}">${icon('calendar')}</button>` : ''}</div>`;
+      case 'date':
+        // (sprint 76, 84) in the date format: a text field and pgkiln's date picker (app.js), read back on submit
+        control = dateField(ctx, { id, iso: value, mask: itemDateMask(ctx, item)!, attrs: html` name="${id}"${aria}`, editable });
         break;
-      }
       default: {
         const typed: Record<string, string> = { number: 'number', date: 'date', password: 'password', email: 'email', tel: 'tel', url: 'url' };
         // a number with a format mask is text in the language's notation (1.234,50), read back on submit
@@ -461,7 +476,7 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
   const tag = useLegend ? 'fieldset' : 'div';
   return html`${raw(`<${tag}`)} class="field field-${item.type}${error ? ' has-error' : ''}${editable ? '' : ' readonly'}${templateClasses('item', item.template_options)}" data-item="${item.name}"${attrs}${pluginAttrs}>
     ${labelHtml}${control}${lovError}
-    ${item.help ? html`<small class="help" id="${id}_help">${item.help}</small>` : ''}
+    ${item.help ? html`<small class="help" id="${id}_help">${await expandShortcuts(ctx, item.help, 'text')}</small>` : ''}
     ${error ? html`<small class="error" id="${id}_error">${error}</small>` : ''}
   ${raw(`</${tag}>`)}`;
 }

package/src/runtime/lists.ts

@@ -225,7 +225,7 @@ export async function renderListRegion(ctx: PageContext, r: Region): Promise<Raw
     case 'badges':
       return html`<ul class="list-badges">${flat(nodes).map((n) => html`<li><a ${linkAttrs(n, 'list-badge')}><span class="list-badge-value">${n.badge ?? icon(n.icon ?? 'chevron')}</span><span class="list-badge-label">${n.label}</span></a></li>`)}</ul>`;
     case 'cards':
-      return html`<ul class="cards list-cards">${flat(nodes).map((n) => html`<li><a ${linkAttrs(n, 'card list-card')}><span class="list-card-head">${icon(n.icon ?? 'chevron')}<h3>${n.label}</h3>${badge(n)}</span>${n.description ? html`<p class="muted">${n.description}</p>` : ''}</a></li>`)}</ul>`;
+      return html`<ul class="cards list-cards">${flat(nodes).map((n) => html`<li><a ${linkAttrs(n, 'card list-card')}><span class="list-card-head"><span class="list-card-icon">${icon(n.icon ?? 'chevron')}</span><h3>${n.label}</h3>${badge(n)}</span>${n.description ? html`<p class="muted">${n.description}</p>` : ''}</a></li>`)}</ul>`;
     case 'tabs':
       return html`<nav class="list-tabs" aria-label="${label}"><ul class="rds-list">${nodes.filter((n) => n.href).map((n) => html`<li><a ${linkAttrs(n, `rds-tab${n.inTrail ? ' is-current' : ''}`)}>${icon(n.icon)}<span>${n.label}</span>${badge(n)}</a></li>`)}</ul></nav>`;
     case 'wizard_progress': {

package/src/runtime/logic.ts

@@ -1,7 +1,7 @@
 import { randomBytes } from 'node:crypto';
 import { applyBinds } from '../binds.ts';
 import { runtime, savepoint } from '../db.ts';
-import type { Branch, Computation, Condition } from '../metadata.ts';
+import type { AppComputation, Branch, Computation, Condition } from '../metadata.ts';
 import { isAuthorized, sqlTrue } from './authz.ts';
 import { bindValues, dbg, publicError, stripSemicolon, substitute, timed, toState, type PageContext } from './context.ts';
 import { pageHref } from './links.ts';
@@ -112,19 +112,24 @@ export class ComputationFailed extends Error {}
  * items only. Before the page is shown, an error becomes a message on the
  * page; after a submit, it stops the submit (ComputationFailed).
  */
-export async function runComputations(ctx: PageContext, point: Computation['point']) {
+export async function runComputations(ctx: PageContext, point: AppComputation['point']) {
   const names = new Set([...ctx.app.app_items, ...ctx.page.items.map((i) => i.name)]);
-  for (const comp of ctx.page.computations ?? []) {
-    if (comp.point !== point) continue;
-    const where = `computation of ${comp.item_name}`;
+  // (102) the application's computations of the point first (as in APEX), then the page's
+  const comps: { comp: Computation | AppComputation; app: boolean }[] = [
+    ...(ctx.app.app_computations ?? []).filter((c) => c.point === point).map((comp) => ({ comp, app: true })),
+    ...(ctx.page.computations ?? []).filter((c) => c.point === point).map((comp) => ({ comp, app: false })),
+  ];
+  for (const { comp, app } of comps) {
+    const where = `${app ? 'application computation' : 'computation'} of ${comp.item_name}`;
     if (!names.has(comp.item_name)) {
-      ctx.errors.page.push(ctx.locale.t('logic.unknown_item', { item: comp.item_name }));
+      // an application computation of a page item computes it on that item's page only
+      if (!app) ctx.errors.page.push(ctx.locale.t('logic.unknown_item', { item: comp.item_name }));
       continue;
     }
     if (!(await isAuthorized(ctx, comp.authz))) continue;
     if (!(await conditionHolds(ctx, comp, `condition of the ${where}`))) continue;
     try {
-      ctx.session.state[comp.item_name] = await timed(ctx, 6, 'computation', `computation of ${comp.item_name} (${comp.type})`, () => computeValue(ctx, comp));
+      ctx.session.state[comp.item_name] = await timed(ctx, 6, 'computation', `${where} (${comp.type})`, () => computeValue(ctx, comp));
       dbg(ctx, 9, 'computation', () => `${comp.item_name} := ${ctx.page.items.some((i) => i.name === comp.item_name && i.type === 'password') ? '(password, not shown)' : JSON.stringify((ctx.session.state[comp.item_name] ?? '').slice(0, 200))}`);
     } catch (e) {
       const message = await publicError(ctx, e, where);

package/src/runtime/pdf.ts

@@ -1,3 +1,4 @@
+import { appDateReader } from './items.ts';
 import { existsSync } from 'node:fs';
 import PDFDocument from 'pdfkit';
 import type pg from 'pg';
@@ -192,7 +193,7 @@ export async function reportPdf(ctx: PageContext, r: Region): Promise<Buffer> {
         ...st.filters.map((f) => `${headingOf(r, f.column, ctx.locale.tr)} ${OPERATORS[f.op]?.label ?? f.op} ${OPERATORS[f.op]?.noValue ? '' : f.value}`.trim()),
         ...(() => {
           const defs = reportFacetDefs(ctx.page.regions, r.id, ctx.vis?.regions);
-          return facetFilters(ctx.params, r.id, defs).map((f) => describeFacetFilter(f, defs.get(f.column)?.label ?? headingOf(r, f.column, ctx.locale.tr), t, defs.get(f.column)));
+          return facetFilters(ctx.params, r.id, defs, undefined, appDateReader(ctx)).map((f) => describeFacetFilter(f, defs.get(f.column)?.label ?? headingOf(r, f.column, ctx.locale.tr), t, defs.get(f.column)));
         })(),
         ...(st.search ? [`${t('report.search')}: "${st.search}"`] : []),
       ].map((s) => printable(oneLine(s)))

package/src/runtime/regions.ts

@@ -8,6 +8,7 @@ import type { Button, Region } from '../metadata.ts';
 import { isAuthorized, pageAllowed } from './authz.ts';
 import { bindValues, dbg, publicError, stripSemicolon, substitute, timed, type PageContext } from './context.ts';
 import { renderItems } from './items.ts';
+import { expandShortcuts } from './shortcuts.ts';
 import { fillItems, linkAttrs, linkColumns } from './links.ts';
 import { renderCalendar } from './calendar.ts';
 import { CHART_KINDS, renderChartBody, wallClockIn, type GaugeConfig } from './charts.ts';
@@ -20,6 +21,7 @@ import { renderGrid } from './grid.ts';
 import { masterItemOf, mastersOf } from './master-detail.ts';
 import { renderTasks } from './tasks.ts';
 import { renderDataReporter } from './data-reporter.ts';
+import { renderFormDesigner } from './form-designer.ts';
 import { renderAssistant } from './assistant.ts';
 import { renderAiFilter } from './ai-filter.ts';
 import { renderWorkflows } from './workflows.ts';
@@ -66,7 +68,7 @@ async function renderMenu(ctx: PageContext, b: Button, cls: string, badge: Raw |
   for (const e of b.menu ?? []) {
     if (!(await isAuthorized(ctx, e.authz))) continue;
     const ic = e.icon ? html`${icon(e.icon)} ` : '';
-    const confirm = e.confirm ? raw(` data-confirm="${esc(e.confirm)}"`) : '';
+    const confirm = e.confirm ? raw(` data-confirm="${esc(await expandShortcuts(ctx, e.confirm, 'text'))}"`) : '';
     if (e.page) {
       if (!(await pageAllowed(ctx, e.page))) continue;
       entries.push(html`<a ${linkAttrs(ctx, e.page, e.items ?? {})}${confirm}>${ic}${e.label}</a>`);
@@ -82,7 +84,7 @@ async function renderMenu(ctx: PageContext, b: Button, cls: string, badge: Raw |
 
 export async function renderButton(ctx: PageContext, b: Button) {
   const cls = `btn${b.hot ? ' btn-hot' : ''}${b.name === 'DELETE' ? ' btn-danger' : ''}${templateClasses('button', b.template_options)}`;
-  const confirm = b.confirm ? raw(` data-confirm="${esc(b.confirm)}"`) : '';
+  const confirm = b.confirm ? raw(` data-confirm="${esc(await expandShortcuts(ctx, b.confirm, 'text'))}"`) : '';
   const badge = b.badge || b.badge_query ? await badgeOf(ctx, b) : '';
   if (b.action === 'menu') return renderMenu(ctx, b, cls, badge);
   if (b.action === 'redirect') {
@@ -377,6 +379,9 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
     case 'data_reporter':
       body = await renderDataReporter(ctx, r);
       break;
+    case 'form_designer':
+      body = await renderFormDesigner(ctx, r);
+      break;
     case 'ai_assistant':
       body = await renderAssistant(ctx, r);
       break;
@@ -401,7 +406,7 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
       break;
     case 'static': {
       const itemsHtml = await renderItems(ctx, items, hidden);
-      body = html`${raw(substitute(r.source ?? '', ctx, esc))}${itemsHtml.length ? html`<div class="form-grid">${itemsHtml}</div>` : ''}`;
+      body = html`${raw(substitute(await expandShortcuts(ctx, r.source ?? '', 'html'), ctx, esc))}${itemsHtml.length ? html`<div class="form-grid">${itemsHtml}</div>` : ''}`;
       break;
     }
   }

package/src/runtime/render.ts

@@ -268,10 +268,11 @@ export async function chrome(ctx: PageContext, main: Raw, title: string) {
   const navbar = navbarNodes ? navbarMarkup(navbarNodes, t('list.navbar')) : '';
   // (sprint 72) the account's display name in the user menu
   const shown = signedIn ? ((await displayName(ctx.user)) ?? ctx.user) : ctx.user;
+  // (sprint 88, GEN-4; APEX: the page footer) under the content: the application's version and "Back to top" (to the header, #top)
   return documentShell(
     `${title} · ${ctx.app.name}`,
     html`<a class="skip-link" href="#main">${t('common.skip')}</a>
-    <header class="t-header">
+    <header class="t-header" id="top">
       <a href="#t-nav" class="t-nav-toggle icon-button" role="button" aria-label="${t('common.toggle_nav')}" aria-controls="t-nav">${icon('menu')}</a>
       <a class="t-logo" href="${ctx.base}/${ctx.app.home_page}">${ctx.app.name}</a>
       <span class="t-spacer"></span>
@@ -306,7 +307,8 @@ export async function chrome(ctx: PageContext, main: Raw, title: string) {
     <div class="t-body">
       <nav id="t-nav" class="t-nav" aria-label="Main"><ul>${nav}</ul></nav>
       <a href="#" class="t-nav-backdrop" tabindex="-1" aria-hidden="true"></a>
-      <main class="t-main" id="main">${main}</main>
+      <main class="t-main" id="main">${main}
+        <footer class="t-footer">${ctx.app.version ? html`<span class="t-version">${ctx.locale.tr(ctx.app.version)}</span>` : ''}<a class="t-top" href="#top">${icon('arrow-up')} ${t('common.back_to_top')}</a></footer></main>
     </div>
     ${devbarHtml(ctx)}`,
     `t-app${topNav ? ' nav-top' : ''}`,
@@ -338,7 +340,9 @@ const CLIENT_TEXTS = ['pwa.offline_banner', 'pwa.queued', 'pwa.queue_waiting', '
   'push.turn_on', 'push.turn_off', 'push.on', 'push.off', 'push.blocked', 'push.unsupported', 'push.failed', 'page.unsaved_changes', 'page.link_copied',
   'session.warning', 'session.stay', 'session.max', 'session.ended', 'login.sign_in_link',
   // (sprint 76) a report column heading's menu
-  'report.sort_asc', 'report.sort_desc', 'report.hide', 'report.break', 'report.filter_values', 'report.no_values'] as const;
+  'report.sort_asc', 'report.sort_desc', 'report.hide', 'report.break', 'report.filter_values', 'report.no_values',
+  // (sprint 84) the date picker
+  'item.choose_date', 'calendar.previous', 'calendar.next', 'calendar.today', 'facets.clear_short'] as const;
 export const clientTexts = (ctx: PageContext) => Object.fromEntries(CLIENT_TEXTS.map((k) => [k, ctx.locale.t(k)]));
 
 /**
@@ -364,6 +368,7 @@ const timeZoneMeta = (ctx: PageContext) =>
 
 export async function renderPage(ctx: PageContext) {
   const t = ctx.locale.t;
+  ctx.wholePage = true;
   const hidden = initiallyHidden(ctx);
   const defaultButton = [...ctx.vis!.buttons.values()].find((b) => b.hot && b.action === 'submit');
   const pageItems = await renderItems(ctx, ctx.page.items.filter((i) => i.region_id === null), hidden);

package/src/runtime/report.ts

@@ -1,3 +1,4 @@
+import { componentSetting } from './component-settings.ts';
 import { icon } from '../icons.ts';
 import pg from 'pg';
 import { templateClasses } from './template-options.ts';
@@ -7,7 +8,7 @@ import { esc, html, raw, type Raw } from '../html.ts';
 import type { Region } from '../metadata.ts';
 import { isAuthorized, pageAllowed } from './authz.ts';
 import { bindValues, publicError, stripSemicolon, type PageContext } from './context.ts';
-import { heading, splitValues } from './items.ts';
+import { appDateReader, heading, splitValues } from './items.ts';
 import { linkAttrs } from './links.ts';
 import type { Translate } from '../i18n.ts';
 import type { Formatter } from './format.ts';
@@ -237,7 +238,7 @@ export function selectionOf(page: { items: { name: string }[] }, r: Region) {
 
 export function reportState(ctx: PageContext, r: Region): ReportState {
   const p = ctx.params;
-  const size = parseInt(p.get(key(r, 'n')) ?? '', 10) || Number(r.config.page_size) || 15;
+  const size = parseInt(p.get(key(r, 'n')) ?? '', 10) || Number(r.config.page_size) || componentSetting(ctx.app.component_settings, 'report_rows');
   const st: ReportState = {
     search: (p.get(key(r, 'q')) ?? '').trim(),
     searchCol: (p.get(key(r, 'qc')) ?? '').trim() || null,
@@ -420,7 +421,7 @@ export async function filtered(ctx: PageContext, r: Region, st: ReportState) {
   // the search term, facet values and range bounds are query parameters
   const p = new SqlParams();
   const hides = hidesColumns(r);
-  const facets = facetFilters(ctx.params, r.id, reportFacetDefs(ctx.page.regions, r.id, ctx.vis?.regions));
+  const facets = facetFilters(ctx.params, r.id, reportFacetDefs(ctx.page.regions, r.id, ctx.vis?.regions), undefined, appDateReader(ctx));
   const needCols = st.filters.length || facets.length || st.breakCol || st.aggregates.length || st.highlights.length || st.view !== 'report' || st.area || st.near || keysetColumns(r) || (hides && (st.search || st.sort)) || (st.search && st.searchCol);
   // column name → type oid
   const fields = needCols ? await fieldsOf(ctx, src) : [];

package/src/runtime/routes.ts

@@ -141,7 +141,8 @@ export async function signIn(req: FastifyRequest, reply: FastifyReply, a: App, o
   if (shared) s.state.__SHARED = shared;
   await saveState(s);
 
-  if (a.app_processes.some((p) => p.point === 'after_login')) {
+  // the application processes "after login", then (102) the application computations "after authentication"
+  if (a.app_processes.some((p) => p.point === 'after_login') || (a.app_computations ?? []).some((c) => c.point === 'after_authentication')) {
     const home = (await loadPage(a.id, a.home_page)) ?? ({ page_no: a.home_page, items: [], regions: [], buttons: [], dynamic_actions: [], validations: [], processes: [], computations: [], branches: [] } as unknown as Page);
     const ctx: PageContext = {
       app: a, page: home, session: s, base, params: new URLSearchParams(), request: '', user: username,
@@ -151,6 +152,7 @@ export async function signIn(req: FastifyRequest, reply: FastifyReply, a: App, o
     await appTx(txContext(ctx), async (c) => {
       ctx.client = c;
       await runAppProcesses(ctx, 'after_login');
+      await runComputations(ctx, 'after_authentication');
     });
     await saveState(s);
   }
@@ -358,7 +360,9 @@ function applyPostedItems(ctx: PageContext, body: Body, only?: string[]) {
     }
     if (item.type === 'daterange') {
       // two date inputs with the item's name (or "from:to" from a dynamic action); format checked in validate()
-      const parts = (Array.isArray(raw) ? raw : raw ? String(raw).split(':') : []).map((v) => String(v).trim());
+      // (sprint 84) each part typed in the date format (or YYYY-MM-DD) → YYYY-MM-DD; other text is kept, and validate() reports it
+      const mask = itemDateMask(ctx, item)!;
+      const parts = (Array.isArray(raw) ? raw : raw ? String(raw).split(':') : []).map((v) => String(v).trim()).map((v) => (v ? (parseDateMask(v, mask, ctx.locale.lang) ?? v) : v));
       ctx.session.state[item.name] = parts.some(Boolean) ? (parts.length === 1 ? `${parts[0]}:` : parts.join(':')) : null;
       continue;
     }
@@ -1025,7 +1029,7 @@ export async function runtimeRoutes(app: FastifyInstance) {
         if (!item || !vis.editable.has(item.name)) throw new Forbidden(ctx.locale.t('error.unknown_item'));
         if (item.config?.cascade_parents) applyPostedItems(ctx, body, list(item.config.cascade_parents));
         const page = Math.min(Math.max(Math.floor(Number(body.p)) || 0, 0), 10_000);
-        return searchLov(ctx, item, String(body.q ?? '').slice(0, 200), page, popupPageSize(item, body.n));
+        return searchLov(ctx, item, String(body.q ?? '').slice(0, 200), page, popupPageSize(item, body.n, ctx.app.component_settings));
       });
       return reply.send(out);
     } catch (e) {

package/src/runtime/shortcuts.ts

@@ -0,0 +1,43 @@
+import { esc } from '../html.ts';
+import { publicError, type PageContext } from './context.ts';
+import { computeValue } from './logic.ts';
+
+// Shortcuts (migration 103; APEX: Shared Components → Shortcuts). "NAME" (an
+// upper-case name in double quotes) in a static region's content, an item's
+// help text and a button's or menu entry's confirm message is replaced by the
+// application's shortcut of that name, before &ITEM. substitutions. Other
+// quoted words (class="NAV" with no shortcut NAV) stay as they are.
+//
+//   text           the value; escaped where it goes into HTML
+//   html           the value as HTML
+//   function_body  PL/pgSQL returning the text (HTML), run once per request
+//                  as the application's role
+
+const NAME = /"([A-Z][A-Z0-9_]{0,59})"/g;
+
+/** A shortcut's text (html: as it goes into HTML), computed once per request; null: no such shortcut. */
+async function valueOf(ctx: PageContext, name: string, asHtml: boolean): Promise<string | null> {
+  const s = ctx.app.shortcuts?.find((x) => x.name === name);
+  if (!s) return null;
+  if (s.type === 'text') return asHtml ? esc(s.value) : s.value;
+  if (s.type === 'html') return s.value;
+  const cache = (ctx.shortcutValues ??= new Map());
+  if (!cache.has(name)) {
+    try {
+      cache.set(name, (await computeValue(ctx, { type: 'function_body', expression: s.value })) ?? '');
+    } catch (e) {
+      ctx.errors.page.push(await publicError(ctx, e, `shortcut "${name}"`));
+      cache.set(name, '');
+    }
+  }
+  return cache.get(name)!;
+}
+
+/** The text with its "NAME" shortcuts replaced (as HTML or as plain text). */
+export async function expandShortcuts(ctx: PageContext, text: string, as: 'html' | 'text'): Promise<string> {
+  if (!ctx.app.shortcuts?.length || !text.includes('"')) return text;
+  const names = new Set([...text.matchAll(NAME)].map((m) => m[1]));
+  const values = new Map<string, string | null>();
+  for (const n of names) values.set(n, await valueOf(ctx, n, as === 'html'));
+  return text.replace(NAME, (m, n: string) => values.get(n) ?? m);
+}

package/src/runtime/smart-filters.ts

@@ -1,3 +1,4 @@
+import { appDateReader } from './items.ts';
 import { html, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import type { Region } from '../metadata.ts';
@@ -34,7 +35,7 @@ export async function renderSmartFilters(ctx: PageContext, r: Region): Promise<R
   const formId = `sf${r.id}`;
   const defs = facetDefs(r.config).filter((f) => fs.cols.has(f.column));
   const per = Number.isInteger(r.config.suggestions) ? Math.max(0, Math.min(MAX_SUGGESTIONS, r.config.suggestions)) : 3;
-  const filters = facetFilters(ctx.params, report.id, fs.all);
+  const filters = facetFilters(ctx.params, report.id, fs.all, undefined, appDateReader(ctx));
   const own = new Map<string, FacetFilter>(filters.filter((f) => defs.some((d) => d.column === f.column)).map((f) => [f.column, f]));
 
   // ---- chips: the search term and each filter of this region's facets, each with a remove link