pgkiln 0.70.0 → 0.71.0

package/docs/guide/16-files.md

@@ -406,7 +406,7 @@ The HR sample has `EMP_XML`, for XML files like `/static/samples/employees.xml`.
 ### Data loading in an application
 
 For end users, add a page with a `file` item and a button, and a **process of type
-`data_load`**. The process runs **as the application's database role**, so grants, row level
+`data_load`** ((sprint 137) **Create page → Data loading** makes the definition and such a page for a table). The process runs **as the application's database role**, so grants, row level
 security, triggers and the audit trail apply, just as they do for the form.
 
 | `config` key | Meaning |

package/examples/hr/hr_73_configuration_options.sql

@@ -0,0 +1,17 @@
+-- =====================================================================
+-- HR example, part 73: a configurable build option (sprint 137, AP-3;
+-- migration 137; docs/guide/06-processing.md "Build options",
+-- 03-builder.md "Add feature")
+--
+-- LEAVE_FORECAST (part 22: the Forecast region of page 22, excluded) is
+-- marked configurable. In the builder, Create page → Feature →
+-- Configuration options then adds page 9020 "Configuration" where HR's
+-- administrators (king, demo) switch the forecast on and off while the
+-- application runs, without a developer. Nothing else changes until that
+-- feature is added.
+-- =====================================================================
+
+update meta.build_option o set configurable = true,
+       description = coalesce(o.description, 'The leave forecast on the leave planner (page 22)')
+  from meta.app a
+ where a.id = o.app_id and a.alias = 'hr' and o.name = 'LEAVE_FORECAST';

package/examples/hr/hr_74_app_utilities.sql

@@ -0,0 +1,22 @@
+-- =====================================================================
+-- HR example, part 74: an application's Utilities (sprint 138, AP-5;
+-- migration 138; docs/guide/03-builder.md "Utilities")
+--
+-- UI defaults (App Builder → Utilities → UI defaults, or Workspace
+-- utilities → UI defaults) for hr.leave_request: the page wizards and the
+-- Create Application wizard label its "days" column "Working days" and
+-- show it with a number format mask, and a generated form item for
+-- "reason" gets a help text. Pages that exist already don't change: create
+-- a form on hr.leave_request (Create Page → Form) to see them.
+--
+-- The rest of the Utilities page needs no example data: Database object
+-- dependencies, Change history (recorded from the next change on),
+-- Upgrade application and the application checksum work on the HR
+-- application as it is.
+-- =====================================================================
+
+insert into meta.ui_default (schema_name, table_name, column_name, label, format_mask, help, alignment, updated_by)
+values
+  ('hr', 'leave_request', 'days', 'Working days', '990', 'Working days the leave takes, without weekends and public holidays.', 'end', 'admin'),
+  ('hr', 'leave_request', 'reason', null, null, 'Optional: what the leave is for. Your manager sees it when deciding.', null, 'admin')
+on conflict (schema_name, table_name, column_name) do nothing;

package/package.json

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

package/public/app.css

@@ -1602,6 +1602,15 @@ img.tc-avatar { object-fit: cover; }
 .tc-media { display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0; min-width: 0; overflow-wrap: anywhere; }
 .tc-media > .tc-stack { flex: 1; }
 .tc-media-badge { flex: none; }
