pgkiln 0.31.0 → 0.35.0

package/public/app.js

@@ -140,6 +140,68 @@ const pgkilnPush = (() => {
   return { supported, subscribe, unsubscribe, isOn, t };
 })();
 
+// Warn on unsaved changes (migration 077): a page form with data-warn-unsaved asks
+// before the user leaves the page (a link, a redirect button, another form, closing
+// or reloading the tab, closing a dialog) while one of its items differs from the
+// value the server rendered. Submitting the page doesn't ask. Items inside an
+// element with data-no-warn, and the interactive grid (it has its own check), are
+// left out. data-warn-unsaved="changed": the page came back from a failed submit,
+// so its values are not saved yet.
+const pgkilnUnsaved = (() => {
+  const form = document.querySelector('form.page-form[data-warn-unsaved]');
+  const metaEl = document.getElementById('pgkiln-meta');
+  const meta = (metaEl ? JSON.parse(metaEl.textContent) : null) || {};
+  const text = (meta.texts && meta.texts['page.unsaved_changes']) || 'You have unsaved changes. Leave this page anyway?';
+  let leaving = false;
+  const tracked = (el) =>
+    el.name && !el.name.startsWith('__') && (el.type !== 'hidden' || 'initial' in el.dataset) && el.type !== 'submit' && el.type !== 'button' && !el.disabled &&
+    !el.closest('[data-no-warn], [data-grid], .grid-template');
+  function differs(el) {
+    if (el.type === 'hidden') return el.value !== el.dataset.initial;
+    if (el.type === 'checkbox' || el.type === 'radio') return el.checked !== el.defaultChecked;
+    if (el.type === 'file') return !!(el.files && el.files.length);
+    if (el.tagName === 'SELECT') {
+      const opts = [...el.options];
+      if (el.multiple) return opts.some((o) => o.selected !== o.defaultSelected);
+      const def = opts.findIndex((o) => o.defaultSelected);
+      return el.selectedIndex !== (def >= 0 ? def : el.size > 1 ? -1 : 0);
+    }
+    return 'defaultValue' in el && el.value !== el.defaultValue;
+  }
+  const changed = () => !!form && (form.dataset.warnUnsaved === 'changed' || [...form.elements].some((el) => tracked(el) && differs(el)));
+  /** True when the user may leave: nothing changed, or they said so. */
+  function mayLeave() {
+    if (leaving || !changed()) return true;
+    if (!window.confirm(text)) return false;
+    leaving = true;
+    return true;
+  }
+  if (form) {
+    document.addEventListener('click', (e) => {
+      const a = e.target.closest?.('a[href]');
+      if (!a || e.defaultPrevented || e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;
+      const href = a.getAttribute('href') || '';
+      // a dialog, a new tab, a download or a place on this page doesn't leave it
+      if (href.startsWith('#') || /^javascript:/i.test(href) || a.hasAttribute('download') || a.target === '_blank' || a.hasAttribute('data-dialog') || a.hasAttribute('data-dialog-cancel')) return;
+      if (!mayLeave()) e.preventDefault();
+    });
+    // submitting the page saves; another form (a menu, a switch) leaves it
+    document.addEventListener('submit', (e) => {
+      if (e.target === form) leaving = true;
+      else if (!e.defaultPrevented && (e.target.method || '').toLowerCase() === 'post' && !mayLeave()) e.preventDefault();
+    }, true);
+    window.addEventListener('beforeunload', (e) => {
+      if (leaving || !changed()) return;
+      e.preventDefault();
+      e.returnValue = '';
+    });
+    // a navigation that was answered "leave" and then cancelled (download, same page) arms the check again
+    window.addEventListener('pageshow', () => (leaving = false));
+  }
+  return { changed, mayLeave, text };
+})();
+
+
 (() => {
   const body = document.body;
   const base = body.dataset.base;
@@ -383,6 +445,26 @@ const pgkilnPush = (() => {
       },
     }),
     getValue: (name) => itemValue(name),
+    // (085) raise a custom event: dynamic actions with event "custom" and this name run
+    trigger: (name, value) => runChain(das.filter((da) => da.event === 'custom' && da.trigger.some((t) => String(t).toLowerCase() === String(name).toLowerCase())), value),
+    // (085) APEX: apex.server.process. An Ajax callback (a process with point "ajax") by name: posts the items given
+    // (a list of names, or {name: value}) and x01 … x10; answers { data, rows, items } and sets the items it changed.
+    server: Object.freeze({
+      async process(name, opts = {}) {
+        const data = {};
+        if (Array.isArray(opts.items)) for (const n of opts.items) data[n] = itemValue(n);
+        else if (opts.items && typeof opts.items === 'object') Object.assign(data, opts.items);
+        for (let i = 1; i <= 10; i++) {
+          const k = `x${String(i).padStart(2, '0')}`;
+          if (opts[k] !== undefined && opts[k] !== null) data[k] = String(opts[k]);
+        }
+        const res = await post(`/ajax/${encodeURIComponent(name)}`, data);
+        for (const [n, v] of Object.entries(res.items || {})) setItemValue(n, v);
+        return res;
+      },
+    }),
+    // (077) APEX: apex.page.isChanged()
+    isChanged: () => pgkilnUnsaved.changed(),
     setValue: (name, value) => setItemValue(name, value),
     showSuccess: (message) => showMessage(String(message), 'success'),
     showError: (message, item) => (item ? itemError(item, String(message)) : showMessage(String(message), 'error')),
@@ -390,6 +472,38 @@ const pgkilnPush = (() => {
     page: pageNo,
   });
 
+  /** (085) what runDa returns to stop the actions after it (a declined confirm) */
+  const STOP = Symbol('stop');
+  const text = (k) => (meta.texts && meta.texts[k]) || k;
+
+  /** The actions of one event and trigger, one after the other in sequence order; false when one stopped them. */
+  async function runChain(list, value, extra) {
+    for (const da of list) if ((await runDa(da, false, value, extra)) === STOP) return false;
+    return true;
+  }
+
+  /** (085) The download dynamic action: the file of the download process it names, saved by the browser. */
+  async function download(da) {
+    const params = new URLSearchParams();
+    for (const n of da.submit) params.set(n, itemValue(n));
+    params.set('__csrf', meta.csrf);
+    try {
+      const res = await fetch(`${base}/${pageNo}/da/${da.id}/download`, { method: 'POST', body: params, credentials: 'same-origin' });
+      if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || res.statusText);
+      const name = /filename\*?=(?:UTF-8'')?"?([^";]+)"?/i.exec(res.headers.get('content-disposition') || '')?.[1];
+      const url = URL.createObjectURL(await res.blob());
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = name ? decodeURIComponent(name) : 'download';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 60000);
+    } catch (e) {
+      showError(e.message);
+    }
+  }
+
   async function runDa(da, initial, value, extra) {
     const holds = conditionHolds(da, value);
     switch (da.action) {
@@ -411,6 +525,54 @@ const pgkilnPush = (() => {
       case 'alert':
         window.alert(da.message || '');
         return;
+      // (085) a question: No stops the actions after it (and a page submit for before_submit)
+      case 'confirm':
+        return window.confirm(da.message || '') ? undefined : STOP;
+      case 'close_dialog':
+      case 'cancel_dialog':
+        if (window.parent !== window) window.parent.postMessage({ type: 'pgkiln:close', reload: da.action === 'close_dialog', page: body.dataset.dialogPage || String(pageNo) }, location.origin);
+        return;
+      case 'clear':
+        for (const n of da.items) setItemValue(n, '');
+        return;
+      case 'open_region':
+      case 'close_region':
+        for (const el of targets(da)) {
+          const details = el.querySelector(':scope > details');
+          if (details) details.open = da.action === 'open_region';
+          else el.hidden = da.action === 'close_region';
+        }
+        return;
+      case 'print':
+        window.print();
+        return;
+      case 'current_position':
+        return new Promise((resolve) => {
+          if (!navigator.geolocation) return showError(text('item.locate_error')), resolve();
+          navigator.geolocation.getCurrentPosition(
+            (pos) => {
+              if (da.items[0]) setItemValue(da.items[0], `${pos.coords.latitude.toFixed(5)},${pos.coords.longitude.toFixed(5)}`);
+              resolve();
+            },
+            () => (showError(text('item.locate_error')), resolve()),
+            { enableHighAccuracy: true, timeout: 15000 },
+          );
+        });
+      case 'share': {
+        const data = { title: document.title, text: da.message || undefined, url: location.href };
+        try {
+          if (navigator.share) await navigator.share(data);
+          else {
+            await navigator.clipboard.writeText(location.href);
+            showMessage(text('page.link_copied'), 'success');
+          }
+        } catch {
+          // the user closed the share sheet
+        }
+        return;
+      }
+      case 'download':
+        return download(da);
       case 'set_focus':
         focusTarget(targets(da)[0]);
         return;
@@ -499,7 +661,7 @@ const pgkilnPush = (() => {
   document.addEventListener('change', (e) => {
     const name = e.target.name;
     if (!name) return;
-    for (const da of das) if (da.event === 'change' && da.trigger.includes(name)) runDa(da, false);
+    runChain(das.filter((da) => da.event === 'change' && da.trigger.includes(name)));
     cascade(name);
     if (e.target.closest('[data-submit-on-change]') && e.target.form === form && depth === 0) form.requestSubmit();
   });
@@ -511,21 +673,69 @@ const pgkilnPush = (() => {
     // (without JavaScript the button submits and the page process runs instead)
     const ai = run.some((da) => da.action === 'ai_generate');
     if (ai && btn.type === 'submit') e.preventDefault();
-    const pending = run.map((da) => runDa(da, false));
+    const pending = runChain(run);
     if (ai && btn.tagName === 'BUTTON') {
       // one request at a time: the button waits for the answer
       btn.disabled = true;
       btn.setAttribute('aria-busy', 'true');
-      Promise.allSettled(pending).then(() => {
+      Promise.allSettled([pending]).then(() => {
         btn.disabled = false;
         btn.removeAttribute('aria-busy');
       });
     }
   });
-  for (const da of das) {
-    if (da.event !== 'dialog_closed' && ['show', 'hide', 'enable', 'disable'].includes(da.action)) runDa(da, true);
-    if (da.event === 'load') runDa(da, false);
-  }
+  for (const da of das) if (da.event !== 'dialog_closed' && ['show', 'hide', 'enable', 'disable'].includes(da.action)) runDa(da, true);
+  runChain(das.filter((da) => da.event === 'load'));
+
+  // (085) more events. Item events: focus, blur, key_release (trigger: item names).
+  const itemEvent = (event) => (e) => {
+    const name = e.target && e.target.name;
+    if (!name) return;
+    const run = das.filter((da) => da.event === event && da.trigger.includes(name));
+    if (run.length) runChain(run);
+  };
+  document.addEventListener('focusin', itemEvent('focus'));
+  document.addEventListener('focusout', itemEvent('blur'));
+  document.addEventListener('keyup', itemEvent('key_release'));
+  // region events (trigger: region ids or static ids, case-insensitive)
+  const regionRun = (event, region) => {
+    if (!region || !/^R\d+$/.test(region.id || '')) return [];
+    const keys = [region.id.slice(1), (region.dataset.staticId || '').toLowerCase()].filter(Boolean);
+    return das.filter((da) => da.event === event && da.trigger.some((t) => keys.includes(String(t).toLowerCase())));
+  };
+  // after_refresh: a region replaced by a refresh, a lazy load or a master row
+  document.addEventListener('pgkiln:replaced', (e) => {
+    const run = regionRun('after_refresh', e.detail);
+    if (run.length) runChain(run);
+  });
+  // selection_change: the row checkboxes of a report (and a grid's selected master row, see selectMaster)
+  const selectionChanged = (region) => {
+    const run = regionRun('selection_change', region);
+    if (!run.length) return;
+    const boxes = region.querySelectorAll('td.row-select input[type=checkbox]:checked');
+    runChain(run, [...boxes].map((b) => b.value).join(':'));
+  };
+  document.addEventListener('change', (e) => {
+    if (e.target.closest?.('.row-select')) selectionChanged(e.target.closest('section[id^="R"]'));
+  });
+  document.addEventListener('pgkiln:selection', (e) => selectionChanged(e.detail));
+  // before_submit: the page's form; a declined confirm keeps the page
+  let submitting = false;
+  document.addEventListener('submit', async (e) => {
+    if (e.target !== form || submitting) return;
+    const run = das.filter((da) => da.event === 'before_submit');
+    if (!run.length) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const submitter = e.submitter;
+    if (!(await runChain(run))) return;
+    submitting = true;
+    try {
+      form.requestSubmit(submitter && submitter.form === form ? submitter : undefined);
+    } finally {
+      submitting = false;
+    }
+  }, true);
 
   // ------------------------------------------------------------ cascading lists of values
   async function cascade(parent) {
@@ -641,7 +851,19 @@ const pgkilnPush = (() => {
       dlg.setAttribute('aria-labelledby', 't-dialog-title');
       dlg.innerHTML = '<div class="t-dialog-head"><h2 id="t-dialog-title"></h2><button type="button" class="icon-button t-dialog-x" aria-label="Close">×</button></div><iframe title="Dialog"></iframe>';
       document.body.appendChild(dlg);
-      dlg.querySelector('.t-dialog-x').addEventListener('click', () => dlg.close());
+      // (077) the page in the dialog decides whether its unsaved changes may go
+      const mayClose = () => {
+        try {
+          const w = dlg.querySelector('iframe').contentWindow;
+          return !w.pgkiln?.isChanged?.() || window.confirm(pgkilnUnsaved.text);
+        } catch {
+          return true;
+        }
+      };
+      dlg.querySelector('.t-dialog-x').addEventListener('click', () => mayClose() && dlg.close());
+      dlg.addEventListener('cancel', (e) => {
+        if (!mayClose()) e.preventDefault();
+      });
       dlg.addEventListener('close', () => (dlg.querySelector('iframe').src = 'about:blank'));
     }
     const frame = dlg.querySelector('iframe');
@@ -790,7 +1012,7 @@ const pgkilnPush = (() => {
     document.addEventListener('click', (e) => {
       if (!e.target.closest('[data-dialog-cancel]')) return;
       e.preventDefault();
-      tell(false);
+      if (pgkilnUnsaved.mayLeave()) tell(false);
     });
   }
 })();
@@ -932,7 +1154,7 @@ const pgkilnPush = (() => {
       return;
     }
     const leave = e.target.closest('[data-grid-leave]');
-    if (leave && dirty && !window.confirm('You have unsaved changes in the grid. Leave anyway?')) e.preventDefault();
+    if (leave && dirty && !window.confirm(pgkilnUnsaved.text)) e.preventDefault();
   });
   document.addEventListener('input', (e) => {
     const row = e.target.closest?.('[data-grid] table.grid-table > tbody > tr');
@@ -969,7 +1191,7 @@ const pgkilnPush = (() => {
     const master = link.closest('[data-grid]');
     const ids = link.dataset.gridSelect.split(',').filter(Boolean);
     const dirtyDetail = ids.some((id) => document.querySelector(`#R${id} [data-grid] tr.dirty, #R${id} [data-grid] tbody:not(.grid-template) tr.grid-new`));
-    if (dirtyDetail && !window.confirm('You have unsaved changes in the grid. Leave anyway?')) return;
+    if (dirtyDetail && !window.confirm(pgkilnUnsaved.text)) return;
     const query = new URL(link.href, location.href).search.slice(1);
     for (const id of ids) {
       const region = document.getElementById(`R${id}`);
@@ -1003,6 +1225,8 @@ const pgkilnPush = (() => {
         return;
       }
     }
+    // (085) the dynamic actions on the master's "selection change"
+    document.dispatchEvent(new CustomEvent('pgkiln:selection', { detail: master.closest('section[id^="R"]') }));
     // mark the row, and make the page's other links and forms carry the new selection
     for (const a of master.querySelectorAll('a[data-grid-select]')) {
       const on = a === link;
@@ -1787,6 +2011,58 @@ document.addEventListener('DOMContentLoaded', () => {
     );
   });
 
+  // (086) address items: the geocoder's addresses for the text; the one chosen replaces it, its position goes into the coordinates item
+  document.addEventListener('click', async (e) => {
+    const btn = e.target.closest && e.target.closest('[data-geocode]');
+    if (!btn) return;
+    const input = document.getElementById(btn.dataset.geocode);
+    const list = document.getElementById(`${btn.dataset.geocode}_places`);
+    if (!input || !list) return;
+    const csrf = (metaEl ? JSON.parse(metaEl.textContent).csrf : '') || '';
+    btn.setAttribute('aria-busy', 'true');
+    let places = null;
+    try {
+      const res = await fetch(btn.dataset.url, { method: 'POST', body: new URLSearchParams({ q: input.value, __csrf: csrf }), headers: { accept: 'application/json' }, credentials: 'same-origin' });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) note(data.error || t('item.address_error'), 'error');
+      else places = data.places || [];
+    } catch {
+      note(t('item.address_error'), 'error');
+    }
+    btn.removeAttribute('aria-busy');
+    list.replaceChildren();
+    if (!places) return;
+    if (!places.length) {
+      list.hidden = true;
+      note(t('item.address_none'), 'error');
+      return;
+    }
+    for (const p of places) {
+      const li = document.createElement('li');
+      li.setAttribute('role', 'option');
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'link-button';
+      b.textContent = p.label;
+      b.addEventListener('click', () => {
+        input.value = p.label;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        const target = btn.dataset.coords && document.getElementById(btn.dataset.coords);
+        if (target) {
+          target.value = `${Number(p.lat).toFixed(5)},${Number(p.lon).toFixed(5)}`;
+          target.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+        list.hidden = true;
+        list.replaceChildren();
+        input.focus();
+      });
+      li.append(b);
+      list.append(li);
+    }
+    list.hidden = false;
+    list.querySelector('button').focus();
+  });
+
   // scan buttons: only where the browser reads barcodes (BarcodeDetector, e.g. Chrome on Android)
   if ('BarcodeDetector' in window && navigator.mediaDevices) {
     for (const b of document.querySelectorAll('[data-scan]')) b.hidden = false;
@@ -2908,6 +3184,8 @@ function areaFilter(map, f) {
     hidden.type = 'hidden';
     hidden.name = input.name;
     hidden.value = input.value;
+    // (077) a hidden input's value is its default too: the value to compare with for "unsaved changes"
+    hidden.dataset.initial = input.value;
     input.removeAttribute('name');
     input.value = '';
     const list = document.createElement('ul');
@@ -3036,3 +3314,122 @@ function areaFilter(map, f) {
     }
   });
 })();
+
+// Search region (migration 080): search as the user types. The field is a GET form that works
+// without JavaScript; here a pause in typing fetches the region (GET …/region/<id>) and swaps in
+// its results only, so the field keeps its focus and cursor. Answers that arrive late are dropped.
+(() => {
+  const base = document.body.dataset.base;
+  const page = document.body.dataset.page;
+  if (!base || !page) return;
+  const timers = new WeakMap();
+  const latest = new WeakMap();
+  async function search(field) {
+    const id = field.dataset.searchRegion;
+    if (!/^\d+$/.test(id || '') || !field.form) return;
+    // (the form keeps the page's own parameters, dialog=1 among them)
+    const params = new URLSearchParams(new FormData(field.form));
+    const n = (latest.get(field) || 0) + 1;
+    latest.set(field, n);
+    try {
+      const res = await fetch(`${base}/${page}/region/${id}?${params}`, { headers: { accept: 'application/json' }, credentials: 'same-origin' });
+      if (!res.ok || latest.get(field) !== n) return;
+      const json = await res.json();
+      const fresh = new DOMParser().parseFromString(json.html || '', 'text/html').getElementById(`R${id}_results`);
+      const results = document.getElementById(`R${id}_results`);
+      if (!fresh || !results) return;
+      results.replaceChildren(...[...fresh.childNodes].map((node) => document.importNode(node, true)));
+      history.replaceState(history.state, '', `${location.pathname}?${params}${location.hash}`);
+    } catch {
+      // offline or the session ended: Enter still submits the form
+    }
+  }
+  document.addEventListener('input', (e) => {
+    const field = e.target.closest?.('input[data-search-region]');
+    if (!field) return;
+    clearTimeout(timers.get(field));
+    timers.set(field, setTimeout(() => search(field), 250));
+  });
+})();
+
+// Session timeout warning (migration 085; APEX: Session timeout warning). The page knows when its
+// session ends: after the idle time since the page was loaded (or since "Stay signed in"), and at
+// the session's maximum length. A dialog warns `warn` seconds before; "Stay signed in" marks the
+// session active on the server. At the maximum length the user can only save their work.
+(() => {
+  const metaEl = document.getElementById('pgkiln-meta');
+  if (!metaEl) return;
+  const meta = JSON.parse(metaEl.textContent);
+  const s = meta.session;
+  if (!s || !s.idle || !s.warn) return;
+  const t = (k) => (meta.texts && meta.texts[k]) || k;
+  let last = Date.now();
+  let timer;
+  let dlg;
+  let shown = '';
+  let dismissed = false;
+  const end = () => Math.min(last + s.idle * 1000, s.maxEnd || Infinity);
+  const atMax = () => s.maxEnd && end() === s.maxEnd;
+  function schedule(ms) {
+    clearTimeout(timer);
+    timer = setTimeout(check, Math.max(500, Math.min(ms, 2 ** 31 - 1)));
+  }
+  function check() {
+    const left = end() - Date.now();
+    if (left <= 0) return show('ended');
+    if (left > s.warn * 1000) return schedule(left - s.warn * 1000);
+    // the idle warning counts down until it is dismissed; the maximum length is said once
+    if (atMax() ? shown !== 'max' : !dismissed) show(atMax() ? 'max' : 'idle', left);
+    schedule(Math.min(left, 30000));
+  }
+  function button(label, cls, onClick) {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = `btn ${cls}`;
+    b.textContent = label;
+    b.addEventListener('click', onClick);
+    return b;
+  }
+  function show(kind, left) {
+    if (!dlg) {
+      dlg = document.createElement('dialog');
+      dlg.className = 'session-dialog';
+      dlg.setAttribute('aria-labelledby', 'session-dialog-text');
+      dlg.innerHTML = '<p id="session-dialog-text"></p><div class="buttons"></div>';
+      document.body.appendChild(dlg);
+      // Escape dismisses the warning like the button
+      dlg.addEventListener('cancel', () => (dismissed = true));
+    }
+    if (kind === 'max' && shown === 'max' && dlg.open) return;
+    shown = kind;
+    const p = dlg.querySelector('p');
+    const buttons = dlg.querySelector('.buttons');
+    buttons.replaceChildren();
+    if (kind === 'ended') {
+      clearTimeout(timer);
+      p.textContent = t('session.ended');
+      buttons.append(button(t('login.sign_in_link'), 'btn-hot', () => (location.href = `${document.body.dataset.base}/login?next=${encodeURIComponent(location.pathname + location.search)}`)));
+    } else if (kind === 'max') {
+      p.textContent = t('session.max').replace('{time}', new Date(s.maxEnd).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+      buttons.append(button('OK', 'btn-hot', () => dlg.close()));
+    } else {
+      p.textContent = t('session.warning').replace('{minutes}', String(Math.max(1, Math.ceil(left / 60000))));
+      buttons.append(button(t('session.stay'), 'btn-hot', stay), button(t('common.dismiss'), '', () => ((dismissed = true), dlg.close())));
+    }
+    if (!dlg.open) dlg.showModal();
+  }
+  async function stay() {
+    try {
+      const res = await fetch(s.extend, { method: 'POST', body: new URLSearchParams({ __csrf: meta.csrf }), headers: { accept: 'application/json' }, credentials: 'same-origin' });
+      if (!res.ok) return show('ended');
+      last = Date.now();
+      shown = '';
+      dismissed = false;
+      dlg.close();
+      check();
+    } catch {
+      // offline: try again with the next click
+    }
+  }
+  check();
+})();

package/public/builder.css

@@ -759,3 +759,14 @@ button.is-busy { opacity: 0.7; cursor: progress; }
 .icon-choice .icon { width: 20px; height: 20px; }
 .icon-none { font-size: 18px; line-height: 20px; color: var(--muted); }
 .icon-name { font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.2; }
+
+/* Mail services: one provider's settings in groups, at a readable width */
+.mail-form-page { max-width: 960px; }
+.mail-service-form .prop-group { margin: 0 0 16px; }
+details.prop-group-more { border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; margin: 0 0 16px; }
+details.prop-group-more > summary { cursor: pointer; font-weight: 600; }
+details.prop-group-more[open] > summary { margin-bottom: 8px; }
+.provider-switch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
+.provider-switch .field { margin: 0; min-width: min(100%, 280px); }
+.mail-check-buttons { margin: 4px 0 14px; }
+.mail-check-result:not(:empty) { margin-top: 8px; }

package/public/builder.js

@@ -782,3 +782,30 @@
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
   else init();
 })();
+
+// Mail services: Test connection and Send test mail answer in place, so the form keeps what was typed
+// (the secret too). Without JavaScript the buttons post the form and the page comes back with the result.
+document.addEventListener('click', async (e) => {
+  const btn = e.target.closest?.('button[name="check"][formaction$="/mail/check"]');
+  if (!btn || !btn.form) return;
+  e.preventDefault();
+  const form = btn.form;
+  const out = form.querySelector('.mail-check-result');
+  const data = new FormData(form);
+  data.set('check', btn.value);
+  const buttons = form.querySelectorAll('button[name="check"]');
+  buttons.forEach((b) => (b.disabled = true));
+  if (out) out.textContent = btn.value === 'send' ? 'Sending…' : 'Checking…';
+  try {
+    const res = await fetch(btn.formAction, { method: 'POST', body: new URLSearchParams(data), headers: { accept: 'application/json' }, credentials: 'same-origin' });
+    const json = await res.json();
+    const div = document.createElement('div');
+    div.className = `alert ${json.ok ? 'alert-success' : 'alert-error'}`;
+    div.textContent = json.text || (json.ok ? 'OK' : 'The check failed.');
+    out?.replaceChildren(div);
+  } catch {
+    if (out) out.textContent = 'The check could not be made (the session may have ended: reload the page).';
+  } finally {
+    buttons.forEach((b) => (b.disabled = false));
+  }
+});

package/src/app.ts

@@ -23,6 +23,10 @@ import { topSqlRoutes } from './builder/top-sql.ts';
 import { diagnosticsRoutes } from './builder/diagnostics.ts';
 import { ldapRoutes } from './builder/ldap.ts';
 import { aiRoutes } from './builder/ai.ts';
+import { mailRoutes } from './builder/mail.ts';
+import { backupRoutes } from './builder/backups.ts';
+import { availabilityRoutes } from './builder/availability.ts';
+import { feedbackRoutes as builderFeedbackRoutes } from './builder/feedback.ts';
 import { documentRoutes } from './builder/documents.ts';
 import { pwaBuilderRoutes } from './builder/pwa.ts';
 import { themeRollerRoutes } from './builder/themeroller.ts';
@@ -170,6 +174,10 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(diagnosticsRoutes);
   await app.register(ldapRoutes);
   await app.register(aiRoutes);
+  await app.register(mailRoutes);
+  await app.register(backupRoutes);
+  await app.register(availabilityRoutes);
+  await app.register(builderFeedbackRoutes);
   await app.register(documentRoutes);
   await app.register(pwaBuilderRoutes);
   await app.register(themeRollerRoutes);

package/src/appfiles.ts

@@ -127,6 +127,10 @@ const CODE: Record<string, Record<string, string>> = {
   list: { query: 'sql' },
   supporting_script: { script: 'sql' },
   plugin: { install_sql: 'sql' },
+  // (080) a search configuration on a SELECT
+  search_config: { source: 'sql' },
+  // (081) an e-mail template's bodies
+  email_template: { html_body: 'html', text_body: 'txt' },
 };
 const isLong = (v: unknown): v is string => typeof v === 'string' && (v.includes('\n') || v.length > 60);
 const codeExt = (table: string, column: string, row: any) =>
@@ -180,6 +184,12 @@ const NAMED: [section: string, dir: string, table: string][] = [
   ['supporting_scripts', 'shared/supporting-objects', 'supporting_script'],
   // (069) plug-ins: install SQL in <name>.install_sql.sql
   ['plugins', 'shared/plugins', 'plugin'],
+  // (080) search configurations
+  ['search_configs', 'shared/search-configurations', 'search_config'],
+  // (081) e-mail templates
+  ['email_templates', 'shared/email-templates', 'email_template'],
+  // (086) application settings
+  ['app_settings', 'shared/app-settings', 'app_setting'],
 ];
 
 /** Components of a page: [array in the document, directory, table, key source]. */
@@ -198,6 +208,8 @@ const PAGE_PARTS: [section: string, dir: string, table: string, key: (r: any) =>
 const SINGLE: [section: string, path: string, sort: string[]][] = [
   ['group_roles', 'shared/group-roles.json', ['group_name', 'role']],
   ['text_messages', 'globalization/text-messages.json', ['name', 'language']],
+  // (086) dynamic translations (meta.lang)
+  ['dynamic_translations', 'globalization/dynamic-translations.json', ['language', 'source']],
 ];
 
 const ACTIONS_DIR = 'shared/automation-actions';

package/src/automations.ts

@@ -305,6 +305,18 @@ export function startScheduler() {
     } catch (e) {
       console.error('push notifications:', (e as Error).message);
     }
+    try {
+      // (082) a daily backup of every application that changed (src/builder/backups.ts)
+      await (await import('./builder/backups.ts')).backupTick();
+    } catch (e) {
+      console.error('backups:', (e as Error).message);
+    }
+    try {
+      // mail queued from SQL (meta.send_mail; src/mail/mail.ts), when the listener missed it, and retries
+      await (await import('./mail/mail.ts')).mailTick();
+    } catch (e) {
+      console.error('mail:', (e as Error).message);
+    }
     try {
       // AI requests queued from SQL (meta.ai_generate; src/ai/requests.ts)
       await (await import('./ai/requests.ts')).aiRequestTick();