pgkiln 0.45.0 → 0.46.0

package/src/builder/arrange.ts

@@ -17,6 +17,8 @@ import { BASE, developer, flash, type Req } from './ui.ts';
 export const LAYOUT_KINDS = ['region', 'item', 'button'] as const;
 export type LayoutKind = (typeof LAYOUT_KINDS)[number];
 const isKind = (k: unknown): k is LayoutKind => (LAYOUT_KINDS as readonly unknown[]).includes(k);
+/** (sprint 90) The components with a build option, which can be commented out. */
+const COMMENTABLE = new Set(['region', 'item', 'button', 'dynamic_action', 'validation', 'process', 'computation', 'branch']);
 
 const options = (kind: string, field: string) => COMPONENTS[kind].fields.find((f) => f.name === field)!.options!.filter(Boolean);
 export const REGION_TYPES = () => options('region', 'type');
@@ -38,22 +40,22 @@ export const BOTTOM_SLOTS = ['previous', 'close', 'delete', 'next'];
 
 /** Gallery names and icons. */
 export const REGION_LABELS: Record<string, [string, string]> = {
-  report: ['Interactive report', 'table'], grid: ['Interactive grid', 'grid'], form: ['Form', 'file'], chart: ['Chart', 'chart'],
-  cards: ['Cards', 'layers'], calendar: ['Calendar', 'calendar'], facets: ['Faceted search', 'filter'], smart_filters: ['Smart filters', 'search'], display_selector: ['Region display selector', 'menu'], tasks: ['Task list', 'inbox'],
-  workflows: ['Workflow console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static content', 'region'], dynamic: ['Dynamic content', 'code'],
-  template_component: ['Template component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'],
-  ai_assistant: ['AI assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'],
+  report: ['Interactive Report', 'table'], grid: ['Interactive Grid', 'grid'], form: ['Form', 'file'], chart: ['Chart', 'chart'],
+  cards: ['Cards', 'layers'], calendar: ['Calendar', 'calendar'], facets: ['Faceted Search', 'filter'], smart_filters: ['Smart Filters', 'search'], display_selector: ['Region Display Selector', 'menu'], tasks: ['Task List', 'inbox'],
+  workflows: ['Workflow Console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static Content', 'region'], dynamic: ['Dynamic Content', 'code'],
+  template_component: ['Template Component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'], form_designer: ['Form Designer', 'file'],
+  ai_assistant: ['AI Assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'], login: ['Login', 'lock'], plugin: ['Plug-in', 'layers'],
 };
 export const ITEM_LABELS: Record<string, [string, string]> = {
-  text: ['Text field', 'item'], textarea: ['Text area', 'item'], number: ['Number field', 'item'], date: ['Date picker', 'calendar'],
-  datetime: ['Date and time', 'clock'], select: ['Select list', 'list'], popup_lov: ['Popup LOV', 'search'], radio: ['Radio group', 'check'],
-  checkbox: ['Checkbox', 'check'], switch: ['Switch', 'check'], checkbox_group: ['Checkbox group', 'check'], multiselect: ['Multi select', 'list'],
-  email: ['E-mail', 'inbox'], tel: ['Phone number', 'item'], url: ['URL', 'item'], color: ['Color picker', 'item'], file: ['File upload', 'upload'],
-  location: ['Location', 'map'], richtext: ['Rich text editor', 'edit'], markdown: ['Markdown editor', 'code'], rating: ['Star rating', 'check'],
-  combobox: ['Combobox (tags)', 'list'], daterange: ['Date range', 'calendar'], qrcode: ['QR code', 'scan'], image: ['Display image', 'file'], address: ['Geocoded address', 'map'], hidden: ['Hidden', 'item'], display: ['Display only', 'file'], password: ['Password', 'key'],
+  text: ['Text Field', 'item'], textarea: ['Text Area', 'item'], number: ['Number Field', 'item'], date: ['Date Picker', 'calendar'],
+  datetime: ['Date and Time', 'clock'], select: ['Select List', 'list'], popup_lov: ['Popup LOV', 'search'], radio: ['Radio Group', 'check'],
+  checkbox: ['Checkbox', 'check'], switch: ['Switch', 'check'], checkbox_group: ['Checkbox Group', 'check'], multiselect: ['Multi Select', 'list'],
+  email: ['E-mail', 'inbox'], tel: ['Phone Number', 'item'], url: ['URL', 'item'], color: ['Color Picker', 'item'], file: ['File Upload', 'upload'],
+  location: ['Location', 'map'], richtext: ['Rich Text Editor', 'edit'], markdown: ['Markdown Editor', 'code'], rating: ['Star Rating', 'check'],
+  combobox: ['Combobox (Tags)', 'list'], daterange: ['Date Range', 'calendar'], qrcode: ['QR Code', 'scan'], image: ['Display Image', 'file'], address: ['Geocoded Address', 'map'], hidden: ['Hidden', 'item'], display: ['Display Only', 'file'], password: ['Password', 'key'],
 };
 export const BUTTON_LABELS: Record<string, [string, string]> = {
-  submit: ['Submit page', 'button'], redirect: ['Redirect to page', 'button'], da: ['Dynamic action', 'bolt'], document: ['Download document', 'download'],
+  submit: ['Submit Page', 'button'], redirect: ['Redirect to Page', 'button'], da: ['Dynamic Action', 'bolt'], document: ['Download Document', 'download'],
 };
 
 /** A working starting point per region type, so a new region renders straight away. */
@@ -351,6 +353,25 @@ export async function arrangeRoutes(app: FastifyInstance) {
   });
 
   // (sprint 77) the rendering tree's menu: Duplicate, Copy to other Page