+/* (137) ut_content_row: avatar, title and description, secondary text and badge on the right */
+.tc-content-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.tc-content-row { display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0; min-width: 0; overflow-wrap: anywhere; }
+.tc-content-row + .tc-content-row { border-top: 1px solid var(--border); }
+.tc-content-row > .tc-stack { flex: 1; }
+.tc-content-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex: none; max-width: 40%; text-align: end; }
+@media (max-width: 480px) { .tc-content-row { flex-wrap: wrap; } .tc-content-row-end { flex-direction: row; align-items: center; max-width: none; margin-inline-start: auto; } }
+/* (137) a checkbox group shown as switches ({"switches": true}): one per line */
+.radio-group.switch-group { flex-direction: column; align-items: flex-start; }
 .tc-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; }
 .tc-metric { gap: 0.25rem; }
 .tc-metric-label { margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

package/public/builder.css

@@ -1600,3 +1600,48 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 
 /* (sprint 136) a button inside an alert (e.g. Add vector column without pgvector) wraps on a phone instead of overflowing */
 .alert .btn { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+
+/* (sprint 137, AP-3) Create page: the grid of page types with small previews, the features, the type's step */
+.cp-tabs { margin-bottom: 0.9rem; flex-wrap: wrap; }
+.cp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.75rem; }
+.cp-grid > li { min-width: 0; }
+.cp-type { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
+a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
+.cp-type b { font-size: 0.95rem; }
+.cp-type small { color: var(--muted); line-height: 1.35; }
+.cp-type .tag { align-self: flex-start; }
+.cp-done { opacity: 0.6; }
+.cp-preview { display: block; border-radius: var(--radius-sm); background: var(--surface-2); padding: 4px; }
+.cp-preview-lg { max-width: 16rem; }
+.cp-svg { display: block; width: 100%; height: auto; }
+.cp-svg .pv-line { fill: var(--border-strong); }
+.cp-svg .pv-soft { fill: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
+.cp-svg .pv-acc { fill: var(--accent); }
+.cp-svg .pv-bg { fill: var(--surface); }
+.cp-svg .pv-frame { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
+.cp-svg .pv-stroke { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
+.cp-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft, var(--surface-2)); color: var(--accent); }
+.cp-step { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; }
+.cp-step > .cp-preview { flex: 0 1 12rem; }
+.cp-step > p { flex: 1 1 14rem; margin: 0; }
+.cp-adds { padding-inline-start: 1.2rem; overflow-wrap: anywhere; }
+
+/* (sprint 138, AP-5) an application's Utilities: filters, the dashboard figures, object dependencies, icons, UI defaults */
+.util-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; }
+.util-filters .field { margin: 0; min-width: 0; flex: 1 1 9rem; }
+.util-filters .buttons { margin: 0; }
+.util-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; margin: 0; }
+.util-stats div { border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); padding: 0.5rem 0.75rem; }
+.util-stats dt { color: var(--muted); font-size: 0.8rem; }
+.util-stats dd { margin: 0; font-size: 1.4rem; font-weight: 650; }
+.util-sum code, .util-history td, .dep-table td { overflow-wrap: anywhere; }
+.util-sum code { word-break: break-all; }
+.tag-success { background: var(--success-soft); color: var(--success); }
+.dep-problem td:first-child, .dep-missing { color: var(--danger); }
+.dep-list { margin: 0.25rem 0 0; padding-left: 1rem; }
+.dep-list a { display: inline-flex; gap: 0.3rem; align-items: center; }
+.util-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
+.util-icons .icon-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 0.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); text-align: center; }
+.util-icons code { font-size: 0.75rem; overflow-wrap: anywhere; }
+.ui-defaults :is(input, select, textarea) { width: 100%; min-width: 7rem; }
+.util-upgrade + .util-upgrade { margin-top: 1rem; }

package/src/app.ts

@@ -41,6 +41,10 @@ import { layoutRoutes } from './builder/layouts.ts';
 import { dataLoadRoutes } from './builder/dataload.ts';
 import { builderRoutes } from './builder/routes.ts';
 import { appUpdateHooks } from './builder/app-updates.ts';
+import { historyHooks, utilityRoutes } from './builder/utilities.ts';
+import { dependencyRoutes } from './builder/dependencies.ts';
+import { upgradeRoutes } from './builder/upgrade.ts';
+import { uiDefaultRoutes } from './builder/ui-defaults.ts';
 import { dbUserRoutes } from './builder/db-users.ts';
 import { dataPumpRoutes } from './builder/datapump.ts';
 import { schedulingRoutes } from './builder/scheduling.ts';
@@ -165,6 +169,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   });
   builderErrorPages(app);
   appUpdateHooks(app); // (116) who changed an application last
+  historyHooks(app); // (138) a snapshot before an application's first recorded change
   await app.register(cookie);
   await app.register(formbody, { bodyLimit: 5 * 1024 * 1024 });
   // file upload items; oversized files are cut off and reported, not thrown
@@ -269,6 +274,11 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(mailQueueRoutes);
   await app.register(networkAccessRoutes);
   await app.register(workspaceMailRoutes);
+  // (sprint 138, AP-5) an application's Utilities
+  await app.register(utilityRoutes);
+  await app.register(dependencyRoutes);
+  await app.register(upgradeRoutes);
+  await app.register(uiDefaultRoutes);
   app.get('/', async (_req, reply) => reply.redirect('/builder/home'));
   return app;
 }

package/src/builder/advisor.ts

