pgkiln 0.35.0 → 0.36.0

package/examples/hr/hr_55_page_groups.sql

@@ -0,0 +1,24 @@
+-- =====================================================================
+-- HR example, part 55: page groups (migration 089;
+-- docs/guide/03-builder.md "Page groups")
+--
+-- The HR pages in four groups, shown and filtered in the App Builder's
+-- page list (Shared Components → Page groups).
+-- =====================================================================
+insert into meta.page_group (app_id, name, description)
+select a.id, g.name, g.description
+  from meta.app a, (values
+  ('Employees', 'Employees, departments and their reviews'),
+  ('Leave', 'Leave requests, the calendar and the planner'),
+  ('Administration', 'Pages for administrators'),
+  ('Showcase', 'Pages that show one feature each')
+  ) as g (name, description)
+ where a.alias = 'hr';
+
+update meta.page p set page_group = g.name
+  from meta.app a, (values
+  ('Employees', array[2, 3, 4, 5, 8, 11, 19, 20, 27]),
+  ('Leave', array[6, 7, 12, 22, 24]),
+  ('Administration', array[9, 10, 43, 44])
+  ) as g (name, pages)
+ where a.alias = 'hr' and p.app_id = a.id and p.page_no = any (g.pages);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/app.css

@@ -254,7 +254,43 @@ details.menu > summary::-webkit-details-marker { display: none; }
 
 /* ---------- regions ---------- */
 .region { min-width: 0; }
-.region-standard, .region-collapsible { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+.region-standard, .region-collapsible, .region-wizard, .region-inline_dialog, .region-inline_drawer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+/* (088) more region templates */
+.region-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 2rem 1.75rem; border-radius: var(--radius);
+  background: var(--accent-soft); color: var(--text); }
+.region-hero-icon .icon { width: 3rem; height: 3rem; color: var(--accent); }
+.region-hero-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
+.region-hero-buttons, .region-title-buttons, .region-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+@media (max-width: 640px) { .region-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; } }
+.region-title-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
+.region-title-bar h2 { margin: 0; font-size: 1.15rem; }
+.region-buttons_container .region-buttons { justify-content: flex-end; }
+.region-wizard { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
+dialog[data-inline-region] { padding: 0; max-width: min(640px, calc(100vw - 2rem)); width: 100%; color: var(--text); }
+dialog[data-inline-region]::backdrop { background: rgb(0 0 0 / 45%); }
+dialog[data-inline-region] .region-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+dialog.region-inline_drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; max-width: min(480px, 100vw); border-radius: 0; }
+/* without JavaScript: a link to #R<id> shows it */
+dialog[data-inline-region]:target { display: block; position: fixed; inset: 2rem 0 auto; margin: 0 auto; z-index: 1000; }
+dialog.region-inline_drawer:target { inset: 0 0 0 auto; }
+/* (088) carousel (display selector style) and wizard progress (list template) */
+.rds-carousel { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
+.rds-carousel .rds-list { gap: 0.4rem; }
+.rds-carousel .rds-tab { font-size: 0; width: 0.75rem; height: 0.75rem; padding: 0; border-radius: 50%; background: var(--border); min-height: 0; }
+.rds-carousel .rds-tab.is-current { background: var(--accent); }
+.rds-carousel .rds-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.wizard-progress ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; counter-reset: none; }
+.wizard-step { flex: 1 1 0; min-width: 6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; position: relative; color: var(--muted); font-size: 0.85rem; }
+.wizard-step::before { content: ""; position: absolute; top: 0.95rem; left: -50%; right: 50%; border-top: 2px solid var(--border); z-index: 0; }
+.wizard-step:first-child::before { display: none; }
+.wizard-step a { color: inherit; text-decoration: none; display: contents; }
+.wizard-step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-weight: 600; }
+.wizard-step-no .icon { width: 1rem; height: 1rem; }
+.wizard-step.is-done, .wizard-step.is-current { color: var(--text); }
+.wizard-step.is-done .wizard-step-no { border-color: var(--accent); color: var(--accent); }
+.wizard-step.is-done::before, .wizard-step.is-current::before { border-top-color: var(--accent); }
+.wizard-step.is-current .wizard-step-no { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
+.wizard-step.is-current .wizard-step-label { font-weight: 600; }
 .region-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 50px; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
 .region-collapsible summary.region-header { cursor: pointer; list-style: none; }
 .region-collapsible summary.region-header::-webkit-details-marker { display: none; }
@@ -810,6 +846,14 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table tr.deleted td { opacity: 0.5; text-decoration: line-through; }
 .grid-table tr.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
 .grid-table tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+/* the single row view: one row as a form */
+.grid-record { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius, 8px); display: grid; gap: 0.9rem; }
+.grid-record .grid-field { display: grid; gap: 0.3rem; align-content: start; }
+.grid-record .grid-value { min-height: 1.5rem; overflow-wrap: anywhere; }
+.grid-record.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
+.grid-record.dirty { box-shadow: inset 3px 0 0 var(--accent); }
+.grid-record.deleted .form-grid { opacity: 0.5; text-decoration: line-through; }
+.grid-record-nav { justify-content: center; }
 .js .grid-template { display: none; }
 .grid-table .icon { width: 14px; height: 14px; }
 /* columns a user hid stay in the form (their values still post) */