+  // (sprint 90, PD-4; APEX: Comment Out) a component left out of the page by the build option COMMENTED_OUT (made with
+  // the status Exclude when first needed); Uncomment takes it off again. Not a layout change: the undo history stays.
+  route('comment', async (_s, pid, b) => {
+    const kind = b.kind ?? '';
+    const id = int(b.id);
+    if (!COMMENTABLE.has(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    const on = b.on !== 'false';
+    const done = await owner.tx(async (c) => {
+      if (on)
+        await c.query(
+          `insert into meta.build_option (app_id, name, status, description)
+           select app_id, 'COMMENTED_OUT', 'exclude', 'Components commented out in the page designer' from meta.page where id = $1
+           on conflict (app_id, name) do nothing`, [pid]);
+      return (await c.query(`update ${COMPONENTS[kind].table} set build_option = $3 where id = $1 and page_id = $2 and ${on ? 'true' : `build_option = 'COMMENTED_OUT'`}`, [id, pid, on ? 'COMMENTED_OUT' : null])).rowCount;
+    });
+    if (!done) throw new LayoutError(404, 'Unknown component.');
+    return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} ${on ? 'commented out: it stays in the page designer and is left out of the page (build option COMMENTED_OUT)' : 'back on the page'}.` };
+  });
+
   route('duplicate', async (s, pid, b) => {
     const kind = b.kind;
     const id = int(b.id);

package/src/builder/code-editor.ts

@@ -39,7 +39,7 @@ const CHECKS: Record<string, SqlShape> = {
 const CHECK_SWITCH: Record<string, string> = {
   'dynamic_action.code': 'action:set_value=select,*=statements',
   'process.code': 'type:sql=statements,*=none',
-  'region.source': 'type:static=none,form=none,facets=none,smart_filters=none,display_selector=none,tasks=none,workflows=none,list=none,data_reporter=none,ai_assistant=none,*=select',
+  'region.source': 'type:static=none,form=none,facets=none,smart_filters=none,display_selector=none,tasks=none,workflows=none,list=none,data_reporter=none,form_designer=none,ai_assistant=none,*=select',
   'computation.expression': 'type:sql_query=select,*=none',
   'app_computation.expression': 'type:sql_query=select,*=none',
   'computation.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',

package/src/builder/components.ts

@@ -107,7 +107,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'title', common: true, 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', common: true, 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: 'type', common: true, 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', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
       { name: 'source', common: true, 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',

package/src/builder/designer.ts

@@ -1,9 +1,11 @@
-import type { FastifyInstance } from 'fastify';
+import type { FastifyInstance, FastifyReply } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 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 { back, BASE, bicon, csrf, designerUrl, developer, flash, input, select, send, shell, type Req } from './ui.ts';
+import { wantsHtml } from './errors.ts';
+import type { Session } from '../session.ts';
 import { buildOptionChoices, componentForm, lookups, saveComponent } from './forms.ts';
 import { regionConfigHelp } from './region-help.ts';
 import { parseIncludes } from './static-files.ts';
@@ -47,16 +49,35 @@ export async function designerRoutes(app: FastifyInstance) {
     const appId = /^\d{1,9}$/.test(req.params.id) ? Number(req.params.id) : null;
     const no = /^\d{1,9}$/.test(req.query.page ?? '') ? Number(req.query.page) : -1;
     const p = appId === null ? null : await owner.one('select id from meta.page where app_id = $1 and page_no = $2', [appId, no]);
-    if (p) return reply.redirect(`${BASE}/pages/${p.id}`, 303);
+    if (p) return reply.redirect(designerUrl(appId!, no), 303);
     flash(s, `There is no page ${req.query.page ?? ''}.`, 'error');
     return back(reply, s, appId === null ? BASE : `${BASE}/apps/${appId}`);
   });
 
   // ---------------------------------------------------------------- page designer
+  // (sprint 86) its address is the application's id and the page's number; a browser that opens the
+  // internal id (an old bookmark, a redirect after saving) is sent there with the same query
+  app.get(`${BASE}/apps/:app/pages/:no`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const page = /^\d{1,9}$/.test(req.params.app) && /^\d{1,9}$/.test(req.params.no)
+      ? await owner.one<{ id: number }>('select id from meta.page where app_id = $1 and page_no = $2', [req.params.app, req.params.no])
+      : undefined;
+    if (!page) return reply.code(404).send('Not found');
+    return pageDesigner(req, reply, s, page.id);
+  });
   app.get(`${BASE}/pages/:pid`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    const p = await owner.one('select p.*, a.alias, a.name as app_name from meta.page p join meta.app a on a.id = p.app_id where p.id = $1', [req.params.pid]);
+    if (wantsHtml(req) && /^\d{1,9}$/.test(req.params.pid)) {
+      const p = await owner.one<{ app_id: number; page_no: number }>('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
+      if (p) return reply.redirect(designerUrl(p.app_id, p.page_no, req.url.split('?')[1] ?? ''), 302);
+    }
+    return pageDesigner(req, reply, s, req.params.pid);
+  });
+
+  async function pageDesigner(req: Req, reply: FastifyReply, s: Session, pid: number | string) {
+    const p = await owner.one('select p.*, a.alias, a.name as app_name from meta.page p join meta.app a on a.id = p.app_id where p.id = $1', [pid]);
     if (!p) return reply.code(404).send('Not found');
     const rows: Record<string, any[]> = {};
     for (const kind of PAGE_KINDS) rows[kind] = (await owner.query(`select * from ${COMPONENTS[kind].table} where page_id = $1 order by seq, id`, [p.id])).rows;
@@ -73,7 +94,9 @@ export async function designerRoutes(app: FastifyInstance) {
     const sel = req.query.c ?? '';
     const newKind = PAGE_KINDS.includes(req.query.new ?? '') ? req.query.new : '';
     const [kind, cid] = sel.split('-');
-    const url = (q: string) => `${BASE}/pages/${p.id}${q ? `?${q}` : ''}`;
+    const url = (q: string) => designerUrl(p.app_id, p.page_no, q);
+    // the page's forms post to its internal id (a page number can change)
+    const post = `${BASE}/pages/${p.id}`;
     const isSel = (key: string) => sel === key || (key === 'page' && !sel && !newKind);
     const cur = (key: string) => (isSel(key) ? raw(' aria-current="true"') : '');
     const badges = (r: any) => html`${r.authz ? html`<span class="pd-tag" title="Authorization: ${r.authz}">${icon('shield')}<span class="sr-only">Authorization ${r.authz}</span></span>` : ''}${r.condition || r.readonly_condition || r.condition_type ? html`<span class="pd-tag" title="Has a condition">${icon('filter')}<span class="sr-only">Has a condition</span></span>` : ''}${r.build_option ? html`<span class="pd-tag" title="Build option: ${r.build_option}">${icon('settings')}<span class="sr-only">Build option ${r.build_option}</span></span>` : ''}`;
@@ -81,8 +104,10 @@ export async function designerRoutes(app: FastifyInstance) {
 
     // ------------------------------------------------------------ left: component tree
     // (sprint 77) data-kind and data-id: the node's context menu (Duplicate, Copy to other page, Delete…) and icon colour
+    // (sprint 90) a commented-out component: struck through in the tree, Uncomment in its menu
+    const commented = (r: any) => (r.build_option === 'COMMENTED_OUT' ? raw(' data-commented') : '');
     const leaf = (k: string, r: any, ic: Raw | '', label: string, note = '') =>
-      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}">${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
+      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
     const folder = (label: string, children: Raw[] | Raw, open = true) =>
       html`<li${open ? '' : raw(' data-collapsed')}><span class="pd-node pd-folder"><span class="pd-label">${label}</span></span><ul>${children}</ul></li>`;
     const none = (text: string) => html`<li class="pd-empty">${text}</li>`;
@@ -95,7 +120,7 @@ export async function designerRoutes(app: FastifyInstance) {
       const bySlot = ['region', ...TOP_SLOTS, ...BOTTOM_SLOTS].map((sl) => [sl, buttons.filter((b) => (b.slot ?? 'region') === sl)] as const).filter(([, list]) => list.length);
       const kids = [...(items.length ? [folder('Items', items.map(itemLeaf))] : []),
         ...bySlot.map(([sl, list]) => folder(sl === 'region' ? 'Buttons' : `Buttons: ${SLOT_LABELS[sl]}`, list.map(buttonLeaf)))];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}">${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
+      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
     };
     // (sprint 77, APEX: the rendering tree by display position) the page template's positions, and others in use
     const treeSide = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;
@@ -129,7 +154,7 @@ export async function designerRoutes(app: FastifyInstance) {
           </ul></li>
       </ul>
       <dialog class="pd-dialog" id="pd-copy-dialog" aria-labelledby="pd-copy-title">
-        <form method="post" action="${url('')}/layout/copy">${csrf(s)}<input type="hidden" name="kind" value=""><input type="hidden" name="id" value="">
+        <form method="post" action="${post}/layout/copy">${csrf(s)}<input type="hidden" name="kind" value=""><input type="hidden" name="id" value="">
           <h2 id="pd-copy-title">Copy to other page</h2>
           <p class="muted" data-copy-what></p>
           <div class="field"><label class="label" for="pd-copy-page">Page</label>
@@ -226,7 +251,7 @@ export async function designerRoutes(app: FastifyInstance) {
         ${side === 'left' || extra('left') ? zone('left') : ''}${zone('body')}${side === 'right' || extra('right') ? zone('right') : ''}
       </div>${zone('footer')}`;
     const gallery = (k: 'region' | 'item' | 'button', types: string[], labels: Record<string, [string, string]>) =>
-      html`<ul class="pd-gallery-list" aria-label="${COMPONENTS[k].plural}">${types.map((t) => html`<li><a class="pd-gal" href="${url(`new=${k}&type=${t}`)}" draggable="true" data-new="${k}" data-type="${t}" title="Drag onto the layout, or open to create">${bicon(labels[t]?.[1] ?? k)}<span>${labels[t]?.[0] ?? t}</span></a></li>`)}</ul>`;
+      html`<ul class="pd-gallery-list" aria-label="${COMPONENTS[k].plural}">${types.map((t) => html`<li><a class="pd-gal" href="${url(`new=${k}&type=${t}`)}" draggable="true" data-new="${k}" data-type="${t}" title="${labels[t]?.[0] ?? t}: drag onto the layout, or open to create">${bicon(labels[t]?.[1] ?? k)}<span>${labels[t]?.[0] ?? t}</span></a></li>`)}</ul>`;
     const layout = html`
       <div class="pd-canvas-bar" role="toolbar" aria-label="Layout">
         <button type="button" class="tb-btn" data-zoom="-1" title="Zoom out" hidden>${bicon('zoom-out')}<span class="sr-only">Zoom out</span></button>
@@ -294,7 +319,7 @@ export async function designerRoutes(app: FastifyInstance) {
     let hasForm = true;
     const peTabs = (panels: Raw[]) => html`<div class="pd-tabs" data-tabs="pd-right" data-tabs-remember aria-label="Properties">${panels}</div>`;
     const moveForm = (k: string, id: number, fields: Raw, button: Raw, title: string) =>
-      html`<form method="post" action="${url('')}/layout/move" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="kind" value="${k}"><input type="hidden" name="id" value="${id}">${fields}<button class="tb-btn" title="${title}">${button}</button></form>`;
+      html`<form method="post" action="${post}/layout/move" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="kind" value="${k}"><input type="hidden" name="id" value="${id}">${fields}<button class="tb-btn" title="${title}">${button}</button></form>`;
     if (newKind) {
       const spec = COMPONENTS[newKind];
       const lastSeq = Math.max(0, ...rows[newKind].map((r) => r.seq));
@@ -325,9 +350,9 @@ export async function designerRoutes(app: FastifyInstance) {
             ${moveForm(kind, row.id, html`<input type="hidden" name="dir" value="up">`, html`${bicon('arrow-up')}<span class="sr-only">Move up</span>`, 'Move up (earlier in the sequence)')}
             ${moveForm(kind, row.id, html`<input type="hidden" name="dir" value="down">`, html`${bicon('arrow-down')}<span class="sr-only">Move down</span>`, 'Move down (later in the sequence)')}
             ${kind === 'region'
-              ? html`<form method="post" action="${url('')}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="-1"><button class="tb-btn" title="Narrower (one column less)"${row.columns <= 1 ? raw(' disabled') : ''}>${bicon('narrow')}<span class="sr-only">Narrower</span></button></form>
+              ? html`<form method="post" action="${post}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="-1"><button class="tb-btn" title="Narrower (one column less)"${row.columns <= 1 ? raw(' disabled') : ''}>${bicon('narrow')}<span class="sr-only">Narrower</span></button></form>
                 <span class="pe-span" title="Column span">${row.columns}/12</span>
-                <form method="post" action="${url('')}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="1"><button class="tb-btn" title="Wider (one column more)"${row.columns >= 12 ? raw(' disabled') : ''}>${bicon('wide')}<span class="sr-only">Wider</span></button></form>`
+                <form method="post" action="${post}/layout/span" class="pe-arrange-form">${csrf(s)}<input type="hidden" name="id" value="${row.id}"><input type="hidden" name="delta" value="1"><button class="tb-btn" title="Wider (one column more)"${row.columns >= 12 ? raw(' disabled') : ''}>${bicon('wide')}<span class="sr-only">Wider</span></button></form>`
               : moveForm(kind, row.id, html`<label class="sr-only" for="pe-move-region">Move to region</label><select id="pe-move-region" name="region">${regionOptions}</select>`, html`<span>Move</span>`, 'Move to the end of this region')}
           </div>`;
         }
@@ -395,7 +420,7 @@ export async function designerRoutes(app: FastifyInstance) {
     const next = pages[idx + 1];
     const h = undoState(s, p.id);
     const tbForm = (op: string, ic: string, label: string, title: string | null) =>
-      html`<form method="post" action="${url('')}/layout/${op}" class="tb-form">${csrf(s)}<button class="tb-btn" title="${title ? `${label}: ${title}` : `Nothing to ${label.toLowerCase()}`}"${title ? '' : raw(' disabled')}>${bicon(ic)}<span class="sr-only">${label}</span></button></form>`;
+      html`<form method="post" action="${post}/layout/${op}" class="tb-form">${csrf(s)}<button class="tb-btn" title="${title ? `${label}: ${title}` : `Nothing to ${label.toLowerCase()}`}"${title ? '' : raw(' disabled')}>${bicon(ic)}<span class="sr-only">${label}</span></button></form>`;
     const createMenu = html`<details class="menu tb-menu">
         <summary class="tb-btn" title="Create">${icon('plus')}${bicon('down', 'icon tb-caret')}<span class="sr-only">Create</span></summary>
         <div class="menu-panel align-right"><div class="menu-section menu-links">
@@ -415,7 +440,7 @@ export async function designerRoutes(app: FastifyInstance) {
         </div></div></details>`;
     const toolbar = html`
       <div class="tb-group pd-pagenav" role="group" aria-label="Page">
-        ${prev ? html`<a class="tb-btn" href="${BASE}/pages/${prev.id}" title="Previous page: ${prev.page_no}. ${prev.name}">${bicon('left')}<span class="sr-only">Previous page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('left')}</span>`}
+        ${prev ? html`<a class="tb-btn" href="${designerUrl(p.app_id, prev.page_no)}" title="Previous page: ${prev.page_no}. ${prev.name}">${bicon('left')}<span class="sr-only">Previous page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('left')}</span>`}
         <form method="get" action="${BASE}/apps/${p.app_id}/goto" class="tb-form pd-goto-no">
           <label class="sr-only" for="pd-goto-no">Page number (Enter goes there)</label>
           <input id="pd-goto-no" name="page" type="number" min="0" max="999999999" step="1" value="${p.page_no}" inputmode="numeric" title="Page number: type or step to a number, then Enter">
@@ -425,7 +450,7 @@ export async function designerRoutes(app: FastifyInstance) {
           <select id="pd-goto" name="page" data-autosubmit>${pages.map((x) => html`<option value="${x.page_no}"${x.id === p.id ? raw(' selected') : ''}>${x.page_no} · ${x.name}</option>`)}</select>
           <button class="tb-btn tb-text pd-goto-go">Go</button>
         </form>
-        ${next ? html`<a class="tb-btn" href="${BASE}/pages/${next.id}" title="Next page: ${next.page_no}. ${next.name}">${bicon('right')}<span class="sr-only">Next page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('right')}</span>`}
+        ${next ? html`<a class="tb-btn" href="${designerUrl(p.app_id, next.page_no)}" title="Next page: ${next.page_no}. ${next.name}">${bicon('right')}<span class="sr-only">Next page</span></a>` : html`<span class="tb-btn" aria-disabled="true">${bicon('right')}</span>`}
       </div>
       <div class="tb-group tb-undo" role="group" aria-label="History">${tbForm('undo', 'undo', 'Undo', h.undo)}${tbForm('redo', 'redo', 'Redo', h.redo)}</div>
       <div class="tb-group tb-menus">${createMenu}${utilMenu}</div>
@@ -442,7 +467,7 @@ export async function designerRoutes(app: FastifyInstance) {
         <section class="pd-pane pd-right tab-panel" id="pd-p-props" data-tab${pane === 'pd-p-props' ? raw(' data-tab-active') : ''}><h2 class="tab-title pd-pane-title"><span>Properties</span></h2>${right}</section>
       </div>`;
     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) => {
@@ -452,7 +477,9 @@ export async function designerRoutes(app: FastifyInstance) {
     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}` : ''}`);
