pgkiln 0.41.0 → 0.43.0

package/src/i18n/tr.ts

@@ -111,6 +111,21 @@ export const tr: Record<MessageKey, string> = {
   'color.blue': "Mavi",
   'color.gray': "Gri",
   'report.saved_reports': "Kayıtlı raporlar",
+  'report.first': "İlk sayfa",
+  'report.last': "Son sayfa",
+  'report.hidden_column': "Gizli",
+  'report.show_column': "Sütunu yeniden göster",
+  'report.search_column': "Şurada ara",
+  'report.all_columns': "Tüm sütunlar",
+  'report.columns': "Sütunlar",
+  'report.hide_columns': "Gizlenecek sütunlar",
+  'report.data': "Veri",
+  'report.format': "Biçim",
+  'report.report': "Rapor",
+  'report.download_menu': "İndir",
+  'report.hide': "Sütunu gizle",
+  'report.filter_values': "Değerleri filtrele",
+  'report.no_values': "Değer yok",
   'report.save_as': "Farklı kaydet…",
   'report.name': "Ad",
   'report.save': "Kaydet",
@@ -148,11 +163,13 @@ export const tr: Record<MessageKey, string> = {
   'pwa.queue_waiting': "Gönderilmeyi bekleyen {n} form",
   'pwa.send_now': "Şimdi gönder",
   'pwa.discard': "At",
+  'pwa.install': "Uygulamayı yükle",
   'pwa.status.waiting': "bekliyor",
   'pwa.status.signin': "göndermek için oturum açın",
   'pwa.status.invalid': "reddedildi: sayfayı açıp düzeltin",
   'pwa.status.error': "gönderilmedi",
   'item.locate': "Konumumu kullan",
+  'item.choose_date': "Bir tarih seçin",
   'item.show_map': "harita",
   'item.scan': "Tara",
   'item.locate_error': "Konum kullanılamıyor.",

package/src/i18n/uk.ts

@@ -111,6 +111,21 @@ export const uk: Record<MessageKey, string> = {
   'color.blue': "Синій",
   'color.gray': "Сірий",
   'report.saved_reports': "Збережені звіти",
+  'report.first': "Перша сторінка",
+  'report.last': "Остання сторінка",
+  'report.hidden_column': "Прихований",
+  'report.show_column': "Знову показати стовпець",
+  'report.search_column': "Шукати в",
+  'report.all_columns': "Усі стовпці",
+  'report.columns': "Стовпці",
+  'report.hide_columns': "Приховати стовпці",
+  'report.data': "Дані",
+  'report.format': "Формат",
+  'report.report': "Звіт",
+  'report.download_menu': "Завантажити",
+  'report.hide': "Приховати стовпець",
+  'report.filter_values': "Фільтр значень",
+  'report.no_values': "Немає значень",
   'report.save_as': "Зберегти як…",
   'report.name': "Назва",
   'report.save': "Зберегти",
@@ -148,11 +163,13 @@ export const uk: Record<MessageKey, string> = {
   'pwa.queue_waiting': "Форм очікують надсилання: {n}",
   'pwa.send_now': "Надіслати зараз",
   'pwa.discard': "Відкинути",
+  'pwa.install': "Встановити застосунок",
   'pwa.status.waiting': "очікує",
   'pwa.status.signin': "увійдіть, щоб надіслати",
   'pwa.status.invalid': "відхилено: відкрийте сторінку й виправте",
   'pwa.status.error': "не надіслано",
   'item.locate': "Моє розташування",
+  'item.choose_date': "Вибрати дату",
   'item.show_map': "карта",
   'item.scan': "Сканувати",
   'item.locate_error': "Розташування недоступне.",

package/src/i18n/zh.ts

@@ -111,6 +111,21 @@ export const zh: Record<MessageKey, string> = {
   'color.blue': "蓝色",
   'color.gray': "灰色",
   'report.saved_reports': "已保存的报表",
+  'report.first': "第一页",
+  'report.last': "最后一页",
+  'report.hidden_column': "已隐藏",
+  'report.show_column': "重新显示该列",
+  'report.search_column': "搜索范围",
+  'report.all_columns': "所有列",
+  'report.columns': "列",
+  'report.hide_columns': "要隐藏的列",
+  'report.data': "数据",
+  'report.format': "格式",
+  'report.report': "报表",
+  'report.download_menu': "下载",
+  'report.hide': "隐藏列",
+  'report.filter_values': "筛选值",
+  'report.no_values': "没有值",
   'report.save_as': "另存为…",
   'report.name': "名称",
   'report.save': "保存",
@@ -148,11 +163,13 @@ export const zh: Record<MessageKey, string> = {
   'pwa.queue_waiting': "{n} 个表单等待发送",
   'pwa.send_now': "立即发送",
   'pwa.discard': "放弃",
+  'pwa.install': "安装应用",
   'pwa.status.waiting': "等待中",
   'pwa.status.signin': "登录后发送",
   'pwa.status.invalid': "被拒绝：请打开页面并更正",
   'pwa.status.error': "未发送",
   'item.locate': "使用我的位置",
+  'item.choose_date': "选择日期",
   'item.show_map': "地图",
   'item.scan': "扫描",
   'item.locate_error': "无法获取位置。",

package/src/i18n.ts

@@ -138,6 +138,21 @@ const en = {
   'color.blue': 'Blue',
   'color.gray': 'Gray',
   'report.saved_reports': 'Saved reports',
+  'report.first': "First page",
+  'report.last': "Last page",
+  'report.hidden_column': "Hidden",
+  'report.show_column': "Show the column again",
+  'report.search_column': "Search in",
+  'report.all_columns': "All columns",
+  'report.columns': "Columns",
+  'report.hide_columns': "Columns to hide",
+  'report.data': "Data",
+  'report.format': "Format",
+  'report.report': "Report",
+  'report.download_menu': "Download",
+  'report.hide': "Hide column",
+  'report.filter_values': "Filter the values",
+  'report.no_values': "No values",
   'report.save_as': 'Save as…',
   'report.name': 'Name',
   'report.save': 'Save',
@@ -175,11 +190,13 @@ const en = {
   'pwa.queue_waiting': '{n} form(s) waiting to be sent',
   'pwa.send_now': 'Send now',
   'pwa.discard': 'Discard',
+  'pwa.install': 'Install app',
   'pwa.status.waiting': 'waiting',
   'pwa.status.signin': 'sign in to send',
   'pwa.status.invalid': 'rejected: open the page and correct it',
   'pwa.status.error': 'not sent',
   'item.locate': 'Use my location',
+  'item.choose_date': "Choose a date",
   'item.show_map': 'map',
   'item.scan': 'Scan',
   'item.locate_error': 'The location is not available.',
@@ -826,6 +843,21 @@ const nl: Record<MessageKey, string> = {
   'color.blue': 'Blauw',
   'color.gray': 'Grijs',
   'report.saved_reports': 'Opgeslagen rapporten',
+  'report.first': "Eerste pagina",
+  'report.last': "Laatste pagina",
+  'report.hidden_column': "Verborgen",
+  'report.show_column': "Kolom weer tonen",
+  'report.search_column': "Zoeken in",
+  'report.all_columns': "Alle kolommen",
+  'report.columns': "Kolommen",
+  'report.hide_columns': "Kolommen verbergen",
+  'report.data': "Gegevens",
+  'report.format': "Opmaak",
+  'report.report': "Rapport",
+  'report.download_menu': "Downloaden",
+  'report.hide': "Kolom verbergen",
+  'report.filter_values': "Waarden filteren",
+  'report.no_values': "Geen waarden",
   'report.save_as': 'Opslaan als…',
   'report.name': 'Naam',
   'report.save': 'Opslaan',
@@ -863,11 +895,13 @@ const nl: Record<MessageKey, string> = {
   'pwa.queue_waiting': '{n} formulier(en) wachten op verzending',
   'pwa.send_now': 'Nu versturen',
   'pwa.discard': 'Weggooien',
+  'pwa.install': 'App installeren',
   'pwa.status.waiting': 'wacht',
   'pwa.status.signin': 'meld je aan om te versturen',
   'pwa.status.invalid': 'geweigerd: open de pagina en verbeter het',
   'pwa.status.error': 'niet verzonden',
   'item.locate': 'Mijn locatie',
+  'item.choose_date': "Kies een datum",
   'item.show_map': 'kaart',
   'item.scan': 'Scannen',
   'item.locate_error': 'De locatie is niet beschikbaar.',

package/src/icons.ts

@@ -63,7 +63,8 @@ export const ICON_MODIFIERS = Object.keys(MODIFIERS);
 export function iconParts(value: string | null | undefined): { name: string; set: 'pgkiln' | 'lucide'; classes: string[] } | null {
   if (!value) return null;
   const tokens = String(value).trim().toLowerCase().split(/\s+/).slice(0, 8).map((t) => (t.startsWith('fa-') ? t.slice(3) : t)).filter((t) => t && t !== 'fa');
-  const name = tokens.find((t) => !(t in MODIFIERS));
+  // (sprint 72) "info" is a modifier and an icon: alone, it is the icon
+  const name = tokens.find((t) => !(t in MODIFIERS)) ?? (tokens.length === 1 && (ICONS as readonly string[]).includes(tokens[0]) ? tokens[0] : undefined);
   if (!name) return null;
   const set = (ICONS as readonly string[]).includes(name) ? 'pgkiln' : lucideNames().has(name) ? 'lucide' : null;
   if (!set) return null;

package/src/layout.ts

@@ -7,13 +7,13 @@ export interface RootAttrs {
   dir?: 'ltr' | 'rtl';
   theme?: 'auto' | 'light' | 'dark';
   /** a base style other than Standard (src/runtime/styles.ts BASE_STYLES) */
-  style?: 'iris';
+  style?: 'iris' | 'lavender';
 }
 
 export function documentShell(title: string, body: Raw, bodyClass = '', data: Record<string, string> = {}, head: Raw | '' = '', root: RootAttrs = {}) {
   const attrs = Object.entries(data).map(([k, v]) => html` ${k}="${v}"`);
   return html`<!doctype html>
-<html lang="${root.lang ?? 'en'}"${root.dir === 'rtl' ? html` dir="rtl"` : ''}${root.theme && root.theme !== 'auto' ? html` data-theme="${root.theme}"` : ''}${root.style === 'iris' ? html` data-style="iris"` : ''}>
+<html lang="${root.lang ?? 'en'}"${root.dir === 'rtl' ? html` dir="rtl"` : ''}${root.theme && root.theme !== 'auto' ? html` data-theme="${root.theme}"` : ''}${root.style === 'iris' || root.style === 'lavender' ? html` data-style="${root.style}"` : ''}>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

package/src/metadata.ts

@@ -154,6 +154,8 @@ export interface Region {
   rest_source?: string | null;
   /** (053) template options: CSS classes from REGION_OPTIONS (others are ignored) */
   template_options?: string[];
+  /** (099) where the region shows: banner, breadcrumb, left, body (null), right or footer */
+  position?: 'banner' | 'breadcrumb' | 'left' | 'body' | 'right' | 'footer' | null;
 }
 
 export type ItemType =
@@ -205,6 +207,8 @@ export interface Button {
   badge_query?: string | null;
   /** (053) template options: CSS classes from BUTTON_OPTIONS (others are ignored) */
   template_options?: string[];
+  /** (099) a region button's position: create, edit, change, copy, help, up, previous, close, delete, next or region (null) */
+  slot?: string | null;
 }
 
 export interface MenuEntry {
@@ -328,7 +332,7 @@ export interface Page extends PageSummary {
   /** (077) ask before leaving the page with unsaved changes */
   warn_unsaved: boolean;
   /** (087) 'minimal': no header and navigation */
-  page_template: 'standard' | 'minimal';
+  page_template: 'standard' | 'minimal' | 'left_side_column' | 'right_side_column';
 }
 
 /** The static files a list of names refers to, in that order, with their version. */

package/src/runtime/charts.ts

@@ -173,18 +173,23 @@ const tip = (label: string, series: Series[], i: number) =>
 // ---------------------------------------------------------------- bar (horizontal)
 function bar(labels: string[], series: Series[]) {
   const all = series.flatMap((s) => s.values);
-  const max = Math.max(...all.map(Math.abs), 1);
+  // (097) a value axis with gridlines: bars are measured against a nice scale from zero
+  const scale = niceScale(0, Math.max(...all.map(Math.abs), 1));
+  const max = scale.hi || 1;
+  const ticks = scale.ticks.filter((t) => t >= 0 && t <= max);
+  const at = (t: number) => css.cls(`left:${pct((t / max) * 100)}`);
+  const grid = html`<span class="bar-grid" aria-hidden="true">${ticks.map((t) => html`<span class="bar-gridline${t === 0 ? ' baseline' : ''} ${at(t)}"></span>`)}</span>`;
   const multi = series.length > 1;
   return html`<div class="chart-bar${multi ? ' multi' : ''}">${labels.map((l, i) => {
     const inner = html`<span class="bar-label" title="${l}">${l}</span>
-      <span class="bar-stack">${series.map((s, si) => {
+      <span class="bar-stack">${grid}${series.map((s, si) => {
         const b = html`<span class="bar s${si + 1} ${css.cls(`width:${pct((Math.abs(s.values[i]) / max) * 100)}`)}"></span>`;
         // several series: each bar is its own link
         return multi && link ? mark('span', i, si, 'bar-track', `${l} · ${s.name}: ${fmt.format(s.values[i])}`, b, false) : html`<span class="bar-track">${b}</span>`;
       })}</span>
       <span class="bar-value">${multi ? '' : fmt.format(series[0].values[i])}</span>`;
     return !multi && link ? mark('div', i, 0, 'bar-row', tip(l, series, i), inner) : html`<div class="bar-row" data-tip="${tip(l, series, i)}">${inner}</div>`;
-  })}</div>`;
+  })}<div class="bar-axis" aria-hidden="true"><span></span><span class="bar-ticks">${ticks.map((t) => html`<span class="${at(t)}">${compact.format(t)}</span>`)}</span><span></span></div></div>`;
 }
 
 // ---------------------------------------------------------------- shared y axis

package/src/runtime/devbar.ts

@@ -22,6 +22,7 @@ import { html, raw, type Raw } from '../html.ts';
 import { hashToken, newToken } from '../security.ts';
 import { saveState, sessionLimits, type Session } from '../session.ts';
 import { documentShell } from '../layout.ts';
+import { icon } from '../icons.ts';
 import type { PageContext } from './context.ts';
 
 export const DEVBAR_COOKIE = 'pgkiln_devbar';
@@ -73,30 +74,50 @@ export const sessionDebugLevel = (s: Session) => {
   return DEBUG_LEVELS.some(([level]) => level === n) ? n : 0;
 };
 
-/** The toolbar at the bottom of a page (not in dialogs). */
+/**
+ * The toolbar (not in dialogs): (sprint 72) a compact bar of icons with tooltips,
+ * centred at the bottom like APEX's. Debug, Info and Settings open small panels
+ * (<details>, so they work without JavaScript). With JavaScript (app.js) the bar
+ * shrinks to a slim tab after a few seconds without use and can be docked at the
+ * top, left or right (Settings; kept in the browser).
+ */
 export function devbarHtml(ctx: PageContext): Raw | '' {
   if (!ctx.devbar || ctx.dialog) return '';
   const level = sessionDebugLevel(ctx.session);
   const appLevel = Number(ctx.app.debug_level ?? 0);
   const page = ctx.page.page_no;
-  return html`<details class="devbar" open>
-    <summary><span>Developer</span></summary>
-    <nav aria-label="Developer toolbar"><ul>
-      <li><a href="${BUILDER}">App Builder</a></li>
-      <li><a href="${BUILDER}/apps/${ctx.app.id}">Application ${ctx.app.id}</a></li>
-      <li><a href="${BUILDER}/pages/${ctx.page.id}">Edit page ${page}</a></li>
-      <li><button type="button" class="devbar-quick" data-quick-edit="${BUILDER}/pages/${ctx.page.id}" aria-pressed="false" hidden>Quick edit</button></li>
-      <li><a href="${ctx.base}/${page}/devbar/session">Session</a></li>
-      <li><form method="post" action="${ctx.base}/${page}/devbar/debug" class="devbar-debug">
+  const tool = (href: string, label: string, name: string) =>
+    html`<li><a class="devbar-tool" href="${href}" title="${label}" aria-label="${label}">${icon(name)}</a></li>`;
+  const menu = (label: string, name: string, cls: string, body: Raw, hidden = false) =>
+    html`<li${hidden ? raw(' hidden') : ''}><details class="devbar-menu ${cls}"><summary class="devbar-tool" title="${label}" aria-label="${label}">${icon(name)}</summary>
+      <div class="devbar-pop" role="group" aria-label="${label}">${body}</div></details></li>`;
+  return html`<div class="devbar" data-dock="bottom">
+    <nav aria-label="Developer toolbar"><ul class="devbar-tools">
+      ${tool(BUILDER, 'App Builder', 'home')}
+      ${tool(`${BUILDER}/apps/${ctx.app.id}`, `Application ${ctx.app.id}`, 'grid')}
+      ${tool(`${BUILDER}/pages/${ctx.page.id}`, `Edit page ${page}`, 'edit')}
+      ${tool(`${ctx.base}/${page}/devbar/session`, 'Session', 'database')}
+      ${menu('Debug', 'bolt', `devbar-debug-menu${level || appLevel ? ' is-on' : ''}`, html`<form method="post" action="${ctx.base}/${page}/devbar/debug" class="devbar-debug">
         <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
-        <label for="devbar-debug">Debug</label>
+        <label for="devbar-debug">Debug messages</label>
         <select id="devbar-debug" name="level">${DEBUG_LEVELS.map(([n, label]) =>
           html`<option value="${n}"${n === level ? raw(' selected') : ''}>${n === 0 ? (appLevel ? `Application (${appLevel})` : 'Off') : label}</option>`)}</select>
         <button>Set</button>
-      </form></li>
-      ${level || appLevel ? html`<li><a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a></li>` : ''}
+      </form>${level || appLevel ? html`<a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a>` : ''}`)}
+      <li><button type="button" class="devbar-tool devbar-quick" data-quick-edit="${BUILDER}/pages/${ctx.page.id}" aria-pressed="false" title="Quick edit" aria-label="Quick edit" hidden>${icon('scan')}</button></li>
+      ${tool(`${BUILDER}/apps/${ctx.app.id}/theme`, 'Customize (Theme Roller)', 'sliders')}
+      ${menu('Info', 'info', 'devbar-info', html`<dl class="devbar-facts">
+        <dt>Application</dt><dd>${ctx.app.name} (${ctx.app.id})</dd>
+        <dt>Page</dt><dd>${page}: ${ctx.page.name}</dd>
+        <dt>User</dt><dd>${ctx.user ?? 'nobody'}</dd>
+        <dt>Developer</dt><dd>${ctx.devbar.username}</dd>
+      </dl>`)}
+      ${menu('Settings', 'settings', 'devbar-settings', html`<fieldset class="devbar-dock"><legend>Position</legend>
+        ${(['bottom', 'top', 'left', 'right'] as const).map((d) => html`<label><input type="radio" name="devbar-dock" value="${d}"${d === 'bottom' ? raw(' checked') : ''}> ${d[0].toUpperCase() + d.slice(1)}</label>`)}
+      </fieldset>
+      <label class="devbar-autohide"><input type="checkbox" name="devbar-autohide" checked> Hide when not used</label>`, true)}
     </ul></nav>
-  </details>`;
+  </div>`;
 }
 
 const INTERNAL = /^__/;

package/src/runtime/engine.ts

@@ -198,6 +198,12 @@ export async function validate(ctx: PageContext) {
     const example = mask ? formatNumber('1234.5', mask, ctx.locale.numbers) : undefined;
     fail(i.name, example && !example.startsWith('#') ? ctx.locale.t('error.number_format', { label, example }) : ctx.locale.t('error.not_number', { label }));
   }
+  // (sprint 76) a date item holds a date (one in the application's date format was read back on submit)
+  for (const i of deleting ? [] : ctx.page.items) {
+    const v = state[i.name];
+    if (i.type !== 'date' || !v || !vis.editable.has(i.name) || errors.items[i.name] || /^\d{4}-\d{2}-\d{2}$/.test(v)) continue;
+    fail(i.name, ctx.locale.t('error.not_date', { label: i.label ?? i.name }));
+  }
   for (const i of deleting ? [] : ctx.page.items) {
     const v = state[i.name];
     if (i.type !== 'location' || !v || !vis.editable.has(i.name) || errors.items[i.name]) continue;
@@ -271,7 +277,7 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
       if (op === 'update' || v !== null) assignments.push([ident(i.source_column!), literal(v)]);
       continue;
     }
-    const conf = (i.config ?? {}) as { filename_column?: string; mime_column?: string; size_column?: string };
+    const conf = (i.config ?? {}) as { filename_column?: string; mime_column?: string; size_column?: string; updated_column?: string };
     const store = storeOf(i);
     if (store && (isTempId(v) || (v === REMOVE && op === 'update'))) {
       if (op === 'update') replaced.push([store, (await storedKey(i))!]);
@@ -282,8 +288,9 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
         if (conf.filename_column) assignments.push([ident(conf.filename_column), literal(f.filename)]);
         if (conf.mime_column) assignments.push([ident(conf.mime_column), literal(f.mime)]);
         if (conf.size_column) assignments.push([ident(conf.size_column), literal(String(f.size))]);
+        if (conf.updated_column) assignments.push([ident(conf.updated_column), 'now()']);
       } else {
-        for (const col of [i.source_column!, conf.filename_column, conf.mime_column, conf.size_column]) if (col) assignments.push([ident(col), 'null']);
+        for (const col of [i.source_column!, conf.filename_column, conf.mime_column, conf.size_column, conf.updated_column]) if (col) assignments.push([ident(col), 'null']);
       }
       continue;
     }
@@ -293,10 +300,12 @@ async function formDml(ctx: PageContext, p: Process): Promise<string | null> {
       assignments.push([ident(i.source_column!), file('content')]);
       if (conf.filename_column) assignments.push([ident(conf.filename_column), file('filename')]);
       if (conf.mime_column) assignments.push([ident(conf.mime_column), file('mime_type')]);
+      // (097) the size and the time of the change, when the table keeps them
+      if (conf.size_column) assignments.push([ident(conf.size_column), file('size')]);
+      if (conf.updated_column) assignments.push([ident(conf.updated_column), 'now()']);
     } else if (v === REMOVE && op === 'update') {
       assignments.push([ident(i.source_column!), 'null']);
-      if (conf.filename_column) assignments.push([ident(conf.filename_column), 'null']);
-      if (conf.mime_column) assignments.push([ident(conf.mime_column), 'null']);
+      for (const col of [conf.filename_column, conf.mime_column, conf.size_column, conf.updated_column]) if (col) assignments.push([ident(col), 'null']);
     }
   }
   // saved into the row: the temporary files are no longer needed, replaced objects go after the commit

package/src/runtime/format.ts

@@ -74,6 +74,58 @@ export function applyMask(value: string, mask: string, lang: string) {
   });
 }
 
+/** (sprint 76) The month names of a language (long and short), for the date picker. */
+export function monthNames(lang: string) {
+  const n = localeNames(lang);
+  return { long: n.months, short: n.monthsShort };
+}
+
+/**
+ * (sprint 76) Read a date typed in a date mask back as "YYYY-MM-DD": YYYY, YY (2000–2099), MM, DD, MON and
+ * MONTH (the language's names, any case), DY and DAY (names, not checked), quoted text and other characters as
+ * they are. An ISO date is read too. Null when the text doesn't fit the mask or isn't a real date.
+ */
+export function parseDateMask(value: string, mask: string, lang: string): string | null {
+  const v = value.trim();
+  const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+  const n = localeNames(lang);
+  let y: number | undefined, mo: number | undefined, d: number | undefined;
+  if (iso) [y, mo, d] = iso.slice(1).map(Number);
+  else {
+    const parts: string[] = [];
+    const groups: string[] = [];
+    let last = 0;
+    const esc = (x: string) => x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    for (const m of mask.matchAll(TOKEN)) {
+      parts.push(esc(mask.slice(last, m.index)));
+      last = m.index! + m[0].length;
+      const tok = m[0];
+      if (tok.startsWith('"')) { parts.push(esc(tok.slice(1, -1))); continue; }
+      const up = tok.toUpperCase();
+      const names = (list: string[]) => `(${list.map(esc).join('|')})`;
+      const re: Record<string, string> = { YYYY: '(\\d{4})', YY: '(\\d{2})', MM: '(\\d{1,2})', DD: '(\\d{1,2})', MONTH: names(n.months), MON: names(n.monthsShort), DAY: names(n.days), DY: names(n.daysShort) };
+      if (!re[up]) return null; // a time in a date mask: not a date item's
+      parts.push(re[up]);
+      groups.push(up);
+    }
+    parts.push(esc(mask.slice(last)));
+    const m = new RegExp(`^${parts.join('')}$`, 'i').exec(v);
+    if (!m) return null;
+    groups.forEach((g, i) => {
+      const x = m[i + 1];
+      if (g === 'YYYY') y = Number(x);
+      else if (g === 'YY') y = 2000 + Number(x);
+      else if (g === 'MM') mo = Number(x);
+      else if (g === 'DD') d = Number(x);
+      else if (g === 'MONTH' || g === 'MON') mo = (g === 'MONTH' ? n.months : n.monthsShort).findIndex((name) => name.toLowerCase() === x.toLowerCase()) + 1;
+    });
+  }
+  if (!y || !mo || !d) return null;
+  const date = new Date(Date.UTC(y, mo - 1, d));
+  if (date.getUTCFullYear() !== y || date.getUTCMonth() !== mo - 1 || date.getUTCDate() !== d) return null;
+  return `${String(y).padStart(4, '0')}-${pad(mo)}-${pad(d)}`;
+}
+
 /** A formatter for dates and timestamps with the given masks (null: ISO, as sent by Postgres). */
 export function dateFormatter(lang: string, dateMask: string | null, timestampMask: string | null): Formatter {
   return (v, oid) => {

package/src/runtime/items.ts

@@ -12,6 +12,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';
 
 const TRUTHY = new Set(['true', 't', 'on', '1', 'yes', 'y']);
 export const isTruthy = (v: string | null | undefined) => !!v && TRUTHY.has(v.toLowerCase());
@@ -180,6 +181,17 @@ export const splitRange = (v: string | null | undefined): [string, string] => {
   return [from, to];
 };
 
+/**
+ * (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).
+ */
+export function itemDateMask(ctx: PageContext, item: Item): string | null {
+  if (item.type !== 'date') 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;
+}
+
 /** A number or display item's number format mask ({"format_mask": "999G990D00"}), when it is a valid one. */
 export function itemMask(item: Item): string | null {
   if (item.type !== 'number' && item.type !== 'display') return null;
@@ -383,6 +395,21 @@ 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>`;
+        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/locale.ts

@@ -26,11 +26,13 @@ export interface Locale {
   languages: string[];
   theme: ThemeMode;
   /** the app's base style when not Standard (html data-style) */
-  style?: 'iris';
+  style?: 'iris' | 'lavender';
   /** whether users may pick light/dark themselves */
   themeChoice: boolean;
   /** dates and timestamps for display (undefined: not a date) */
   format: Formatter;
+  /** (sprint 76) the application's own date format (or its FORMAT.DATE text message): date items show it with a picker; null: the browser's date field */
+  dateMask: string | null;
   number: Intl.NumberFormat;
   /** separators and currency for number format masks */
   numbers: NumberSymbols;
@@ -199,9 +201,10 @@ export async function resolveLocale(req: FastifyRequest, app: App, session?: Ses
     messages,
     languages,
     theme: themeFor(app, session, req),
-    style: baseStyleOf(app.theme) === 'iris' ? 'iris' : undefined,
+    style: baseStyleOf(app.theme) === 'standard' ? undefined : (baseStyleOf(app.theme) as 'iris' | 'lavender'),
     themeChoice: app.theme?.user_choice !== false,
     format,
+    dateMask: messages['FORMAT.DATE'] ?? app.date_format ?? null,
     number,
     numbers,
     masked: (m) => maskedFormatter(format, lang, numbers, m),

package/src/runtime/regions.ts

@@ -100,9 +100,9 @@ export async function renderButton(ctx: PageContext, b: Button) {
   return html`<button type="submit" class="${cls}" name="__request" value="${b.name}" data-button="${b.name}"${confirm}>${b.label}${badge}</button>`;
 }
 
-export async function buttonsFor(ctx: PageContext, regionId: number | null) {
+export async function buttonsFor(ctx: PageContext, regionId: number | null, only: (b: Button) => boolean = () => true) {
   const out = [];
-  for (const b of ctx.vis!.buttons.values()) if (b.region_id === regionId && b.id > 0) out.push(await renderButton(ctx, b));
+  for (const b of ctx.vis!.buttons.values()) if (b.region_id === regionId && b.id > 0 && only(b)) out.push(await renderButton(ctx, b));
   return out.some(Boolean) ? html`<div class="buttons">${out}</div>` : '';
 }
 
@@ -140,8 +140,15 @@ async function renderChart(ctx: PageContext, r: Region) {
   }
   if (!res.rows.length) return html`<p class="empty">${r.config.empty ?? ctx.locale.t('report.no_data')}</p>`;
   const kind = CHART_KINDS.includes(r.config.kind) ? r.config.kind : 'bar';
-  return html`${renderChartBody(kind, r.title ?? '', res.rows, res.fields, ctx.css, ctx.locale.lang, ctx.locale.t, {
-    ...(await chartLink(ctx, r, res.rows, res.fields)),
+  const rows = topRows(r, kind, res.rows, ctx.locale.t('chart.other'));
+  const drill: { hidden?: string[]; link?: (i: number, si: number | null) => Raw | null } = await chartLink(ctx, r, rows, res.fields);
+  // the "Other" row of a top-N chart has no drill-down
+  if (drill.link && rows !== res.rows) {
+    const inner = drill.link;
+    drill.link = (i, si) => (i === rows.length - 1 ? null : inner(i, si));
+  }
+  return html`${renderChartBody(kind, r.title ?? '', rows, res.fields, ctx.css, ctx.locale.lang, ctx.locale.t, {
+    ...drill,
     gauge: gaugeConfig(r.config.gauge),
     ...chartFormat(ctx, r),
     // the query's timestamps are in the session's time zone: so is "today"
@@ -151,6 +158,22 @@ async function renderChart(ctx: PageContext, r: Region) {
   })}${firstRows(ctx, res)}`;
 }
 
+/** Charts that may show the top rows and an "Other" row (bar, pie, donut, funnel, column). */
+const TOP_KINDS = new Set(['bar', 'column', 'donut', 'pie', 'funnel']);
+
+/**
+ * (097) {"top": 10}: the first top-1 rows and one "Other" row with the sums of
+ * the rest (the query orders the rows, largest first). Other charts, and
+ * charts with no more rows than that, keep their rows.
+ */
+export function topRows(r: Region, kind: string, rows: unknown[][], other: string): unknown[][] {
+  const top = Number(r.config.top);
+  if (!Number.isInteger(top) || top < 2 || top > 100 || !TOP_KINDS.has(kind) || rows.length <= top) return rows;
+  const rest = rows.slice(top - 1);
+  const sums = (rows[0] ?? []).map((_, ci) => (ci === 0 ? other : rest.reduce((n: number, row) => n + (Number(row[ci]) || 0), 0)));
+  return [...rows.slice(0, top - 1), sums];
+}
+
 /** {"format_mask": "FML999G990"}: the chart's values (labels, tips, data table) with a number format mask. */
 function chartFormat(ctx: PageContext, r: Region): { format?: (v: number) => string } {
   const mask = typeof r.config.format_mask === 'string' ? r.config.format_mask.trim() : '';
@@ -385,7 +408,13 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
   return body!;
 }
 
+/** (099) Button positions in a region: its top bar, the bottom bar's left end, the bottom bar's right end. */
+const TOP_SLOTS = new Set(['create', 'edit', 'change', 'copy', 'help', 'up']);
+const LEFT_SLOTS = new Set(['previous', 'close', 'delete']);
+
 async function regionShell(ctx: PageContext, r: Region, hidden: Set<string>, body: Raw) {
+  const slotted = [...ctx.vis!.buttons.values()].some((b) => b.region_id === r.id && b.slot && b.slot !== 'region');
+  if (slotted && (r.template === 'standard' || r.template === 'collapsible' || r.template === 'plain')) return slottedShell(ctx, r, hidden, body);
   const buttons = await buttonsFor(ctx, r.id);
   const buttonsOnTop = r.type !== 'form' && r.type !== 'static';
   // (a grid renders its own Save button in its toolbar)
@@ -446,3 +475,31 @@ async function regionShell(ctx: PageContext, r: Region, hidden: Set<string>, bod
   </section>`;
 }
 
+/**
+ * (099) A region whose buttons have positions (APEX: Button Position): create, edit, change, copy, help and up in
+ * the header; previous, close and delete at the left end of the bottom bar, next at its right end; the others
+ * where they always go (the header for reports and charts, the bottom bar for forms and static content).
+ */
+async function slottedShell(ctx: PageContext, r: Region, hidden: Set<string>, body: Raw) {
+  const onTop = r.type !== 'form' && r.type !== 'static';
+  const plain = (b: Button) => !b.slot || b.slot === 'region';
+  const top = await buttonsFor(ctx, r.id, (b) => TOP_SLOTS.has(b.slot ?? '') || (onTop && plain(b)));
+  const left = await buttonsFor(ctx, r.id, (b) => LEFT_SLOTS.has(b.slot ?? ''));
+  const right = await buttonsFor(ctx, r.id, (b) => b.slot === 'next' || (!onTop && plain(b)));
+  const cls = `region region-${r.type} region-${r.template} col-${r.columns}${templateClasses('region', r.template_options)}`;
+  const hiddenAttr = hidden.has(`R${r.id}`) ? raw(' hidden') : '';
+  const staticAttr = r.static_id ? raw(` data-static-id="${esc(r.static_id)}"`) : '';
+  const titleId = `R${r.id}_title`;
+  const footer = left || right ? html`<footer class="region-footer region-footer-split"><div class="region-footer-start">${left}</div><div class="region-footer-end">${right}</div></footer>` : '';
+  if (r.template === 'plain')
+    return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-label="${r.title}">
+      ${top ? html`<div class="region-toolbar">${top}</div>` : ''}${body}${footer}</section>`;
+  const header = html`<h2 id="${titleId}">${r.title}</h2>${top}`;
+  if (r.template === 'collapsible')
+    return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr} aria-labelledby="${titleId}">
+      <details open><summary class="region-header">${header}</summary><div class="region-body">${body}</div>${footer}</details></section>`;
+  return html`<section class="${cls}" id="R${r.id}"${staticAttr}${hiddenAttr}${r.title ? raw(` aria-labelledby="${titleId}"`) : ''}>
+    ${r.title || top ? html`<header class="region-header">${header}</header>` : ''}
+    <div class="region-body">${body}</div>${footer}
+  </section>`;
+}