pgkiln 0.45.0 → 0.46.0

package/public/app.css

@@ -1152,6 +1152,13 @@ td[data-add]:hover > .cal-add, .cal-add:focus-visible { opacity: 1; }
 .facet { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
 .facet legend { font-weight: 650; font-size: 0.85rem; margin-bottom: 0.3rem; padding: 0; display: flex; gap: 0.5rem; }
 .facet-clear { font-weight: 400; font-size: 0.8rem; }
+.facet:has(> .facet-menu) { position: relative; }
+.facet:has(> .facet-menu) > legend { padding-right: 1.6rem; }
+.facet-menu { position: absolute; top: 0; right: 0; }
+.facet-menu > summary { cursor: pointer; padding: 0 0.35rem; border-radius: 4px; color: var(--muted); }
+.facet-menu > summary:hover, .facet-menu[open] > summary { background: var(--surface-3); color: inherit; }
+.facet-menu .menu-panel { left: auto; right: 0; min-width: 11rem; }
+.facet-menu .menu-links a[aria-current] { font-weight: 650; }
 .facet-value { font-weight: 400; font-size: 0.9rem; }
 /* (sprint 65) a facet's chart of its counts, collapsed under the legend */
 .facet-chart { margin: 0.1rem 0 0.4rem; }
@@ -1965,9 +1972,25 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .th-menu-values li.muted { padding: 0.35rem 0.9rem; }
 .js th[data-col] > a { cursor: pointer; }
 
-/* (sprint 76) a date item in the application's date format: the browser's picker on a hidden date field */
+/* (sprint 76) a date item in the application's date format */
 .date-field { position: relative; }
-.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
+/* (sprint 84; APEX: the date picker) a month of days under a date field (app.js) */
+.date-picker { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(16 24 40 / 18%); padding: 0.5rem; min-width: 17rem; }
+.date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
+.date-picker-title { font-weight: 650; text-transform: capitalize; }
+.date-picker-grid { border-collapse: collapse; width: 100%; }
+.date-picker-grid th { font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0.2rem 0; text-align: center; }
+.date-picker-grid td { padding: 1px; text-align: center; }
+.date-picker-grid button { width: 2.2rem; height: 2.1rem; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.date-picker-grid button:hover { background: var(--surface-3); }
+.date-picker-grid button.date-other { color: var(--muted); }
+.date-picker-grid button.date-today { box-shadow: inset 0 0 0 1px var(--accent); }
+.date-picker-grid button.date-selected { background: var(--accent); color: var(--accent-text); }
+.date-picker-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
+.date-picker-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
+.date-picker-foot { display: flex; justify-content: space-between; margin-top: 0.4rem; }
+.js .grid-table tbody td[data-col]:not(:focus-within) .date-field > .btn { visibility: hidden; }
 
 /* (sprint 77) display positions: banner, breadcrumb bar, a side column, footer; button positions in a region */
 .t-pos-banner, .t-pos-breadcrumb { margin-bottom: 1rem; }
@@ -1982,3 +2005,40 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 @media (max-width: 900px) { .t-columns-left, .t-columns-right { grid-template-columns: 1fr; } .t-columns-right > .t-side { order: 0; } }
 .region-footer-split { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
 .region-footer-split > div { display: flex; gap: 0.5rem; }
+
+/* (sprint 85) the Form Designer region (form-designer.ts): forms as cards with a Design link, the designer's field table, a row's form */
+.fd-cards > li { display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-design-link { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }
+.fd-fields input.fd-seq { width: 4.5rem; }
+.fd-fields td select { min-width: 8rem; }
+.fd-fields td input:not([type=checkbox]):not(.fd-seq) { min-width: 6rem; width: 100%; }
+.fd-form { margin: 0.75rem 0; }
+.fd-radios { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-new { margin-top: 1rem; }
+
+/* (sprint 88, GEN-4; APEX: the Cards list template and the hero region) a list's cards each get a colour band
+   and their icon in a round badge, in the chart palette's order; the hero sits on the page background */
+.list-cards > li { --card-color: var(--series-1); }
+.list-cards > li:nth-child(8n+2) { --card-color: var(--series-2); }
+.list-cards > li:nth-child(8n+3) { --card-color: var(--series-3); }
+.list-cards > li:nth-child(8n+4) { --card-color: var(--series-4); }
+.list-cards > li:nth-child(8n+5) { --card-color: var(--series-5); }
+.list-cards > li:nth-child(8n+6) { --card-color: var(--series-6); }
+.list-cards > li:nth-child(8n+7) { --card-color: var(--series-7); }
+.list-cards > li:nth-child(8n+8) { --card-color: var(--series-8); }
+.list-card { border-top: 4px solid var(--card-color); }
+.list-card-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
+  background: color-mix(in srgb, var(--card-color) 16%, transparent); color: var(--card-color); }
+.list-card-icon .icon { width: 1.3rem; height: 1.3rem; }
+.list-card-head { gap: 0.75rem; }
+.region-hero { background: transparent; padding-left: 0; padding-right: 0; }
+
+/* (sprint 88, GEN-4; APEX: the page footer) the application's version and Back to top, under the content */
+.t-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
+  margin: 0 1.5rem 1rem; max-width: calc(1500px - 3rem); padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
+@media (max-width: 640px) { .t-footer { margin: 0 0.75rem 1rem; } }
+.t-footer .t-top { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; }
+.t-footer .t-top:hover, .t-footer .t-top:focus-visible { color: var(--accent); }
+.t-footer .icon { width: 1rem; height: 1rem; }
+@media print { .t-footer { display: none; } }
+.list-card:hover { border-top-color: var(--card-color); }

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
@@ -3492,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);
@@ -3931,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 '';
@@ -3948,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/builder/appwizard.ts

@@ -50,6 +50,9 @@ interface Relation {
   calendar: boolean;
   /** (sprint 73) a table with a foreign key to this one, for master-detail */
   detail: boolean;
+  /** (sprint 87) row level security is on, with this many policies */
+  rls: boolean;
+  policies: number;
 }
 
 /** The tables, partitioned tables, views and materialized views of a schema (not partitions). */
@@ -59,7 +62,8 @@ export async function schemaRelations(schema: string): Promise<Relation[]> {
       `select c.relname, meta.wizard_table_label(c.oid) as label, case when c.relkind in ('v', 'm') then 'view' else 'table' end as kind,
               meta.wizard_pk(c.oid) as pk, case when c.reltuples >= 0 then c.reltuples::bigint end as rows,
               meta.wizard_defaults('calendar', c.oid) ->> 'start' is not null as calendar,
-              meta.wizard_pk(c.oid) is not null and meta.wizard_defaults('master_detail', c.oid) ->> 'detail' is not null as detail
+              meta.wizard_pk(c.oid) is not null and meta.wizard_defaults('master_detail', c.oid) ->> 'detail' is not null as detail,
+              c.relrowsecurity as rls, (select count(*)::int from pg_policy p where p.polrelid = c.oid) as policies
          from pg_class c join pg_namespace n on n.oid = c.relnamespace
         where n.nspname = $1 and c.relkind in ('r', 'p', 'v', 'm') and not c.relispartition
         order by c.relkind in ('v', 'm'), c.relname`,
@@ -311,6 +315,16 @@ const SOURCES: [string, string, string, string][] = [
   ['gallery', 'grid', 'From the App Gallery', 'A starter application'],
 ];
 
+/**
+ * (sprint 87) A table's row level security, before the application is created: on with its number
+ * of policies, or on without any (the application's role then sees no rows unless it owns the table).
+ */
+const rlsBadge = (r: Relation) =>
+  !r.rls ? ''
+  : r.policies > 0
+    ? html` <span class="tag aw-rls" title="Row level security is on (${r.policies} ${r.policies === 1 ? 'policy' : 'policies'}): each user sees only the rows the policies allow">${icon('shield')} RLS · ${r.policies}</span>`
+    : html` <span class="tag tag-error aw-rls" title="Row level security is on without policies: the application's role sees no rows (unless it owns the table or bypasses row level security)">${icon('shield')} RLS, no policies</span>`;
+
 async function createPage(s: Session, reply: FastifyReply, schema: string, b: Body | null, message: Raw | '' = '') {
   const schemas = await appSchemas();
   const known = schemas.includes(schema);
@@ -334,8 +348,8 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
         'The application\'s parsing schema. Choose a schema to get a page per table and view; a new schema is named after the alias.')}</div>
       <div class="buttons"><button class="btn">${icon('search')} Show its tables</button></div></form>`)}
     <form method="post" action="${BASE}/apps" data-progress="Creating the application and its pages…">${csrf(s)}
-      <input type="hidden" name="schema" value="${known ? schema : ''}"><input type="hidden" name="features" value="1">
-      ${known ? html`<input type="hidden" name="tables" value="1">` : ''}
+      <input type="hidden" name="features" value="1">
+      <div id="aw-schema-fields"><input type="hidden" name="schema" value="${known ? schema : ''}">${known ? html`<input type="hidden" name="tables" value="1">` : ''}</div>
       ${region('Application', html`<div class="form-grid">
         <div class="field"><label class="label" for="f_name">Name</label>
           <input id="f_name" name="name" value="${v('name', suggested)}" required data-select-once></div>
@@ -354,14 +368,16 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
             ? relations.map((r, i) => html`<li><input type="hidden" name="t_${i}" value="${r.relname}">
                 <label class="aw-page-kind" for="f_k_${i}">${icon(r.kind === 'view' ? 'eye' : 'table')} ${r.label}</label>
                 <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}"${k === kindOf(r, i) ? raw(' selected') : ''}>${PAGE_KINDS[k]}</option>`)}</select>
-                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small></li>`)
+                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small>${rlsBadge(r)}</li>`)
             : html`<li class="muted">${schema} has no tables or views.</li>`
           : html`<li class="muted">Choose a schema under Data for a page per table, or add pages with the page wizards later.</li>`}
       </ul>