@@ -44,7 +44,7 @@ export interface Finding {
 export type SqlShape = 'select' | 'boolean' | 'statements' | 'regex';
 
 /** Which fields hold SQL, and of what shape, per component kind (null: decided by the row). */
-function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[] {
+export function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[] {
   switch (kind) {
     case 'region':
       return [
@@ -105,7 +105,7 @@ function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[]
 const conditionSql = (row: any): { name: string; shape: SqlShape }[] =>
   row.condition_type === 'sql' ? [{ name: 'condition_expr', shape: 'boolean' }] : row.condition_type === 'exists' || row.condition_type === 'not_exists' ? [{ name: 'condition_expr', shape: 'select' }] : [];
 
-const EXPLAINABLE = /^\s*(\(|select|with|values|table|insert|update|delete|merge)\b/i;
+export const EXPLAINABLE = /^\s*(\(|select|with|values|table|insert|update|delete|merge)\b/i;
 
 /**
  * The problem with one piece of SQL, or null. Runs inside the caller's

package/src/builder/app-updates.ts

@@ -1,5 +1,6 @@
 import type { FastifyInstance, FastifyRequest } from 'fastify';
 import { owner } from '../db.ts';
+import { recordHistory } from '../history.ts';
 import type { Session } from '../session.ts';
 import { BASE } from './ui.ts';
 
@@ -50,6 +51,8 @@ export function appUpdateHooks(app: FastifyInstance) {
       appId = Number(m[1]);
     }
     await recordChange(appId, n.s.username).catch((err) => req.log.warn({ err }, 'app_change not recorded'));
+    // (sprint 138) what changed, per component (src/history.ts)
+    await recordHistory(appId, n.s.username).catch((err) => req.log.warn({ err }, 'change history not recorded'));
     return payload;
   });
 }

package/src/builder/components.ts

@@ -545,11 +545,13 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     plural: 'Build options',
     icon: 'settings',
     summary: (o) => `${o.name} (${o.status})`,
-    defaults: { status: 'include' },
+    defaults: { status: 'include', configurable: false },
     fields: [
       { name: 'name', label: 'Name', kind: 'upper', help: 'e.g. FEATURE_EXPORT; components name it in their Build option property.' },
       { name: 'status', label: 'Status', kind: 'select', options: ['include', 'exclude'], help: 'exclude: every component with this option is left out of the running application (and those with "Not" are included).' },
       { name: 'description', label: 'Description', kind: 'text', wide: true },
+      // (137) the Configuration Options feature
+      { name: 'configurable', label: 'Configurable', kind: 'bool', help: 'The application\'s administrators may switch it on the Configuration page (Create page → Feature → Configuration options).' },
     ],
   },
   rest_module: {

package/src/builder/create-page.ts

@@ -0,0 +1,259 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { featureStates } from './features.ts';
+import { appOr404 } from './forms.ts';
+import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
+import { NO_TABLE, PAGE_KINDS, wizardTables } from './wizards.ts';
+
+// (sprint 137, AP-3) Create Page like APEX's: a grid of page types with small previews (tab Component), the
+// features (tab Feature, features.ts) and Create page as copy (tab Copy), at /builder/apps/:id/create-page.
+// A type that needs a table asks for one first (?type=…), then goes to the options step (wizards.ts); the
+// others go to the options step at once. Blank page and Create pages with AI stay as they were. Plain links and
+// forms: no JavaScript needed. The previews are inline SVG drawn with classes (public/builder.css), no styles.
+
+/** The grid's order (APEX's names), each with the step it starts with. */
+const GRID: { key: string; label: string; help: string; table: boolean }[] = [
+  { key: 'blank', label: 'Blank page', help: 'An empty page to build in the Page Designer.', table: false },
+  ...['calendar', 'cards', 'chart', 'comments', 'content_row', 'dashboard', 'data_load', 'facets', 'form', 'grid', 'report', 'map',
+    'master_detail', 'media_list', 'report_form', 'search', 'smart_filters', 'timeline', 'tree', 'tasks', 'wizard', 'workflows'].map((k) => {
+    const d = PAGE_KINDS.find((x) => x[0] === k)!;
+    return { key: k, label: d[1], help: d[2], table: !NO_TABLE.has(k) };
+  }),
+];
+
+// ---------------------------------------------------------------- previews (80 × 50, inline SVG, classes only)
+const rect = (x: number, y: number, w: number, h: number, cls = 'pv-line', rx = 1.5) => `<rect class="${cls}" x="${x}" y="${y}" width="${w}" height="${h}" rx="${rx}"/>`;
+const circle = (cx: number, cy: number, r: number, cls = 'pv-soft') => `<circle class="${cls}" cx="${cx}" cy="${cy}" r="${r}"/>`;
+const rows = (y0: number, n: number, x = 6, w = 68, gap = 7) => Array.from({ length: n }, (_, i) => rect(x, y0 + i * gap, w, 3)).join('');
+const table = `${rect(6, 6, 68, 6, 'pv-soft')}${rows(16, 5)}`;
+const listRows = (n: number, avatar: boolean, right = false) => Array.from({ length: n }, (_, i) => {
+  const y = 7 + i * 13;
+  return `${avatar ? circle(11, y + 4, 4.5) : ''}${rect(avatar ? 20 : 6, y, 30, 3.5, 'pv-acc')}${rect(avatar ? 20 : 6, y + 5.5, 40, 2.5)}${right ? rect(62, y + 1, 12, 5, 'pv-soft', 2.5) : ''}`;
+}).join('');
+const PREVIEWS: Record<string, string> = {
+  blank: rect(6, 6, 68, 38, 'pv-frame', 3),
+  calendar: `${rect(6, 6, 68, 6, 'pv-soft')}${Array.from({ length: 15 }, (_, i) => rect(6 + (i % 5) * 14, 15 + Math.floor(i / 5) * 10, 12, 8, i === 7 ? 'pv-acc' : 'pv-line')).join('')}`,
+  cards: Array.from({ length: 4 }, (_, i) => `${rect(6 + (i % 2) * 35, 6 + Math.floor(i / 2) * 20, 33, 18, 'pv-frame', 2)}${rect(9 + (i % 2) * 35, 9 + Math.floor(i / 2) * 20, 18, 3, 'pv-acc')}${rect(9 + (i % 2) * 35, 15 + Math.floor(i / 2) * 20, 24, 2.5)}`).join(''),
+  chart: [14, 26, 20, 32, 10].map((h, i) => rect(10 + i * 13, 44 - h, 9, h, i === 3 ? 'pv-acc' : 'pv-soft', 1)).join('') + rect(6, 44, 68, 1.5),
+  comments: listRows(3, true),
+  content_row: listRows(3, true, true),
+  dashboard: Array.from({ length: 4 }, (_, i) => {
+    const x = 6 + (i % 2) * 35;
+    const y = 6 + Math.floor(i / 2) * 20;
+    return `${rect(x, y, 33, 18, 'pv-frame', 2)}${[6, 10, 7, 12].map((h, j) => rect(x + 4 + j * 7, y + 15 - h, 5, h, j === i ? 'pv-acc' : 'pv-soft', 0.8)).join('')}`;
+  }).join(''),
+  data_load: `${rect(18, 26, 44, 18, 'pv-frame', 2)}${rect(37, 10, 6, 18, 'pv-acc', 1)}<path class="pv-acc" d="M30 14 L40 4 L50 14 Z"/>${rect(24, 32, 32, 2.5)}${rect(24, 37, 24, 2.5)}`,
+  facets: `${rect(6, 6, 18, 38, 'pv-soft', 2)}${[10, 16, 22, 28].map((y) => rect(9, y, 12, 2.5)).join('')}${rect(28, 6, 46, 6, 'pv-soft')}${rows(16, 5, 28, 46)}`,
+  form: [8, 20, 32].map((y) => `${rect(8, y, 16, 3)}${rect(28, y - 2, 44, 7, 'pv-frame', 1.5)}`).join('') + rect(56, 42, 16, 5, 'pv-acc', 2),
+  grid: `${table}${[25, 45].map((x) => rect(x, 13, 0.8, 34, 'pv-line', 0)).join('')}${rect(25.8, 22, 19.2, 6, 'pv-frame', 0)}`,
+  report: `${rect(6, 3, 30, 5, 'pv-frame', 1.5)}${rect(6, 11, 68, 6, 'pv-soft')}${rows(21, 4)}`,
+  map: `${rect(6, 6, 68, 38, 'pv-soft', 3)}<path class="pv-stroke" d="M6 30 C 24 20, 40 40, 74 18"/>${circle(48, 20, 5, 'pv-acc')}${circle(48, 20, 2, 'pv-bg')}`,
+  master_detail: `${rect(6, 4, 68, 5, 'pv-soft')}${rows(12, 2)}${rect(6, 12, 68, 4, 'pv-acc')}${rect(6, 28, 68, 5, 'pv-soft')}${rows(36, 2)}`,
+  media_list: Array.from({ length: 3 }, (_, i) => `${rect(6, 6 + i * 13, 9, 9, 'pv-soft', 2)}${rect(19, 7 + i * 13, 30, 3.5, 'pv-acc')}${rect(19, 12.5 + i * 13, 40, 2.5)}${rect(62, 8 + i * 13, 12, 5, 'pv-soft', 2.5)}`).join(''),
+  report_form: `${rect(6, 6, 42, 6, 'pv-soft')}${rows(16, 4, 6, 42)}${rect(52, 10, 22, 32, 'pv-frame', 2)}${[15, 22, 29].map((y) => rect(55, y, 16, 3)).join('')}${rect(59, 35, 12, 4, 'pv-acc', 1.5)}`,
+  search: `${rect(6, 6, 68, 8, 'pv-frame', 4)}${circle(12, 10, 2.2, 'pv-acc')}${[18, 30].map((y) => `${rect(6, y, 26, 3.5, 'pv-acc')}${rect(6, y + 5, 60, 2.5)}`).join('')}`,
+  smart_filters: `${rect(6, 3, 68, 7, 'pv-frame', 3.5)}${rect(8, 12, 16, 4, 'pv-soft', 2)}${rect(26, 12, 14, 4, 'pv-soft', 2)}${rect(6, 19, 68, 5, 'pv-soft')}${rows(27, 3)}`,
+  timeline: `${rect(13, 4, 1.5, 42, 'pv-line', 0)}${[8, 22, 36].map((y, i) => `${circle(13.75, y, 3, i === 0 ? 'pv-acc' : 'pv-soft')}${rect(21, y - 3, 28, 3, 'pv-acc')}${rect(21, y + 2, 46, 2.5)}`).join('')}`,
+  tree: `${rect(6, 5, 24, 4, 'pv-acc')}<path class="pv-stroke" d="M10 9 V38 M10 18 H18 M10 28 H18 M10 38 H18 M22 32 V38 M22 38 H28"/>${rect(20, 16, 22, 3.5)}${rect(20, 26, 26, 3.5)}${rect(30, 36, 20, 3.5)}`,
+  tasks: [8, 20, 32].map((y, i) => `${rect(8, y, 7, 7, i === 0 ? 'pv-acc' : 'pv-frame', 1.5)}${rect(19, y, 34, 3)}${rect(19, y + 4.5, 22, 2.5)}${rect(60, y + 1, 14, 5, 'pv-soft', 2.5)}`).join(''),
+  wizard: `<path class="pv-stroke" d="M16 9 H64"/>${[16, 40, 64].map((x, i) => circle(x, 9, 4, i === 0 ? 'pv-acc' : 'pv-soft')).join('')}${[20, 30].map((y) => `${rect(10, y, 14, 3)}${rect(28, y - 2, 42, 7, 'pv-frame', 1.5)}`).join('')}${rect(54, 41, 16, 5, 'pv-acc', 2)}`,
+  workflows: `${rect(4, 19, 18, 12, 'pv-acc', 2)}${rect(31, 8, 18, 12, 'pv-soft', 2)}${rect(31, 30, 18, 12, 'pv-soft', 2)}${rect(58, 19, 18, 12, 'pv-frame', 2)}<path class="pv-stroke" d="M22 25 L31 14 M22 25 L31 36 M49 14 L58 25 M49 36 L58 25"/>`,
+  ai: `<path class="pv-acc" d="M40 6 L44 20 L58 25 L44 30 L40 44 L36 30 L22 25 L36 20 Z"/>${circle(62, 12, 3, 'pv-soft')}${circle(18, 38, 2.5, 'pv-soft')}`,
+};
+/** A page type's small picture, decorative (the label says what it is). */
+export const preview = (key: string): Raw =>
+  raw(`<svg class="cp-svg" viewBox="0 0 80 50" aria-hidden="true" focusable="false">${PREVIEWS[key] ?? PREVIEWS.blank}</svg>`);
+
+const TABS: [string, string][] = [['component', 'Component'], ['feature', 'Feature'], ['copy', 'Copy']];
+
+export async function createPageRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/apps/:id/create-page`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOr404(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const q = req.query as Record<string, string | undefined>;
+    const tab = TABS.some(([t]) => t === q.tab) ? q.tab! : 'component';
+    const type = GRID.find((g) => g.key === q.type);
+    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', type ? `${BASE}/apps/${a.id}/create-page` : undefined]];
+    const nextPage = async () => {
+      const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
+      let n = Math.max(0, ...[...used].filter((x) => x < 9000)) + 1;
+      while (used.has(n)) n++;
+      return n;
+    };
+
+    // a page type that needs a table: choose it first (APEX: the data source step)
+    if (type) {
+      let body: Raw;
+      if (type.key === 'blank') {
+        body = html`<form method="post" action="${BASE}/apps/${a.id}/pages">${csrf(s)}
+            <div class="form-grid">
+              ${input('page_no', 'Page number', await nextPage(), { type: 'number', required: true })}
+              ${input('name', 'Name', '', { required: true })}
+              ${select('mode', 'Page mode', 'normal', [['normal', 'Normal page'], ['modal', 'Modal dialog']])}
+              ${input('parent_page', 'Breadcrumb parent', a.home_page ?? '', { type: 'number' })}
+            </div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Create page</button></div>
+          </form>`;
+      } else {
+        const tables = await wizardTables(a.db_role);
+        body = html`<form method="get" action="${BASE}/apps/${a.id}/wizard">
+            <input type="hidden" name="kind" value="${type.key}">
+            <div class="form-grid">
+              ${select('table', 'Table or view', '', tables.map((t): [string, string] => [t.t, t.access ? t.t : `${t.t} (no access for ${a.db_role})`]),
+                'The next step proposes the columns, keys and foreign keys from the database catalog.')}
+            </div>
+            <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page">Back</a><button class="btn btn-hot">Next</button></div>
+          </form>`;
+      }
+      const main = html`${appHeader(a, 'pages', s)}
+        ${region(type.label, html`<div class="cp-step"><span class="cp-preview cp-preview-lg">${preview(type.key)}</span><p class="muted">${type.help}</p></div>${body}`)}`;
+      return send(reply, s, shell(s, `Create page · ${a.name}`, [...crumbs, [type.label]], main));
+    }
+
+    const tabs = html`<nav class="gal-tabs segmented cp-tabs" aria-label="Create page">${TABS.map(([t, l]) =>
+      html`<a href="${BASE}/apps/${a.id}/create-page?tab=${t}"${t === tab ? raw(' aria-current="page"') : ''}>${l}</a>`)}</nav>`;
+    let body: Raw;
+    if (tab === 'component') {
+      const href = (g: (typeof GRID)[number]) =>
+        g.key !== 'blank' && !g.table ? `${BASE}/apps/${a.id}/wizard?kind=${g.key}` : `${BASE}/apps/${a.id}/create-page?type=${g.key}`;
+      body = html`<p class="muted u-mt0">Choose a page type. Types on a table ask for it next; every type proposes its settings and opens the new page in the Page Designer.</p>
+        <ul class="cp-grid">${GRID.map((g) => html`<li><a class="cp-type" href="${href(g)}"><span class="cp-preview">${preview(g.key)}</span><b>${g.label}</b><small>${g.help}</small></a></li>`)}
+          <li><a class="cp-type" href="${BASE}/apps/${a.id}/ai-pages"><span class="cp-preview">${preview('ai')}</span><b>Create pages with AI</b><small>Describe the pages in your own words; check the proposals before they are made.</small></a></li></ul>`;
+    } else if (tab === 'feature') {
+      const states = await featureStates(a.id);
+      body = html`<p class="muted u-mt0">Features add pages and settings to the application. Each lists what it adds before it creates anything; an installed feature is greyed out.</p>
+        <ul class="cp-grid">${states.map(({ f, installed, blocked }) => html`<li><a class="cp-type${installed || blocked ? ' cp-done' : ''}" href="${BASE}/apps/${a.id}/features/${f.key}">
+            <span class="cp-feature-icon">${icon(f.icon)}</span><b>${f.label}</b><small>${f.help}</small>
+            ${installed ? html`<span class="tag">Installed</span>` : blocked ? html`<span class="tag">Not available</span>` : ''}</a></li>`)}</ul>`;
+    } else {
+      body = await copyStep1(a, s.username!);
+    }
+    const main = html`${appHeader(a, 'pages', s)}${region('Create page', html`${tabs}${body}`)}`;
+    return send(reply, s, shell(s, `Create page · ${a.name}`, crumbs, main));
+  });
+
+  // ---------------------------------------------------------------- Create page as copy
+  // step 2 (?from=): the page to copy; step 3 (?from=&page=): number, name and the shared components; POST: copy
+  app.get(`${BASE}/apps/:id/copy-page`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOr404(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const q = req.query as Record<string, string | undefined>;
+    const from = await sourceApp(a.id, q.from);
+    if (!from) {
+      flash(s, 'Choose an application of this workspace.', 'error');
+      return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
+    }
+    const pages = (await owner.query<{ id: number; page_no: number; name: string }>('select id, page_no, name from meta.page where app_id = $1 order by page_no', [from.id])).rows;
+    const page = pages.find((p) => String(p.page_no) === q.page);
+    const crumbs: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Create page', `${BASE}/apps/${a.id}/create-page?tab=copy`], ['Copy']];
+    let body: Raw;
+    if (!page) {
+      body = html`<form method="get" action="${BASE}/apps/${a.id}/copy-page"><input type="hidden" name="from" value="${from.id}">
+          <div class="form-grid">${select('page', `Page of ${from.name}`, '', pages.map((p): [string, string] => [String(p.page_no), `${p.page_no} ${p.name}`]))}</div>
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/create-page?tab=copy">Back</a><button class="btn btn-hot">Next</button></div></form>`;
+    } else {
+      const refs = (await owner.query<{ kind: string; name: string; in_target: boolean }>('select * from meta.page_shared_refs($1, $2)', [page.id, a.id])).rows;
+      const used = new Set((await owner.query('select page_no from meta.page where app_id = $1', [a.id])).rows.map((r) => r.page_no as number));
+      let no = used.has(page.page_no) ? Math.max(0, ...[...used].filter((x) => x < 9000)) + 1 : page.page_no;
+      while (used.has(no)) no++;
+      const same = from.id === a.id;
+      const options = async (kind: string) => (await owner.query<{ n: string }>(SHARED_NAMES[kind], [a.id])).rows.map((r) => r.n);
+      const mapRows = await Promise.all(refs.map(async (r) => {
+        const names = await options(r.kind);
+        const opts: [string, string][] = [...(same || r.in_target ? [] : [['', 'Copy it into this application'] as [string, string]]), ...names.map((n): [string, string] => [n, `Use ${n}`])];
+        return html`<tr><td>${KIND_LABELS[r.kind] ?? r.kind}</td><td><code>${r.name}</code></td><td>
+          <select name="map:${r.kind}:${r.name}" aria-label="${KIND_LABELS[r.kind] ?? r.kind} ${r.name}">${opts.map(([v, l]) => html`<option value="${v}"${v === (r.in_target || same ? r.name : '') ? raw(' selected') : ''}>${l}</option>`)}</select></td></tr>`;
+      }));
+      body = html`<p class="muted u-mt0">Page ${page.page_no} <b>${page.name}</b> of ${from.name}: its regions, items, buttons, dynamic actions, validations, processes, computations and branches. Items named P${page.page_no}_… are renamed to the new number, also where the page's code refers to them.</p>
+        <form method="post" action="${BASE}/apps/${a.id}/copy-page">${csrf(s)}
+          <input type="hidden" name="from" value="${from.id}"><input type="hidden" name="page" value="${page.page_no}">
+          <div class="form-grid">
+            ${input('new_page', 'New page number', no, { type: 'number', required: true })}
+            ${input('name', 'Name', page.name, { required: true })}
+          </div>
+          ${refs.length
+            ? html`<h3>Shared components</h3><p class="muted small">The page refers to these by name. ${same ? 'In the same application they stay as they are, or point to another of the same kind.' : 'Use one of this application\'s, or copy it from the other application.'}</p>
+              <div class="table-wrap"><table class="report"><thead><tr><th>Kind</th><th>Name</th><th>In this application</th></tr></thead><tbody>${mapRows}</tbody></table></div>`
+            : html`<p class="muted">The page uses no shared components.</p>`}
+          ${same ? '' : html`<p class="muted small">Its SQL runs as this application's database role <code>${a.db_role ?? '(none)'}</code>: grant it what ${from.name}'s role may read and change.</p>`}
+          <div class="buttons"><a class="btn" href="${BASE}/apps/${a.id}/copy-page?from=${from.id}">Back</a><button class="btn btn-hot">Copy page</button></div>
+        </form>`;
+    }
+    const main = html`${appHeader(a, 'pages', s)}${region('Create page as copy', body)}`;
+    return send(reply, s, shell(s, `Copy page · ${a.name}`, crumbs, main));
+  });
+
+  app.post(`${BASE}/apps/:id/copy-page`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOr404(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const b = (req.body ?? {}) as Record<string, unknown>;
+    const from = await sourceApp(a.id, String(b.from ?? ''));
+    const retry = `${BASE}/apps/${a.id}/copy-page?from=${encodeURIComponent(String(b.from ?? ''))}&page=${encodeURIComponent(String(b.page ?? ''))}`;
+    if (!from) {
+      flash(s, 'Choose an application of this workspace.', 'error');
+      return back(reply, s, `${BASE}/apps/${a.id}/create-page?tab=copy`);
+    }
+    try {
+      const page = /^\d{1,6}$/.test(String(b.page ?? '')) ? Number(b.page) : NaN;
+      const no = /^\d{1,6}$/.test(String(b.new_page ?? '').trim()) ? Number(String(b.new_page).trim()) : NaN;
+      if (!(no >= 1)) throw new Error('Enter a page number.');
+      const name = String(b.name ?? '').trim().slice(0, 200);
+      if (!name) throw new Error('Enter a name.');
+      // map:<kind>:<NAME> → a name of the target's (empty: copy); only known kinds pass
+      const map: Record<string, string> = {};
+      for (const [k, v] of Object.entries(b)) {
+        const m = /^map:([a-z_]+):(.{1,100})$/.exec(k);
+        if (m && Object.hasOwn(SHARED_NAMES, m[1]) && typeof v === 'string') map[`${m[1]}:${m[2]}`] = v.slice(0, 100);
+      }
+      const id = await owner.tx(async (c) => (await c.query('select meta.copy_page($1, $2, $3, $4, $5, $6::jsonb) as id', [from.id, page, a.id, no, name, JSON.stringify(map)])).rows[0].id as number);
+      flash(s, `Page ${no} "${name}" created as a copy of page ${page}${from.id === a.id ? '' : ` of ${from.name}`}.`);
+      return back(reply, s, `${BASE}/pages/${id}`);
+    } catch (e) {
+      flash(s, (e as Error).message, 'error');
+      return back(reply, s, retry);
+    }
+  });
+}
+
+const KIND_LABELS: Record<string, string> = {
+  authz_scheme: 'Authorization scheme', build_option: 'Build option', lov: 'List of values', list: 'List',
+  template_component: 'Template component', search_config: 'Search configuration', data_load_def: 'Data load definition',
+};
+/** The target application's names of each kind (the choices of the mapping). */
+const SHARED_NAMES: Record<string, string> = {
+  authz_scheme: 'select name as n from meta.authz_scheme where app_id = $1 order by 1',
+  build_option: 'select name as n from meta.build_option where app_id = $1 order by 1',
+  lov: 'select name as n from meta.lov where app_id = $1 order by 1',
+  list: 'select name as n from meta.list where app_id = $1 order by 1',
+  template_component: 'select static_id as n from meta.template_component where app_id = $1 order by 1',
+  search_config: 'select name as n from meta.search_config where app_id = $1 order by 1',
+  data_load_def: 'select name as n from meta.data_load_def where app_id = $1 order by 1',
+};
+
+/** An application of the same workspace as the target (the target itself too), or null. */
+async function sourceApp(targetId: number, from: string | undefined) {
+  if (!/^\d{1,9}$/.test(String(from ?? ''))) return null;
+  return (await owner.one<{ id: number; name: string; alias: string }>(
+    'select id, name, alias from meta.app where id = $1 and meta.app_workspace(id) = meta.app_workspace($2)', [from, targetId],
+  )) ?? null;
+}
+
+/** Copy, step 1: the application to copy from (this one first). */
+async function copyStep1(a: { id: number; name: string }, _user: string): Promise<Raw> {
+  const apps = (await owner.query<{ id: number; name: string; alias: string }>(
+    'select id, name, alias from meta.app where meta.app_workspace(id) = meta.app_workspace($1) order by id <> $1, lower(name)', [a.id],
+  )).rows;
+  return html`<p class="muted u-mt0">Copy a page of this application or another application of the workspace, under a new number and name. The shared components it uses (lists of values, authorization schemes, lists…) are mapped to this application's or copied.</p>
+    <form method="get" action="${BASE}/apps/${a.id}/copy-page">
+      <div class="form-grid">${select('from', 'Copy from application', String(a.id), apps.map((x): [string, string] => [String(x.id), x.id === a.id ? `${x.name} (this application)` : `${x.name} (${x.alias})`]))}</div>
+      <div class="buttons"><button class="btn btn-hot">Next</button></div>
+    </form>`;
+}