pgkiln 0.44.0 → 0.46.0

package/public/app.js

@@ -4,6 +4,23 @@
 // inline scripts.
 document.documentElement.classList.add('js');
 
+// (sprint 86) Values a browser kept under pgkiln's old name (pgapex.*, pgapex-push:*) move to
+// pgkiln.* / pgkiln-push:* once: the navigation drawer, the builder's tabs and panes, the region
+// display selector's tab, a device's push notifications. A value already kept under the new name wins.
+for (const store of ['localStorage', 'sessionStorage']) {
+  try {
+    const s = window[store];
+    for (const k of Object.keys(s)) {
+      if (!/^pgapex[.-]/.test(k)) continue;
+      const neu = `pgkiln${k.slice(6)}`;
+      if (s.getItem(neu) === null) s.setItem(neu, s.getItem(k));
+      s.removeItem(k);
+    }
+  } catch {
+    /* storage off (private mode, a blocked cookie setting): nothing kept, nothing to move */
+  }
+}
+
 // Push notifications (migration 074): the page of an app with notifications on carries
 // the app's public key (data-push) and the user (data-push-user). Subscribing needs a
 // click (My account → Notifications, or the dynamic action push_subscribe); the
@@ -1666,6 +1683,69 @@ const pgkilnUnsaved = (() => {
       data[i].forEach((v, j) => cells[c0 + j] && setCell(cells[c0 + j], v));
     }
   });
+
+  // ------------------------------------------------------------ cell navigation and edit mode (APEX)
+  // An editable cell reads as text (app.css) until it is edited: a click in it, Enter or F2 or typing
+  // edits it. On a cell the arrow keys move to the next one; while editing, Escape goes back to the
+  // cell and Enter to the cell below. Tab moves through the cells' controls as usual.
+  const cellSel = '[data-grid] table.grid-table > tbody:not(.grid-template) > tr > td[data-col]';
+  function focusCell(td, edit) {
+    if (!td) return;
+    const el = control(td);
+    if (edit && el && !el.disabled) {
+      el.focus();
+      if (el.type !== 'checkbox' && el.tagName !== 'SELECT') el.select?.();
+      return;
+    }
+    if (!td.hasAttribute('tabindex')) td.tabIndex = -1;
+    td.focus();
+  }
+  function neighbour(td, dr, dc) {
+    const rows = rowsOf(td.closest('[data-grid]'));
+    const { r, c } = at(td);
+    return rows[r + dr] ? shownCells(rows[r + dr])[c + dc] : undefined;
+  }
+  const MOVES = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+  document.addEventListener('keydown', (e) => {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const t = e.target;
+    if (t.matches?.(cellSel)) {
+      const el = control(t);
+      if (MOVES[e.key]) {
+        e.preventDefault();
+        focusCell(neighbour(t, ...MOVES[e.key]), false);
+      } else if (el && (e.key === 'Enter' || e.key === 'F2')) {
+        e.preventDefault();
+        focusCell(t, true);
+      } else if (el?.type === 'checkbox' && e.key === ' ') {
+        e.preventDefault();
+        el.click();
+      } else if (el && e.key.length === 1) focusCell(t, true); // the key types into the control
+      return;
+    }
+    const td = t.closest?.(cellSel);
+    if (!td || !t.matches('input, select')) return;
+    if (e.key === 'Escape') focusCell(td, false);
+    else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const below = neighbour(td, 1, 0);
+      focusCell(below ?? td, !!below);
+    } else if (e.key === 'F2') focusCell(td, false);
+  });
+  // a click in a cell beside its control edits it
+  document.addEventListener('click', (e) => {
+    if (!e.shiftKey && e.target.matches?.(cellSel)) focusCell(e.target, true);
+  });
+  // an edited value shows as itself (a list's display value)
+  const syncText = (e) => {
+    const span = e.target.closest?.('td[data-col]')?.querySelector(':scope > .grid-text');
+    if (!span) return;
+    const el = e.target;
+    if (el.tagName === 'SELECT') span.textContent = el.selectedIndex > 0 ? el.options[el.selectedIndex].text : '';
+    else span.remove();
+  };
+  document.addEventListener('input', syncText);
+  document.addEventListener('change', syncText);
 })();
 
 // Faceted search: apply on change. A range facet's own from/to: typing picks