-      ${known ? check('chart', 'Dashboard: a chart per table with the number of rows per parent row (a foreign key) or per value of a column whose values repeat', b ? b.chart === 'true' : true) : ''}`)}
+      ${known ? check('chart', 'Dashboard: a chart per table with the number of rows per parent row (a foreign key) or per value of a column whose values repeat', b ? b.chart === 'true' : true) : ''}`, '', 'aw-pages')}
       ${region('Features', html`<div class="aw-features">${FEATURES.map(([k, label, help]) => check(`f_${k}`, label, features[k], help))}</div>`)}
       ${region('Settings', html`<div class="form-grid">
-        ${input('alias', 'Alias (URL)', v('alias', known ? await aliasFor(schema) : ''), { required: true, help: 'lowercase, e.g. inventory → /a/inventory' })}
+        <div class="field"><label class="label" for="f_alias">Alias (URL)</label>
+          <input id="f_alias" name="alias" value="${v('alias', known ? await aliasFor(schema) : '')}" required pattern="[a-z][a-z0-9_\-]*" maxlength="50" data-derive-from="f_name"${b && b.alias ? raw(' data-edited') : ''}>
+          <small class="help">lowercase, e.g. inventory → /a/inventory; follows the name until you change it</small></div>
         ${select('authentication', 'Authentication', v('authentication', 'app_users'), [['app_users', 'App users (login page)'], ['none', 'None (public)']])}
         ${input('admin_user', 'First user', v('admin_user', ''), { placeholder: 'e.g. your name', help: 'Gets the admin role. An existing account in Users is reused.' })}
         ${input('admin_password', 'Password', '', { type: 'password', auto: 'new-password', help: 'For a new account; at least 8 characters.' })}