pgkiln 0.35.0 → 0.36.0

package/src/builder/designer.ts

@@ -5,6 +5,7 @@ import { icon } from '../icons.ts';
 import { COMPONENTS } from './components.ts';
 import { back, BASE, bicon, csrf, developer, flash, input, select, send, shell, type Req } from './ui.ts';
 import { buildOptionChoices, componentForm, lookups, saveComponent } from './forms.ts';
+import { regionConfigHelp } from './region-help.ts';
 import { parseIncludes } from './static-files.ts';
 import { regionSettingsForm } from './region-settings.ts';
 import { usedInPanel } from './search.ts';
@@ -301,6 +302,8 @@ export async function designerRoutes(app: FastifyInstance) {
           </div></fieldset>
           <fieldset class="prop-group"><legend>Appearance</legend><div class="form-grid">
             ${select('mode', 'Page mode', p.mode, [['normal', 'Normal'], ['modal', 'Modal dialog']])}
+            ${select('page_group', 'Page group', p.page_group ?? '', [['', '- none -'], ...lk.pageGroups.map((g): [string, string] => [g, g]), ...(p.page_group && !lk.pageGroups.includes(p.page_group) ? [[p.page_group, `${p.page_group} (no such group)`] as [string, string]] : [])], 'Organises the pages in the App Builder (Shared Components → Page groups). Changes nothing when the application runs.')}
+            ${select('page_template', 'Page template', p.page_template ?? 'standard', [['standard', 'Standard'], ['minimal', 'Minimal (no navigation)']], 'Minimal: no header and navigation menu, e.g. for a login page (Application settings → Login page).')}
             ${select('dialog_position', 'Dialog position', p.dialog_position ?? 'center', [['center', 'Centred dialog'], ['right', 'Drawer from the right'], ['left', 'Drawer from the left'], ['top', 'Drawer from the top'], ['bottom', 'Drawer from the bottom']], 'Modal pages only. On phones dialogs and side drawers fill the screen.')}
             ${select('dialog_size', 'Dialog size', p.dialog_size ?? 'medium', [['small', 'Small'], ['medium', 'Medium'], ['large', 'Large']], 'The width (the height of top and bottom drawers).')}
             ${input('static_includes', 'JavaScript and CSS files', (p.static_includes ?? []).join(', '), { placeholder: 'e.g. page-3.js, page-3.css', help: 'Static application files (.js, .css) this page loads after the application\'s own, in this order.' })}
@@ -322,12 +325,24 @@ export async function designerRoutes(app: FastifyInstance) {
         <form method="post" action="${BASE}/pages/${p.id}/delete" class="danger-zone">${csrf(s)}
           <button class="btn btn-sm btn-danger" data-confirm="Delete page ${p.page_no} and all its components?">Delete page</button></form>`;
     }
+    // (sprint 59) the help pane: the guide section of the selected component's type
+    const guide = (() => {
+      const GUIDE = 'https://pgkiln.vargar.eu/docs';
+      const k = newKind || kind;
+      if (k === 'region') return regionConfigHelp((newKind ? req.query.type : rows.region.find((r: any) => String(r.id) === cid)?.type) ?? null).url ?? `${GUIDE}/pages-and-regions#region-types`;
+      return ({ item: `${GUIDE}/items`, button: `${GUIDE}/processing#buttons`, dynamic_action: `${GUIDE}/dynamic-actions`, validation: `${GUIDE}/processing#validations`,
+        process: `${GUIDE}/processing#processes`, computation: `${GUIDE}/processing#computations`, branch: `${GUIDE}/processing#branches` } as Record<string, string>)[k] ?? `${GUIDE}/pages-and-regions`;
+    })();
     const right = html`
       <div class="pe-head"><div class="pe-title">${heading}</div>
         <div class="pe-filter-row" hidden><label class="sr-only" for="pe-filter">Filter properties</label>${icon('filter')}<input id="pe-filter" class="pe-filter" type="search" placeholder="Filter" autocomplete="off"></div>
       </div>
       ${arrange}
-      <div class="pe">${props}</div>`;
+      <div class="pe">${props}</div>
+      <details class="pe-help" open${guide ? raw(` data-guide="${guide}"`) : ''}>
+        <summary>${icon('help')} Help</summary>
+        <div class="pe-help-body" aria-live="polite" data-pe-help><p class="muted">Select a property to see its help here.</p></div>
+      </details>`;
 
     // ------------------------------------------------------------ toolbar
     const idx = pages.findIndex((x) => x.id === p.id);
@@ -380,6 +395,17 @@ export async function designerRoutes(app: FastifyInstance) {
     return send(reply, s, shell(s, `Page ${p.page_no}`, [['App Builder', BASE], [p.app_name, `${BASE}/apps/${p.app_id}`], [`Page ${p.page_no}: ${p.name}`]], main, 'apps', { toolbar, full: true }));
   });
 
+  // (sprint 59) Quick edit from the developer toolbar: an item or button of the page by its name
+  app.get(`${BASE}/pages/:pid/quick`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    if (!/^\d{1,9}$/.test(req.params.pid)) return reply.code(404).send('Not found');
+    const q = req.query ?? {};
+    const [kind, table, name] = q.item ? ['item', 'meta.item', String(q.item).toUpperCase()] : q.button ? ['button', 'meta.button', String(q.button).toUpperCase()] : [null, null, null];
+    const row = kind ? await owner.one(`select id from ${table} where page_id = $1 and name = $2 order by id limit 1`, [req.params.pid, name]) : null;
+    return reply.redirect(`${BASE}/pages/${req.params.pid}${row ? `?c=${kind}-${row.id}` : ''}`);
+  });
+
   app.post(`${BASE}/pages/:pid`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
@@ -388,9 +414,9 @@ export async function designerRoutes(app: FastifyInstance) {
       const before = await owner.one('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
       await owner.query(
         `update meta.page set page_no = $2, name = $3, title = $4, requires_auth = $5, mode = $6, parent_page = $7, authz = $8, protection = $9, build_option = $10,