@@ -1006,9 +1050,19 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
 /* single sign-on buttons on the login page */
 .sso-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
 .sso-buttons .btn { padding: 0.6rem; }
-.login-card .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
-.login-card .or::before, .login-card .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
+.login-card .or, .login-region .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
+.login-card .or::before, .login-card .or::after, .login-region .or::before, .login-region .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
 .login-form { display: flex; flex-direction: column; gap: 1rem; }
+.login-forgot { align-self: center; font-size: 0.9rem; }
+/* (087) minimal pages (no header and navigation) and an application's own login page */
+.t-minimal-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
+.login-body .t-minimal-main { max-width: 420px; padding: 1rem; }
+.login-region { display: flex; flex-direction: column; gap: 1rem; }
+.login-region .btn { padding: 0.6rem; }
+.t-minimal .t-titlebar { background: none; border: 0; padding: 0 0 1rem; }
+.t-minimal .t-content { padding: 0; max-width: none; }
+/* on the sign-in backdrop the title sits on the header colour, like the built-in page's card title */
+.login-body .t-titlebar h1 { color: var(--header-text); text-align: center; }
 
 /* ---------- preferences: theme switch, language picker ---------- */
 .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 0.35rem; }
@@ -1612,3 +1666,6 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .session-dialog { max-width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; }
 .session-dialog::backdrop { background: rgb(0 0 0 / 40%); }
 .session-dialog p { margin: 0 0 1rem; }
