pgkiln 0.45.0 → 0.47.0

package/src/runtime/grid.ts

@@ -9,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';
@@ -102,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(
@@ -111,7 +112,8 @@ 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}>`;
@@ -329,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)}>${cellText(col, value, value === dbValue ? cell(row[col.idx], col.typeOid, fmtOf(col.name)) : value)}${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;
@@ -366,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>`;
@@ -417,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 = [
@@ -438,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()}`;
@@ -718,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

@@ -14,7 +14,7 @@ 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());
@@ -184,15 +184,36 @@ export const splitRange = (v: string | null | undefined): [string, string] => {
   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. */
@@ -384,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;
       }
@@ -398,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

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/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

@@ -21,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';
@@ -378,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;

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)]));
 
 /**

package/src/runtime/report.ts

@@ -8,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';
@@ -421,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

@@ -360,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;
     }

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

package/src/runtime/tasks.ts

@@ -6,6 +6,7 @@ import type { Region } from '../metadata.ts';
 import { logActivity, saveState } from '../session.ts';
 import { pageAllowed } from './authz.ts';
 import { publicError, stripSemicolon, type PageContext } from './context.ts';
+import { appDateMask, appDateReader, dateField } from './items.ts';
 import { linkAttrs } from './links.ts';
 import { cell } from './report.ts';
 import { loadContext, safeNext, txContext, type Req } from './routes.ts';
@@ -158,8 +159,8 @@ async function vacationPanel(ctx: PageContext, r: Region): Promise<Raw | ''> {
     : html`<p class="muted">${t('tasks.vacation_help')}</p>
       <div class="vacation-fields">
         <label>${t('tasks.vacation_to')} <input name="to" form="${f}" maxlength="100" required autocomplete="off"></label>
-        <label>${t('tasks.vacation_from')} <input type="date" name="from" form="${f}" required></label>
-        <label>${t('tasks.vacation_until')} <input type="date" name="until" form="${f}" required></label>
+        <label>${t('tasks.vacation_from')} ${dateField(ctx, { id: `${f}_from`, iso: '', mask: appDateMask(ctx), attrs: html` name="from" form="${f}" required` })}</label>
+        <label>${t('tasks.vacation_until')} ${dateField(ctx, { id: `${f}_until`, iso: '', mask: appDateMask(ctx), attrs: html` name="until" form="${f}" required` })}</label>
         <button class="btn" form="${f}" name="action" value="set">${t('tasks.vacation_save')}</button></div>`}
   </details>`;
 }