-                dialog_position = $11, dialog_size = $12, static_includes = $13, warn_unsaved = $14 where id = $1`,
+                dialog_position = $11, dialog_size = $12, static_includes = $13, warn_unsaved = $14, page_template = $15, page_group = $16 where id = $1`,
         [req.params.pid, Number(b.page_no), b.name?.trim(), b.title?.trim() || null, b.requires_auth === 'true', b.mode, b.parent_page ? Number(b.parent_page) : null, b.authz || null, b.protection, b.build_option?.trim().toUpperCase() || null,
-         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true'],
+         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true', b.page_template === 'minimal' ? 'minimal' : 'standard', b.page_group?.trim() || null],
       );
       // the page's lock and comments follow a new page number
       if (before && before.page_no !== Number(b.page_no))

package/src/builder/forms.ts

@@ -19,10 +19,11 @@ export interface Lookups {
   lists: string[];
   listEntries: { id: number; list_name: string; label: string }[];
   automations: string[];
+  pageGroups: string[];
 }
 
 export async function lookups(appId: number, pageId?: number): Promise<Lookups> {
-  const [regions, pages, authz, nav, buildOptions, rest, lists, listEntries, automations] = await Promise.all([
+  const [regions, pages, authz, nav, buildOptions, rest, lists, listEntries, automations, pageGroups] = await Promise.all([
     pageId ? owner.query('select id, title, type from meta.region where page_id = $1 order by seq, id', [pageId]) : Promise.resolve({ rows: [] }),
     owner.query('select page_no, name from meta.page where app_id = $1 order by page_no', [appId]),
     owner.query('select name from meta.authz_scheme where app_id = $1 order by name', [appId]),
@@ -32,8 +33,9 @@ export async function lookups(appId: number, pageId?: number): Promise<Lookups>
     owner.query('select name from meta.list where app_id = $1 order by name', [appId]),
     owner.query('select id, list_name, label from meta.list_entry where app_id = $1 order by list_name, seq, id', [appId]),
     owner.query('select name from meta.automation where app_id = $1 order by name', [appId]),
+    owner.query('select name from meta.page_group where app_id = $1 order by name', [appId]),
   ]);
-  return { regions: regions.rows, pages: pages.rows, authz: authz.rows.map((r) => r.name), nav: nav.rows, buildOptions: buildOptions.rows, restSources: rest.rows.map((r) => r.name), lists: lists.rows.map((r) => r.name), listEntries: listEntries.rows, automations: automations.rows.map((r) => r.name) };
+  return { regions: regions.rows, pages: pages.rows, authz: authz.rows.map((r) => r.name), nav: nav.rows, buildOptions: buildOptions.rows, restSources: rest.rows.map((r) => r.name), lists: lists.rows.map((r) => r.name), listEntries: listEntries.rows, automations: automations.rows.map((r) => r.name), pageGroups: pageGroups.rows.map((r) => r.name) };
 }
 
 /** Choices of a build option field: each option and its negation, plus a missing current value. */
@@ -84,7 +86,7 @@ export function componentForm(spec: ComponentSpec, kind: string, row: any, lk: L
       html`<select id="${id}" name="${f.name}">${list.map(([val, label]) => html`<option value="${val}"${String(v ?? '') === val ? raw(' selected') : ''}>${label}</option>`)}</select>`;
     switch (f.kind) {
       case 'bool':
-        return html`<div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="${f.name}" value="true"${v ? raw(' checked') : ''}> ${f.label}</label>${help}</div>`;
+        return html`<div class="field" data-prop="${f.name}"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="${f.name}" value="true"${v ? raw(' checked') : ''}> ${f.label}</label>${help}</div>`;
       case 'options': {
         const chosen: unknown[] = Array.isArray(v) ? v : [];
         return html`<fieldset class="field options-field"${f.wide ? raw(' data-wide') : ''}><legend class="label">${f.label}</legend>
@@ -159,7 +161,7 @@ export function componentForm(spec: ComponentSpec, kind: string, row: any, lk: L
       default:
         control = html`<input id="${id}" name="${f.name}" type="${f.kind === 'int' ? 'number' : 'text'}" value="${v ?? ''}">`;
     }
-    return html`<div class="field"${f.wide ? raw(' data-wide') : ''}><label class="label" for="${id}">${f.label}</label>${control}${help}</div>`;
+    return html`<div class="field" data-prop="${f.name}"${f.wide ? raw(' data-wide') : ''}><label class="label" for="${id}">${f.label}</label>${control}${help}</div>`;
   };
   const groups = [...new Set(spec.fields.map((f) => f.group ?? ''))];
   return html`<form method="post" action="${action}" class="component-form"${opts.id ? html` id="${opts.id}"` : ''}>

package/src/builder/login-page.ts

@@ -0,0 +1,82 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw } from '../html.ts';
+import { back, BASE, developer, flash, type Req } from './ui.ts';
+
+// Application settings → Sign-in methods (migration 087): the application's
+// own login page (APEX: the login page, usually 9999) and "Forgot password?".
+// "Create login page" adds a minimal public page with a login region and
+// makes it the login page.
+
+interface AppRow {
+  id: number;
+  name: string;
+  authentication: string;
+  local_login: boolean;
+  login_page: number | null;
+  password_reset: boolean;
+}
+
+/** The fields in the settings form. */
+export async function loginSettingsFields(a: AppRow) {
+  const pages = (await owner.query<{ page_no: number; name: string; requires_auth: boolean }>(
+    'select page_no, name, requires_auth from meta.page where app_id = $1 order by page_no', [a.id],
+  )).rows;
+  const mail = await owner.one<{ service: string | null; enabled: boolean | null; from_address: string | null }>(
+    `select s.name as service, s.enabled, ams.from_address
+       from meta.app_mail_service ams join meta.mail_service s on s.id = ams.service_id where ams.app_id = $1`, [a.id],
+  );
+  const mailOk = !!(mail?.enabled && mail.from_address?.trim());
+  const opt = (v: string, label: string, cur: string) => html`<option value="${v}"${v === cur ? raw(' selected') : ''}>${label}</option>`;
+  const current = a.login_page ? String(a.login_page) : '';
+  return html`<div class="form-grid">
+      <div class="field"><label class="label" for="f_login_page">Login page</label>
+        <select id="f_login_page" name="login_page">${opt('', '- the built-in sign-in page -', current)}${pages.map((p) =>
+          opt(String(p.page_no), `${p.page_no} ${p.name}${p.requires_auth ? ' (requires sign-in: not usable)' : ''}`, current))}</select>
+        <small class="help">A page of the application with a <em>Login</em> region replaces the built-in sign-in page (APEX: the login page). It must not require authentication; with page template <em>Minimal</em> it has no header and navigation.
+          <button class="link-button" formaction="${BASE}/apps/${a.id}/login-page">Create a login page</button></small></div>
+      <div class="field"><span class="label" aria-hidden="true"></span><label class="check"><input type="checkbox" name="password_reset" value="true"${a.password_reset ? raw(' checked') : ''}> Offer "Forgot password?"</label>
+        <small class="help">Users with a password and an e-mail address in the user directory get a link to choose a new password (single-use, valid for 30 minutes).
+          ${mailOk
+            ? html`Sent through mail service ${mail!.service} as ${mail!.from_address}.`
+            : html`<strong>Not offered yet:</strong> the application needs an enabled mail service with a From address (Workspace utilities → Mail services).`}
+          Only for the user directory's own passwords: not for LDAP, single sign-on, database accounts or custom authentication.</small></div>
+    </div>`;
+}
+
+/** Save them (with the rest of the settings form). */
+export async function saveLoginSettings(appId: string, b: Record<string, string | undefined>) {
+  const page = b.login_page?.trim() ? Number(b.login_page) : null;
+  if (page !== null && !(await owner.one('select 1 from meta.page where app_id = $1 and page_no = $2', [appId, page]))) throw new Error(`Login page: there is no page ${b.login_page}.`);
+  await owner.query('update meta.app set login_page = $2, password_reset = $3 where id = $1', [appId, page, b.password_reset === 'true']);
+}
+
+export async function loginPageRoutes(app: FastifyInstance) {
+  // Create a login page: page 9999 (or the next free number), public, minimal, with a login region
+  app.post(`${BASE}/apps/:id/login-page`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await owner.one<{ id: number; name: string }>('select id, name from meta.app where id = $1', [req.params.id]);
+    if (!a) return reply.code(404).send('Not found');
+    try {
+      const { page, no } = await owner.tx(async (c) => {
+        const n = (await c.query<{ n: number }>(
+          `select case when not exists (select 1 from meta.page where app_id = $1 and page_no = 9999) then 9999
+                       else (select max(page_no) + 1 from meta.page where app_id = $1) end as n`, [a.id],
+        )).rows[0].n;
+        const id = (await c.query<{ id: number }>(
+          `insert into meta.page (app_id, page_no, name, title, requires_auth, page_template) values ($1, $2, 'Login', $3, false, 'minimal') returning id`,
+          [a.id, n, a.name],
+        )).rows[0].id;
+        await c.query(`insert into meta.region (page_id, seq, title, type, template) values ($1, 10, $2, 'login', 'standard')`, [id, a.name]);
+        await c.query('update meta.app set login_page = $2, updated_at = now() where id = $1', [a.id, n]);
+        return { page: id, no: n };
+      });
+      flash(s, `Page ${no} "Login" created and made the login page. Add regions around the sign-in form in the Page Designer.`);
+      return back(reply, s, `${BASE}/pages/${page}`);
+    } catch (e) {
+      flash(s, (e as Error).message, 'error');
+      return back(reply, s, `${BASE}/apps/${req.params.id}/settings`);
+    }
+  });
+}

package/src/builder/region-help.ts

@@ -12,7 +12,7 @@ export const REGION_CONFIG_HELP: [string[], string][] = [
   [['chart'], '{"kind":"bar"|"column"|"line"|"area"|"donut","max_rows":1000,"format_mask":"FML999G990"}'],
   [['cards'], '{"style":"metric","link":{...},"max_rows":500}'],
   [['dynamic'], '{"max_rows":1000}'],
-  [['grid'], '{"page_size":25,"allow":{"insert":true,"update":true,"delete":true},"readonly":["col"],"columns":{"deptno":{"lov":"LOV:DEPARTMENTS","required":true}},"aggregates":{"sal":["sum","avg"]},"layout":{"order":["col"],"hidden":["col"],"widths":{"col":160},"frozen":1},"row_actions":{"edit":{"page":3,"items":{"P3_ID":"#id#"}},"duplicate":true,"delete":true,"links":[{"label":"…","page":4,"items":{}}]},"select_row":{"column":"id","item":"P1_ID"} (a master),"master":{"item":"P1_ID","column":"parent_id"} (a detail; any region type),"actions":true,"saved_reports":true,"public_reports":"SCHEME"}'],
+  [['grid'], '{"page_size":25,"allow":{"insert":true,"update":true,"delete":true},"readonly":["col"],"columns":{"deptno":{"lov":"LOV:DEPARTMENTS","required":true}},"aggregates":{"sal":["sum","avg"]},"layout":{"order":["col"],"hidden":["col"],"widths":{"col":160},"frozen":1},"row_actions":{"edit":{"page":3,"items":{"P3_ID":"#id#"}},"duplicate":true,"delete":true,"links":[{"label":"…","page":4,"items":{}}]},"select_row":{"column":"id","item":"P1_ID"} (a master),"master":{"item":"P1_ID","column":"parent_id"} (a detail; any region type),"actions":true,"saved_reports":true,"public_reports":"SCHEME","views":["row","group","chart"] (views besides the grid; left out: all three)}'],
   [['calendar'], '{"link":{...}}'],
   [['facets'], '{"report":<region id>,"search":true,"facets":[{"column":"job","label":"Job","exclude":true},{"column":"sal","type":"range","ranges":[{"to":1000},{"from":1000}],"custom":true},{"column":"rating","type":"star","max":5}]}'],
   [['smart_filters'], '{"report":<region id>,"suggestions":3,"placeholder":"…","facets":[…as facets]}'],
@@ -25,6 +25,7 @@ export const REGION_CONFIG_HELP: [string[], string][] = [
   [['report'], '{"ai_filter":{"service":"NAME"}} adds an "Ask in your own words" box (natural-language filters)'],
   [['plugin'], '{"plugin":"name","attributes":{"NAME":"value"}} (a region plug-in; a Source SELECT feeds its template)'],
   [['form'], '{"lost_update":false} saves without checking that the row is unchanged since it was shown'],
+  [['login'], '(no attributes) the sign-in form of the application\'s login page (Application settings → Login page): providers, user name and password, "Keep me signed in", "Forgot password?"'],
   [['url'], '{"height":480,"sandbox":["allow-scripts","allow-forms","allow-popups","allow-same-origin"] (the default; false: no sandbox),"fullscreen":true}'],
   [['search'], '{"configs":["CUSTOMERS","ORDERS"] (Shared Components → Search configurations; empty: all),"item":"P1_SEARCH" (search with this item\'s value instead of a field of its own),"placeholder":"…","min_length":2,"empty":"No results"}'],
 ];
@@ -53,6 +54,7 @@ const ANCHORS: Record<string, string> = {
   plugin: 'plug-ins-with-their-own-code',
   tasks: 'approvals-and-the-task-list',
   workflows: 'workflows',
+  login: 'the-login-page',
 };
 
 /** The help of every type (a region whose type isn't known yet). */
@@ -63,7 +65,7 @@ export function regionConfigHelp(type: string | null | undefined): { text: strin
   if (!type) return { text: ALL_REGION_CONFIG_HELP, url: null };
   const own = REGION_CONFIG_HELP.filter(([types]) => types.includes(type)).map(([, text]) => text);
   const any = REGION_CONFIG_HELP.filter(([types]) => types.includes('*')).map(([, text]) => `any region: ${text}`);
-  const chapter = type === 'tasks' || type === 'workflows' ? 'processing' : 'pages-and-regions';
+  const chapter = type === 'tasks' || type === 'workflows' ? 'processing' : type === 'login' ? 'security' : 'pages-and-regions';
   return {
     text: [...own, ...any].join(' · ') || 'No attributes of its own.',
     url: ANCHORS[type] ? `${GUIDE}/${chapter}#${ANCHORS[type]}` : null,

package/src/builder/region-settings.ts

@@ -242,6 +242,10 @@ function mergeGridFeatures(out: Config, b: Body, a: Allowed, columns: string[])
   set('saved_reports', b.saved_reports === 'true' ? undefined : false);
   const pub = (b.public_reports ?? '').trim().toUpperCase();
   set('public_reports', pub && a.authz?.has(pub) ? pub : undefined);
+  // views besides the grid: all three is the default (left out); none ticked means the grid only
+  // (only when the form has the Views fieldset)
+  const views = GRID_USER_VIEWS.filter((v) => b[`view_${v}`] === 'true');
+  if (b.grid_views === '1') set('views', views.length < GRID_USER_VIEWS.length ? views : undefined);
   // row actions: an edit link, duplicate and delete; custom links stay as written in the JSON
   const edit = mergeLink(b, a.pages, 'edit');
   const ra: Config = { ...(out.row_actions && typeof out.row_actions === 'object' ? out.row_actions : {}) };
@@ -342,8 +346,10 @@ export function mergeSmartFiltersSettings(config: Config, b: Body, a: Allowed):
 export function mergeDisplaySelectorSettings(config: Config, b: Body): Config {
   const out = { ...config };
   const set = setter(out);
-  set('style', b.style === 'select' ? 'select' : undefined);
+  set('style', b.style === 'select' || b.style === 'carousel' ? b.style : undefined);
   set('show_all', b.show_all === 'true' ? undefined : false);
+  const interval = Number(b.interval);
+  set('interval', b.style === 'carousel' && Number.isInteger(interval) && interval >= 1 && interval <= 120 ? interval : undefined);
   set('remember', b.remember === 'true' ? undefined : false);
   return out;
 }
@@ -497,6 +503,11 @@ async function gridFields(appId: number, r: RegionRow, id: (n: string) => string
       <div class="field"><label class="label" for="${id('public_reports')}">Public reports by</label>
         <select id="${id('public_reports')}" name="public_reports">${opt('', '- nobody -', cfg.public_reports)}${authz.map((n) => opt(n, n, cfg.public_reports))}</select></div>
     </div></fieldset>
+    <input type="hidden" name="grid_views" value="1">
+    <fieldset class="prop-group"><legend>Views</legend><div class="form-grid">
+      ${GRID_USER_VIEWS.map((v) => check(`view_${v}`, GRID_VIEW_LABELS[v], !Array.isArray(cfg.views) || cfg.views.includes(v)))}
+    </div>
+    <small class="help">Views users may switch to besides the grid. The single row view edits one row at a time (also from the row actions menu); group by and chart are set up in Actions.</small></fieldset>
     <fieldset class="prop-group"><legend>Row actions</legend><div class="form-grid">
       ${check('row_actions', 'Row actions menu', !!cfg.row_actions)}
       ${check('row_duplicate', 'Duplicate', cfg.row_actions?.duplicate !== false)}
@@ -634,6 +645,8 @@ async function facetsFields(r: RegionRow, pageId: number, appId: number, id: (n:
 }
 
 const VIEW_LABELS: Record<string, string> = { month: 'Month', week: 'Week', day: 'Day', list: 'List' };
+const GRID_USER_VIEWS = ['row', 'group', 'chart'] as const;
+const GRID_VIEW_LABELS: Record<string, string> = { row: 'Single row view', group: 'Group by', chart: 'Chart' };
 
 async function calendarFields(appId: number, r: RegionRow, id: (n: string) => string, pages: { page_no: number; name: string }[]) {
   const cfg = r.config ?? {};
@@ -676,7 +689,10 @@ async function displaySelectorFields(r: RegionRow, pageId: number, id: (n: strin
                                      where page_id = $1 and id <> $2 and type <> 'display_selector' order by seq, id`, [pageId, r.id])).rows;
   return html`<fieldset class="prop-group"><legend>Appearance</legend><div class="form-grid">
       <div class="field"><label class="label" for="${id('style')}">Show as</label>
-        <select id="${id('style')}" name="style">${opt('', 'Tabs', cfg.style)}${opt('select', 'Select list', cfg.style)}</select></div>
+        <select id="${id('style')}" name="style">${opt('', 'Tabs', cfg.style)}${opt('select', 'Select list', cfg.style)}${opt('carousel', 'Carousel (one at a time, Previous and Next)', cfg.style)}</select></div>
+      <div class="field"><label class="label" for="${id('interval')}">Carousel: next region every (seconds)</label>
+        <input id="${id('interval')}" name="interval" type="number" min="1" max="120" value="${cfg.interval ?? ''}" placeholder="empty: only by hand">
+        <small class="help">Not while the pointer or the focus is in the carousel, nor for users who prefer reduced motion. A carousel has no "Show all".</small></div>
     </div>
     ${check('show_all', '"Show all" choice (shows every region)', cfg.show_all !== false)}
     ${check('remember', 'Remember the choice during the session', cfg.remember !== false)}</fieldset>
@@ -765,7 +781,7 @@ export async function regionSettingsForm(pageId: number, appId: number, r: Regio
           <div class="field"><label class="label" for="${id('list')}">List</label>
             <select id="${id('list')}" name="list">${opt('', '- choose -', cfg.list)}${lists.map((l) => opt(l.name, `${l.name} (${l.type})`, cfg.list))}${cfg.list && !lists.some((l) => l.name === cfg.list) ? opt(cfg.list, `${cfg.list} (missing!)`, cfg.list) : ''}</select></div>
           <div class="field"><label class="label" for="${id('template')}">Template</label>
-            <select id="${id('template')}" name="template">${opt('', 'Links (nested)', cfg.template)}${opt('badges', 'Badge list', cfg.template)}${opt('cards', 'Cards (menu)', cfg.template)}${opt('tabs', 'Tabs', cfg.template)}</select></div>
+            <select id="${id('template')}" name="template">${opt('', 'Links (nested)', cfg.template)}${opt('badges', 'Badge list', cfg.template)}${opt('cards', 'Cards (menu)', cfg.template)}${opt('tabs', 'Tabs', cfg.template)}${opt('wizard_progress', 'Wizard progress (numbered steps)', cfg.template)}</select></div>
         </div></fieldset>`;
       break;
     }

package/src/builder/routes.ts

@@ -12,6 +12,7 @@ import { pwaSection } from './pwa.ts';
 import { documentShell } from '../layout.ts';
 import { passwordProblem } from '../accounts.ts';
 import { clientIp, createSession, destroySession, getSession, loginThrottled, logActivity, saveState, takeFlash } from '../session.ts';
+import { loginSettingsFields, saveLoginSettings } from './login-page.ts';
 import { APP_COLORS, appHeader, back, BASE, builderHead, csrf, developer, flash, input, region, select, send, shell, THEME_COOKIE, validTheme, type Req } from './ui.ts';
 import { appOr404 } from './forms.ts';
 import { docToFiles, filesToZip } from '../appfiles.ts';
@@ -207,6 +208,11 @@ export async function builderRoutes(app: FastifyInstance) {
       wizardTables(a.db_role),
     ]);
     const nextPage = Math.max(0, ...pages.rows.map((p) => p.page_no)) + 1;
+    // (089) page groups: a column and a filter (?group=name, or "-" for pages without one)
+    const groups = (await owner.query<{ name: string }>('select name from meta.page_group where app_id = $1 order by name', [a.id])).rows.map((g) => g.name);
+    const grouped = groups.length > 0 || pages.rows.some((p) => p.page_group);
+    const groupFilter = typeof req.query?.group === 'string' ? req.query.group : '';
+    const shownPages = pages.rows.filter((p) => !groupFilter || (groupFilter === '-' ? !p.page_group : p.page_group === groupFilter));
     const locks = new Map((await appLocks(a.id)).map((l) => [l.page_no, l]));
     const commentsPerPage = new Map((await owner.query('select page_no, count(*)::int as n from meta.dev_comment where app_id = $1 group by 1', [a.id])).rows.map((r) => [r.page_no, r.n]));
     const appLock = locks.get(0);
@@ -214,10 +220,14 @@ export async function builderRoutes(app: FastifyInstance) {
     const main = html`
       ${appHeader(a, 'pages')}
       ${appLock && appLock.locked_by !== s.username ? html`<div class="alert alert-error" role="status">${icon('key')} ${lockText(appLock)} Changes are refused until it is unlocked.</div>` : ''}
-      ${region('Pages', html`<div class="table-wrap"><table class="report">
-          <thead><tr><th class="num">Page</th><th>Name</th><th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
-          <tbody>${pages.rows.map((p) => html`<tr>
-            <td class="num">${p.page_no}</td><td><a href="${BASE}/pages/${p.id}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td><td>${p.mode}</td>
+      ${region('Pages', html`${grouped
+          ? html`<form method="get" class="search u-mwnone u-mb1"><div class="field"><label class="label" for="f_group">Page group</label>
+              <select id="f_group" name="group">${[['', 'All pages'], ...groups.map((g) => [g, g]), ['-', 'Without a group']].map(([v, l]) => html`<option value="${v}"${v === groupFilter ? raw(' selected') : ''}>${l}</option>`)}</select></div>
+              <button class="btn u-selfend">Show</button></form>`
+          : ''}<div class="table-wrap"><table class="report">
+          <thead><tr><th class="num">Page</th><th>Name</th>${grouped ? html`<th>Group</th>` : ''}<th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
+          <tbody>${shownPages.map((p) => html`<tr>
+            <td class="num">${p.page_no}</td><td><a href="${BASE}/pages/${p.id}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
             <td class="num">${p.regions}</td><td class="num">${p.items}</td><td class="num">${p.das}</td><td class="num">${p.processes}</td>
             <td>${p.requires_auth ? (p.authz ?? '—') : 'public'}</td><td>${p.protection}</td>
             <td>${((l) => (l ? html`<span class="lock-tag" title="${lockText(l)}">${icon('key')}<span>${l.locked_by === s.username ? 'you' : l.locked_by}</span></span>` : '—'))(locks.get(p.page_no))}</td>
@@ -354,6 +364,7 @@ export async function builderRoutes(app: FastifyInstance) {
               : html`<p class="muted">No LDAP directories configured. <a href="${BASE}/users/directories">Add one</a> to check passwords against LDAP or Active Directory.</p>`}
             <small class="help">LDAP passwords are checked by the username and password form, after local accounts, so keep that method on.</small>
             <div class="form-grid">${input('session_group', 'Session sharing group', a.session_group ?? '', { placeholder: 'empty: not shared', help: 'Applications with the same group (and the user directory as authentication) share a sign-in: after signing in to one, the others open without a new sign-in, each with its own access check and roles; signing out of one signs out of all (APEX: session sharing). Lower case letters, digits and _.' })}</div>
+            ${await loginSettingsFields(a)}
             <div class="form-grid">${input('remember_me_days', '"Keep me signed in" for (days)', a.remember_me_days ?? '', { type: 'number', placeholder: 'empty: not offered', help: 'Offers a checkbox on the sign-in form (APEX: persistent authentication). The browser stays signed in for this many days after the sign-in, also when the session ends; signing out, a new password, deactivation or removed access ends it. 1 to 365.' })}</div>
             ${providers.length
               ? providers.map((pr) => html`<div class="field"><label class="check"><input type="checkbox" name="sso_providers" value="${pr.name}"${a.sso_providers.includes(pr.name) ? raw(' checked') : ''}> Sign in with ${pr.display_name}${pr.enabled ? '' : ' (disabled)'}</label></div>`)
@@ -484,6 +495,7 @@ export async function builderRoutes(app: FastifyInstance) {
          /^[a-z][a-z0-9_]{0,29}$/.test(b.session_group?.trim().toLowerCase() ?? '') ? b.session_group!.trim().toLowerCase() : null],
       );
       await saveTimeZoneSettings(req.params.id, b);
+      await saveLoginSettings(req.params.id, b);
       flash(s, 'Settings saved.');
     } catch (e) {
       flash(s, (e as Error).message, 'error');

package/src/builder/shared.ts

@@ -33,7 +33,7 @@ function listExtras(appId: number, list: any, entries: any[]): Raw {
 
 export async function sharedRoutes(app: FastifyInstance) {
   // ---------------------------------------------------------------- shared components
-  const SHARED = ['nav_entry', 'authz_scheme', 'build_option', 'lov', 'app_item', 'app_process', 'automation', 'automation_action', 'report_layout', 'document_template', 'task_definition', 'workflow_definition', 'rest_module', 'template_component', 'web_credential', 'rest_source', 'data_load_def', 'list', 'list_entry', 'supporting_script', 'search_config', 'email_template', 'app_setting', 'dynamic_translation'];
+  const SHARED = ['nav_entry', 'authz_scheme', 'build_option', 'page_group', 'lov', 'app_item', 'app_process', 'automation', 'automation_action', 'report_layout', 'document_template', 'task_definition', 'workflow_definition', 'rest_module', 'template_component', 'web_credential', 'rest_source', 'data_load_def', 'list', 'list_entry', 'supporting_script', 'search_config', 'email_template', 'app_setting', 'dynamic_translation'];
 
   const ORDER: Record<string, string> = {
     search_config: 'seq, name', dynamic_translation: 'language, source',

package/src/builder/sql.ts

@@ -10,6 +10,7 @@ import { scriptRoutes } from './scripts.ts';
 import { quickSqlRoutes } from './quicksql.ts';
 import { queryBuilderRoutes } from './querybuilder.ts';
 import { unloadRoutes } from './unload.ts';
+import { ddlToolRoutes } from './ddl-tools.ts';
 
 // SQL Workshop: SQL commands and the object browser (owner connection).
 
@@ -20,6 +21,8 @@ export async function sqlRoutes(app: FastifyInstance) {
   await app.register(queryBuilderRoutes);
   // Unload Data (sprint 32)
   await app.register(unloadRoutes);
+  // Generate DDL and Schema Comparison (sprint 56)
+  await app.register(ddlToolRoutes);
   // ---------------------------------------------------------------- SQL workshop
   const resultTable = (res: pg.QueryResult<any[]>, limit = 500) => {
     const rows = (res.rows ?? []).slice(0, limit);

package/src/builder/ui.ts

@@ -209,13 +209,13 @@ export const appHeader = (a: any, active: 'pages' | 'shared' | 'settings' | 'act
 };
 
 /** Tabs of the SQL Workshop. */
-export type WorkshopTab = 'sql' | 'scripts' | 'quicksql' | 'query' | 'objects' | 'load' | 'unload' | 'sample' | 'ai';
+export type WorkshopTab = 'sql' | 'scripts' | 'quicksql' | 'query' | 'objects' | 'load' | 'unload' | 'sample' | 'ai' | 'ddl' | 'compare';
 export const workshopTabs = (active: WorkshopTab) => {
   const tab = (key: WorkshopTab, href: string, ic: string, label: string) =>
     html`<a class="ide-tab" href="${BASE}${href}"${active === key ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${label}</span></a>`;
   return html`<nav class="ide-tabs u-mb1" aria-label="SQL Workshop">
     ${tab('sql', '/sql', 'code', 'SQL Commands')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('quicksql', '/sql/quick', 'bolt', 'Quick SQL')}
-    ${tab('query', '/sql/query', 'filter', 'Query Builder')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('load', '/sql/load', 'upload', 'Load Data')}${tab('unload', '/sql/unload', 'download', 'Unload Data')}${tab('sample', '/sql/sample-data', 'layers', 'Sample Data')}${tab('ai', '/sql/ai', 'bolt', 'AI')}</nav>`;
+    ${tab('query', '/sql/query', 'filter', 'Query Builder')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('load', '/sql/load', 'upload', 'Load Data')}${tab('unload', '/sql/unload', 'download', 'Unload Data')}${tab('sample', '/sql/sample-data', 'layers', 'Sample Data')}${tab('ddl', '/sql/ddl', 'file', 'DDL')}${tab('compare', '/sql/compare', 'layers', 'Compare')}${tab('ai', '/sql/ai', 'bolt', 'AI')}</nav>`;
 };
 
 /** Number of app tile colours (.app-color-0 … -7 in app.css). */

package/src/cli/main.ts

@@ -133,6 +133,51 @@ const COMMANDS: Record<string, Command> = {
     },
   },
 
+  ddl: {
+    usage: 'pgkiln ddl <schema> [--no-comments] [--no-grants] [--out <file>]',
+    summary: 'write the DDL of a schema\'s objects (SQL Workshop → Generate DDL)',
+    details:
+      'Types, sequences, tables, functions, views, constraints, indexes, triggers, row level security,\n' +
+      'comments and grants, in an order that runs, with the schema in search_path at the top (so the\n' +
+      'script also creates the objects in another schema). Objects of extensions are left out.',
+    options: { 'no-comments': { type: 'boolean' }, 'no-grants': { type: 'boolean' }, out: { type: 'string', short: 'o' } },
+    optionHelp: [['--no-comments', 'leave out comments'], ['--no-grants', 'leave out grants'], ['-o, --out <file>', 'write to a file instead of standard output']],
+    positionals: [1, 1],
+    async run(v, [schema]) {
+      const { ddlScript, OBJECT_TYPES, pick, readSchema } = await import('../ddl.ts');
+      const objects = await withDb((db) => readSchema(db, schema));
+      const script = ddlScript(schema, pick(objects, new Set(OBJECT_TYPES), { comments: !v['no-comments'], grants: !v['no-grants'] }));
+      if (v.out) {
+        writeFileSync(v.out as string, script);
+        err(`Wrote the DDL of ${schema} to ${v.out}.\n`);
+      } else out(script);
+      return EXIT.ok;
+    },
+  },
+
+  compare: {
+    usage: 'pgkiln compare <source> <target> [--script]',
+    summary: 'compare two schemas (SQL Workshop → Schema Comparison); exit code 1 when they differ',
+    details:
+      'Lists what only the source has (+), what only the target has (-) and what differs (~), by their DDL;\n' +
+      'the order of a table\'s columns is not compared. --script writes the script that makes the target\n' +
+      'like the source instead (drops of what only the target has are commented out). Nothing is run.',
+    options: { script: { type: 'boolean' } },
+    optionHelp: [['--script', 'write the change script']],
+    positionals: [2, 2],
+    async run(v, [source, target]) {
+      const { changeScript, compare, readSchema } = await import('../ddl.ts');
+      const [a, b] = await withDb(async (db) => [await readSchema(db, source), await readSchema(db, target)]);
+      const { differences, same } = compare(a, b);
+      if (v.script) out(changeScript(source, target, a, b));
+      else {
+        for (const d of differences) out(`${d.state === 'source' ? '+' : d.state === 'target' ? '-' : '~'} ${d.kind} ${d.name}\n`);
+        err(differences.length ? `${differences.length} difference(s), ${same} object(s) the same.\n` : `The schemas are the same (${same} objects).\n`);
+      }
+      return differences.length ? EXIT.differences : EXIT.ok;
+    },
+  },
+
   export: {
     usage: 'pgkiln export <alias> [--format json|dir|text] [--out <path>]',
     summary: 'export an application as one JSON file or as a directory with a file per component',

package/src/cli/mcp.ts

@@ -473,6 +473,48 @@ export const TOOLS: Tool[] = [
       });
     },
   },
+  {
+    name: 'generate_ddl',
+    title: 'Generate the DDL of a schema',
+    description:
+      'The DDL of a schema\'s objects from the catalog (types, sequences, tables, functions, views, constraints, indexes, triggers, ' +
+      'row level security, comments and grants), in an order that runs, with the schema in search_path at the top. ' +
+      'Use it to start a migration script or to see how objects are defined; nothing is run.',
+    inputSchema: { type: 'object', properties: { schema: { type: 'string', description: 'the schema, e.g. sales' } }, required: ['schema'] },
+    annotations: { readOnlyHint: true },
+    async run(a) {
+      const schema = str(a, 'schema');
+      if (!schema) throw new ToolError('schema is required');
+      const { ddlScript, readSchema } = await import('../ddl.ts');
+      return withDb(async (db) => cap(ddlScript(schema, await readSchema(db, schema))));
+    },
+  },
+  {
+    name: 'compare_schemas',
+    title: 'Compare two schemas',
+    description:
+      'Compares the objects of two schemas of the database by their DDL: what only the source has (+), only the target has (-), ' +
+      'and what differs (~), followed by a script that makes the target like the source (drops commented out). Nothing is run.',
+    inputSchema: {
+      type: 'object',
+      properties: { source: { type: 'string', description: 'the schema to compare with, e.g. sales' }, target: { type: 'string', description: 'the schema to make like the source, e.g. sales_dev' } },
+      required: ['source', 'target'],
+    },
+    annotations: { readOnlyHint: true },
+    async run(a) {
+      const source = str(a, 'source');
+      const target = str(a, 'target');
+      if (!source || !target) throw new ToolError('source and target are required');
+      const { changeScript, compare, readSchema } = await import('../ddl.ts');
+      return withDb(async (db) => {
+        const [x, y] = [await readSchema(db, source), await readSchema(db, target)];
+        const { differences, same } = compare(x, y);
+        if (!differences.length) return `The schemas are the same (${same} objects).\n`;
+        const list = differences.map((d) => `${d.state === 'source' ? '+' : d.state === 'target' ? '-' : '~'} ${d.kind} ${d.name}`).join('\n');
+        return cap(`${differences.length} difference(s), ${same} object(s) the same:\n${list}\n\n${changeScript(source, target, x, y)}`);
+      });
+    },
+  },
   {
     name: 'run_query',
     title: 'Run a read-only query',

package/src/cli/replace.ts

@@ -26,9 +26,13 @@ export const REPLACED = [
   'search_config', 'email_template',
   // (086) application settings (installed values kept, see below), dynamic translations
   'app_setting', 'dynamic_translation',
+  // (089) page groups
+  'page_group',
 ];
 /** Tables of an application that belong to the installation: kept. */
 export const KEPT = ['app_access', 'api_client', 'session', 'sso_pending', 'saved_report', 'persistent_login', 'task', 'workflow', 'process_job',
+  // (087) password reset links of this installation's accounts
+  'password_reset',
   // (042) builder state of this installation: locks and developer comments (by page number)
   'builder_lock', 'dev_comment',
   // (051) debug messages recorded by this installation