pgkiln 0.42.0 → 0.43.0

package/src/builder/arrange.ts

@@ -22,6 +22,19 @@ const options = (kind: string, field: string) => COMPONENTS[kind].fields.find((f
 export const REGION_TYPES = () => options('region', 'type');
 export const ITEM_TYPES = () => options('item', 'type');
 export const BUTTON_ACTIONS = () => options('button', 'action');
+/** (099) display positions of regions and button positions (slots) of region buttons; body and region are the defaults (null) */
+export const POSITIONS = () => options('region', 'position');
+export const SLOTS = () => options('button', 'slot');
+export const POSITION_LABELS: Record<string, string> = {
+  banner: 'Banner', breadcrumb: 'Breadcrumb bar', left: 'Left column', body: 'Body', right: 'Right column', footer: 'Footer',
+};
+export const SLOT_LABELS: Record<string, string> = {
+  region: 'Region buttons', create: 'Create', edit: 'Edit', change: 'Change', copy: 'Copy', help: 'Help', up: 'Up',
+  previous: 'Previous', close: 'Close', delete: 'Delete', next: 'Next',
+};
+/** The button positions in a region's header and in its bottom bar (previous, close, delete at the left; next at the right). */
+export const TOP_SLOTS = ['create', 'edit', 'change', 'copy', 'help', 'up'];
+export const BOTTOM_SLOTS = ['previous', 'close', 'delete', 'next'];
 
 /** Gallery names and icons. */
 export const REGION_LABELS: Record<string, [string, string]> = {
@@ -58,9 +71,10 @@ const NEW_REGION_SOURCE: Record<string, string | null> = {
 // ---------------------------------------------------------------- snapshots (undo / redo)
 
 interface Snap {
-  region: { id: number; seq: number; columns: number }[];
+  // position and slot (099) are missing from snapshots taken before them: those leave them as they are
+  region: { id: number; seq: number; columns: number; position?: string | null }[];
   item: { id: number; seq: number; region_id: number | null }[];
-  button: { id: number; seq: number; region_id: number | null }[];
+  button: { id: number; seq: number; region_id: number | null; slot?: string | null }[];
 }
 interface History {
   pid: number;
@@ -74,19 +88,22 @@ type Q = { query: (sql: string, params?: unknown[]) => Promise<{ rows: any[]; ro
 
 async function snapshot(c: Q, pid: number): Promise<Snap> {
   // one after the other: a transaction's client runs one query at a time
-  const region = await c.query('select id, seq, columns from meta.region where page_id = $1 order by id', [pid]);
+  const region = await c.query('select id, seq, columns, position from meta.region where page_id = $1 order by id', [pid]);
   const item = await c.query('select id, seq, region_id from meta.item where page_id = $1 order by id', [pid]);
-  const button = await c.query('select id, seq, region_id from meta.button where page_id = $1 order by id', [pid]);
+  const button = await c.query('select id, seq, region_id, slot from meta.button where page_id = $1 order by id', [pid]);
   return { region: region.rows, item: item.rows, button: button.rows };
 }
 
 /** Puts the layout of a snapshot back; components deleted since are skipped, regions that are gone become "no region". */
 async function restore(c: Q, pid: number, snap: Snap) {
   const regions = new Set((await c.query('select id from meta.region where page_id = $1', [pid])).rows.map((r) => r.id));
-  for (const r of snap.region) await c.query('update meta.region set seq = $3, columns = $4 where id = $1 and page_id = $2', [r.id, pid, r.seq, r.columns]);
-  for (const kind of ['item', 'button'] as const)
-    for (const r of snap[kind])
-      await c.query(`update ${COMPONENTS[kind].table} set seq = $3, region_id = $4 where id = $1 and page_id = $2`, [r.id, pid, r.seq, r.region_id !== null && regions.has(r.region_id) ? r.region_id : null]);
+  for (const r of snap.region)
+    await c.query('update meta.region set seq = $3, columns = $4, position = case when $5 then $6 else position end where id = $1 and page_id = $2', [r.id, pid, r.seq, r.columns, 'position' in r, r.position ?? null]);
+  for (const r of snap.item)
+    await c.query('update meta.item set seq = $3, region_id = $4 where id = $1 and page_id = $2', [r.id, pid, r.seq, r.region_id !== null && regions.has(r.region_id) ? r.region_id : null]);
+  for (const r of snap.button)
+    await c.query('update meta.button set seq = $3, region_id = $4, slot = case when $5 then $6 else slot end where id = $1 and page_id = $2',
+      [r.id, pid, r.seq, r.region_id !== null && regions.has(r.region_id) ? r.region_id : null, 'slot' in r, r.slot ?? null]);
 }
 
 function history(s: Session, pid: number): History {
@@ -128,17 +145,29 @@ async function targetRegion(c: Q, pid: number, value: string): Promise<number |
 /**
  * Moves a region, item or button. `dir` moves it one place up or down among
  * its neighbours; otherwise it goes before `before` (an id in the target
- * container, or '' for the end) in `region` (items and buttons; '' = page level).
+ * container, or '' for the end) in `region` (items and buttons; '' = page level),
+ * `position` (regions: a display position, '' = body) and `slot` (buttons: a
+ * button position, '' = with the region's other buttons).
  * Sequences in the target container are renumbered 10, 20, 30…
  */
-export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: number, o: { dir?: string; region?: string; before?: string }) {
+export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: number, o: { dir?: string; region?: string; before?: string; position?: string; slot?: string }) {
   const table = COMPONENTS[kind].table;
   const row = (await c.query(`select * from ${table} where id = $1 and page_id = $2`, [id, pid])).rows[0];
   if (!row) throw new LayoutError(404, `${COMPONENTS[kind].label} not found on this page.`);
   let region: number | null = kind === 'region' ? null : row.region_id;
   if (kind !== 'region' && o.region !== undefined && !o.dir) region = await targetRegion(c, pid, o.region);
-  const scope = kind === 'region' ? '' : ' and region_id is not distinct from $2';
-  const list: number[] = (await c.query(`select id from ${table} where page_id = $1${scope} order by seq, id`, kind === 'region' ? [pid] : [pid, region])).rows.map((r) => r.id);
+  // the container: a region's display position; a button's region and position in it (page-level buttons have none)
+  let place: string = kind === 'region' ? (row.position ?? 'body') : kind === 'button' && region !== null ? (row.slot ?? 'region') : '';
+  if (kind === 'region' && o.position !== undefined && !o.dir) place = o.position || 'body';
+  if (kind === 'button' && o.slot !== undefined && !o.dir) place = o.slot || 'region';
+  if (kind === 'button' && region === null) place = '';
+  if (kind === 'region' && !POSITIONS().includes(place)) throw new LayoutError(400, 'Unknown position.');
+  if (kind === 'button' && place && !SLOTS().includes(place)) throw new LayoutError(400, 'Unknown button position.');
+  const scope = kind === 'region' ? " and coalesce(position, 'body') = $2"
+    : kind === 'button' ? " and region_id is not distinct from $2 and (region_id is null or coalesce(slot, 'region') = $3)"
+    : ' and region_id is not distinct from $2';
+  const params = kind === 'region' ? [pid, place] : kind === 'button' ? [pid, region, place] : [pid, region];
+  const list: number[] = (await c.query(`select id from ${table} where page_id = $1${scope} order by seq, id`, params)).rows.map((r) => r.id);
   const others = list.filter((x) => x !== id);
   let at: number;
   if (o.dir === 'up' || o.dir === 'down') {
@@ -154,8 +183,10 @@ export async function moveComponent(c: Q, pid: number, kind: LayoutKind, id: num
     if (at < 0) throw new LayoutError(400, 'The place to move to is not in that region.');
   }
   others.splice(at, 0, id);
+  const stored = place === 'body' || place === 'region' || place === '' ? null : place;
   for (const [i, x] of others.entries()) {
-    if (kind === 'region') await c.query(`update ${table} set seq = $3 where id = $1 and page_id = $2`, [x, pid, (i + 1) * 10]);
+    if (kind === 'region') await c.query(`update ${table} set seq = $3, position = case when id = $4 then $5::text else position end where id = $1 and page_id = $2`, [x, pid, (i + 1) * 10, id, stored]);
+    else if (kind === 'button') await c.query(`update ${table} set seq = $3, region_id = case when id = $4 then $5::int else region_id end, slot = case when id = $4 then $6::text else slot end where id = $1 and page_id = $2`, [x, pid, (i + 1) * 10, id, region, stored]);
     else await c.query(`update ${table} set seq = $3, region_id = case when id = $4 then $5::int else region_id end where id = $1 and page_id = $2`, [x, pid, (i + 1) * 10, id, region]);
   }
 }
@@ -171,7 +202,7 @@ export async function spanRegion(c: Q, pid: number, id: number, o: { columns?: s
 }
 
 /** A new component from the gallery, with a working default; placed like moveComponent. Returns its id. */
-export async function createComponent(c: Q, pid: number, kind: LayoutKind, type: string, o: { region?: string; before?: string }) {
+export async function createComponent(c: Q, pid: number, kind: LayoutKind, type: string, o: { region?: string; before?: string; position?: string; slot?: string }) {
   const page = (await c.query('select page_no from meta.page where id = $1', [pid])).rows[0];
   if (!page) throw new LayoutError(404, 'Page not found.');
   let id: number;
@@ -196,10 +227,62 @@ export async function createComponent(c: Q, pid: number, kind: LayoutKind, type:
       id = (await c.query(`insert into meta.button (page_id, region_id, seq, name, label, action) values ($1, $2, 999999, $3, 'New button', $4) returning id`, [pid, region, name, type])).rows[0].id;
     }
   }
-  await moveComponent(c, pid, kind, id, { region: o.region ?? '', before: o.before ?? '' });
+  await moveComponent(c, pid, kind, id, { region: o.region ?? '', before: o.before ?? '', position: o.position ?? '', slot: o.slot ?? '' });
   return id;
 }
 
+/** A copy of a row of a page component table with some columns changed; returns its id. */
+async function copyRow(c: Q, kind: LayoutKind, id: number, over: Record<string, unknown>): Promise<number> {
+  const table = COMPONENTS[kind].table;
+  return (await c.query(
+    `insert into ${table} select (jsonb_populate_record(null::${table}, to_jsonb(x) || jsonb_build_object('id', nextval('${table}_id_seq')) || $2::jsonb)).* from ${table} x where id = $1 returning id`,
+    [id, JSON.stringify(over)],
+  )).rows[0].id;
+}
+
+/** NAME, or NAME_2, NAME_3… when the page has an item (or button) of that name already. */
+async function freeName(c: Q, kind: 'item' | 'button', pid: number, name: string) {
+  const taken = new Set((await c.query(`select name from ${COMPONENTS[kind].table} where page_id = $1`, [pid])).rows.map((r) => r.name));
+  let out = name;
+  for (let i = 2; taken.has(out); i++) out = `${name}_${i}`;
+  return out;
+}
+
+/**
+ * (sprint 77, APEX: Duplicate and Copy to other Page in the rendering tree's menu) A copy of a region (with its
+ * items and buttons), an item or a button: on the same page right after the original, or at the end of another
+ * page of the same application (items named P<n>_ get that page's number; components of a region go to page level
+ * there). Item and button names are made unique on the page. Returns the copy's id.
+ */
+export async function duplicateComponent(c: Q, pid: number, kind: LayoutKind, id: number, toPid: number = pid) {
+  const table = COMPONENTS[kind].table;
+  const row = (await c.query(`select * from ${table} where id = $1 and page_id = $2`, [id, pid])).rows[0];
+  if (!row) throw new LayoutError(404, `${COMPONENTS[kind].label} not found on this page.`);
+  const pages = (await c.query('select t.page_no from meta.page t join meta.page f on f.app_id = t.app_id where t.id = $1 and f.id = $2', [toPid, pid])).rows;
+  if (!pages.length) throw new LayoutError(400, 'That page is not in this application.');
+  const same = toPid === pid;
+  const rename = (name: string) => (same ? name : name.replace(/^P\d+_/, `P${pages[0].page_no}_`));
+  const copyChild = async (k: 'item' | 'button', x: any, regionId: number | null) =>
+    copyRow(c, k, x.id, { page_id: toPid, region_id: regionId, name: await freeName(c, k, toPid, rename(x.name)), ...(k === 'button' && regionId === null ? { slot: null } : {}) });
+  // where the copy goes: after the original in its container, or at the end of the other page
+  let place: { region?: string; position?: string; slot?: string; before: string } = { before: '' };
+  if (same) {
+    const scope = kind === 'region' ? " and coalesce(position, 'body') = coalesce($2, 'body')" : ' and region_id is not distinct from $2';
+    const list: number[] = (await c.query(`select id from ${table} where page_id = $1${scope} order by seq, id`, [pid, kind === 'region' ? row.position : row.region_id])).rows.map((r) => r.id);
+    const next = list[list.indexOf(id) + 1];
+    place = { region: String(row.region_id ?? ''), position: row.position ?? '', slot: row.slot ?? '', before: next ? String(next) : '' };
+  } else place = { region: '', position: row.position ?? '', slot: '', before: '' };
+  let copy: number;
+  if (kind === 'region') {
+    const staticId = row.static_id && !same && !(await c.query('select 1 from meta.region where page_id = $1 and static_id = $2', [toPid, row.static_id])).rowCount ? row.static_id : null;
+    copy = await copyRow(c, 'region', id, { page_id: toPid, static_id: staticId });
+    for (const k of ['item', 'button'] as const)
+      for (const x of (await c.query(`select id, name from ${COMPONENTS[k].table} where region_id = $1 order by seq, id`, [id])).rows) await copyChild(k, x, copy);
+  } else copy = await copyChild(kind, row, same ? row.region_id : null);
+  await moveComponent(c, toPid, kind, copy, place);
+  return copy;
+}
+
 // ---------------------------------------------------------------- routes
 
 const wantsJson = (req: Req) => String(req.headers.accept ?? '').includes('application/json');
@@ -245,7 +328,7 @@ export async function arrangeRoutes(app: FastifyInstance) {
     const kind = b.kind;
     const id = int(b.id);
     if (!isKind(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
-    await recorded(s, pid, `Move ${await describe(kind, id)}`, (c) => moveComponent(c, pid, kind, id, { dir: b.dir, region: b.region, before: b.before }));
+    await recorded(s, pid, `Move ${await describe(kind, id)}`, (c) => moveComponent(c, pid, kind, id, { dir: b.dir, region: b.region, before: b.before, position: b.position, slot: b.slot }));
     return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} moved.` };
   });
 
@@ -262,11 +345,44 @@ export async function arrangeRoutes(app: FastifyInstance) {
   route('create', async (s, pid, b) => {
     const kind = b.kind;
     if (!isKind(kind)) throw new LayoutError(400, 'Unknown component type.');
-    const id = await owner.tx((c) => createComponent(c, pid, kind, b.type ?? '', { region: b.region, before: b.before }));
+    const id = await owner.tx((c) => createComponent(c, pid, kind, b.type ?? '', { region: b.region, before: b.before, position: b.position, slot: b.slot }));
     keep(s, { pid, undo: [], redo: [] }); // earlier layout steps no longer line up with the new component
     return { sel: `${kind}-${id}`, message: `${COMPONENTS[kind].label} created; set its properties on the right.` };
   });
 
+  // (sprint 77) the rendering tree's menu: Duplicate, Copy to other Page
+  route('duplicate', async (s, pid, b) => {
+    const kind = b.kind;
+    const id = int(b.id);
+    if (!isKind(kind) || id === null) throw new LayoutError(400, 'Unknown component.');
+    const copy = await owner.tx((c) => duplicateComponent(c, pid, kind, id));
+    keep(s, { pid, undo: [], redo: [] });
+    return { sel: `${kind}-${copy}`, message: `${COMPONENTS[kind].label} duplicated.` };
+  });
+
+  app.post(`${BASE}/pages/:pid/layout/copy`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const b = (req.body ?? {}) as Record<string, string | undefined>;
+    const pid = int(req.params.pid);
+    const to = int(b.page);
+    const kind = b.kind;
+    const id = int(b.id);
+    try {
+      if (pid === null || !(await owner.one('select 1 as ok from meta.page where id = $1', [pid]))) throw new LayoutError(404, 'Page not found');
+      if (!isKind(kind) || id === null || to === null) throw new LayoutError(400, 'Unknown component or page.');
+      const copy = await owner.tx((c) => duplicateComponent(c, pid, kind, id, to));
+      if (to === pid) keep(s, { pid, undo: [], redo: [] });
+      flash(s, `${COMPONENTS[kind].label} copied.`);
+      await saveState(s);
+      const location = `${BASE}/pages/${to}?c=${kind}-${copy}`;
+      return wantsJson(req) ? reply.send({ ok: true, location }) : reply.redirect(location, 303);
+    } catch (e) {
+      if (!(e instanceof LayoutError)) throw e;
+      return wantsJson(req) ? reply.code(e.status).send({ ok: false, error: e.message }) : reply.code(e.status).type('text/plain').send(e.message);
+    }
+  });
+
   for (const op of ['undo', 'redo'] as const)
     route(op, async (s, pid) => {
       const h = history(s, pid);

package/src/builder/components.ts

@@ -51,6 +51,8 @@ export interface Field {
   group?: string;
   /** shown, not editable (the form still posts it) */
   readonly?: boolean;
+  /** (sprint 77) shown with the property editor's "Common" toggle on (a spec without any shows every field) */
+  common?: boolean;
   /** (sprint 51) help that depends on the component being edited (wins over `help` when it gives some) */
   helpBy?: (row: any) => { text: string; url: string | null } | null;
 }
@@ -101,24 +103,26 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     defaults: { type: 'report', columns: 12, template: 'standard' },
     validate: (v) => formatSettingsProblem(v.config) ?? (v.type === 'file' ? objectStoreProblem((v.config as Record<string, unknown> | null)?.object_store) : null),
     fields: [
-      { name: 'title', label: 'Title', kind: 'text', group: 'Identification' },
+      { 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', label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
-      { name: 'source', label: 'Source', kind: 'code', wide: true, group: 'Source',
+      { 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: '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',
         help: 'Read the rows of a REST data source (Shared Components) instead of a table: the source above is then optional SQL over them, e.g. select * from rest where price > 10. Parameters: {"rest_params": {"city": "&P1_CITY."}} in the attributes.' },
-      { name: 'table_name', label: 'Table (form, grid)', kind: 'text', help: 'e.g. sales.orders', group: 'Source' },
+      { name: 'table_name', common: true, label: 'Table (form, grid)', kind: 'text', help: 'e.g. sales.orders', group: 'Source' },
       { name: 'pk_column', label: 'Primary key column (form, grid)', kind: 'text', group: 'Source' },
       { name: 'pk_item', label: 'Primary key item (form)', kind: 'upper', group: 'Source' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
-      { name: 'columns', label: 'Column span (1-12)', kind: 'int', group: 'Layout' },
-      { name: 'template', label: 'Template', kind: 'select', options: ['standard', 'plain', 'collapsible', 'hero', 'title_bar', 'buttons_container', 'inline_dialog', 'inline_drawer', 'wizard'], group: 'Layout', help: 'hero: a large banner (title, text, {"icon":"…"} in the attributes, buttons). title_bar: title and buttons on one line. buttons_container: the buttons only. inline_dialog, inline_drawer: hidden until a dynamic action Open region (or a link to #R<id>) opens it over the page. wizard: a narrow card for one step (a list region with template wizard_progress shows the steps).' },
+      { name: 'columns', common: true, label: 'Column span (1-12)', kind: 'int', group: 'Layout' },
+      { name: 'template', common: true, label: 'Template', kind: 'select', options: ['standard', 'plain', 'collapsible', 'hero', 'title_bar', 'buttons_container', 'inline_dialog', 'inline_drawer', 'wizard'], group: 'Layout', help: 'hero: a large banner (title, text, {"icon":"…"} in the attributes, buttons). title_bar: title and buttons on one line. buttons_container: the buttons only. inline_dialog, inline_drawer: hidden until a dynamic action Open region (or a link to #R<id>) opens it over the page. wizard: a narrow card for one step (a list region with template wizard_progress shows the steps).' },
+      { name: 'position', common: true, label: 'Position', kind: 'select', options: ['', 'banner', 'breadcrumb', 'left', 'body', 'right', 'footer'], group: 'Layout',
+        help: 'Where the region shows (APEX: Layout → Position). banner: above everything else in the page; breadcrumb: in the bar under the title; left / right: in the side column of a page with template Left or Right side column (on other pages in the body); footer: after the body. Empty is body.' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: REGION_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the region (APEX: Template Options). "Hide the header" applies to the standard template.' },
-      { name: 'condition', label: 'Server-side condition (SQL)', kind: 'code', group: 'Security', help: 'Boolean expression; the region renders only when true.' },
-      { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
+      { name: 'condition', common: true, label: 'Server-side condition (SQL)', kind: 'code', group: 'Security', help: 'Boolean expression; the region renders only when true.' },
+      { name: 'authz', common: true, label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
       buildOption('Security'),
       { name: 'config', label: 'Attributes (JSON)', kind: 'json', wide: true, group: 'Attributes',
         help: ALL_REGION_CONFIG_HELP, helpBy: (row: any) => regionConfigHelp(row?.type) },
@@ -134,17 +138,17 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     defaults: { type: 'text' },
     validate: (v) => formatSettingsProblem(v.config),
     fields: [
-      { name: 'name', label: 'Name', kind: 'upper', help: 'Referenced in SQL as :NAME, e.g. P3_NAME', group: 'Identification' },
-      { name: 'type', label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin'], group: 'Identification' },
-      { name: 'label', label: 'Label', kind: 'text', group: 'Identification' },
-      { name: 'region_id', label: 'Region', kind: 'region', group: 'Layout' },
+      { name: 'name', common: true, label: 'Name', kind: 'upper', help: 'Referenced in SQL as :NAME, e.g. P3_NAME', group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin'], group: 'Identification' },
+      { name: 'label', common: true, label: 'Label', kind: 'text', group: 'Identification' },
+      { name: 'region_id', common: true, label: 'Region', kind: 'region', group: 'Layout' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
-      { name: 'source_column', label: 'Source column (form)', kind: 'text', group: 'Source' },
-      { name: 'default_value', label: 'Default value', kind: 'text', group: 'Source' },
-      { name: 'lov', label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect store values colon-separated: string_to_array(:P1_X, \':\')' },
+      { name: 'source_column', common: true, label: 'Source column (form)', kind: 'text', group: 'Source' },
+      { name: 'default_value', common: true, label: 'Default value', kind: 'text', group: 'Source' },
+      { name: 'lov', common: true, label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect store values colon-separated: string_to_array(:P1_X, \':\')' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: ITEM_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the item (APEX: Template Options).' },
-      { name: 'required', label: 'Value required', kind: 'bool', group: 'Validation' },
+      { name: 'required', common: true, label: 'Value required', kind: 'bool', group: 'Validation' },
       { name: 'help', label: 'Help text', kind: 'text', group: 'Validation' },
       { name: 'readonly_condition', label: 'Read-only condition (SQL)', kind: 'code', group: 'Security', help: 'When true the item is shown read-only and ignored on submit.' },
       { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
@@ -162,21 +166,23 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     defaults: { action: 'submit' },
     beforeSave: menuBeforeSave,
     fields: [
-      { name: 'name', label: 'Name (request)', kind: 'upper', group: 'Identification' },
-      { name: 'label', label: 'Label', kind: 'text', group: 'Identification' },
-      { name: 'action', 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: '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: 'target_page', label: 'Target / branch page', kind: 'page', group: 'Behaviour' },
+      { 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' },
       { name: 'menu', label: 'Menu entries (action menu, JSON)', kind: 'json', wide: true, group: 'Behaviour',
         help: '[{"label": "Details", "page": 3, "items": {"P3_ID": "&P2_ID."}}, {"label": "Archive", "request": "ARCHIVE", "confirm": "Archive it?", "authz": "ADMIN", "icon": "inbox"}] — a link to a page, or a submit with that request (processes and branches see it as the button pressed). At most 20.' },
-      { name: 'hot', label: 'Primary (hot) button', kind: 'bool', group: 'Appearance' },
+      { name: 'hot', common: true, label: 'Primary (hot) button', kind: 'bool', group: 'Appearance' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: BUTTON_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the button (APEX: Template Options).' },
       { name: 'badge', label: 'Badge', kind: 'text', group: 'Appearance', help: 'A short value shown on the button, e.g. &P2_OPEN_COUNT. (empty value: no badge).' },
       { name: 'badge_query', label: 'Badge (SQL)', kind: 'code', group: 'Appearance', help: 'Instead: a SELECT whose first value is the badge, e.g. select count(*) from sales.orders where status = \'OPEN\'. Runs as the application\'s role.' },
-      { name: 'region_id', label: 'Region', kind: 'region', group: 'Layout' },
+      { name: 'region_id', common: true, label: 'Region', kind: 'region', group: 'Layout' },
+      { name: 'slot', common: true, label: 'Button position', kind: 'select', options: ['', 'region', 'create', 'edit', 'change', 'copy', 'help', 'up', 'previous', 'close', 'delete', 'next'], group: 'Layout',
+        help: 'A region button\'s place (APEX: Button Position): create, edit, change, copy, help and up in the region\'s header; previous, close and delete at the left of its bottom bar, next at the right. Empty or region: with its other buttons (the header of reports and charts, the bottom of forms and static content).' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
       { name: 'condition', label: 'Server-side condition (SQL)', kind: 'code', group: 'Security', help: 'e.g. :P3_ID is not null — also re-checked when the button is pressed.' },
       { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },

package/src/builder/designer.ts

@@ -11,7 +11,7 @@ import { regionSettingsForm } from './region-settings.ts';
 import { usedInPanel } from './search.ts';
 import { processJobsPanel } from './process-jobs.ts';
 import { appLocks, lockPanel, lockText } from './locks.ts';
-import { arrangeRoutes, BUTTON_ACTIONS, BUTTON_LABELS, ITEM_LABELS, ITEM_TYPES, REGION_LABELS, REGION_TYPES, undoState } from './arrange.ts';
+import { arrangeRoutes, BOTTOM_SLOTS, BUTTON_ACTIONS, BUTTON_LABELS, ITEM_LABELS, ITEM_TYPES, POSITION_LABELS, POSITIONS, REGION_LABELS, REGION_TYPES, SLOT_LABELS, TOP_SLOTS, undoState } from './arrange.ts';
 
 // Page designer, laid out like APEX's Page Designer: the component tree on
 // the left (Rendering / Dynamic actions / Processing / Shared components),
@@ -80,19 +80,30 @@ export async function designerRoutes(app: FastifyInstance) {
     const regionTitle = (r: any) => r.title ?? `(${r.type})`;
 
     // ------------------------------------------------------------ left: component tree
+    // (sprint 77) data-kind and data-id: the node's context menu (Duplicate, Copy to other page, Delete…) and icon colour
     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}`)}>${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}">${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>`;
     const itemLeaf = (i: any) => leaf('item', i, bicon(itemIcon(i.type)), i.name, i.type);
     const buttonLeaf = (b: any) => leaf('button', b, bicon('button'), b.name, b.action);
-    const regionLeaf = (r: any) => {
+    const regionLeaf = (r: any, next: any) => {
       const items = rows.item.filter((i) => i.region_id === r.id);
       const buttons = rows.button.filter((b) => b.region_id === r.id);
-      const kids = [...(items.length ? [folder('Items', items.map(itemLeaf))] : []), ...(buttons.length ? [folder('Buttons', buttons.map(buttonLeaf))] : [])];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.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>`;
+      // (sprint 77, APEX: region slots) buttons by their position in the region
+      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>`;
     };
+    // (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;
+    const regionFolders = ['banner', 'breadcrumb', 'left', 'body', 'right', 'footer'].map((pos) => {
+      const list = rows.region.filter((r) => (r.position ?? 'body') === pos);
+      if (!list.length && pos !== 'body' && pos !== treeSide) return '';
+      return folder(POSITION_LABELS[pos], list.length ? list.map((r, i) => regionLeaf(r, list[i + 1])) : none(pos === 'body' ? 'No regions yet' : 'No regions'), list.length > 0);
+    });
     const pageItems = rows.item.filter((i) => i.region_id === null);
     const pageButtons = rows.button.filter((b) => b.region_id === null);
     const loadProcs = rows.process.filter((x) => x.point === 'load');
@@ -108,15 +119,25 @@ export async function designerRoutes(app: FastifyInstance) {
       html`<div class="pd-treebar">${links.map(([k, label]) => html`<a class="tb-btn tb-text" href="${url(`new=${k}`)}">${icon('plus')}<span>${label}</span></a>`)}</div>`;
 
     const rendering = html`${createBar([['region', 'Region'], ['item', 'Item'], ['button', 'Button']])}
-      <ul class="pd-tree" aria-label="Rendering">
+      <ul class="pd-tree" aria-label="Rendering" data-tree-menu data-page-id="${p.id}">
         <li><a class="pd-node" href="${url('c=page')}"${cur('page')}>${icon('file')}<span class="pd-label">Page ${p.page_no}: ${p.name}</span>${badges(p)}</a>
           <ul>
             ${folder('Pre-Rendering (before header)', preRendering.length ? preRendering : none('No branches, computations or processes before rendering'), preRendering.length > 0)}
-            ${folder('Regions', rows.region.length ? rows.region.map(regionLeaf) : none('No regions yet'))}
+            ${regionFolders}
             ${pageItems.length ? folder('Page items', pageItems.map(itemLeaf)) : ''}
             ${pageButtons.length ? folder('Page buttons', pageButtons.map(buttonLeaf)) : ''}
           </ul></li>
-      </ul>`;
+      </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="">
+          <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>
+            <select id="pd-copy-page" name="page">${pages.map((x) => html`<option value="${x.id}"${x.id === p.id ? raw(' selected') : ''}>${x.page_no}. ${x.name}</option>`)}</select>
+            <small class="help">Items named P${p.page_no}_… get the other page's number; a region's items and buttons come along. References in SQL and conditions are not changed.</small></div>
+          <div class="pd-dialog-buttons"><button type="button" class="btn" data-dialog-close>Cancel</button><button class="btn btn-primary">Copy</button></div>
+        </form>
+      </dialog>`;
     const events: [string, string][] = [['change', 'Change'], ['click', 'Click'], ['load', 'Page load']];
     const dynamicActions = html`${createBar([['dynamic_action', 'Dynamic action']])}
       <ul class="pd-tree" aria-label="Dynamic actions">
@@ -162,8 +183,15 @@ export async function designerRoutes(app: FastifyInstance) {
     // ------------------------------------------------------------ center: layout + gallery
     const chip = (k: 'item' | 'button', r: any) =>
       html`<a class="pd-chip pd-chip-${k}${isSel(`${k}-${r.id}`) ? ' is-selected' : ''}${k === 'button' && r.hot ? ' is-hot' : ''}" href="${url(`c=${k}-${r.id}`)}" draggable="true" data-kind="${k}" data-id="${r.id}"${cur(`${k}-${r.id}`)} aria-describedby="pd-kbd">${k === 'item' ? bicon(itemIcon(r.type)) : ''}<span>${r.label || r.name}</span>${k === 'item' ? html`<small>${r.name}</small>` : ''}</a>`;
-    const slot = (k: 'item' | 'button', regionId: number | null, list: any[]) =>
-      html`<div class="pd-slot pd-slot-${k}" data-drop="${k}" data-region="${regionId ?? ''}">${list.length ? list.map((r) => chip(k, r)) : html`<span class="pd-slot-hint">${k === 'item' ? 'Items' : 'Buttons'}</span>`}</div>`;
+    const slot = (k: 'item' | 'button', regionId: number | null, list: any[], buttonSlot = '') =>
+      html`<div class="pd-slot pd-slot-${k}${buttonSlot && buttonSlot !== 'region' && !list.length ? ' pd-slot-spare' : ''}" data-drop="${k}" data-region="${regionId ?? ''}"${buttonSlot ? raw(` data-slot="${buttonSlot}"`) : ''}${buttonSlot && buttonSlot !== 'region' ? raw(` title="Button position: ${SLOT_LABELS[buttonSlot]}"`) : ''}>${list.length ? list.map((r) => chip(k, r)) : html`<span class="pd-slot-hint">${k === 'item' ? 'Items' : buttonSlot && buttonSlot !== 'region' ? SLOT_LABELS[buttonSlot] : 'Buttons'}</span>`}</div>`;
+    // (sprint 77, APEX: region slots) a region's buttons by position: the header's, the region's own, the bottom bar's
+    const buttonSlots = (r: any) => {
+      const mine = rows.button.filter((b) => b.region_id === r.id);
+      const at = (sl: string) => mine.filter((b) => (b.slot ?? 'region') === sl);
+      const row = (list: string[], cls: string) => html`<div class="pd-slots ${cls}">${list.map((sl) => slot('button', r.id, at(sl), sl))}</div>`;
+      return html`${row(TOP_SLOTS, 'pd-slots-top')}${slot('button', r.id, at('region'), 'region')}${row(BOTTOM_SLOTS, 'pd-slots-bottom')}`;
+    };
     const block = (r: any) => html`<div class="pd-region pd-span-${r.columns}${isSel(`region-${r.id}`) ? ' is-selected' : ''}" data-kind="region" data-id="${r.id}" data-span="${r.columns}">
         <div class="pd-region-head" draggable="true" data-kind="region" data-id="${r.id}">
           <span class="pd-grip" title="Drag to move">${bicon('grip')}</span>
@@ -174,10 +202,29 @@ export async function designerRoutes(app: FastifyInstance) {
           <div class="pd-region-type">${REGION_LABELS[r.type]?.[0] ?? r.type}${r.template !== 'standard' ? ` · ${r.template}` : ''}</div>
           ${r.source || r.table_name ? html`<code class="pd-region-src">${firstLine(r.table_name ?? r.source)}</code>` : ''}
           ${slot('item', r.id, rows.item.filter((i) => i.region_id === r.id))}
-          ${slot('button', r.id, rows.button.filter((b) => b.region_id === r.id))}
+          ${buttonSlots(r)}
         </div>
         <span class="pd-resize" title="Drag to change the column span" aria-hidden="true"></span>
       </div>`;
+    // (sprint 77, APEX: the page template's display positions) a drop zone per position of the page template, and
+    // for any other position that has regions (they show in the body when the page runs)
+    const side = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;
+    const byPos = (pos: string) => rows.region.filter((r) => (r.position ?? 'body') === pos);
+    const zone = (pos: string) => {
+      const list = byPos(pos);
+      const off = (pos === 'left' || pos === 'right') && pos !== side;
+      return html`<section class="pd-zone pd-zone-${pos}${list.length ? '' : ' is-empty'}" aria-label="${POSITION_LABELS[pos]}">
+        <div class="pd-zone-label">${POSITION_LABELS[pos]}${off ? html` <small>(not in this page template: shown in the body)</small>` : ''}</div>
+        <div class="pd-grid" data-drop="region" data-position="${pos}">
+          ${list.map(block)}
+          <div class="pd-grid-end" data-end><a href="${url(`new=region${pos === 'body' ? '' : `&position=${pos}`}`)}">${icon('plus')} Region${pos === 'body' ? '' : html`<span class="sr-only"> in ${POSITION_LABELS[pos]}</span>`}</a></div>
+        </div></section>`;
+    };
+    const extra = (pos: string) => pos !== side && byPos(pos).length > 0;
+    const zones = html`${zone('banner')}${zone('breadcrumb')}
+      <div class="pd-columns${side ? ` pd-columns-${side}` : ''}">
+        ${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>`;
     const layout = html`
@@ -189,10 +236,7 @@ export async function designerRoutes(app: FastifyInstance) {
       </div>
       <div class="pd-canvas" id="pd-layout" data-page-id="${p.id}">
         <div class="pd-page-label">${icon('file')} Page ${p.page_no}: ${p.name}${p.mode === 'modal' ? ' (modal dialog)' : ''}</div>
-        <div class="pd-grid" data-drop="region">
-          ${rows.region.map(block)}
-          <div class="pd-grid-end" data-end><a href="${url('new=region')}">${icon('plus')} Region</a></div>
-        </div>
+        ${zones}
         <div class="pd-pagelevel">
           <div class="pd-pagelevel-title">Page level (no region)</div>
           ${slot('item', null, pageItems)}
@@ -256,7 +300,8 @@ export async function designerRoutes(app: FastifyInstance) {
       const lastSeq = Math.max(0, ...rows[newKind].map((r) => r.seq));
       const typeField = newKind === 'button' ? 'action' : 'type';
       const presetType = spec.fields.find((f) => f.name === typeField)?.options?.includes(req.query.type ?? '') ? { [typeField]: req.query.type } : {};
-      const defaults = { seq: lastSeq + 10, ...spec.defaults, ...presetType, region_id: /^\d+$/.test(req.query.region ?? '') ? Number(req.query.region) : null };
+      const presetPlace = newKind === 'region' && POSITIONS().includes(req.query.position ?? '') ? { position: req.query.position } : {};
+      const defaults = { seq: lastSeq + 10, ...spec.defaults, ...presetType, ...presetPlace, region_id: /^\d+$/.test(req.query.region ?? '') ? Number(req.query.region) : null };
       heading = html`${icon(spec.icon)}<span>New ${spec.label.toLowerCase()}</span>`;
       props = peTabs([tab('pd-r-props', spec.label, componentForm(spec, newKind, defaults, lk, `${BASE}/pages/${p.id}/c/${newKind}`, s, `Create ${spec.label.toLowerCase()}`, { id: formId }), true)]);
     } else if (kind && kind !== 'page' && PAGE_KINDS.includes(kind)) {
@@ -303,7 +348,7 @@ export async function designerRoutes(app: FastifyInstance) {
           <fieldset class="prop-group"><legend>Appearance</legend><div class="form-grid">
             ${select('mode', 'Page mode', p.mode, [['normal', 'Normal'], ['modal', 'Modal dialog']])}
             ${select('page_group', 'Page group', p.page_group ?? '', [['', '- none -'], ...lk.pageGroups.map((g): [string, string] => [g, g]), ...(p.page_group && !lk.pageGroups.includes(p.page_group) ? [[p.page_group, `${p.page_group} (no such group)`] as [string, string]] : [])], 'Organises the pages in the App Builder (Shared Components → Page groups). Changes nothing when the application runs.')}
-            ${select('page_template', 'Page template', p.page_template ?? 'standard', [['standard', 'Standard'], ['minimal', 'Minimal (no navigation)']], 'Minimal: no header and navigation menu, e.g. for a login page (Application settings → Login page).')}
+            ${select('page_template', 'Page template', p.page_template ?? 'standard', [['standard', 'Standard'], ['left_side_column', 'Left side column'], ['right_side_column', 'Right side column'], ['minimal', 'Minimal (no navigation)']], 'Side column: regions with position left (or right) show in a column beside the body (under it on narrow screens). Minimal: no header and navigation menu, e.g. for a login page (Application settings → Login page).')}
             ${select('dialog_position', 'Dialog position', p.dialog_position ?? 'center', [['center', 'Centred dialog'], ['right', 'Drawer from the right'], ['left', 'Drawer from the left'], ['top', 'Drawer from the top'], ['bottom', 'Drawer from the bottom']], 'Modal pages only. On phones dialogs and side drawers fill the screen.')}
             ${select('dialog_size', 'Dialog size', p.dialog_size ?? 'medium', [['small', 'Small'], ['medium', 'Medium'], ['large', 'Large']], 'The width (the height of top and bottom drawers).')}
             ${input('static_includes', 'JavaScript and CSS files', (p.static_includes ?? []).join(', '), { placeholder: 'e.g. page-3.js, page-3.css', help: 'Static application files (.js, .css) this page loads after the application\'s own, in this order.' })}
@@ -371,6 +416,10 @@ export async function designerRoutes(app: FastifyInstance) {
     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>`}
+        <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">
+        </form>
         <form method="get" action="${BASE}/apps/${p.app_id}/goto" class="tb-form pd-goto">
           <label class="sr-only" for="pd-goto">Go to page</label>
           <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>
@@ -416,7 +465,7 @@ export async function designerRoutes(app: FastifyInstance) {
         `update meta.page set page_no = $2, name = $3, title = $4, requires_auth = $5, mode = $6, parent_page = $7, authz = $8, protection = $9, build_option = $10,
                 dialog_position = $11, dialog_size = $12, static_includes = $13, warn_unsaved = $14, page_template = $15, page_group = $16 where id = $1`,
         [req.params.pid, Number(b.page_no), b.name?.trim(), b.title?.trim() || null, b.requires_auth === 'true', b.mode, b.parent_page ? Number(b.parent_page) : null, b.authz || null, b.protection, b.build_option?.trim().toUpperCase() || null,
-         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true', b.page_template === 'minimal' ? 'minimal' : 'standard', b.page_group?.trim() || null],
+         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true', ['minimal', 'left_side_column', 'right_side_column'].includes(b.page_template ?? '') ? b.page_template : 'standard', b.page_group?.trim() || null],
       );
       // the page's lock and comments follow a new page number
       if (before && before.page_no !== Number(b.page_no))

package/src/builder/forms.ts

@@ -164,9 +164,12 @@ export function componentForm(spec: ComponentSpec, kind: string, row: any, lk: L
     return html`<div class="field" data-prop="${f.name}"${f.wide ? raw(' data-wide') : ''}><label class="label" for="${id}">${f.label}</label>${control}${help}</div>`;
   };
   const groups = [...new Set(spec.fields.map((f) => f.group ?? ''))];
+  // (sprint 77, APEX: Show Common / Show All) the other properties are marked, for the property editor's toggle
+  const marked = spec.fields.some((f) => f.common);
+  const shown = (f: Field) => (marked && !f.common ? html`<div class="pe-more" data-more>${field(f)}</div>` : field(f));
   return html`<form method="post" action="${action}" class="component-form"${opts.id ? html` id="${opts.id}"` : ''}>
     ${csrf(s)}
-    ${groups.map((g) => html`<fieldset class="prop-group">${g ? html`<legend>${g}</legend>` : ''}<div class="form-grid">${spec.fields.filter((f) => (f.group ?? '') === g).map(field)}</div></fieldset>`)}
+    ${groups.map((g) => html`<fieldset class="prop-group">${g ? html`<legend>${g}</legend>` : ''}<div class="form-grid">${spec.fields.filter((f) => (f.group ?? '') === g).map(shown)}</div></fieldset>`)}
     <div class="buttons"><button class="btn btn-hot">${submit}</button></div>
   </form>`;
 }