pgkiln 0.44.0 → 0.45.0

package/docs/guide/06-processing.md

@@ -503,6 +503,28 @@ savepoint. A failing computation before the page is shown leaves the item as it
 error on the page; after a submit it stops the submit (everything is rolled back) and shows the
 error, like a failing process.
 
+### Application computations
+
+**Shared Components → Application Computations** (APEX: Application Computations) are
+computations for every page of the application, with the same types, conditions, authorization
+and build option as a page's (migration 102, `meta.app_computation`). Their `point`:
+
+| `point` | When |
+|---|---|
+| `after_authentication` | Once, when a user signs in (after the application processes `after_login`) |
+| `before_header` | Every page shown, before the page's own `before_header` computations |
+| `after_submit` | Every page submitted, before the page's own `after_submit` computations (and the validations) |
+
+They usually set **application items**, e.g. a user's sales region once at sign-in:
+
+```sql
+select region from sales.rep where lower(username) = lower(:APP_USER)   -- AI_REGION, sql_query, after_authentication
+```
+
+An application computation of a page item runs on that item's page only (elsewhere it is skipped,
+without the *unknown item* error a page's computation gives). A failing one behaves like a page
+computation at the same point.
+
 ## Branches
 
 After a successful submit pgkiln redirects (POST-redirect-GET). **Branches** decide where to: the

package/docs/guide/09-reference.md