@@ -3429,23 +3509,10 @@ function areaFilter(map, f) {
     draw();
   }
 
-  // Date range: the end date can't be before the start date
-  function range(box) {
-    const [from, to] = box.querySelectorAll('input[type=date]');
-    if (!from || !to) return;
-    const limit = () => {
-      to.min = from.value;
-      from.max = to.value;
-    };
-    from.addEventListener('change', limit);
-    to.addEventListener('change', limit);
-  }
-
   function enhance(root) {
     root.querySelectorAll('[data-richtext]').forEach(richText);
     root.querySelectorAll('[data-markdown]').forEach(markdown);
     root.querySelectorAll('[data-tags]').forEach(tags);
-    root.querySelectorAll('[data-range]').forEach(range);
     root.querySelectorAll('[data-reveal]').forEach((b) => (b.hidden = false));
   }
   enhance(document);
@@ -3868,11 +3935,42 @@ document.addEventListener('change', (e) => {
   if (e.target.matches?.('select[data-go]')) e.target.form?.submit();
 });
 
-// (sprint 76) A date item in the application's date format: the calendar button opens the browser's date
-// picker on a hidden date field; the chosen date is written into the text field in the mask.
+// (sprint 76, 84; APEX: the date picker) A date field in a date mask (items.ts dateField): its calendar button
+// opens pgkiln's date picker, a month of days under the field; the chosen date is written into the text field
+// in the mask. Keys: arrows (a day, a week), Page Up/Down (a month; with Shift a year), Home/End (the week),
+// Enter or Space (choose), Escape (close).
 (() => {
+  const meta = (() => { try { return JSON.parse(document.getElementById('pgkiln-meta')?.textContent || '{}'); } catch { return {}; } })();
+  const t = (k, d) => (meta.texts && meta.texts[k]) || d;
+  const lang = document.documentElement.lang || 'en';
   const pad = (n) => String(n).padStart(2, '0');
-  const TOKEN = /"[^"]*"|YYYY|YY|MONTH|MON|MM|DD/gi;
+  const isoOf = (d) => `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}`;
+  const dateOf = (iso) => { const [y, m, d] = iso.split('-').map(Number); return new Date(Date.UTC(y, m - 1, d)); };
+  const addDays = (iso, n) => { const d = dateOf(iso); d.setUTCDate(d.getUTCDate() + n); return isoOf(d); };
+  const addMonths = (iso, n) => {
+    const d = dateOf(iso);
+    const day = d.getUTCDate();
+    d.setUTCDate(1);
+    d.setUTCMonth(d.getUTCMonth() + n);
+    const last = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 0)).getUTCDate();
+    d.setUTCDate(Math.min(day, last));
+    return isoOf(d);
+  };
+  const today = () => { const n = new Date(); return `${n.getFullYear()}-${pad(n.getMonth() + 1)}-${pad(n.getDate())}`; };
+  // the week starts on the language's first day (Monday where the browser doesn't say)
+  const weekStart = (() => {
+    try {
+      const l = new Intl.Locale(lang);
+      const w = (l.getWeekInfo && l.getWeekInfo()) || l.weekInfo;
+      if (w && w.firstDay) return w.firstDay % 7;
+    } catch {}
+    return /^en-US$|^(ja|ko|zh|he|ar|pt-BR)/i.test(lang) ? 0 : 1;
+  })();
+  const fmt = (o) => { try { return new Intl.DateTimeFormat(lang, { ...o, timeZone: 'UTC' }); } catch { return new Intl.DateTimeFormat('en', { ...o, timeZone: 'UTC' }); } };
+  const dayShort = fmt({ weekday: 'short' }), dayLong = fmt({ weekday: 'long' }), full = fmt({ dateStyle: 'full' }), title = fmt({ month: 'long', year: 'numeric' });
+
+  const TOKEN = /"[^"]*"|YYYY|YY|MONTH|MON|MM|DD|DAY|DY/gi;
+  const monthsOf = (field) => { try { return JSON.parse(field.dataset.months || '{}'); } catch { return {}; } };
   const format = (iso, mask, months) => {
     const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
     if (!m) return '';
@@ -3885,31 +3983,205 @@ document.addEventListener('change', (e) => {
       if (up === 'YY') return pad(y % 100);
       if (up === 'MM') return pad(mo);
       if (up === 'DD') return pad(d);
-      if (up === 'MONTH') return cased(months.long[mo - 1]);
-      if (up === 'MON') return cased(months.short[mo - 1]);
+      if (up === 'MONTH') return cased((months.long || [])[mo - 1] || '');
+      if (up === 'MON') return cased((months.short || [])[mo - 1] || '');
+      if (up === 'DAY') return cased(dayLong.format(dateOf(iso)));
+      if (up === 'DY') return cased(dayShort.format(dateOf(iso)));
       return tok;
     });
   };
