pgkiln 0.42.0 → 0.44.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",
@@ -154,6 +169,7 @@ export const tr: Record<MessageKey, string> = {
   '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.",
@@ -374,6 +390,8 @@ export const tr: Record<MessageKey, string> = {
   'facets.stars_up': "{n} yıldız ve üzeri",
   'facets.star_up': "1 yıldız ve üzeri",
   'facets.clear_short': "Temizle",
+  'facets.show_all': "Tümünü göster ({n})",
+  'facets.total': "Toplam satır sayısı {n}",
   'smart.placeholder': "Ara veya süz…",
   'smart.active': "Kullanılan süzgeçler",
   'smart.remove': "{filter} süzgecini kaldır",

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': "Зберегти",
@@ -154,6 +169,7 @@ export const uk: Record<MessageKey, string> = {
   'pwa.status.invalid': "відхилено: відкрийте сторінку й виправте",
   'pwa.status.error': "не надіслано",
   'item.locate': "Моє розташування",
+  'item.choose_date': "Вибрати дату",
   'item.show_map': "карта",
   'item.scan': "Сканувати",
   'item.locate_error': "Розташування недоступне.",
@@ -374,6 +390,8 @@ export const uk: Record<MessageKey, string> = {
   'facets.stars_up': "{n} зірки й вище",
   'facets.star_up': "1 зірка й вище",
   'facets.clear_short': "Очистити",
+  'facets.show_all': "Показати все ({n})",
+  'facets.total': "Усього рядків {n}",
   'smart.placeholder': "Пошук або фільтр…",
   'smart.active': "Чинні фільтри",
   'smart.remove': "Видалити фільтр {filter}",

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': "保存",
@@ -154,6 +169,7 @@ export const zh: Record<MessageKey, string> = {
   'pwa.status.invalid': "被拒绝：请打开页面并更正",
   'pwa.status.error': "未发送",
   'item.locate': "使用我的位置",
+  'item.choose_date': "选择日期",
   'item.show_map': "地图",
   'item.scan': "扫描",
   'item.locate_error': "无法获取位置。",
@@ -374,6 +390,8 @@ export const zh: Record<MessageKey, string> = {
   'facets.stars_up': "{n} 星及以上",
   'facets.star_up': "1 星及以上",
   'facets.clear_short': "清除",
+  'facets.show_all': "显示全部 ({n})",
+  'facets.total': "总行数 {n}",
   'smart.placeholder': "搜索或筛选…",
   'smart.active': "正在使用的筛选器",
   'smart.remove': "删除筛选器 {filter}",

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',
@@ -181,6 +196,7 @@ const en = {
   '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.',
@@ -401,6 +417,8 @@ const en = {
   'facets.stars_up': '{n} stars and up',
   'facets.star_up': '1 star and up',
   'facets.clear_short': 'Clear',
+  'facets.show_all': 'Show all ({n})',
+  'facets.total': 'Total row count {n}',
   'smart.placeholder': 'Search or filter…',
   'smart.active': 'Filters in use',
   'smart.remove': 'Remove filter {filter}',
@@ -827,6 +845,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',
@@ -870,6 +903,7 @@ const nl: Record<MessageKey, string> = {
   '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.',
@@ -1089,6 +1123,8 @@ const nl: Record<MessageKey, string> = {
   'facets.stars_up': '{n} sterren of meer',
   'facets.star_up': '1 ster of meer',
   'facets.clear_short': 'Wissen',
+  'facets.show_all': 'Alle tonen ({n})',
+  'facets.total': 'Totaal aantal rijen {n}',
   'smart.placeholder': 'Zoeken of filteren…',
   'smart.active': 'Gebruikte filters',
   'smart.remove': 'Filter {filter} verwijderen',

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/account.ts

@@ -7,7 +7,7 @@ import { forgetAllRemembered, rememberCookie, rememberedCount } from '../remembe
 import { getSession, loginThrottled, logActivity, saveState, takeFlash } from '../session.ts';
 import { loginWindowMinutes } from '../security.ts';
 import type { PageContext } from './context.ts';
-import { databaseTimeZone, isTheme, matchLanguage, sameOffset, THEME_COOKIE, timeZoneFor, timeZoneNames, validTimeZone } from './locale.ts';
+import { databaseTimeZone, isTheme, matchLanguage, sameOffset, THEME_COOKIE, themeCookieOptions, timeZoneFor, timeZoneNames, validTimeZone } from './locale.ts';
 import { chrome, clientTexts } from './render.ts';
 import { appStyles, choosable, chosenStyleName, styleChoice } from './styles.ts';
 import { loadApp } from '../metadata.ts';
@@ -28,8 +28,8 @@ async function saveStyle(appId: number, username: string, style: string) {
   );
 }
 
-const themeCookie = (reply: FastifyReply, theme: string) =>
-  reply.setCookie(THEME_COOKIE, theme, { path: '/', sameSite: 'lax', secure: process.env.COOKIE_SECURE === 'true', maxAge: 365 * 86400 });
+// (sprint 79) per application: a choice in one application doesn't change another's mode
+const themeCookie = (reply: FastifyReply, theme: string, base: string) => reply.setCookie(THEME_COOKIE, theme, themeCookieOptions(base));
 
 /** My account → Time zone: automatic (the browser's) or one of PostgreSQL's time zones. */
 async function timeZoneField(ctx: PageContext) {
@@ -160,7 +160,7 @@ export async function accountRoutes(app: FastifyInstance) {
     }
     if (theme) {
       ctx.session.state.__THEME = theme;
-      themeCookie(reply, theme);
+      themeCookie(reply, theme, ctx.base);
     }
     if (language) ctx.session.state.__LANG = language;
     // a style variant: only one of the app's own styles ('' = the base colours)
@@ -263,7 +263,7 @@ export async function accountRoutes(app: FastifyInstance) {
     const to = safeNext(a, b.next);
     if (b.__csrf !== session.csrf_token || a.theme?.user_choice === false || !isTheme(b.theme)) return reply.redirect(to, 303);
     session.state.__THEME = b.theme;
-    themeCookie(reply, b.theme);
+    themeCookie(reply, b.theme, `/a/${a.alias}`);
     if (session.username) {
       await runtime.query('update meta.account set theme_pref = $2 where lower(username) = lower($1)', [session.username, b.theme]);
     }

package/src/runtime/devbar.ts

@@ -86,26 +86,28 @@ export function devbarHtml(ctx: PageContext): Raw | '' {
   const level = sessionDebugLevel(ctx.session);
   const appLevel = Number(ctx.app.debug_level ?? 0);
   const page = ctx.page.page_no;
-  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>
+  // (sprint 79, UI-4; APEX: App 77536, Page 8, Debug ⏻) each tool with a short text; "Icons only" in Settings
+  const text = (s: string) => html`<span class="devbar-text" aria-hidden="true">${s}</span>`;
+  const tool = (href: string, label: string, name: string, short: string) =>
+    html`<li><a class="devbar-tool" href="${href}" title="${label}" aria-label="${label}">${icon(name)}${text(short)}</a></li>`;
+  const menu = (label: string, name: string, cls: string, body: Raw, hidden = false, short = label) =>
+    html`<li${hidden ? raw(' hidden') : ''}><details class="devbar-menu ${cls}"><summary class="devbar-tool" title="${label}" aria-label="${label}">${icon(name)}${text(short)}</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">
+      ${tool(BUILDER, 'App Builder', 'home', 'Home')}
+      ${tool(`${BUILDER}/apps/${ctx.app.id}`, `Application ${ctx.app.id}`, 'grid', `App ${ctx.app.id}`)}
+      ${tool(`${BUILDER}/pages/${ctx.page.id}`, `Edit page ${page}`, 'edit', `Page ${page}`)}
+      ${tool(`${ctx.base}/${page}/devbar/session`, 'Session', 'database', 'Session')}
+      ${menu(`Debug: ${level || appLevel ? 'on' : 'off'}`, '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 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>${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')}
+      </form>${level || appLevel ? html`<a href="${BUILDER}/apps/${ctx.app.id}/debug">View debug</a>` : ''}`, false, `Debug ${level || appLevel ? 'on' : 'off'}`)}
+      <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')}${text('Quick edit')}</button></li>
+      ${tool(`${BUILDER}/apps/${ctx.app.id}/theme`, 'Customize (Theme Roller)', 'sliders', 'Customize')}
       ${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>
@@ -115,7 +117,8 @@ export function devbarHtml(ctx: PageContext): Raw | '' {
       ${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)}
+      <label class="devbar-autohide"><input type="checkbox" name="devbar-autohide" checked> Hide when not used</label>
+      <label class="devbar-autohide"><input type="checkbox" name="devbar-compact"> Icons only</label>`, true)}
     </ul></nav>
   </div>`;
 }

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;

package/src/runtime/facets.ts

@@ -99,6 +99,20 @@ export async function rangeCounts(ctx: PageContext, fs: FacetSource, f: FacetDef
   return res.rows[0] as number[];
 }
 
+/** (sprint 78) Checkbox facet values shown before "Show all" (APEX shows seven). */
+export const FACET_SHOWN = 7;
+
+/** (sprint 78) The rows the report shows: the search and every facet's filter. */
+export async function totalRows(ctx: PageContext, fs: FacetSource): Promise<number> {
+  const p = new SqlParams();
+  const where = othersWhere(ctx, fs, '', p);
+  const c = ctx.client!;
+  const res = await savepoint(c, () =>
+    c.query<{ n: number }>({ text: `select count(*)::int as n from (\n${fs.src}\n) "__q"${where.length ? ` where ${where.join(' and ')}` : ''}`, values: queryValues(p.values) }),
+  );
+  return res.rows[0].n;
+}
+
 export const facetLabel = (ctx: PageContext, f: FacetDef) => f.label ?? ctx.locale.tr(heading(f.column));
 
 /** A star rating drawn with stars, read as "4 stars and up". */
@@ -156,15 +170,24 @@ export async function renderFacets(ctx: PageContext, r: Region): Promise<Raw> {
       // keep selected values visible even when their count dropped to 0
       for (const s of selected) if (s && !values.some((x) => x.v === s)) values.push({ v: s, n: 0 });
       const excluded = f.exclude && ctx.params.get(k.exclude + f.column) === '1';
+      // (sprint 78) a boolean's values as Yes and No, not true and false
+      const bool = fs.cols.get(f.column) === 16;
+      const shown = (v: string) => (bool && (v === 'true' || v === 'false') ? t(v === 'true' ? 'item.yes' : 'item.no') : (toState(v) ?? ''));
       const chart = facetChart(ctx, report, f, label, values.map((x) => ({
-        label: toState(x.v) ?? '', n: x.n,
+        label: shown(x.v), n: x.n,
         apply: (p) => { p.delete(k.values + f.column); p.delete(k.exclude + f.column); p.append(k.values + f.column, x.v); },
       })));
+      const value = (x: { v: string; n: number }) =>
+        html`<label class="check facet-value"><input type="checkbox" form="${formId}" name="${k.values}${f.column}" value="${x.v}"${selected.has(x.v) ? raw(' checked') : ''} data-facet>
+            <span class="facet-label">${shown(x.v)}</span><span class="facet-count">${x.n}</span></label>`;
       groups.push(html`<fieldset class="facet${excluded ? ' facet-excluded' : ''}">
         <legend>${label}${clearLink(f)}</legend>
         ${chart}
-        ${values.map((x) => html`<label class="check facet-value"><input type="checkbox" form="${formId}" name="${k.values}${f.column}" value="${x.v}"${selected.has(x.v) ? raw(' checked') : ''} data-facet>
-            <span class="facet-label">${toState(x.v)}</span><span class="facet-count">${x.n}</span></label>`)}
+        ${values.slice(0, FACET_SHOWN).map(value)}
+        ${values.length > FACET_SHOWN
+          ? html`<details class="facet-more"${values.slice(FACET_SHOWN).some((x) => selected.has(x.v)) ? raw(' open') : ''}><summary>${t('facets.show_all', { n: String(values.length) })}</summary>
+            ${values.slice(FACET_SHOWN).map(value)}</details>`
+          : ''}
         ${f.exclude
           ? html`<label class="check facet-exclude"><input type="checkbox" form="${formId}" name="${k.exclude}${f.column}" value="1"${excluded ? raw(' checked') : ''} data-facet> ${t('facets.exclude')}</label>`
           : ''}
@@ -225,7 +248,15 @@ export async function renderFacets(ctx: PageContext, r: Region): Promise<Raw> {
     html`<form id="${formId}" method="get" action="${ctx.base}/${ctx.page.page_no}">${keep.map(([name, v]) => html`<input type="hidden" name="${name}" value="${v}">`)}</form>`,
   );
   const any = defs.some((f) => active.has(f.column)) || (r.config.search === true && fs.search !== '');
+  // (sprint 78; APEX: the results' "Total Row Count") the rows the filters leave
+  let total: number | null = null;
+  try {
+    total = await totalRows(ctx, fs);
+  } catch {
+    total = null; // the facets' own errors are shown above
+  }
   return html`<div class="facets">
+    ${total !== null ? html`<p class="facet-total" role="status">${t('facets.total', { n: total.toLocaleString(ctx.locale.lang) })}</p>` : ''}
     ${groups}
     <div class="buttons facet-actions">
       <button class="btn btn-hot" form="${formId}">${t('report.apply')}</button>

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

@@ -31,6 +31,8 @@ export interface Locale {
   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;
@@ -42,7 +44,10 @@ export interface Locale {
   timeZoneFrom: 'user' | 'browser' | 'app' | 'database';
 }
 
-export const THEME_COOKIE = 'pgkiln_theme';
+/** (sprint 79) The light/dark choice of a user who is not signed in, per application (path /a/<alias>). */
+export const THEME_COOKIE = 'pgkiln_mode';
+/** The cookie's options: the application's path, a year. */
+export const themeCookieOptions = (base: string) => ({ path: base, sameSite: 'lax' as const, secure: process.env.COOKIE_SECURE === 'true', maxAge: 365 * 86400 });
 const THEMES: ThemeMode[] = ['auto', 'light', 'dark'];
 export const isTheme = (v: unknown): v is ThemeMode => THEMES.includes(v as ThemeMode);
 
@@ -202,6 +207,7 @@ export async function resolveLocale(req: FastifyRequest, app: App, session?: Ses
     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>` : '';
 }
 
@@ -408,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)
@@ -469,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>`;
+}