@@ -387,6 +387,19 @@ runtime role, never exported) ([chapter 19](19-rest-data-sources.md#web-credenti
 
 **`app_process`**: `app_id`, `seq`, `name`, `point` (`after_login` / `before_page`), `code`, `authz`.
 
+**`app_computation`** (102): `app_id`, `seq`, `item_name`, `point` (`after_authentication` / `before_header` /
+`after_submit`), `type`, `expression`, `condition_type`, `condition_expr`, `condition_value`, `authz`, `build_option`,
+`comments` ([chapter 6](06-processing.md#application-computations)).
+
+**`shortcut`** (103): `app_id`, `name` (uppercase, unique per app), `type` (`text` / `html` / `function_body`), `value`,
+`comments` ([chapter 2](02-concepts.md#shortcuts-name)).
+
+**`report_query`** (104): `app_id`, `name` (uppercase, unique per app), `description`, `query`, `format` (`pdf` / `xlsx` /
+`csv` / `json` / `xml` / `html`), `layout`, `file_name`, `title`, `authz`, `comments` ([chapter 16](16-files.md#report-queries)).
+
+**`component_group`** (105): `app_id`, `name`, `description`, `members` (`text[]` of `kind:name`) ([chapter 3](03-builder.md#component-groups)).
+`meta.app.component_settings` (105): `report_rows`, `grid_rows`, `popup_lov_rows`, `lov_max_rows`, `rating_max` ([chapter 3](03-builder.md#component-settings)).
+
 **`build_option`**: `app_id`, `name` (uppercase, unique per app), `status` (`include` / `exclude`),
 `description` ([chapter 6](06-processing.md#build-options)). `meta.build_option_on(app_id, ref)`
 tells whether a component with that `build_option` value is part of the application.

package/docs/guide/12-development.md

@@ -114,7 +114,8 @@ src/
     authz.ts               authorization schemes, conditions, visibility (menu requests count as buttons)
     engine.ts              form fetch, validations, processes (conditions, execution chains, queueing background chains; web requests queued by an sql process are made right after it), application processes
     processes.ts           download (file or zip from a query, safe headers), workflow processes, configuration checks of chains
-    logic.ts               computations, branches (page, URL, function returning a URL, another application) and their conditions
+    logic.ts               computations (the page's and (102) the application's), branches (page, URL, function returning a URL, another application) and their conditions
+    shortcuts.ts           (103) "NAME" shortcuts in static content, help texts and confirm messages
     render.ts              page chrome (nav, breadcrumb), dynamic action JSON, theme (the page's nonce'd <style>, light/dark and style switches)
     styles.ts              base styles (BASE_STYLES: Iris, Lavender, Standard; baseStyleOf → html data-style), Theme Roller style variants: fixed lists (fonts, sizes, corners), parseStyle/appStyles checks, the request's
                            style (user choice, default), themeCss() (only hex values and constants reach the CSS)

package/docs/guide/16-files.md

@@ -604,3 +604,26 @@ name.
 The standard PDF fonts cover Western European text; set `PDF_FONT` (and `PDF_FONT_BOLD`) for other
 scripts, as for report PDFs. APEX's Word and Excel templates and outputs have no equivalent: the
 templates here are HTML and the output is PDF.
+
+### Report queries
+
+**Shared Components → Report Queries** (APEX: Report Queries, migration 104) are named queries an
+application prints, without a template: the query's rows as a table.
+
+| Property | Meaning |
+|---|---|
+| `name` | Pages download it with `?doc=NAME` (a document template of that name wins); a button with the action *document* names it |
+| `query` | A SELECT with `:ITEM` binds (the page's session state), run as the application's role; its columns' names are the headings |
+| `format` | `pdf` (with the report layout), `xlsx`, `csv`, `json`, `xml` or `html` |
+| `layout` | A report layout for the PDF; empty: the default layout |
+| `file_name`, `title` | The file's name without extension and the PDF's or HTML file's title (`&ITEM.` allowed); empty: the name, and the description or the name |
+| `authz` | Who may download it, besides access to the page |
+
+```
+/a/sales/3?doc=ORDERS_BY_REGION        the file, with page 3's session state
+```
+
+The files are made like a download process's [data export](06-processing.md#data-export) (Excel and
+PDF hold at most 100,000 rows) and are sent as attachments that a browser never shows as a page
+(`Content-Security-Policy: sandbox`). Signed out, on a public page of an application with sign-in,
+`?doc=` serves only the report queries and document templates of the page's own buttons.

package/docs/guide/18-cli.md

@@ -65,6 +65,10 @@ hr/
     app-items/ai_ename.json
     app-processes/0010-link-user-to-employee.json
     app-processes/0010-link-user-to-employee.code.sql
+    app-computations/0010-ai_region-after_authentication.json   (by sequence, item and point)
+    component-groups/sales_lookups.json
+    report-queries/orders_by_region.json   (the query in .query.sql)
+    shortcuts/delete_confirm_msg.json   (a long value in .value.txt, .html or .sql by its type)
     lovs/jobs.json
     lovs/jobs.query.sql
     report-layouts/hr_directory.json   (a logo as hr_directory.logo.png)

package/package.json

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

package/public/app.css

@@ -1056,6 +1056,20 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table th.grid-drop-after { box-shadow: inset -3px 0 0 var(--accent); }
 /* copy and paste: a range of selected cells */
 .grid-table td.grid-cell-selected { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
+/* cell navigation mode (APEX): with JavaScript an editable cell reads as text (its formatted value, .grid-text)
+   until it is clicked or Enter / F2 edits it; arrow keys move between cells (app.js) */
+.grid-text { display: none; }
+.js .grid-table td[data-col]:not(.grid-frozen) { position: relative; }
+.js .grid-table tbody td[data-col]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
+.js .grid-table tbody td[data-col] :is(input:not([type=checkbox]), select) { border-color: transparent; background: transparent; box-shadow: none; }
+.js .grid-table tbody td[data-col] select { appearance: none; }
+.js .grid-table tbody td[data-col]:focus-within :is(input:not([type=checkbox]), select) { border-color: var(--border); background: var(--surface); appearance: auto; }
+.js .grid-table td[data-col] > .grid-text { display: flex; align-items: center; position: absolute; inset: 0; padding: 0 calc(0.85rem + 1px);
+  overflow: hidden; white-space: nowrap; pointer-events: none; }
+.js .grid-table td[data-col] > .grid-text.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+.js .grid-table td[data-col]:has(> .grid-text) :is(input, select) { color: transparent; }
+.js .grid-table td[data-col]:focus-within > .grid-text { display: none; }
+.js .grid-table td[data-col]:focus-within :is(input, select) { color: inherit; }
 .grid-columns-form { border-collapse: collapse; font-size: 0.85rem; }
 .grid-columns-form th, .grid-columns-form td { padding: 0.2rem 0.35rem; text-align: left; white-space: nowrap; }
 .grid-columns-form input[type=number] { width: 5.5rem; }
@@ -1216,6 +1230,9 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
   .report-reflow.grid-table .agg-row td.grid-lead { display: none; }
   .report-reflow.grid-table td.grid-lead:empty { display: none; }
   .grid-resize { display: none !important; }
+  /* a card shows its fields as fields: no navigation mode */
+  .js .report-reflow.grid-table td[data-col] > .grid-text { display: none; }
+  .js .report-reflow.grid-table tbody td[data-col] :is(input, select) { color: inherit; border-color: var(--border); background: var(--surface); appearance: auto; }
 }
 
 /* two-thirds / one-third columns on desktops (builder Users page) */

package/public/app.js

@@ -1666,6 +1666,69 @@ const pgkilnUnsaved = (() => {
       data[i].forEach((v, j) => cells[c0 + j] && setCell(cells[c0 + j], v));
     }
   });
+
+  // ------------------------------------------------------------ cell navigation and edit mode (APEX)
+  // An editable cell reads as text (app.css) until it is edited: a click in it, Enter or F2 or typing
+  // edits it. On a cell the arrow keys move to the next one; while editing, Escape goes back to the
+  // cell and Enter to the cell below. Tab moves through the cells' controls as usual.
+  const cellSel = '[data-grid] table.grid-table > tbody:not(.grid-template) > tr > td[data-col]';
+  function focusCell(td, edit) {
+    if (!td) return;
+    const el = control(td);
+    if (edit && el && !el.disabled) {
+      el.focus();
+      if (el.type !== 'checkbox' && el.tagName !== 'SELECT') el.select?.();
+      return;
+    }
+    if (!td.hasAttribute('tabindex')) td.tabIndex = -1;
+    td.focus();
+  }
+  function neighbour(td, dr, dc) {
+    const rows = rowsOf(td.closest('[data-grid]'));
+    const { r, c } = at(td);
+    return rows[r + dr] ? shownCells(rows[r + dr])[c + dc] : undefined;
+  }
+  const MOVES = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+  document.addEventListener('keydown', (e) => {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const t = e.target;
+    if (t.matches?.(cellSel)) {
+      const el = control(t);
+      if (MOVES[e.key]) {
+        e.preventDefault();
+        focusCell(neighbour(t, ...MOVES[e.key]), false);
+      } else if (el && (e.key === 'Enter' || e.key === 'F2')) {
+        e.preventDefault();
+        focusCell(t, true);
+      } else if (el?.type === 'checkbox' && e.key === ' ') {
+        e.preventDefault();
+        el.click();
+      } else if (el && e.key.length === 1) focusCell(t, true); // the key types into the control
+      return;
+    }
+    const td = t.closest?.(cellSel);
+    if (!td || !t.matches('input, select')) return;
+    if (e.key === 'Escape') focusCell(td, false);
+    else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const below = neighbour(td, 1, 0);
+      focusCell(below ?? td, !!below);
+    } else if (e.key === 'F2') focusCell(td, false);
+  });
+  // a click in a cell beside its control edits it
+  document.addEventListener('click', (e) => {
+    if (!e.shiftKey && e.target.matches?.(cellSel)) focusCell(e.target, true);
+  });
+  // an edited value shows as itself (a list's display value)
+  const syncText = (e) => {
+    const span = e.target.closest?.('td[data-col]')?.querySelector(':scope > .grid-text');
+    if (!span) return;
+    const el = e.target;
+    if (el.tagName === 'SELECT') span.textContent = el.selectedIndex > 0 ? el.options[el.selectedIndex].text : '';
+    else span.remove();
+  };
+  document.addEventListener('input', syncText);
+  document.addEventListener('change', syncText);
 })();
 
 // Faceted search: apply on change. A range facet's own from/to: typing picks

package/src/appfiles.ts

@@ -116,6 +116,10 @@ const CODE: Record<string, Record<string, string>> = {
   computation: { expression: 'sql', condition_expr: 'sql' },
   branch: { condition_expr: 'sql' },
   app_process: { code: 'sql' },
+  app_computation: { expression: 'sql', condition_expr: 'sql' },
+  // (103) a shortcut's value: text, HTML or PL/pgSQL (see codeExt)
+  shortcut: { value: 'txt' },
+  report_query: { query: 'sql' },
   authz_scheme: { value: 'sql' },
   lov: { query: 'sql' },
   automation: { query: 'sql', code: 'sql' },
@@ -134,7 +138,9 @@ const CODE: Record<string, Record<string, string>> = {
 };
 const isLong = (v: unknown): v is string => typeof v === 'string' && (v.includes('\n') || v.length > 60);
 const codeExt = (table: string, column: string, row: any) =>
-  table === 'region' && column === 'source' && row.type === 'static' ? 'html' : CODE[table][column];
+  table === 'region' && column === 'source' && row.type === 'static' ? 'html'
+  : table === 'shortcut' ? (row.type === 'html' ? 'html' : row.type === 'function_body' ? 'sql' : 'txt')
+  : CODE[table][column];
 
 export type Style = 'json' | 'text';
 
@@ -191,6 +197,11 @@ const NAMED: [section: string, dir: string, table: string][] = [
   // (086) application settings
   ['app_settings', 'shared/app-settings', 'app_setting'],
   ['page_groups', 'shared/page-groups', 'page_group'],
+  // (103) shortcuts, (104) report queries
+  ['shortcuts', 'shared/shortcuts', 'shortcut'],
+  ['report_queries', 'shared/report-queries', 'report_query'],
+  // (105) component groups
+  ['component_groups', 'shared/component-groups', 'component_group'],
 ];
 
 /** Components of a page: [array in the document, directory, table, key source]. */
@@ -214,10 +225,11 @@ const SINGLE: [section: string, path: string, sort: string[]][] = [
 ];
 
 const ACTIONS_DIR = 'shared/automation-actions';
+const APP_COMPUTATIONS_DIR = 'shared/app-computations';
 const STATIC_DIR = 'static';
 const STATIC_INDEX = `${STATIC_DIR}/files.json`;
 
-const KNOWN = new Set(['format', 'app', 'static_files', 'app_processes', 'translations', 'nav', 'list_entries', 'automation_actions', 'pages', ...NAMED.map((n) => n[0]), ...SINGLE.map((s) => s[0])]);
+const KNOWN = new Set(['format', 'app', 'static_files', 'app_processes', 'app_computations', 'translations', 'nav', 'list_entries', 'automation_actions', 'pages', ...NAMED.map((n) => n[0]), ...SINGLE.map((s) => s[0])]);
 
 const byColumns = (cols: string[]) => (a: any, b: any) => {
   for (const c of cols) {
@@ -258,6 +270,9 @@ export function docToFiles(doc: Doc, style: Style = 'json'): FileMap {
 
   const procs: any[] = doc.app_processes ?? [];
   uniqueKeys(procs, (r) => r.name, 'process').forEach((k, i) => w.record('shared/app-processes', `${seqPrefix(procs[i].seq)}-${k}`, 'app_process', procs[i]));
+  // (102) application computations, by sequence, item and point
+  const comps: any[] = doc.app_computations ?? [];
+  uniqueKeys(comps, (r) => `${r.item_name ?? ''} ${r.point ?? ''}`, 'computation').forEach((k, i) => w.record(APP_COMPUTATIONS_DIR, `${seqPrefix(comps[i].seq)}-${k}`, 'app_computation', comps[i]));
 
   for (const [section, path, sort] of SINGLE) w.json(path, [...(doc[section] ?? [])].sort(byColumns(sort)));
 
@@ -453,6 +468,7 @@ export function filesToDoc(files: FileMap): Doc {
       });
   }
   doc.app_processes = readRecords(files, 'shared/app-processes').sort(SEQ_SORT).map(mergeCode);
+  doc.app_computations = readRecords(files, APP_COMPUTATIONS_DIR).sort(SEQ_SORT).map(mergeCode);
   for (const [section, path] of SINGLE) doc[section] = read(path);
   doc.translations = [...files.keys()]
     .filter((p) => /^globalization\/translations\/[^/]+\.(json|yaml)$/.test(p))

package/src/builder/advisor.ts

@@ -57,6 +57,7 @@ function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[]
     case 'button':
       return [{ name: 'condition', shape: 'boolean' }, { name: 'badge_query', shape: 'select' }];
     case 'computation':
+    case 'app_computation':
       return [
         ...(row.type === 'sql_query' ? [{ name: 'expression', shape: 'select' as const }] : []),
         ...conditionSql(row),
@@ -83,6 +84,7 @@ function sqlFields(kind: string, row: any): { name: string; shape: SqlShape }[]
     case 'automation_action':
       return [{ name: 'code', shape: 'statements' }, { name: 'condition', shape: 'boolean' }];
     case 'document_template':
+    case 'report_query':
       return [{ name: 'query', shape: 'select' }];
     case 'task_definition':
       return [{ name: 'action_code', shape: 'statements' }];
@@ -286,7 +288,8 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
   const buildOptions = new Set(all.filter((x) => x.kind === 'build_option').map((x) => x.row.name));
   const layouts = new Set(all.filter((x) => x.kind === 'report_layout').map((x) => x.row.name.toUpperCase()));
   const regionIds = new Set(all.filter((x) => x.kind === 'region').map((x) => x.row.id));
-  const documents = new Set(all.filter((x) => x.kind === 'document_template').map((x) => x.row.name.toUpperCase()));
+  // (104) a document button names a document template or a report query
+  const documents = new Set(all.filter((x) => x.kind === 'document_template' || x.kind === 'report_query').map((x) => x.row.name.toUpperCase()));
   const missing = (entry: Entry | null, field: string, message: string, severity: Severity = 'error') => findings.push({ severity, entry, field, message });
 
   for (const e of entries) {
@@ -353,7 +356,7 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
         && !(await one('select 1 as ok from meta.app a join meta.page p on p.app_id = a.id where a.alias = $1 and p.page_no = $2', [row.target_app, row.target_page])))
       missing(e, 'Application (app)', `Application ${row.target_app} has no page ${row.target_page}.`);
     if (kind === 'button' && row.action === 'document' && !documents.has(String(row.document ?? '').toUpperCase()))
-      missing(e, 'Document template', row.document ? `Document template ${row.document} doesn't exist.` : 'A document button needs a document template.');
+      missing(e, 'Document template', row.document ? `Document template or report query ${row.document} doesn't exist.` : 'A document button needs a document template or a report query.');
     if (kind === 'rest_module') for (const problem of handlerProblems(row.handlers)) missing(e, 'Handlers (JSON)', problem);
     if (kind === 'workflow_definition') {
       const tasks = new Set(all.filter((x) => x.kind === 'task_definition').map((x) => x.row.name.toUpperCase()));
@@ -376,6 +379,8 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
         for (const problem of [...devRefs.errors, ...devRefs.warnings]) missing(e, field, problem, 'warning');
       }
     }
+    if (kind === 'report_query' && row.layout && !layouts.has(String(row.layout).toUpperCase())) missing(e, 'Report layout', `Report layout ${row.layout} doesn't exist (the default layout is used).`, 'warning');
+    if (kind === 'app_computation' && row.type === 'item' && !items.has(String(row.expression).toUpperCase())) missing(e, 'Expression', `Item ${row.expression} doesn't exist (its value is always empty).`, 'warning');
     if (kind === 'document_template') {
       const problem = templateProblem(row.template ?? '');
       if (problem) missing(e, 'Template (HTML)', problem);

package/src/builder/code-editor.ts

@@ -32,7 +32,7 @@ const CHECKS: Record<string, SqlShape> = {
   'region.source': 'select', 'region.condition': 'boolean', 'item.lov': 'select', 'item.readonly_condition': 'boolean',
   'button.condition': 'boolean', 'validation.expression': 'boolean', 'process.code': 'statements', 'authz_scheme.value': 'boolean',
   'lov.query': 'select', 'app_process.code': 'statements', 'automation.query': 'select', 'automation_action.code': 'statements', 'automation_action.condition': 'boolean',
-  'document_template.query': 'select', 'task_definition.action_code': 'statements', 'dynamic_action.code': 'statements',
+  'document_template.query': 'select', 'report_query.query': 'select', 'task_definition.action_code': 'statements', 'dynamic_action.code': 'statements',
   'button.badge_query': 'select', 'list.query': 'select', 'list_entry.condition': 'boolean',
 };
 /** Fields whose check follows the component's type select, like SWITCH ("none": no check). */
@@ -41,7 +41,9 @@ const CHECK_SWITCH: Record<string, string> = {
   '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',
   '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',
+  'app_computation.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',
   'branch.condition_expr': 'condition_type:sql=boolean,exists=select,not_exists=select,*=none',
 };
 /** Fields whose language follows the component's type select: "type:value=lang,…" (other values: SQL). */
@@ -51,7 +53,10 @@ const SWITCH: Record<string, string> = {
   'authz_scheme.value': 'type:role=text',
   'dynamic_action.code': 'action:set_value=sql',
   'computation.expression': 'type:static=text,item=text,function_body=plpgsql',
+  'app_computation.expression': 'type:static=text,item=text,function_body=plpgsql',
+  'shortcut.value': 'type:text=text,html=html,function_body=plpgsql',
   'computation.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
+  'app_computation.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
   'branch.condition_expr': 'condition_type:item_null=text,item_not_null=text,item_equals=text,item_not_equals=text',
 };
 /** Language when no SWITCH value matches. */

package/src/builder/components.ts

@@ -20,6 +20,7 @@ import { aiProblems } from '../runtime/ai.ts';
 import { DATA_LOAD_DEF_SPEC } from './dataload.ts';
 import { processProblems } from '../runtime/processes.ts';
 import { BUTTON_OPTIONS, ITEM_OPTIONS, REGION_OPTIONS } from '../runtime/template-options.ts';
+import { checkGroupMembers } from '../subscriptions.ts';
 
 export type FieldKind =
   | 'text' | 'int' | 'bool' | 'code' | 'json' | 'select' | 'upper'
@@ -68,8 +69,8 @@ export interface ComponentSpec {
   defaults?: Record<string, unknown>;
   /** checks the parsed values before saving; returns a message when they're not valid */
   validate?: (values: Record<string, any>) => string | null;
-  /** adjusts the parsed values before they are saved (cid: the row being edited); throws when they can't be */
-  beforeSave?: (values: Record<string, unknown>, cid: string | undefined) => Promise<void>;
+  /** adjusts the parsed values before they are saved (cid: the row being edited; parentId: its page or application); throws when they can't be */
+  beforeSave?: (values: Record<string, unknown>, cid: string | undefined, parentId: string) => Promise<void>;
 }
 
 const AUTHZ_HELP = 'Authorization scheme; prefix with ! to negate. MUST_NOT_BE_PUBLIC_USER is built in.';
@@ -169,7 +170,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'name', common: true, label: 'Name (request)', kind: 'upper', group: 'Identification' },
       { name: 'label', common: true, label: 'Label', kind: 'text', group: 'Identification' },
       { name: 'action', common: true, label: 'Action', kind: 'select', options: ['submit', 'redirect', 'da', 'document', 'menu'], group: 'Behaviour', help: 'menu = a menu of links and submit requests (Menu entries) · da = "Defined by dynamic action"; document = download a document template (filled with the page\'s values as last loaded or saved)' },
-      { name: 'document', label: 'Document template (action document)', kind: 'upper', group: 'Behaviour', help: 'The name of a document template (Shared Components → Document templates).' },
+      { name: 'document', label: 'Document template (action document)', kind: 'upper', group: 'Behaviour', help: 'The name of a document template or a report query (Shared Components → Document templates, Report queries).' },
       { name: 'target_page', common: true, label: 'Target / branch page', kind: 'page', group: 'Behaviour' },
       { name: 'target_items', label: 'Set items (JSON)', kind: 'json', group: 'Behaviour', help: '{"P3_ID": "&P2_ID."}' },
       { name: 'confirm', label: 'Confirm message', kind: 'text', group: 'Behaviour' },
@@ -454,6 +455,66 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       buildOption(),
     ],
   },
+  // (102) application computations (APEX: Shared Components → Application Computations)
+  app_computation: {
+    table: 'meta.app_computation',
+    scope: 'app',
+    label: 'Application computation',
+    plural: 'Application computations',
+    icon: 'activity',
+    summary: (c) => `${c.item_name} (${c.point}, ${c.type})`,
+    defaults: { point: 'before_header', type: 'static' },
+    fields: [
+      { name: 'item_name', label: 'Item', kind: 'upper', group: 'Identification', help: 'An application item, e.g. AI_REGION (a page item is computed on its own page only)' },
+      { name: 'point', label: 'Point', kind: 'select', options: ['after_authentication', 'before_header', 'after_submit'], group: 'Identification',
+        help: 'after_authentication: once, when a user signs in · before_header: every page shown, before the page\'s own computations · after_submit: every page submitted, before the page\'s own computations' },
+      { name: 'seq', label: 'Sequence', kind: 'int', group: 'Identification' },
+      { name: 'type', label: 'Type', kind: 'select', options: ['static', 'item', 'sql_query', 'sql_expression', 'function_body'], group: 'Computation' },
+      { name: 'expression', label: 'Expression', kind: 'code', wide: true, group: 'Computation',
+        help: 'static: a value, &ITEM. allowed · item: an item name · sql_query: a SELECT (first column of the first row), e.g. select region from sales.rep where lower(username) = lower(:APP_USER) · sql_expression · function_body: PL/pgSQL. Runs as the application\'s role.' },
+      ...conditionFields('Condition'),
+      { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
+      buildOption('Security'),
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true, group: 'Comments' },
+    ],
+  },
+  // (105) component groups (APEX: Shared Components → Component Groups)
+  component_group: {
+    table: 'meta.component_group',
+    scope: 'app',
+    label: 'Component group',
+    plural: 'Component groups',
+    icon: 'layers',
+    summary: (g) => `${g.name} (${(g.members ?? []).length})`,
+    defaults: {},
+    beforeSave: async (v, _cid, appId) => {
+      const { members, problems } = await checkGroupMembers(Number(appId), (v.members as string[] | null) ?? []);
+      if (problems.length) throw new Error(problems.join(' '));
+      v.members = members;
+    },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'text', help: 'e.g. Sales lookups. Other applications subscribe to all of its components at once (Subscriptions), when this is a library or theme application.' },
+      { name: 'description', label: 'Description', kind: 'text', wide: true },
+      { name: 'members', label: 'Components', kind: 'list', wide: true,
+        help: 'Comma separated kind:name, e.g. lov:JOBS, authz_scheme:MANAGER, build_option:FEATURE_EXPORT, template_component:status_badge, list:SHORTCUTS.' },
+    ],
+  },
+  // (103) shortcuts (APEX: Shared Components → Shortcuts)
+  shortcut: {
+    table: 'meta.shortcut',
+    scope: 'app',
+    label: 'Shortcut',
+    plural: 'Shortcuts',
+    icon: 'link',
+    summary: (s) => `"${s.name}" (${s.type})`,
+    defaults: { type: 'text' },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'upper', help: 'e.g. DELETE_CONFIRM_MSG: "DELETE_CONFIRM_MSG" (in double quotes) in a static region\'s content, an item\'s help text or a button\'s confirm message is replaced by the shortcut.' },
+      { name: 'type', label: 'Type', kind: 'select', options: ['text', 'html', 'function_body'], help: 'text: the value (escaped in HTML) · html: the value as HTML · function_body: PL/pgSQL that returns the text, e.g. begin return \'Signed in as \' || :APP_USER; end. Runs as the application\'s role, once per request.' },
+      { name: 'value', label: 'Value', kind: 'code', wide: true },
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true },
+    ],
+  },
   page_group: {
     table: 'meta.page_group',
     scope: 'app',
@@ -578,6 +639,27 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
   web_credential: WEB_CREDENTIAL_SPEC,
   rest_source: REST_SOURCE_SPEC,
   data_load_def: DATA_LOAD_DEF_SPEC,
+  // (104) report queries (APEX: Shared Components → Report Queries)
+  report_query: {
+    table: 'meta.report_query',
+    scope: 'app',
+    label: 'Report query',
+    plural: 'Report queries',
+    icon: 'file',
+    summary: (q) => `${q.name} (${q.format})`,
+    defaults: { format: 'pdf', query: 'select empno, ename, job from sales.staff order by ename' },
+    fields: [
+      { name: 'name', label: 'Name', kind: 'upper', group: 'Identification', help: 'Pages download it with ?doc=NAME (a document template of that name wins); buttons with action "document" name it.' },
+      { name: 'description', label: 'Description', kind: 'text', wide: true, group: 'Identification' },
+      { name: 'query', label: 'Query (SQL)', kind: 'code', wide: true, group: 'Source', help: 'A SELECT with :ITEM binds (the page\'s session state), run as the application\'s role. Its columns\' names are the headings.' },
+      { name: 'format', label: 'Output format', kind: 'select', options: ['pdf', 'xlsx', 'csv', 'json', 'xml', 'html'], group: 'Output' },
+      { name: 'layout', label: 'Report layout', kind: 'upper', group: 'Output', help: 'PDF: paper, margins, font size, colours, logo and footer (Shared Components → Report layouts). Empty: the default layout.' },
+      { name: 'file_name', label: 'File name', kind: 'text', group: 'Output', help: 'Without extension, e.g. staff-&P3_DEPTNO. Empty: the name in lower case.' },
+      { name: 'title', label: 'Title', kind: 'text', group: 'Output', help: 'Of a PDF or HTML file (&ITEM. allowed). Empty: the description or the name.' },
+      { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
+      { name: 'comments', label: 'Comments', kind: 'textarea', wide: true, group: 'Comments' },
+    ],
+  },
   document_template: {
     table: 'meta.document_template',
     scope: 'app',

package/src/builder/forms.ts

@@ -179,7 +179,7 @@ export async function saveComponent(kind: string, parentCol: 'page_id' | 'app_id
   const values = parseFields(spec, body);
   const problem = spec.validate?.(values);
   if (problem) throw new Error(problem);
-  await spec.beforeSave?.(values, cid);
+  await spec.beforeSave?.(values, cid, parentId);
   // region fields only take regions of the same page
   if (parentCol === 'page_id')
     for (const f of spec.fields)

package/src/builder/shared.ts

@@ -17,6 +17,7 @@ import { appHeader, back, BASE, csrf, developer, flash, input, region, select, s
 import { endSessions, grantAccess, roleHints, roleHintsHtml, splitRoles } from './users.ts';
 import { appOr404, componentForm, lookups, saveComponent } from './forms.ts';
 import { catalogPicker } from './rest-catalogs.ts';
+import { COMPONENT_SETTINGS, componentSetting, componentSettingsFrom, type ComponentSettings } from '../runtime/component-settings.ts';
 
 // Shared Components: navigation, authorization schemes, LOVs, application
 // items and processes, report layouts, and access control.
@@ -61,12 +62,12 @@ export function sharedGroups(appId: number): { key: string; title: string; icon:
   const settings = (tab: string, label: string): ScItem => ({ label, href: `${BASE}/apps/${appId}/settings?tab=${tab}` });
   const page = (path: string, label: string): ScItem => ({ label, href: `${BASE}/apps/${appId}/${path}` });
   return [
-    { key: 'logic', title: 'Application Logic', icon: 'code', items: [t('app_item', 'Application Items'), t('app_process', 'Application Processes'), t('app_setting', 'Application Settings'), t('build_option', 'Build Options'), page('settings?tab=definition', 'Application Definition')] },
+    { key: 'logic', title: 'Application Logic', icon: 'code', items: [t('app_item', 'Application Items'), t('app_process', 'Application Processes'), t('app_computation', 'Application Computations'), t('app_setting', 'Application Settings'), t('build_option', 'Build Options'), page('settings?tab=definition', 'Application Definition')] },
     { key: 'security', title: 'Security', icon: 'shield', items: [{ label: 'Access Control', href: `${BASE}/apps/${appId}/shared?view=tree`, kind: 'access' }, settings('security', 'Authentication'), t('authz_scheme', 'Authorization Schemes'), settings('security', 'Security Attributes'), settings('signin', 'Sign-in and Session Management')] },
-    { key: 'other', title: 'Other Components', icon: 'layers', items: [t('lov', 'Lists of Values'), t('list', 'Lists'), t('list_entry', 'List Entries'), t('email_template', 'Email Templates'), t('supporting_script', 'Supporting Objects'), page('subscriptions', 'Subscriptions')] },
+    { key: 'other', title: 'Other Components', icon: 'layers', items: [t('lov', 'Lists of Values'), t('list', 'Lists'), t('list_entry', 'List Entries'), t('email_template', 'Email Templates'), t('shortcut', 'Shortcuts'), t('component_group', 'Component Groups'), t('supporting_script', 'Supporting Objects'), page('subscriptions', 'Subscriptions')] },
     { key: 'navigation', title: 'Navigation and Search', icon: 'compass', items: [t('nav_entry', 'Navigation Menu'), settings('ui', 'Navigation Bar List'), page('breadcrumbs', 'Breadcrumbs'), t('page_group', 'Page Groups'), t('search_config', 'Search Configurations')] },
-    { key: 'ui', title: 'User Interface', icon: 'grid', items: [page('theme', 'Themes and Theme Roller'), settings('ui', 'User Interface Attributes'), t('template_component', 'Template Components'), page('plugins', 'Plug-ins'), settings('pwa', 'Progressive Web App')] },
-    { key: 'files', title: 'Files and Reports', icon: 'file', items: [page('static-files', 'Static Application Files'), t('report_layout', 'Report Layouts'), t('document_template', 'Document Templates')] },
+    { key: 'ui', title: 'User Interface', icon: 'grid', items: [page('theme', 'Themes and Theme Roller'), settings('ui', 'User Interface Attributes'), t('template_component', 'Template Components'), page('plugins', 'Plug-ins'), page('component-settings', 'Component Settings'), settings('pwa', 'Progressive Web App')] },
+    { key: 'files', title: 'Files and Reports', icon: 'file', items: [page('static-files', 'Static Application Files'), t('report_layout', 'Report Layouts'), t('report_query', 'Report Queries'), t('document_template', 'Document Templates')] },
     { key: 'data', title: 'Data Sources', icon: 'database', items: [t('rest_source', 'REST Data Sources'), t('web_credential', 'Web Credentials'), t('rest_module', 'RESTful Services'), t('data_load_def', 'Data Load Definitions')] },
     { key: 'workflows', title: 'Workflows and Automations', icon: 'activity', items: [t('workflow_definition', 'Workflows'), t('task_definition', 'Task Definitions'), t('automation', 'Automations')] },
     { key: 'globalization', title: 'Globalization', icon: 'globe', items: [page('globalization', 'Translations and Text Messages'), t('dynamic_translation', 'Dynamic Translations'), settings('globalization', 'Globalization Attributes')] },
@@ -96,12 +97,44 @@ export async function sharedRoutes(app: FastifyInstance) {
     return send(reply, s, shell(s, 'Breadcrumbs', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Breadcrumbs']], main));
   });
 
+  // (105) Component Settings (APEX): the application's defaults of its built-in component types
+  app.get(`${BASE}/apps/:id/component-settings`, 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 cur = (a.component_settings ?? {}) as ComponentSettings;
+    const groups = [...new Set(COMPONENT_SETTINGS.map((x) => x.group))];
+    const main = html`${appHeader(a, 'shared')}
+      ${region('Component Settings', html`<p class="muted u-mt0">Defaults for the application's built-in component types, used where a component sets nothing itself. Empty: pgkiln's default.</p>
+        <form method="post" action="${BASE}/apps/${a.id}/component-settings">${csrf(s)}
+          ${groups.map((g) => html`<fieldset class="u-mb1"><legend>${g}</legend>${COMPONENT_SETTINGS.filter((x) => x.group === g).map((x) =>
+            input(x.key, x.label, cur[x.key] ?? '', { type: 'number', placeholder: String(x.def), help: `${x.help} ${x.min}–${x.max.toLocaleString('en')}; now ${componentSetting(cur, x.key).toLocaleString('en')}.` }))}</fieldset>`)}
+          <div class="buttons"><button class="btn btn-hot">Save</button></div>
+        </form>`)}`;
+    return send(reply, s, shell(s, 'Component Settings', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Component Settings']], main));
+  });
+
+  app.post(`${BASE}/apps/:id/component-settings`, 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 { settings, problems } = componentSettingsFrom(req.body ?? {});
+    if (problems.length) flash(s, problems.join(' '), 'error');
+    else {
+      await owner.query('update meta.app set component_settings = $2 where id = $1', [a.id, JSON.stringify(settings)]);
+      flash(s, 'Component settings saved.');
+    }
+    return back(reply, s, `${BASE}/apps/${a.id}/component-settings`);
+  });
+
   // ---------------------------------------------------------------- shared components
-  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 SHARED = ['nav_entry', 'authz_scheme', 'build_option', 'page_group', 'lov', 'app_item', 'app_process', 'app_computation', 'shortcut', 'report_query', 'component_group', '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',
-    nav_entry: 'parent_id nulls first, seq, id', app_process: 'seq, id', list_entry: 'list_name, parent_id nulls first, seq, id', automation_action: 'automation_name, seq, name', supporting_script: 'kind, seq, name',
+    nav_entry: 'parent_id nulls first, seq, id', app_process: 'seq, id', app_computation: 'seq, id', list_entry: 'list_name, parent_id nulls first, seq, id', automation_action: 'automation_name, seq, name', supporting_script: 'kind, seq, name',
   };
 
   app.get(`${BASE}/apps/:id/shared`, async (req: Req, reply) => {