+  // the text read back in the mask (as format.ts parseDateMask does), or as YYYY-MM-DD; null when it isn't a date
+  const parse = (text, mask, months) => {
+    const v = (text || '').trim();
+    let y, mo, d;
+    const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+    if (iso) [y, mo, d] = iso.slice(1).map(Number);
+    else {
+      const esc = (x) => x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const names = (list) => `(${(list || []).map(esc).join('|') || '\\p{L}+'})`;
+      const groups = [];
+      let last = 0, re = '';
+      for (const m of mask.matchAll(TOKEN)) {
+        re += esc(mask.slice(last, m.index));
+        last = m.index + m[0].length;
+        if (m[0].startsWith('"')) { re += esc(m[0].slice(1, -1)); continue; }
+        const up = m[0].toUpperCase();
+        re += { YYYY: '(\\d{4})', YY: '(\\d{2})', MM: '(\\d{1,2})', DD: '(\\d{1,2})', MONTH: names(months.long), MON: names(months.short), DAY: '(\\p{L}+)', DY: '(\\p{L}+)' }[up];
+        groups.push(up);
+      }
+      re += esc(mask.slice(last));
+      const m = new RegExp(`^${re}$`, 'iu').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' ? months.long : months.short) || []).findIndex((n) => n.toLowerCase() === x.toLowerCase()) + 1;
+      });
+    }
+    if (!y || !mo || !d) return null;
+    const out = `${String(y).padStart(4, '0')}-${pad(mo)}-${pad(d)}`;
+    return isoOf(dateOf(out)) === out ? out : null;
+  };
+
+  let open = null; // { box, field, btn, focus, view }
+  function close(back) {
+    if (!open) return;
+    const { box, btn } = open;
+    open = null;
+    box.remove();
+    btn.setAttribute('aria-expanded', 'false');
+    if (back) btn.focus();
+  }
+  function choose(iso) {
+    const { field } = open;
+    field.value = iso ? format(iso, field.dataset.dateMask || 'YYYY-MM-DD', monthsOf(field)) : '';
+    close(false);
+    field.dispatchEvent(new Event('input', { bubbles: true }));
+    field.dispatchEvent(new Event('change', { bubbles: true }));
+    field.focus();
+  }
+  // a date range's to is on or after its from (and the from on or before the to)
+  const allowed = (iso) => {
+    const { field } = open;
+    if (!field.closest('.date-range')) return true;
+    const isTo = field.id.endsWith('_TO');
+    const other = document.getElementById(isTo ? field.id.slice(0, -3) : `${field.id}_TO`);
+    const bound = other ? parse(other.value, other.dataset.dateMask || 'YYYY-MM-DD', monthsOf(other)) : null;
+    return !bound || (isTo ? iso >= bound : iso <= bound);
+  };
+  function render() {
+    const { box, field } = open;
+    const sel = parse(field.value, field.dataset.dateMask || 'YYYY-MM-DD', monthsOf(field));
+    const now = today();
+    const view = open.view;
+    const first = dateOf(`${view.slice(0, 7)}-01`);
+    const start = addDays(isoOf(first), -((first.getUTCDay() - weekStart + 7) % 7));
+    box.textContent = '';
+    const head = document.createElement('div');
+    head.className = 'date-picker-head';
+    const nav = (label, n, glyph) => {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'btn btn-sm';
+      b.setAttribute('aria-label', label);
+      b.textContent = glyph;
+      b.addEventListener('click', () => { open.focus = addMonths(open.focus, n); open.view = open.focus; render(); });
+      return b;
+    };
+    const caption = document.createElement('div');
+    caption.className = 'date-picker-title';
+    caption.setAttribute('aria-live', 'polite');
+    caption.id = `${field.id}_dp_title`;
+    caption.textContent = title.format(first);
+    head.append(nav(t('calendar.previous', 'Previous month'), -1, '‹'), caption, nav(t('calendar.next', 'Next month'), 1, '›'));
+    const table = document.createElement('table');
+    table.className = 'date-picker-grid';
+    table.setAttribute('role', 'grid');
+    table.setAttribute('aria-labelledby', caption.id);
+    const hr = table.createTHead().insertRow();
+    for (let i = 0; i < 7; i++) {
+      const th = document.createElement('th');
+      const day = addDays(start, i);
+      th.scope = 'col';
+      th.abbr = dayLong.format(dateOf(day));
+      th.textContent = dayShort.format(dateOf(day));
+      hr.append(th);
+    }
+    const body = table.createTBody();
+    for (let w = 0; w < 6; w++) {
+      const tr = body.insertRow();
+      for (let i = 0; i < 7; i++) {
+        const iso = addDays(start, w * 7 + i);
+        const td = tr.insertCell();
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.dataset.iso = iso;
+        b.textContent = String(Number(iso.slice(8)));
+        b.setAttribute('aria-label', full.format(dateOf(iso)));
+        b.tabIndex = iso === open.focus ? 0 : -1;
+        if (iso.slice(0, 7) !== view.slice(0, 7)) b.classList.add('date-other');
+        if (iso === now) { b.classList.add('date-today'); b.setAttribute('aria-current', 'date'); }
+        if (iso === sel) { b.classList.add('date-selected'); b.setAttribute('aria-pressed', 'true'); }
+        if (!allowed(iso)) b.disabled = true;
+        td.append(b);
+      }
+    }
+    const foot = document.createElement('div');
+    foot.className = 'date-picker-foot';
+    const act = (label, fn) => { const b = document.createElement('button'); b.type = 'button'; b.className = 'btn btn-sm'; b.textContent = label; b.addEventListener('click', fn); return b; };
+    foot.append(act(t('calendar.today', 'Today'), () => (allowed(now) ? choose(now) : null)), act(t('facets.clear_short', 'Clear'), () => choose('')));
+    box.append(head, table, foot);
+    box.querySelector('button[tabindex="0"]')?.focus({ preventScroll: true });
+  }
+  // fixed under the field (above it when there is no room), so a scrolling table or grid cell doesn't clip it
+  function place() {
+    if (!open) return;
+    const { box, field } = open;
+    const r = field.getBoundingClientRect();
+    const h = box.offsetHeight, w = box.offsetWidth;
+    box.style.position = 'fixed';
+    box.style.top = `${Math.round(r.bottom + 4 + h > window.innerHeight - 8 && r.top - h - 4 > 8 ? r.top - h - 4 : r.bottom + 4)}px`;
+    box.style.left = `${Math.round(Math.max(8, Math.min(r.left, window.innerWidth - w - 8)))}px`;
+  }
+  window.addEventListener('scroll', place, { passive: true, capture: true });
+  window.addEventListener('resize', place);
+  function show(field, btn) {
+    close(false);
+    const box = document.createElement('div');
+    box.className = 'date-picker';
+    box.setAttribute('role', 'dialog');
+    box.setAttribute('aria-label', t('item.choose_date', 'Choose a date'));
+    const sel = parse(field.value, field.dataset.dateMask || 'YYYY-MM-DD', monthsOf(field));
+    open = { box, field, btn, focus: sel || today(), view: sel || today() };
+    btn.setAttribute('aria-expanded', 'true');
+    (field.closest('.date-field') || field.parentElement).append(box);
+    render();
+    place();
+    box.addEventListener('keydown', (e) => {
+      const day = e.target.dataset?.iso;
+      if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(true); return; }
+      if (!day) return;
+      const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+      let next = null;
+      if (step) next = addDays(day, step);
+      else if (e.key === 'PageUp' || e.key === 'PageDown') next = addMonths(day, (e.key === 'PageUp' ? -1 : 1) * (e.shiftKey ? 12 : 1));
+      else if (e.key === 'Home') next = addDays(day, -((dateOf(day).getUTCDay() - weekStart + 7) % 7));
+      else if (e.key === 'End') next = addDays(day, 6 - ((dateOf(day).getUTCDay() - weekStart + 7) % 7));
+      else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (allowed(day)) choose(day); return; }
+      if (!next) return;
+      e.preventDefault();
+      open.focus = next;
+      if (next.slice(0, 7) !== open.view.slice(0, 7)) { open.view = next; render(); }
+      else {
+        box.querySelectorAll('button[data-iso]').forEach((b) => (b.tabIndex = b.dataset.iso === next ? 0 : -1));
+        box.querySelector(`button[data-iso="${next}"]`)?.focus({ preventScroll: true });
+      }
+    });
+    box.addEventListener('click', (e) => {
+      const b = e.target.closest('button[data-iso]');
+      if (b && !b.disabled) choose(b.dataset.iso);
+    });
+  }
   document.addEventListener('click', (e) => {
     const btn = e.target.closest?.('[data-date-pick]');
-    if (!btn) return;
-    const native = document.querySelector(`input[data-date-for="${CSS.escape(btn.dataset.datePick)}"]`);
-    if (!native) return;
-    try {
-      native.showPicker();
-    } catch {
-      native.focus();
+    if (btn) {
+      const field = document.getElementById(btn.dataset.datePick);
+      if (!field) return;
+      e.preventDefault();
+      if (open && open.btn === btn) close(true);
+      else show(field, btn);
+      return;
     }
+    if (open && !e.target.closest?.('.date-picker')) close(false);
   });
-  document.addEventListener('change', (e) => {
-    const native = e.target;
-    if (!native.matches?.('input[data-date-for]')) return;
-    const text = document.getElementById(native.dataset.dateFor);
-    if (!text) return;
-    let months = { long: [], short: [] };
-    try { months = JSON.parse(text.dataset.months || '{}'); } catch {}
-    text.value = format(native.value, text.dataset.dateMask || 'YYYY-MM-DD', months);
-    text.dispatchEvent(new Event('change', { bubbles: true }));
-    text.focus();
+  // Alt+Down in the field opens the picker (as a native date field does)
+  document.addEventListener('keydown', (e) => {
+    if (e.altKey && e.key === 'ArrowDown' && e.target.matches?.('input[data-date-mask]')) {
+      const btn = e.target.parentElement?.querySelector('[data-date-pick]');
+      if (btn) { e.preventDefault(); show(e.target, btn); }
+    }
   });
 })();

package/public/builder.css

@@ -368,7 +368,7 @@ a.pd-node:hover { background: var(--surface-3); }
 .js .pd-gal { cursor: grab; }
 .pd-gal:hover { background: var(--surface-3); }
 .pd-gal .icon { width: 22px; height: 22px; color: var(--muted); stroke-width: 1.5; }
-.pd-gal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pd-gal span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
 
 /* ------------------------------------------------------------ help and search tabs */
 .pd-help, .pd-search { padding: 12px 16px; max-width: 60rem; }
@@ -1012,3 +1012,23 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .pd-goto-no input { width: 5.5em; font-variant-numeric: tabular-nums; }
 /* on narrower screens the previous / next arrows and the page list do it */
 @media (max-width: 1279px) { .pd-goto-no { display: none; } }
+
+/* (sprint 89, SQL-4) the Object Browser: a table's tabs on one row with More, and the Columns toolbar */
+.ob-tabs { flex-wrap: nowrap; align-items: stretch; }
+.ob-tabs > a { white-space: nowrap; }
+.ob-more { position: relative; }
+.ob-more > summary { display: flex; align-items: center; gap: 0.25rem; height: 100%; padding: 0.5rem 0.85rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
+.ob-more > summary:hover, .ob-more[open] > summary { color: var(--text); }
+.ob-more .menu-panel { right: 0; left: auto; min-width: 12rem; }
+.ob-more .icon { width: 0.9rem; height: 0.9rem; }
+.ob-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
+.ob-tool { position: relative; }
+.ob-tool > summary { list-style: none; }
+.ob-tool .menu-panel { left: 0; min-width: 18rem; padding: 0.75rem; }
+.ob-tool .ob-action { flex-direction: column; align-items: stretch; }
+.ob-tool .ob-action input:not([type=checkbox]), .ob-tool .ob-action select { width: 100%; }
+.ob-toolbar-note { font-size: 0.85rem; }
+@media (max-width: 640px) { .ob-tabs { overflow-x: auto; } .ob-tool .menu-panel { min-width: min(18rem, 90vw); } }
+
+/* (sprint 90, PD-4) a commented-out component in the tree (APEX: Comment Out): struck through and muted */
+.pd-node[data-commented] .pd-label { text-decoration: line-through; color: var(--muted); }

package/public/builder.js

@@ -270,6 +270,11 @@
       list.push(['Duplicate', () => submit(`${base}/layout/duplicate`, { kind, id })], ['Copy to other page…', copyDialog]);
       if (kind !== 'region') list.push(['Create dynamic action', go('new=dynamic_action')]);
       if (node.classList.contains('has-kids')) list.push(null, ['Expand all below', () => setAll(node, true)], ['Collapse all below', () => setAll(node, false)]);
+      // (sprint 90; APEX: Comment Out) leave a component out of the page without deleting it (build option COMMENTED_OUT)
+      if (['region', 'item', 'button', 'dynamic_action', 'validation', 'process', 'computation', 'branch'].includes(kind))
+        list.push(null, node.hasAttribute('data-commented')
+          ? ['Uncomment', () => submit(`${base}/layout/comment`, { kind, id, on: 'false' })]
+          : ['Comment out', () => submit(`${base}/layout/comment`, { kind, id, on: 'true' })]);
       list.push(null, ['Delete', () => submit(`${base}/c/${kind}/${id}/delete`, {}, `Delete ${kind} ${label}?`), 'danger']);
       return list;
     };
@@ -1167,3 +1172,65 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
     });
   });
 });