+/* (sprint 59) Quick edit from the developer toolbar */
+.quick-edit .qe-target { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: pointer; }
+.devbar-quick[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

package/public/app.js

@@ -539,7 +539,11 @@ const pgkilnUnsaved = (() => {
       case 'close_region':
         for (const el of targets(da)) {
           const details = el.querySelector(':scope > details');
-          if (details) details.open = da.action === 'open_region';
+          // (088) an inline dialog or drawer region
+          if (el.matches('dialog[data-inline-region]')) {
+            if (da.action === 'open_region' && !el.open) el.showModal();
+            else if (da.action === 'close_region' && el.open) el.close();
+          } else if (details) details.open = da.action === 'open_region';
           else el.hidden = da.action === 'close_region';
         }
         return;
@@ -1157,14 +1161,15 @@ const pgkilnUnsaved = (() => {
     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');
+    // a grid row, or the single row view's form
+    const row = e.target.closest?.('[data-grid] table.grid-table > tbody > tr, [data-grid] .grid-record');
     if (!row) return;
     row.classList.add('dirty');
     dirty = true;
   });
   document.addEventListener('change', (e) => {
     const del = e.target.closest?.('[data-grid] .grid-sel input');
-    if (del) del.closest('tr').classList.toggle('deleted', del.checked);
+    if (del) del.closest('tr, .grid-record').classList.toggle('deleted', del.checked);
   });
   document.addEventListener('submit', () => (dirty = false));
   window.addEventListener('beforeunload', (e) => {
@@ -1544,6 +1549,30 @@ document.addEventListener('input', (e) => {
   if (custom) custom.checked = true;
 });
 
+// (088) Inline dialog and drawer regions: a link to #R<id> opens one as a modal dialog (without
+// JavaScript CSS shows it as the :target), its close button and Esc close it, a click on the
+// backdrop too.
+document.addEventListener('click', (e) => {
+  const close = e.target.closest?.('[data-region-close]');
+  if (close) {
+    e.preventDefault();
+    close.closest('dialog')?.close();
+    return;
+  }
+  const a = e.target.closest?.('a[href^="#R"]');
+  const d = a && document.getElementById(a.getAttribute('href').slice(1));
+  if (d?.matches('dialog[data-inline-region]')) {
+    e.preventDefault();
+    if (!d.open) d.showModal();
+    return;
+  }
+  if (e.target.matches?.('dialog[data-inline-region]')) e.target.close();
+});
+if (location.hash) {
+  const d = document.getElementById(location.hash.slice(1));
+  if (d?.matches('dialog[data-inline-region]')) d.showModal();
+}
+
 // Region display selector: the links to the regions become ARIA tabs (or a
 // select list) that show one tab's regions at a time; "Show all" shows them
 // all. The choice follows #R<id> in the URL and is remembered for the session.
@@ -1617,6 +1646,23 @@ document.querySelectorAll('[data-rds]').forEach((nav) => {
     const tab = byHash(location.hash.slice(1));
     if (tab) show(tab, false);
   });
+  // (088) carousel: Previous and Next, and turning by itself every data-rds-interval seconds
+  if (nav.classList.contains('rds-carousel')) {
+    const step = (n) => {
+      const i = tabs.findIndex((t) => t.classList.contains('is-current'));
+      show(tabs[(i + n + tabs.length) % tabs.length], false);
+    };
+    nav.querySelectorAll('[data-rds-step]').forEach((b) => {
+      b.hidden = false;
+      b.addEventListener('click', () => step(Number(b.dataset.rdsStep)));
+    });
+    const seconds = Number(nav.dataset.rdsInterval) || 0;
+    if (seconds && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      const area = [nav, ...panels];
+      const busy = () => area.some((el) => el.matches(':hover') || el.contains(document.activeElement));
+      setInterval(() => { if (!busy() && !document.hidden) step(1); }, seconds * 1000);
+    }
+  }
 });
 
 // Popup list of values: the select (which works without JavaScript) is hidden
@@ -3433,3 +3479,43 @@ function areaFilter(map, f) {
   }
   check();
 })();
+
+// (sprint 59) Quick edit from the developer toolbar (APEX: Quick Edit): while it is on, pointing at a
+// region, item or button outlines it and a click opens it in the Page Designer (in the builder's tab);
+// Esc or the button again turns it off. The toolbar is only there for developers of the application.
+(() => {
+  const toggle = document.querySelector('[data-quick-edit]');
+  if (!toggle) return;
+  toggle.hidden = false;
+  const base = toggle.dataset.quickEdit;
+  const pick = (el) => el?.closest?.('[data-item], [data-button], .region[id^="R"]');
+  let on = false;
+  let marked = null;
+  const mark = (el) => {
+    marked?.classList.remove('qe-target');
+    marked = el;
+    el?.classList.add('qe-target');
+  };
+  const set = (v) => {
+    on = v;
+    toggle.setAttribute('aria-pressed', String(v));
+    document.body.classList.toggle('quick-edit', v);
+    if (!v) mark(null);
+  };
+  const urlOf = (el) => {
+    if (el.dataset.item) return `${base}/quick?item=${encodeURIComponent(el.dataset.item)}`;
+    if (el.dataset.button) return `${base}/quick?button=${encodeURIComponent(el.dataset.button)}`;
+    return `${base}?c=region-${el.id.slice(1)}`;
+  };
+  toggle.addEventListener('click', () => set(!on));
+  document.addEventListener('pointerover', (e) => { if (on && !e.target.closest('.devbar')) mark(pick(e.target)); });
+  document.addEventListener('click', (e) => {
+    if (!on || e.target.closest('.devbar')) return;
+    const el = pick(e.target);
+    if (!el) return;
+    e.preventDefault();
+    e.stopPropagation();
+    window.open(urlOf(el), 'pgkiln-builder');
+  }, true);
+  document.addEventListener('keydown', (e) => { if (on && e.key === 'Escape') set(false); });
+})();

package/public/builder.css

@@ -676,6 +676,11 @@ details.support-script pre.source { margin-top: 0.4rem; white-space: pre-wrap; o
 
 /* (sprint 34) working copies: differences and conflicts */
 pre.diff { max-height: 32rem; overflow: auto; background: var(--code-bg); padding: 0.6rem; font-size: 0.82rem; white-space: pre; }
+pre.diff .diff-add { color: var(--success, #1a7f37); }
+pre.diff .diff-del { color: var(--danger, #cf222e); }
+/* (sprint 56) SQL Workshop → Schema Comparison */
+.compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
+.compare-list summary { cursor: pointer; overflow-wrap: anywhere; }
 tr.row-conflict > td:first-child { border-left: 3px solid var(--warn); }
 .badge.badge-warn { background: var(--warning-soft); color: var(--text); }
 .publish-buttons .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
@@ -770,3 +775,9 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .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; }
+/* (sprint 59) Page Designer: the help pane under the properties */
+.pe-help { border-top: 1px solid var(--border); margin-top: 0.75rem; padding: 0.5rem 0.75rem; }
+.pe-help summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
+.pe-help-body { padding-top: 0.4rem; overflow-wrap: anywhere; }
+.pe-help-body h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
+.pe-help-body p { margin: 0 0 0.4rem; }

package/public/builder.js

@@ -809,3 +809,53 @@ document.addEventListener('click', async (e) => {
     buttons.forEach((b) => (b.disabled = false));
   }
 });
+
+// (sprint 59) The Page Designer's help pane (APEX: the Help tab of the property editor): the property
+// that has the focus, its help, the column it is stored in and the guide section of the component type.
+(() => {
+  const pane = document.querySelector('[data-pe-help]');
+  if (!pane) return;
+  const guide = pane.closest('.pe-help')?.dataset.guide;
+  let current = null;
+  const show = (field) => {
+    if (!field || field === current) return;
+    current = field;
+    const label = (field.querySelector('label.label, label.check, .label')?.textContent || field.dataset.prop).trim();
+    const help = field.querySelector('.help');
+    pane.replaceChildren();
+    const h = document.createElement('h3');
+    h.textContent = label;
+    pane.append(h);
+    if (help) {
+      const p = document.createElement('p');
+      // the help is the server's own (escaped) markup: copy its nodes, links included
+      p.append(...[...help.childNodes].map((n) => n.cloneNode(true)));
+      pane.append(p);
+    } else {
+      const p = document.createElement('p');
+      p.className = 'muted';
+      p.textContent = 'This property has no help of its own: see the guide.';
+      pane.append(p);
+    }
+    const meta = document.createElement('p');
+    meta.className = 'small muted';
+    const code = document.createElement('code');
+    code.textContent = field.dataset.prop;
+    meta.append('Stored as ', code, ' (in exports and application files).');
+    pane.append(meta);
+    if (guide) {
+      const a = document.createElement('a');
+      a.href = guide;
+      a.target = '_blank';
+      a.rel = 'noopener';
+      a.textContent = 'This component in the guide ▸';
+      pane.append(a);
+    }
+  };
+  document.addEventListener('focusin', (e) => show(e.target.closest?.('.pe [data-prop]')));
+  document.addEventListener('pointerover', (e) => {
+    // pointing at a property shows its help too, unless another one has the focus
+    if (document.activeElement?.closest?.('.pe [data-prop]')) return;
+    show(e.target.closest?.('.pe [data-prop]'));
+  });
+})();

package/public/code-editor.css

@@ -4,7 +4,7 @@
 :root {
   --ce-bg: #fbfcfd;
   --ce-gutter: #f1f3f6;
-  --ce-gutter-text: #8a94a3;
+  --ce-gutter-text: #5d6876;
   --ce-text: #1b2330;
   --ce-kw: #8b2bb9;
   --ce-type: #0b6e8a;
@@ -26,7 +26,7 @@
   :root:not([data-theme="light"]) {
     --ce-bg: #12161d;
     --ce-gutter: #171c24;
-    --ce-gutter-text: #6c7686;
+    --ce-gutter-text: #8f99a8;
     --ce-text: #e3e7ed;
     --ce-kw: #d39bff;
     --ce-type: #5fd0e6;
@@ -46,7 +46,7 @@
 :root[data-theme="dark"] {
   --ce-bg: #12161d;
   --ce-gutter: #171c24;
-  --ce-gutter-text: #6c7686;
+  --ce-gutter-text: #8f99a8;
   --ce-text: #e3e7ed;
   --ce-kw: #d39bff;
   --ce-type: #5fd0e6;

package/public/sw.js

@@ -1,5 +1,6 @@
 // pgkiln service worker for one application (served as /a/<alias>/sw.js with PGKILN = {base, offlinePages, offlineSubmit, version}).
-//   static files (app.css, app.js, icons) and the offline page: cached at install, served from the cache
+//   static files (app.css, app.js, icons) and the offline page: cached at install, served from the cache by their
+//   exact URL; pages ask for them with ?v=<version> (static-version.ts), so a changed file is fetched anew
 //   pages (navigations): network first; offline, the cached copy (only when the app keeps pages) or the offline page
 //   signing in or out empties the page cache, so the next person on the device doesn't see them
 //   push notifications (migration 074): shown as they arrive, a click opens their page of the app;
@@ -7,7 +8,7 @@
 /* global PGKILN */
 const STATIC = `pgkiln-static-${PGKILN.version}`;
 const PAGES = `pgkiln-pages-${PGKILN.base}`;
-const SHELL = ['/static/app.css', '/static/app.js', '/static/icons.svg', `${PGKILN.base}/offline`];
+const SHELL = [...['app.css', 'app.js', 'icons.svg'].map((f) => `/static/${f}?v=${PGKILN.version}`), `${PGKILN.base}/offline`];
 
 self.addEventListener('install', (event) => {
   event.waitUntil(caches.open(STATIC).then((c) => c.addAll(SHELL)).then(() => self.skipWaiting()));
@@ -39,7 +40,8 @@ self.addEventListener('fetch', (event) => {
   if (req.method !== 'GET') return;
 
   if (url.pathname.startsWith('/static/')) {
-    event.respondWith(caches.match(req, { ignoreSearch: true }).then((hit) => hit || fetch(req)));
+    // the exact URL: another ?v= (a changed file) is not the cached copy
+    event.respondWith(caches.match(req, { cacheName: STATIC }).then((hit) => hit || fetch(req)));
     return;
   }
 

package/src/app.ts

@@ -7,6 +7,7 @@ import fastifyStatic from '@fastify/static';
 import Fastify from 'fastify';
 import { apiRoutes } from './builder/api.ts';
 import { globalizationRoutes } from './builder/globalization.ts';
+import { loginPageRoutes } from './builder/login-page.ts';
 import { designerRoutes } from './builder/designer.ts';
 import { lockRoutes } from './builder/locks.ts';
 import { supportingRoutes } from './builder/supporting.ts';
@@ -186,6 +187,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(oauthRoutes);
   await app.register(apiRoutes);
   await app.register(globalizationRoutes);
+  await app.register(loginPageRoutes);
   await app.register(codeEditorRoutes);
   await app.register(dataReporterRoutes);
   await app.register(reporterBuilderRoutes);

package/src/appfiles.ts

@@ -190,6 +190,7 @@ const NAMED: [section: string, dir: string, table: string][] = [
   ['email_templates', 'shared/email-templates', 'email_template'],
   // (086) application settings
   ['app_settings', 'shared/app-settings', 'app_setting'],
+  ['page_groups', 'shared/page-groups', 'page_group'],
 ];
 
 /** Components of a page: [array in the document, directory, table, key source]. */

package/src/builder/advisor.ts

@@ -173,6 +173,20 @@ export async function advise(appId: number, tx?: pg.ClientBase): Promise<{ findi
     ).rows.map((row) => ({ kind, row }));
   const all = (await Promise.all(Object.entries(COMPONENTS).map(([kind, spec]) => rowsOf(kind, spec.table, spec.scope)))).flat();
 
+  // metadata checks, as the owner (before the role switch below: the application's role can't read meta)
+  // (087) the application's login page: a page that needs no sign-in, with a login region
+  if (app.login_page) {
+    const page = await one('select id, requires_auth from meta.page where app_id = $1 and page_no = $2', [appId, app.login_page]);
+    const field = 'Application settings → Login page';
+    if (!page) findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} doesn't exist: the built-in sign-in page is shown instead.` });
+    else if (page.requires_auth) findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} requires authentication: the built-in sign-in page is shown instead.` });
+    else if (!all.some((x) => x.kind === 'region' && x.row.type === 'login' && Number(x.row.page_no) === Number(app.login_page)))
+      findings.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} has no Login region: nobody can sign in.` });
+  }
+  // (089) a page's group exists
+  for (const p of (await query(`select p.page_no, p.page_group from meta.page p where p.app_id = $1 and p.page_group is not null
+                                   and not exists (select 1 from meta.page_group g where g.app_id = p.app_id and g.name = p.page_group) order by 1`, [appId])).rows)
+    findings.push({ severity: 'warning', entry: null, field: `Page ${p.page_no} → Page group`, message: `Page group ${p.page_group} doesn't exist (Shared Components → Page groups).` });
   // ---- SQL, as the application's role, rolled back (a savepoint in the caller's transaction)
   const c = (tx ?? (await owner.pool.connect())) as pg.PoolClient;
   try {

package/src/builder/components.ts

@@ -104,7 +104,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'title', label: 'Title', kind: 'text', group: 'Identification' },
       { name: 'static_id', label: 'Static ID', kind: 'text', group: 'Identification',
         help: 'Optional, unique on the page: lower case letters, digits, _ and -, starting with a letter. Names the region in exported files (so renaming it keeps them) and is data-static-id on the page, for CSS and JavaScript.' },
-      { name: 'type', label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
+      { name: 'type', label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
       { name: 'source', label: 'Source', kind: 'code', wide: true, group: 'Source',
         help: 'report/grid: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
       { name: 'rest_source', label: 'REST data source', kind: 'rest_source', group: 'Source',
@@ -114,7 +114,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'pk_item', label: 'Primary key item (form)', kind: 'upper', group: 'Source' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
       { name: 'columns', label: 'Column span (1-12)', kind: 'int', group: 'Layout' },
-      { name: 'template', label: 'Template', kind: 'select', options: ['standard', 'plain', 'collapsible'], group: 'Layout' },
+      { name: 'template', label: 'Template', kind: 'select', options: ['standard', 'plain', 'collapsible', 'hero', 'title_bar', 'buttons_container', 'inline_dialog', 'inline_drawer', 'wizard'], group: 'Layout', help: 'hero: a large banner (title, text, {"icon":"…"} in the attributes, buttons). title_bar: title and buttons on one line. buttons_container: the buttons only. inline_dialog, inline_drawer: hidden until a dynamic action Open region (or a link to #R<id>) opens it over the page. wizard: a narrow card for one step (a list region with template wizard_progress shows the steps).' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: REGION_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the region (APEX: Template Options). "Hide the header" applies to the standard template.' },
       { name: 'condition', label: 'Server-side condition (SQL)', kind: 'code', group: 'Security', help: 'Boolean expression; the region renders only when true.' },
@@ -448,6 +448,19 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       buildOption(),
     ],
   },
+  page_group: {
+    table: 'meta.page_group',
+    scope: 'app',
+    label: 'Page group',
+    plural: 'Page groups',
+    icon: 'layers',
+    summary: (o) => o.name,
+    defaults: {},
+    fields: [
+      { name: 'name', label: 'Name', kind: 'text', help: 'e.g. Administration. Pages join it in their Page group property; renaming the group renames it on its pages.' },
+      { name: 'description', label: 'Description', kind: 'text', wide: true },
+    ],
+  },
   build_option: {
     table: 'meta.build_option',
     scope: 'app',

package/src/builder/ddl-tools.ts

@@ -0,0 +1,114 @@
+import type { FastifyInstance } from 'fastify';
+import { unifiedDiff } from '../cli/diff.ts';
+import { owner } from '../db.ts';
+import { changeScript, compare, ddlScript, OBJECT_TYPES, pick, readSchema, userSchemas, type Difference } from '../ddl.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { clientIp, logActivity } from '../session.ts';
+import { BASE, developer, region, send, shell, workshopTabs, type Req } from './ui.ts';
+
+// SQL Workshop → Generate DDL and Schema Comparison (APEX: SQL Workshop →
+// Utilities). Both only read the catalog (src/ddl.ts); the scripts they
+// write are shown and downloaded, never run.
+
+const TYPE_LABELS: Record<(typeof OBJECT_TYPES)[number], string> = {
+  types: 'Types and domains', sequences: 'Sequences', tables: 'Tables (constraints, indexes)', views: 'Views and materialized views',
+  functions: 'Functions and procedures', triggers: 'Triggers', policies: 'Row level security and policies',
+};
+const STATE_LABELS: Record<Difference['state'], string> = { source: 'Only in the source', target: 'Only in the target', different: 'Different' };
+
+const many = (v: unknown) => ([] as string[]).concat((v as string | string[] | undefined) ?? []);
+const schemaSelect = (name: string, label: string, schemas: string[], current: string) =>
+  html`<div class="field"><label class="label" for="f_${name}">${label}</label>
+    <select id="f_${name}" name="${name}" required><option value="">- choose a schema -</option>${schemas.map((x) => html`<option value="${x}"${x === current ? raw(' selected') : ''}>${x}</option>`)}</select></div>`;
+
+/** A unified diff with added and removed lines marked. */
+const diffBlock = (d: Difference, source: string, target: string) => {
+  const text = unifiedDiff(d.name, Buffer.from(`${d.target ?? ''}\n`), Buffer.from(`${d.source ?? ''}\n`), [target, source]);
+  return html`<pre class="diff">${text.trimEnd().split('\n').map((l, i) => html`${i ? '\n' : ''}<span class="${l.startsWith('+') && !l.startsWith('+++') ? 'diff-add' : l.startsWith('-') && !l.startsWith('---') ? 'diff-del' : null}">${l}</span>`)}</pre>`;
+};
+
+export async function ddlToolRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/sql/ddl`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const schemas = await userSchemas(owner);
+    const q = req.query ?? {};
+    const schema = schemas.includes(q.schema ?? '') ? q.schema! : '';
+    // the first visit: every type, comments and grants
+    const fresh = !q.schema;
+    const types = new Set(fresh ? OBJECT_TYPES : many(q.t).filter((x) => (OBJECT_TYPES as readonly string[]).includes(x)));
+    const opts = { comments: fresh || q.comments === '1', grants: fresh || q.grants === '1' };
+    let result: Raw | '' = '';
+    if (schema) {
+      try {
+        const objects = pick(await readSchema(owner.pool, schema), types, opts);
+        const script = ddlScript(schema, objects);
+        await logActivity({ username: s.username, event: 'generate_ddl', ip: clientIp(req), detail: `${schema}: ${objects.length} objects` });
+        if (q.download === '1')
+          return reply.header('content-disposition', `attachment; filename="${schema}.sql"`).type('application/sql; charset=utf-8').send(script);
+        const qs = new URLSearchParams([['schema', schema], ...[...types].map((x) => ['t', x]), ...(opts.comments ? [['comments', '1']] : []), ...(opts.grants ? [['grants', '1']] : []), ['download', '1']]);
+        result = region(`DDL of ${schema}`, html`<p class="muted">${objects.length} object(s). Review the script before you run it (SQL Workshop → SQL Scripts).</p>
+          <textarea class="code" rows="24" spellcheck="false" readonly aria-label="DDL of ${schema}" data-code="plpgsql">${script}</textarea>`,
+          html`<a class="btn" href="${BASE}/sql/ddl?${qs.toString()}">${icon('download')} Download ${schema}.sql</a>`);
+      } catch (e) {
+        result = html`<div class="alert alert-error" role="alert">${(e as Error).message}</div>`;
+      }
+    }
+    const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('ddl')}
+      <p class="muted">The DDL of a schema's objects, from the database catalog, in an order that runs: types, sequences, tables, functions, views, constraints, indexes, triggers, row level security, comments and grants (APEX: Generate DDL). Objects of extensions are left out.</p>
+      <form method="get" class="u-mb1">
+        <div class="form-grid">${schemaSelect('schema', 'Schema', schemas, schema)}</div>
+        <fieldset class="prop-group"><legend>Objects</legend><div class="form-grid">
+          ${OBJECT_TYPES.map((x) => html`<label class="check"><input type="checkbox" name="t" value="${x}"${types.has(x) ? raw(' checked') : ''}> ${TYPE_LABELS[x]}</label>`)}
+          <label class="check"><input type="checkbox" name="comments" value="1"${opts.comments ? raw(' checked') : ''}> Comments</label>
+          <label class="check"><input type="checkbox" name="grants" value="1"${opts.grants ? raw(' checked') : ''}> Grants</label>
+        </div></fieldset>
+        <div class="buttons"><button class="btn btn-hot">${icon('code')} Generate</button></div>
+      </form>
+      ${result}`;
+    return send(reply, s, shell(s, 'Generate DDL', [['SQL Workshop', `${BASE}/sql`], ['Generate DDL']], main, 'sql'));
+  });
+
+  app.get(`${BASE}/sql/compare`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const schemas = await userSchemas(owner);
+    const q = req.query ?? {};
+    const source = schemas.includes(q.source ?? '') ? q.source! : '';
+    const target = schemas.includes(q.target ?? '') ? q.target! : '';
+    let result: Raw | '' = '';
+    if (source && target && source === target) result = html`<div class="alert alert-error" role="alert">Choose two different schemas.</div>`;
+    else if (source && target) {
+      try {
+        const [a, b] = await Promise.all([readSchema(owner.pool, source), readSchema(owner.pool, target)]);
+        const { differences, same } = compare(a, b);
+        const script = changeScript(source, target, a, b);
+        await logActivity({ username: s.username, event: 'schema_compare', ip: clientIp(req), detail: `${source} → ${target}: ${differences.length} differences` });
+        if (q.download === '1')
+          return reply.header('content-disposition', `attachment; filename="${target}-like-${source}.sql"`).type('application/sql; charset=utf-8').send(script);
+        const groups = (['source', 'target', 'different'] as const).map((st) => [st, differences.filter((d) => d.state === st)] as const).filter(([, list]) => list.length);
+        result = html`${region('Summary', html`<p>${differences.length
+            ? `${differences.length} difference(s): ${groups.map(([st, list]) => `${list.length} ${STATE_LABELS[st].toLowerCase()}`).join(', ')}; ${same} object(s) the same.`
+            : `The schemas are the same (${same} objects).`}</p>`)}
+          ${groups.map(([st, list]) => html`<div class="u-spacer"></div>${region(`${STATE_LABELS[st]} (${st === 'source' ? source : st === 'target' ? target : `${source} and ${target}`})`,
+            html`<ul class="compare-list">${list.map((d) => html`<li><details><summary><span class="tag">${d.kind}</span> ${d.name}</summary>
+              ${st === 'different' ? diffBlock(d, source, target) : html`<pre class="diff">${d.source ?? d.target}</pre>`}</details></li>`)}</ul>`)}`)}
+          <div class="u-spacer"></div>
+          ${region(`Change script: make ${target} like ${source}`, html`<p class="muted">Creates what only ${source} has, changes what differs, and lists what only ${target} has as commented-out drops; columns that change identity or generation, and types, domains and sequences that differ, are left for review. Nothing is run here.</p>
+            <textarea class="code" rows="20" spellcheck="false" readonly aria-label="Change script" data-code="plpgsql">${script}</textarea>`,
+            html`<a class="btn" href="${BASE}/sql/compare?${new URLSearchParams({ source, target, download: '1' }).toString()}">${icon('download')} Download</a>`)}`;
+      } catch (e) {
+        result = html`<div class="alert alert-error" role="alert">${(e as Error).message}</div>`;
+      }
+    }
+    const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('compare')}
+      <p class="muted">Compares the objects of two schemas of this database by their DDL (APEX: Schema Comparison), e.g. a development copy with the schema it came from, and writes a script that makes the target like the source. The order of a table's columns is not compared.</p>
+      <form method="get" class="u-mb1">
+        <div class="form-grid">${schemaSelect('source', 'Source', schemas, source)}${schemaSelect('target', 'Target (to make like the source)', schemas, target)}</div>
+        <div class="buttons"><button class="btn btn-hot">${icon('layers')} Compare</button></div>
+      </form>
+      ${result}`;
+    return send(reply, s, shell(s, 'Schema Comparison', [['SQL Workshop', `${BASE}/sql`], ['Schema Comparison']], main, 'sql'));
+  });
+}