+    const page = await owner.one<{ app_id: number; page_no: number }>('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
+    if (!page) return reply.code(404).send('Not found');
+    return reply.redirect(designerUrl(page.app_id, page.page_no, row ? `c=${kind}-${row.id}` : ''));
   });
 
   app.post(`${BASE}/pages/:pid`, async (req: Req, reply) => {

package/src/builder/errors.ts

@@ -0,0 +1,65 @@
+import type { FastifyInstance, FastifyReply, FastifyRequest } from 'fastify';
+import { html } from '../html.ts';
+import { documentShell } from '../layout.ts';
+import { BASE, THEME_COOKIE, validTheme } from './ui.ts';
+
+// (sprint 86) The builder's error pages: a browser that opens an address under /builder that
+// doesn't exist (or an application or page that doesn't, or not for this developer), or that
+// meets a server error, gets an HTML page in the builder's theme with a way back, instead of
+// JSON or plain text. Requests from scripts (fetch, the layout canvas) keep their plain answers.
+
+/** A browser's navigation (it asks for HTML), not a script's request. */
+export const wantsHtml = (req: FastifyRequest) =>
+  (req.method === 'GET' || req.method === 'HEAD') && /\btext\/html\b/.test(String(req.headers.accept ?? '')) && req.headers['x-requested-with'] === undefined;
+
+const isBuilder = (url: string) => url === BASE || url.startsWith(`${BASE}/`) || url.startsWith(`${BASE}?`);
+
+const TEXTS: Record<number, { title: string; text: string }> = {
+  404: { title: 'Page not found', text: 'There is nothing at this address in the App Builder. The application or page may have been deleted, or belongs to a workspace you are not a member of.' },
+  500: { title: 'Something went wrong', text: 'The App Builder could not show this page because of an error on the server. It has been logged; try again, or go back.' },
+};
+
+/** The error page for a status (404, or 500 for any server error). */
+export function builderErrorPage(req: FastifyRequest, status: number) {
+  const { title, text } = TEXTS[status >= 500 ? 500 : 404];
+  const theme = validTheme((req.cookies as Record<string, string> | undefined)?.[THEME_COOKIE]) ?? 'auto';
+  return documentShell(
+    `${title} · App Builder`,
+    html`<main class="t-error" id="main"><div class="card"><h1>${title}</h1><p>${text}</p>
+      <p class="muted">${status >= 500 ? 'Error' : 'Not found'}: <code>${req.url.split('?')[0].slice(0, 200)}</code></p>
+      <p><a class="btn btn-hot" href="${BASE}">App Builder home</a></p></div></main>`,
+    'login-body',
+    {},
+    '',
+    { theme },
+  );
+}
+
+const sendPage = (req: FastifyRequest, reply: FastifyReply, status: number) =>
+  reply.code(status).type('text/html; charset=utf-8').header('cache-control', 'no-store').send(builderErrorPage(req, status));
+
+/**
+ * The hooks (registered on the root instance): unknown builder addresses, the builder's own
+ * "Not found" answers and server errors become HTML pages for browsers.
+ */
+export function builderErrorPages(app: FastifyInstance) {
+  app.setNotFoundHandler((req, reply) => {
+    if (isBuilder(req.url) && wantsHtml(req)) return sendPage(req, reply, 404);
+    return reply.code(404).send({ message: `Route ${req.method}:${req.url} not found`, error: 'Not Found', statusCode: 404 });
+  });
+  // a route's own plain "Not found" (an id that doesn't exist, another workspace's application)
+  app.addHook('onSend', async (req, reply, payload) => {
+    if (reply.statusCode !== 404 || !isBuilder(req.url) || !wantsHtml(req)) return payload;
+    if (!/^text\/plain\b/.test(String(reply.getHeader('content-type') ?? ''))) return payload;
+    reply.type('text/html; charset=utf-8');
+    return builderErrorPage(req, 404);
+  });
+}
+
+/** For the root error handler: a server error on a builder page a browser opened, as HTML (true: sent). */
+export function builderServerError(req: FastifyRequest, reply: FastifyReply, err: Error & { statusCode?: number }) {
+  if (!isBuilder(req.url) || !wantsHtml(req) || (err.statusCode !== undefined && err.statusCode < 500)) return false;
+  req.log.error(err);
+  sendPage(req, reply, 500);
+  return true;
+}

package/src/builder/form-designer.ts

@@ -0,0 +1,229 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { heading } from '../runtime/items.ts';
+import { RESERVED_SCHEMAS, SOURCE_ID } from '../runtime/data-reporter.ts';
+import { fdSourcesOf, type FdColumn, type FdSource } from '../runtime/form-designer.ts';
+import type { Session } from '../session.ts';
+import { findObject, objectList, type DbObject } from './reporter.ts';
+import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
+
+// Page designer → a Form Designer region → Settings (sprint 85): the tables
+// and views the region offers (which columns forms may show and change, their
+// labels and lists of values, the key column, whether forms may add, change
+// and delete rows) and who may design forms. Saving replaces only the keys
+// this form knows (sources, design_authz, page_size, empty).
+
+type Config = Record<string, any>;
+type Body = Record<string, string | undefined>;
+
+export const MAX_FD_SOURCES = 20;
+
+/** The single-column primary key of a table (null: none, or a view). */
+export async function primaryKeyOf(schema: string, table: string): Promise<string | null> {
+  const row = await owner.one<{ name: string }>(
+    `select a.attname as name from pg_index i join pg_class c on c.oid = i.indrelid join pg_namespace n on n.oid = c.relnamespace
+       join pg_attribute a on a.attrelid = c.oid and a.attnum = i.indkey[0]
+      where i.indisprimary and i.indnatts = 1 and n.nspname = $1 and c.relname = $2`, [schema, table]);
+  return row?.name ?? null;
+}
+
+const clip = (v: string | undefined, max: number) => (v ?? '').trim().slice(0, max);
+const LOV_REF = /^(LOV:[A-Z0-9_]+|STATIC:.+)$/is;
+
+/**
+ * The region's settings from the form. Columns and the key must exist in the
+ * source's table or view (looked up by `lookup`); a new source is a table or
+ * view outside pgkiln's and the system's schemas, with its columns offered
+ * except binary and JSON ones, and its primary key as the key. A list of
+ * values is a shared one of the application (`lovs`) or STATIC:….
+ */
+export async function mergeFormDesignerSettings(
+  config: Config, b: Body, a: { authz: Set<string>; lovs: Set<string> },
+  lookup: { byName: (schema: string, table: string) => Promise<DbObject | null>; byOid: (oid: number) => Promise<DbObject | null>; key: (schema: string, table: string) => Promise<string | null> } =
+    { byName: findObject, byOid: objectByOid, key: primaryKeyOf },
+): Promise<{ config: Config; errors: string[] }> {
+  const out: Config = { ...config };
+  const errors: string[] = [];
+  const size = Number(b.page_size);
+  if (b.page_size && Number.isInteger(size) && size >= 5 && size <= 200 && size !== 25) out.page_size = size;
+  else delete out.page_size;
+  const empty = clip(b.empty, 200);
+  if (empty) out.empty = empty;
+  else delete out.empty;
+  delete out.design_authz;
+  if (b.design_authz && a.authz.has(b.design_authz.toUpperCase())) out.design_authz = b.design_authz;
+  else if (b.design_authz) errors.push(`There is no authorization scheme ${b.design_authz}.`);
+
+  const lovOk = (v: string) => LOV_REF.test(v) && (!/^LOV:/i.test(v) || a.lovs.has(v.slice(4).toUpperCase()));
+  const sources: FdSource[] = [];
+  const existing = fdSourcesOf({ config });
+  for (let i = 0; i < existing.length; i++) {
+    const s = existing.find((x) => x.id === b[`s${i}_key`]);
+    if (!s || sources.some((x) => x.id === s.id)) continue;
+    if (b[`s${i}_remove`] === 'true') continue;
+    const obj = await lookup.byName(s.schema, s.table);
+    const names = new Set(obj?.columns.map((c) => c.name));
+    const columns: FdColumn[] = [];
+    for (let j = 0; j < 500 && b[`s${i}_col_${j}`] !== undefined; j++) {
+      const name = b[`s${i}_col_${j}`]!;
+      if (b[`s${i}_on_${j}`] !== 'true' || columns.some((c) => c.name === name)) continue;
+      // a column the table no longer has may stay offered (it is skipped at run time), but none can be added
+      if (!names.has(name) && !s.columns.some((c) => c.name === name)) continue;
+      const label = clip(b[`s${i}_label_${j}`], 80);
+      let lov = clip(b[`s${i}_lov_${j}`], 2000);
+      if (lov && !lovOk(lov)) {
+        errors.push(`${s.id}.${name}: "${lov.slice(0, 60)}" is not a shared list of values of this application (LOV:NAME) or STATIC:Display;value,….`);
+        lov = '';
+      }
+      columns.push({ name, ...(label ? { label } : {}), ...(lov ? { lov } : {}) });
+    }
+    if (!columns.length) errors.push(`Data source ${s.id} offers no columns.`);
+    const key = clip(b[`s${i}_keycol`], 63);
+    if (key && !names.has(key)) errors.push(`${s.id}: the key column ${key} is not in ${s.schema}.${s.table}.`);
+    const label = clip(b[`s${i}_label`], 80);
+    const description = clip(b[`s${i}_description`], 300);
+    const hasKey = !!key && names.has(key);
+    sources.push({
+      id: s.id, ...(label ? { label } : {}), ...(description ? { description } : {}), schema: s.schema, table: s.table,
+      ...(hasKey ? { key } : {}), columns, insert: b[`s${i}_insert`] === 'true', update: hasKey && b[`s${i}_update`] === 'true', delete: hasKey && b[`s${i}_delete`] === 'true',
+    });
+  }
+
+  if (b.new_object) {
+    const obj = /^\d{1,10}$/.test(b.new_object) ? await lookup.byOid(Number(b.new_object)) : null;
+    if (!obj || RESERVED_SCHEMAS.test(obj.schema)) errors.push('Choose a table or view for the new data source.');
+    else if (sources.length >= MAX_FD_SOURCES) errors.push(`A region offers at most ${MAX_FD_SOURCES} data sources.`);
+    else {
+      let id = clip(b.new_id, 40).toLowerCase();
+      if (id && !SOURCE_ID.test(id)) {
+        errors.push(`"${id}" is not a valid static id: lower case letters, digits and _, starting with a letter.`);
+        id = '';
+      }
+      if (id && sources.some((s) => s.id === id)) {
+        errors.push(`There is already a data source ${id}.`);
+        id = '';
+      }
+      if (!id) {
+        const base = (obj.table.toLowerCase().replace(/[^a-z0-9_]+/g, '_').replace(/^[^a-z]+/, '') || 'source').slice(0, 36);
+        id = base;
+        for (let n = 2; sources.some((s) => s.id === id); n++) id = `${base}_${n}`;
+      }
+      const label = clip(b.new_label, 80) || heading(obj.table);
+      const key = await lookup.key(obj.schema, obj.table);
+      const columns = obj.columns.filter((c) => !/^(bytea|json|jsonb|xml)$/.test(c.type)).map((c) => ({ name: c.name, label: heading(c.name) }));
+      // adding rows at first; changing them when the table has a key; never deleting until the developer says so
+      sources.push({ id, label, schema: obj.schema, table: obj.table, ...(key ? { key } : {}), columns, insert: true, update: !!key, delete: false });
+    }
+  }
+  if (sources.length) out.sources = sources;
+  else delete out.sources;
+  return { config: out, errors };
+}
+
+async function objectByOid(oid: number): Promise<DbObject | null> {
+  const row = await owner.one<{ schema: string; table: string }>(`select n.nspname as schema, c.relname as table from pg_class c join pg_namespace n on n.oid = c.relnamespace where c.oid = $1`, [oid]);
+  return row ? findObject(row.schema, row.table) : null;
+}
+
+const opt = (value: string, label: string, current: string) => html`<option value="${value}"${value === current ? raw(' selected') : ''}>${label}</option>`;
+
+/** The settings form under a Form Designer region in the page designer. */
+export async function formDesignerSettingsForm(pageId: number, appId: number, r: { id: number; config: Config }, s: Session): Promise<Raw> {
+  const cfg = r.config ?? {};
+  const id = (n: string) => `fds_${r.id}_${n}`;
+  const app = await owner.one<{ db_role: string | null }>('select db_role from meta.app where id = $1', [appId]);
+  const schemes = (await owner.query<{ name: string }>('select name from meta.authz_scheme where app_id = $1 order by name', [appId])).rows.map((x) => x.name);
+  const lovs = (await owner.query<{ name: string }>('select name from meta.lov where app_id = $1 order by name', [appId])).rows.map((x) => x.name);
+  const objects = await objectList(app?.db_role ?? null);
+  const sources = fdSourcesOf({ config: cfg });
+  const designAuthz = typeof cfg.design_authz === 'string' ? cfg.design_authz : '';
+  const role = app?.db_role ?? null;
+  const sourceSets = await Promise.all(
+    sources.map(async (src, i) => {
+      const obj = await findObject(src.schema, src.table);
+      const offered = new Map(src.columns.map((c) => [c.name, c]));
+      const all = [...(obj?.columns ?? []).map((c) => ({ name: c.name, type: c.type, missing: false })),
+        ...src.columns.filter((c) => !obj?.columns.some((x) => x.name === c.name)).map((c) => ({ name: c.name, type: '', missing: true }))];
+      const privileges = obj && role
+        ? await owner.one<{ sel: boolean; ins: boolean; upd: boolean; del: boolean }>(
+            `select has_table_privilege($1, $2::oid, 'select') as sel, has_table_privilege($1, $2::oid, 'insert') as ins,
+                    has_table_privilege($1, $2::oid, 'update') as upd, has_table_privilege($1, $2::oid, 'delete') as del`, [role, obj.oid])
+            .catch(() => undefined)
+        : undefined;
+      const missing = privileges ? (['sel', 'ins', 'upd', 'del'] as const).filter((k) => !privileges[k] && (k === 'sel' || src[({ ins: 'insert', upd: 'update', del: 'delete' } as const)[k as 'ins' | 'upd' | 'del']])) : [];
+      const grant = { sel: 'SELECT', ins: 'INSERT', upd: 'UPDATE', del: 'DELETE' };
+      const check = (k: 'insert' | 'update' | 'delete', label: string, needsKey: boolean) =>
+        html`<label class="check"><input type="checkbox" name="s${i}_${k}" value="true"${src[k] ? raw(' checked') : ''}> ${label}${needsKey && !src.key ? ' (needs a key column)' : ''}</label>`;
+      return html`<fieldset class="prop-group"><legend>${src.label || src.id} <span class="muted">(${src.schema}.${src.table})</span></legend>
+        <input type="hidden" name="s${i}_key" value="${src.id}">
+        ${!obj ? html`<div class="alert alert-error" role="alert">The table or view ${src.schema}.${src.table} does not exist (any more).</div>` : ''}
+        ${missing.length ? html`<div class="alert alert-error" role="alert">The application's database role lacks ${missing.map((k) => grant[k]).join(', ')} on ${src.schema}.${src.table}: grant it, or forms can't do that.</div>` : ''}
+        <div class="form-grid">
+          <div class="field"><label class="label" for="${id(`s${i}_id`)}">Static id</label><input id="${id(`s${i}_id`)}" value="${src.id}" readonly></div>
+          <div class="field"><label class="label" for="${id(`s${i}_label`)}">Label</label><input id="${id(`s${i}_label`)}" name="s${i}_label" maxlength="80" value="${src.label ?? ''}" placeholder="${heading(src.table)}"></div>
+          <div class="field" data-wide><label class="label" for="${id(`s${i}_description`)}">Description (shown to designers)</label><input id="${id(`s${i}_description`)}" name="s${i}_description" maxlength="300" value="${src.description ?? ''}"></div>
+          <div class="field"><label class="label" for="${id(`s${i}_keycol`)}">Key column (identifies a row)</label>
+            <select id="${id(`s${i}_keycol`)}" name="s${i}_keycol"><option value="">- none: forms only add rows -</option>${(obj?.columns ?? []).map((c) => opt(c.name, c.name, src.key ?? ''))}</select></div>
+          <div class="field"><span class="label">Forms on it may</span>
+            ${check('insert', 'add rows', false)} ${check('update', 'change rows', true)} ${check('delete', 'delete rows', true)}</div>
+        </div>
+        <div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Offer</th><th scope="col">Column</th><th scope="col">Label</th><th scope="col">List of values</th></tr></thead><tbody>
+          ${all.map((c, j) => {
+            const o = offered.get(c.name);
+            return html`<tr>
+              <td data-label="Offer"><input type="hidden" name="s${i}_col_${j}" value="${c.name}"><input type="checkbox" name="s${i}_on_${j}" value="true"${o ? raw(' checked') : ''} aria-label="Offer ${c.name}"></td>
+              <td data-label="Column"><code>${c.name}</code> <span class="muted">${c.type}</span>${c.missing ? html` <span class="tag tag-error">not in the table</span>` : ''}</td>
+              <td data-label="Label"><input name="s${i}_label_${j}" maxlength="80" value="${o?.label ?? ''}" placeholder="${heading(c.name)}" aria-label="Label of ${c.name}"></td>
+              <td data-label="List of values"><input name="s${i}_lov_${j}" maxlength="2000" value="${o?.lov ?? ''}" placeholder="LOV:NAME" list="${id('lovs')}" aria-label="List of values of ${c.name}"></td>
+            </tr>`;
+          })}
+        </tbody></table></div>
+        <div class="field"><label class="check"><input type="checkbox" name="s${i}_remove" value="true"> Remove this data source (forms on it stop working)</label></div>
+      </fieldset>`;
+    }),
+  );
+  return html`<h3 class="u-mt15">Form Designer settings</h3>
+    <p class="muted u-mt0">Users that pass the designers' authorization scheme build data entry forms on the tables and views below: they pick offered columns, labels, help texts, required fields and defaults, and publish forms for everyone who can see this region. Forms read and write rows as the application's database role, so grants and row level security apply.</p>
+    <datalist id="${id('lovs')}">${lovs.map((n) => html`<option value="LOV:${n}">`)}</datalist>
+    <form method="post" action="${BASE}/pages/${pageId}/region/${r.id}/form-designer" class="component-form">${csrf(s)}
+      <fieldset class="prop-group"><legend>Forms</legend><div class="form-grid">
+        <div class="field"><label class="label" for="${id('design_authz')}">Who may design forms</label>
+          <select id="${id('design_authz')}" name="design_authz">${opt('', 'Nobody (choose an authorization scheme)', designAuthz)}${schemes.map((n) => opt(n, `Authorization: ${n}`, designAuthz))}</select></div>
+        <div class="field"><label class="label" for="${id('page_size')}">Rows per page</label>
+          <input id="${id('page_size')}" name="page_size" type="number" min="5" max="200" value="${cfg.page_size ?? ''}" placeholder="25"></div>
+        <div class="field" data-wide><label class="label" for="${id('empty')}">Text when there are no rows</label>
+          <input id="${id('empty')}" name="empty" maxlength="200" value="${cfg.empty ?? ''}" placeholder="No data found"></div>
+      </div></fieldset>
+      ${sourceSets}
+      <fieldset class="prop-group"><legend>Add a data source</legend><div class="form-grid">
+        <div class="field" data-wide><label class="label" for="${id('new_object')}">Table or view</label>
+          <select id="${id('new_object')}" name="new_object"><option value="">- none -</option>${objects.map((o) => html`<option value="${o.oid}">${o.name}${o.access ? '' : ' (no access for the app role)'}</option>`)}</select></div>
+        <div class="field"><label class="label" for="${id('new_id')}">Static id</label><input id="${id('new_id')}" name="new_id" maxlength="40" pattern="[a-z][a-z0-9_]*" placeholder="from the name"></div>
+        <div class="field"><label class="label" for="${id('new_label')}">Label</label><input id="${id('new_label')}" name="new_label" maxlength="80"></div>
+      </div>
+      <small class="help">All columns are offered at first (except binary and JSON ones), the primary key is the key column, and forms may add and change rows, not delete them. Untick columns designers should not put on forms, such as generated keys and audit columns.</small></fieldset>
+      <div class="buttons"><button class="btn btn-hot">Save Form Designer settings</button></div>
+    </form>`;
+}
+
+export async function formDesignerBuilderRoutes(app: FastifyInstance) {
+  app.post(`${BASE}/pages/:pid/region/:rid/form-designer`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const { pid, rid } = req.params as { pid: string; rid: string };
+    const r = /^\d{1,9}$/.test(pid) && /^\d{1,9}$/.test(rid)
+      ? await owner.one<{ id: number; config: Config; app_id: number }>(
+          `select r.id, r.config, p.app_id from meta.region r join meta.page p on p.id = r.page_id where r.id = $1 and r.page_id = $2 and r.type = 'form_designer'`, [rid, pid])
+      : undefined;
+    if (!r) return reply.code(404).send('Not found');
+    const schemes = (await owner.query<{ name: string }>('select name from meta.authz_scheme where app_id = $1', [r.app_id])).rows;
+    const lovs = (await owner.query<{ name: string }>('select name from meta.lov where app_id = $1', [r.app_id])).rows;
+    const { config, errors } = await mergeFormDesignerSettings(r.config ?? {}, (req.body ?? {}) as Body,
+      { authz: new Set(schemes.map((x) => x.name.toUpperCase())), lovs: new Set(lovs.map((x) => x.name.toUpperCase())) });
+    await owner.query('update meta.region set config = $2 where id = $1', [r.id, JSON.stringify(config)]);
+    if (errors.length) flash(s, errors.join(' '), 'error');
+    else flash(s, 'Settings saved.');
+    return back(reply, s, `${BASE}/pages/${pid}?c=region-${rid}`);
+  });
+}

package/src/builder/locks.ts

@@ -41,6 +41,12 @@ const RUN_ONLY_EXEMPT = /^\/apps\/\d+\/(availability|backups|backups\/settings|l
 /** The application (and page) a builder URL under /apps/:id or /pages/:pid is about, or null. */
 export async function appOfPath(path: string): Promise<{ appId: number; pageNo: number | null; pageId: number | null } | null> {
   const rel = path.split('?')[0].slice(BASE.length);
+  // (sprint 86) the page designer by the page's number
+  const byNo = /^\/apps\/(\d{1,9})\/pages\/(\d{1,9})(\/|$)/.exec(rel);
+  if (byNo) {
+    const p = await owner.one<{ id: number }>('select id from meta.page where app_id = $1 and page_no = $2', [Number(byNo[1]), Number(byNo[2])]);
+    return { appId: Number(byNo[1]), pageNo: Number(byNo[2]), pageId: p?.id ?? null };
+  }
   const app = /^\/apps\/(\d{1,9})(\/|$)/.exec(rel);
   if (app) return { appId: Number(app[1]), pageNo: null, pageId: null };
   const page = /^\/pages\/(\d{1,9})(\/|$)/.exec(rel);