+
+// (sprint 87) The create application wizard:
+// - an alias follows its name (data-derive-from) until the developer types in it, like aliasFor() on the server;
+// - choosing a schema under Data reloads the Pages list (and the proposed name and alias, while untouched)
+//   without leaving the page; without JavaScript, "Show its tables" does the same with a reload;
+// - First user and Password are hidden while Authentication is None (the server ignores them then).
+(() => {
+  const slug = (v) => {
+    let a = v.normalize('NFKD').replace(/\p{M}/gu, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40);
+    if (a && !/^[a-z]/.test(a)) a = `app-${a}`;
+    return a;
+  };
+  document.querySelectorAll('input[data-derive-from]').forEach((alias) => {
+    const name = document.getElementById(alias.dataset.deriveFrom);
+    if (!name) return;
+    alias.addEventListener('input', () => alias.setAttribute('data-edited', ''));
+    name.addEventListener('input', () => {
+      if (!alias.hasAttribute('data-edited')) alias.value = slug(name.value);
+    });
+  });
+
+  document.querySelectorAll('select[name="authentication"]').forEach((auth) => {
+    const form = auth.form;
+    const fields = ['admin_user', 'admin_password'].map((n) => form?.elements.namedItem(n)?.closest?.('.field')).filter(Boolean);
+    if (!fields.length) return;
+    const sync = () => fields.forEach((f) => (f.hidden = auth.value === 'none'));
+    auth.addEventListener('change', sync);
+    sync();
+  });
+
+  const picker = document.querySelector('form.create-schema select[name="schema"]');
+  const pages = document.getElementById('aw-pages');
+  const hidden = document.getElementById('aw-schema-fields');
+  if (!picker || !pages || !hidden) return;
+  const name = document.getElementById('f_name');
+  let nameTouched = false;
+  name?.addEventListener('input', () => (nameTouched = true));
+  picker.addEventListener('change', async () => {
+    const url = `${picker.form.action}?schema=${encodeURIComponent(picker.value)}`;
+    pages.setAttribute('aria-busy', 'true');
+    try {
+      const res = await fetch(url, { headers: { accept: 'text/html' }, credentials: 'same-origin' });
+      if (!res.ok) throw new Error(String(res.status));
+      const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
+      const nextPages = doc.getElementById('aw-pages');
+      const nextHidden = doc.getElementById('aw-schema-fields');
+      if (!nextPages || !nextHidden) throw new Error('unexpected page');
+      pages.replaceWith(nextPages);
+      hidden.replaceWith(nextHidden);
+      // the proposals for the new schema, unless the developer already typed a name or alias
+      const alias = document.querySelector('input[data-derive-from]');
+      if (!nameTouched && name) name.value = doc.getElementById('f_name')?.value ?? name.value;
+      if (alias && !alias.hasAttribute('data-edited')) alias.value = doc.getElementById('f_alias')?.value ?? alias.value;
+      history.replaceState(null, '', url);
+      document.getElementById('aw-pages')?.removeAttribute('aria-busy');
+    } catch {
+      picker.form.submit();
+    }
+  });
+  // the button is for pages without JavaScript
+  picker.form.querySelector('button')?.setAttribute('hidden', '');
+})();