@@ -173,7 +174,9 @@ export async function taskRoutes(app: FastifyInstance) {
     const next = safeNext(ctx.app, b.next);
     if (b.__csrf !== ctx.session.csrf_token || !['set', 'clear'].includes(String(b.action))) return reply.redirect(next, 303);
     const t = ctx.locale.t;
-    const date = (v: unknown) => (typeof v === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(v) ? v : null);
+    // (sprint 84) typed in the application's date format (or YYYY-MM-DD)
+    const readDate = appDateReader(ctx);
+    const date = (v: unknown) => (typeof v === 'string' && v.length <= 100 ? readDate(v) : null);
     try {
       await appTx(txContext(ctx), async (c) => {
         if (b.action === 'clear') await c.query('select meta.clear_vacation_rule()');

package/src/sqlformat.ts

@@ -0,0 +1,208 @@
+import { skipQuoted } from './binds.ts';
+
+// (sprint 93, Database Actions DA-9) Format SQL for the worksheet (Ctrl+F7): keywords in one case, each clause
+// of a query on its own line (SELECT, FROM, WHERE, GROUP BY, …), joins indented, AND / OR of a condition and the
+// columns of a select list one per line, subqueries indented. Strings, quoted identifiers, dollar-quoted bodies
+// and comments are kept as they are; everything else is re-spaced. It is a layout aid, not a parser: SQL it
+// doesn't understand keeps its words and order.
+
+const KEYWORDS = new Set(`
+  select from where and or not in is null like ilike between exists as on join inner left right full outer cross natural
+  using group by order having limit offset fetch first next rows row only union all intersect except distinct case when
+  then else end insert into values update set delete returning with recursive create table view materialized index
+  replace drop alter add column constraint primary key foreign references unique check default cascade restrict
+  truncate grant revoke to begin commit rollback do language function procedure returns return true false asc desc
+  nulls last over partition window filter lateral any some array cast interval if conflict nothing merge matched
+  explain analyze schema sequence trigger policy for each execute`.trim().split(/\s+/));
+
+/** Clauses that start a line in a query; two-word ones are matched as their first word plus the next. */
+const CLAUSES = new Set(['select', 'from', 'where', 'having', 'limit', 'offset', 'fetch', 'union', 'intersect', 'except', 'window', 'returning', 'values', 'set', 'with', 'insert', 'update', 'delete', 'on conflict']);
+const TWO_WORD = new Set(['group by', 'order by', 'partition by', 'on conflict', 'union all']);
+const JOIN_START = new Set(['join', 'inner', 'left', 'right', 'full', 'cross', 'natural']);
+
+type Tok = { t: 'ws' | 'word' | 'quoted' | 'comment' | 'punct' | 'num'; v: string };
+
+function tokens(sql: string): Tok[] {
+  const out: Tok[] = [];
+  let i = 0;
+  while (i < sql.length) {
+    const c = sql[i];
+    if (/\s/.test(c)) {
+      let j = i + 1;
+      while (j < sql.length && /\s/.test(sql[j])) j++;
+      out.push({ t: 'ws', v: sql.slice(i, j) });
+      i = j;
+      continue;
+    }
+    const prev = i > 0 ? sql[i - 1] : '';
+    if (!(c === '$' && /[A-Za-z0-9_]/.test(prev))) {
+      const end = skipQuoted(sql, i);
+      if (end !== null && end > i) {
+        out.push({ t: c === '-' || c === '/' ? 'comment' : 'quoted', v: sql.slice(i, end) });
+        i = end;
+        continue;
+      }
+    }
+    if (/[A-Za-z_\u0080-￿]/.test(c)) {
+      let j = i + 1;
+      while (j < sql.length && /[A-Za-z0-9_$\u0080-￿]/.test(sql[j])) j++;
+      // E'…' strings: the E belongs to the string
+      if ((sql[j] === "'") && j === i + 1 && /[eE]/.test(c)) {
+        const end = skipQuoted(sql, j)!;
+        out.push({ t: 'quoted', v: sql.slice(i, end) });
+        i = end;
+        continue;
+      }
+      out.push({ t: 'word', v: sql.slice(i, j) });
+      i = j;
+      continue;
+    }
+    if (/[0-9]/.test(c)) {
+      let j = i + 1;
+      while (j < sql.length && /[0-9.eE_]/.test(sql[j])) j++;
+      out.push({ t: 'num', v: sql.slice(i, j) });
+      i = j;
+      continue;
+    }
+    // $1 parameters
+    const param = c === '$' ? /^\$\d+/.exec(sql.slice(i, i + 12)) : null;
+    if (param) {
+      out.push({ t: 'num', v: param[0] });
+      i += param[0].length;
+      continue;
+    }
+    // operators of several characters stay together (::, <=, <>, ->>, ||, :=)
+    const op = /^(::|->>|->|#>>|#>|<=|>=|<>|!=|\|\||:=|=>)/.exec(sql.slice(i, i + 3));
+    out.push({ t: 'punct', v: op ? op[0] : c });
+    i += op ? op[0].length : 1;
+  }
+  return out;
+}
+
+export function formatSql(sql: string, keywordCase: 'upper' | 'lower' = 'lower'): string {
+  const toks = tokens(sql).filter((t) => t.t !== 'ws');
+  const kw = (w: string) => (keywordCase === 'upper' ? w.toUpperCase() : w.toLowerCase());
+  interface Frame { query: boolean; base: number; clause: string; between: boolean }
+  const frames: Frame[] = [{ query: true, base: 0, clause: '', between: false }];
+  let out = '';
+  let line = ''; // the current line
+  let glue = false; // the next token sticks to the last one (a unary minus)
+  const flush = () => {
+    out += `${line.replace(/\s+$/, '')}\n`;
+    line = '';
+  };
+  const newline = (indent: number) => {
+    if (line.trim()) flush();
+    line = ' '.repeat(Math.max(0, indent));
+  };
+  const put = (s: string, space = true) => {
+    if (glue) {
+      glue = false;
+      line += s;
+      return;
+    }
+    if (space && line.trim() && !/[\s(]$/.test(line) && !/^[,).;:[\]]/.test(s) && !line.endsWith('::') && !line.endsWith('.')) line += ' ';
+    else if (!line.trim() && line.length === 0) line = ' '.repeat(frames[frames.length - 1].base);
+    line += s;
+  };
+  for (let k = 0; k < toks.length; k++) {
+    const t = toks[k];
+    const f = frames[frames.length - 1];
+    const lower = t.v.toLowerCase();
+    if (t.t === 'comment') {
+      put(t.v);
+      if (t.v.startsWith('--')) newline(f.base);
+      continue;
+    }
+    if (t.t === 'word' && KEYWORDS.has(lower)) {
+      const nextWord = toks.slice(k + 1).find((x) => x.t !== 'comment');
+      const two = nextWord && nextWord.t === 'word' ? `${lower} ${nextWord.v.toLowerCase()}` : '';
+      if (f.query && TWO_WORD.has(two) && two !== 'partition by') {
+        newline(f.base);
+        put(`${kw(lower)} ${kw(nextWord!.v.toLowerCase())}`);
+        f.clause = two;
+        k = toks.indexOf(nextWord!);
+        continue;
+      }
+      if (f.query && CLAUSES.has(lower) && !(lower === 'set' && f.clause !== 'update') && !(lower === 'values' && f.clause === 'values')) {
+        if ((out || line.trim()) && !line.endsWith('(')) newline(f.base);
+        put(kw(lower));
+        f.clause = lower;
+        f.between = false;
+        continue;
+      }
+      if (f.query && JOIN_START.has(lower)) {
+        const prevWord = [...toks.slice(0, k)].reverse().find((x) => x.t !== 'comment');
+        const afterJoinWord = prevWord?.t === 'word' && /^(inner|left|right|full|cross|natural|outer)$/i.test(prevWord.v);
+        // left( and right( are functions; JOIN right after INNER / LEFT … stays on its line
+        const starts = lower === 'join' ? !afterJoinWord : !!nextWord && /^(join|outer|inner)$/i.test(nextWord.v);
+        if (starts && !afterJoinWord) {
+          newline(f.base + 2);
+          put(kw(lower));
+          f.clause = 'from';
+          continue;
+        }
+      }
+      if (f.query && (lower === 'and' || lower === 'or') && ['where', 'having', 'from'].includes(f.clause)) {
+        if (lower === 'and' && f.between) {
+          f.between = false;
+          put(kw(lower));
+          continue;
+        }
+        newline(f.base + (f.clause === 'from' ? 4 : 2) + (lower === 'and' ? 1 : 2));
+        put(kw(lower));
+        continue;
+      }
+      if (lower === 'between') f.between = true;
+      put(kw(lower));
+      continue;
+    }
+    if (t.t === 'punct') {
+      if (t.v === '(') {
+        const next = toks.slice(k + 1).find((x) => x.t !== 'comment');
+        const sub = !!next && next.t === 'word' && /^(select|with|values)$/i.test(next.v);
+        const prevTok = toks[k - 1];
+        const before = toks[k - 2];
+        const named = before?.t === 'word' && /^(into|table|view|index|on|using|references|function|procedure|type)$/i.test(before.v);
+        const fn = !!prevTok && (prevTok.t === 'word' || prevTok.t === 'quoted') && !named
+          && (!KEYWORDS.has(prevTok.v.toLowerCase()) || /^(left|right|replace|cast|any|some)$/i.test(prevTok.v));
+        put('(', !fn);
+        frames.push({ query: sub, base: sub ? line.length : f.base, clause: '', between: false });
+        continue;
+      }
+      if (t.v === ')') {
+        if (frames.length > 1) frames.pop();
+        put(')', false);
+        continue;
+      }
+      if (t.v === ',') {
+        put(',', false);
+        if (f.query && f.clause === 'select') newline(f.base + 7);
+        else if (f.query && (f.clause === 'group by' || f.clause === 'order by')) newline(f.base + 9);
+        continue;
+      }
+      if (t.v === ';') {
+        put(';', false);
+        flush();
+        out += '\n';
+        frames.splice(1);
+        frames[0].clause = '';
+        continue;
+      }
+      if (t.v === '.' || t.v === '::') {
+        line += t.v;
+        continue;
+      }
+      const prevTok = toks[k - 1];
+      const unary = (t.v === '-' || t.v === '+') && (!prevTok || prevTok.t === 'punct' && prevTok.v !== ')' || (prevTok.t === 'word' && KEYWORDS.has(prevTok.v.toLowerCase())));
+      put(t.v);
+      if (unary) glue = true;
+      continue;
+    }
+    // a word after "." or "::" sticks to it
+    if (line.endsWith('.') || line.endsWith('::')) line += t.v;
+    else put(t.v);
+  }
+  if (line.trim()) flush();
+  return out.replace(/\n{3,}/g, '\n\n').replace(/\s+$/, '') + (sql.trimEnd().endsWith(';') ? '\n' : '');
+}