package/public/sw.js

@@ -15,11 +15,12 @@ self.addEventListener('install', (event) => {
   event.waitUntil(caches.open(STATIC).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
 });
 
+// older versions' static files, and (sprint 86) the caches of pgkiln's old name (pgapex-*)
 self.addEventListener('activate', (event) => {
   event.waitUntil(
     caches
       .keys()
-      .then((keys) => Promise.all(keys.filter((k) => k.startsWith('pgkiln-static-') && k !== STATIC).map((k) => caches.delete(k))))
+      .then((keys) => Promise.all(keys.filter((k) => (k.startsWith('pgkiln-static-') && k !== STATIC) || k.startsWith('pgapex-')).map((k) => caches.delete(k))))
       .then(() => self.clients.claim()),
   );
 });

package/src/app.ts

@@ -49,6 +49,9 @@ import { accountRoutes } from './runtime/account.ts';
 import { taskRoutes } from './runtime/tasks.ts';
 import { dataReporterRoutes } from './runtime/data-reporter.ts';
 import { reporterBuilderRoutes } from './builder/reporter.ts';
+import { formDesignerRoutes } from './runtime/form-designer.ts';
+import { formDesignerBuilderRoutes } from './builder/form-designer.ts';
+import { builderErrorPages, builderServerError } from './builder/errors.ts';
 import { workflowRoutes } from './runtime/workflows.ts';
 import { pwaRoutes } from './runtime/pwa.ts';
 import { pushRoutes } from './runtime/push.ts';
@@ -138,10 +141,13 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   });
   // An id in the URL that isn't a number (or is too big) fails in PostgreSQL:
   // that's a page that doesn't exist, not a server error.
-  app.setErrorHandler((err: Error & { code?: string }, _req, reply) => {
+  app.setErrorHandler((err: Error & { code?: string }, req, reply) => {
     if (err.code === '22P02' || err.code === '22003') return reply.code(404).type('text/plain').send('Not found');
+    // (sprint 86) a browser on a builder page gets an HTML error page
+    if (builderServerError(req, reply, err)) return reply;
     return reply.send(err);
   });
+  builderErrorPages(app);
   await app.register(cookie);
   await app.register(formbody, { bodyLimit: 5 * 1024 * 1024 });
   // file upload items; oversized files are cut off and reported, not thrown
@@ -223,6 +229,8 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(codeEditorRoutes);
   await app.register(dataReporterRoutes);
   await app.register(reporterBuilderRoutes);
+  await app.register(formDesignerRoutes);
+  await app.register(formDesignerBuilderRoutes);
   await app.register(sampleDataRoutes);
   await app.register(assistantRoutes);
   await app.register(aiFilterRoutes);

package/src/appfiles.ts

@@ -116,6 +116,10 @@ const CODE: Record<string, Record<string, string>> = {
   computation: { expression: 'sql', condition_expr: 'sql' },
   branch: { condition_expr: 'sql' },
   app_process: { code: 'sql' },
+  app_computation: { expression: 'sql', condition_expr: 'sql' },
+  // (103) a shortcut's value: text, HTML or PL/pgSQL (see codeExt)
+  shortcut: { value: 'txt' },
+  report_query: { query: 'sql' },
   authz_scheme: { value: 'sql' },
   lov: { query: 'sql' },
   automation: { query: 'sql', code: 'sql' },
@@ -134,7 +138,9 @@ const CODE: Record<string, Record<string, string>> = {
 };
 const isLong = (v: unknown): v is string => typeof v === 'string' && (v.includes('\n') || v.length > 60);
 const codeExt = (table: string, column: string, row: any) =>
-  table === 'region' && column === 'source' && row.type === 'static' ? 'html' : CODE[table][column];
+  table === 'region' && column === 'source' && row.type === 'static' ? 'html'
+  : table === 'shortcut' ? (row.type === 'html' ? 'html' : row.type === 'function_body' ? 'sql' : 'txt')
+  : CODE[table][column];
 
 export type Style = 'json' | 'text';
 
@@ -191,6 +197,11 @@ const NAMED: [section: string, dir: string, table: string][] = [
   // (086) application settings
   ['app_settings', 'shared/app-settings', 'app_setting'],
   ['page_groups', 'shared/page-groups', 'page_group'],
+  // (103) shortcuts, (104) report queries
+  ['shortcuts', 'shared/shortcuts', 'shortcut'],
+  ['report_queries', 'shared/report-queries', 'report_query'],
+  // (105) component groups
+  ['component_groups', 'shared/component-groups', 'component_group'],
 ];
 
 /** Components of a page: [array in the document, directory, table, key source]. */
@@ -214,10 +225,11 @@ const SINGLE: [section: string, path: string, sort: string[]][] = [
 ];
 
 const ACTIONS_DIR = 'shared/automation-actions';
+const APP_COMPUTATIONS_DIR = 'shared/app-computations';
 const STATIC_DIR = 'static';
 const STATIC_INDEX = `${STATIC_DIR}/files.json`;
 
-const KNOWN = new Set(['format', 'app', 'static_files', 'app_processes', 'translations', 'nav', 'list_entries', 'automation_actions', 'pages', ...NAMED.map((n) => n[0]), ...SINGLE.map((s) => s[0])]);
+const KNOWN = new Set(['format', 'app', 'static_files', 'app_processes', 'app_computations', 'translations', 'nav', 'list_entries', 'automation_actions', 'pages', ...NAMED.map((n) => n[0]), ...SINGLE.map((s) => s[0])]);
 
 const byColumns = (cols: string[]) => (a: any, b: any) => {
   for (const c of cols) {
@@ -258,6 +270,9 @@ export function docToFiles(doc: Doc, style: Style = 'json'): FileMap {
 
   const procs: any[] = doc.app_processes ?? [];
   uniqueKeys(procs, (r) => r.name, 'process').forEach((k, i) => w.record('shared/app-processes', `${seqPrefix(procs[i].seq)}-${k}`, 'app_process', procs[i]));
+  // (102) application computations, by sequence, item and point
+  const comps: any[] = doc.app_computations ?? [];
+  uniqueKeys(comps, (r) => `${r.item_name ?? ''} ${r.point ?? ''}`, 'computation').forEach((k, i) => w.record(APP_COMPUTATIONS_DIR, `${seqPrefix(comps[i].seq)}-${k}`, 'app_computation', comps[i]));
 
   for (const [section, path, sort] of SINGLE) w.json(path, [...(doc[section] ?? [])].sort(byColumns(sort)));
 
@@ -453,6 +468,7 @@ export function filesToDoc(files: FileMap): Doc {
       });
   }
   doc.app_processes = readRecords(files, 'shared/app-processes').sort(SEQ_SORT).map(mergeCode);
+  doc.app_computations = readRecords(files, APP_COMPUTATIONS_DIR).sort(SEQ_SORT).map(mergeCode);
   for (const [section, path] of SINGLE) doc[section] = read(path);
   doc.translations = [...files.keys()]
     .filter((p) => /^globalization\/translations\/[^/]+\.(json|yaml)$/.test(p))