pgkiln 0.41.0 → 0.43.0

package/docs/guide/05-items.md

@@ -11,7 +11,7 @@ page, optionally inside a region. Name them `P<page>_<NAME>` (uppercase letters,
 | `text` | text field | text |
 | `textarea` | multi-line text (always full width) | text |
 | `number` | number field (numeric keyboard on phones) | e.g. `1250.50` |
-| `date` | date picker | `YYYY-MM-DD` |
+| `date` | date picker: the browser's, or (sprint 76) with an application date format or a date format mask on the item a text field in that format with a calendar button; typed dates are read back in the format | `YYYY-MM-DD` |
 | `datetime` | date-time picker | `YYYY-MM-DDTHH:MM` |
 | `email`, `tel`, `url` | typed fields with the matching phone keyboard | text |
 | `password` | password field; never shown back, empty = unchanged | text |

package/docs/guide/09-reference.md

@@ -274,11 +274,15 @@ Run these as the owner (in the SQL Workshop, `psql` or migrations):
 
 | Function | Description |
 |---|---|
-| `meta.generate_crud(app, table, report_page, form_page, label default null, icon default 'table')` | Report page + modal form page + menu entry for a table |
+| `meta.generate_crud(app, table, report_page, form_page, label default null, icon default 'table')` | Report page + modal form page + menu entry for a table, with the column names as labels (kept as it was for existing scripts; `meta.generate_page` *report_form* makes the labelled pages of the wizards) |
 | `meta.generate_grid(app, table, page, label default null, icon default 'grid')` | Interactive grid page + menu entry |
 | `meta.generate_page(app, kind, table, page, options default '{}')` | The create page wizards: `kind` is `form`, `cards`, `calendar`, `chart`, `map`, `facets`, `master_detail` (or `report_form`, `grid`). Options left out take the defaults of `meta.wizard_defaults`; JSON `null` means none. Returns the new page's id (below) |
 | `meta.wizard_defaults(kind, table)` | The options a wizard proposes for a table, from the catalog |
 | `meta.wizard_catalog(table)` | The columns as the wizards see them: kind (`text`, `number`, `date`, `timestamp`, `boolean`, `point`, `geometry`, `binary`, `other`), key, unique, foreign key and the parent's display column |
+| `meta.wizard_label(name)`, `meta.wizard_table_label(table, plural default true)`, `meta.wizard_column_label(table, column)` | (097) The labels of the wizards: `hiredate` → *Hire Date*, `hr.emp` → *Employees* / *Employee*, `deptno` → *Department*; short comments win ([what the generated pages look like](03-builder.md#what-the-generated-pages-look-like)) |
+| `meta.wizard_report(table, columns default null)` | (097) A report on a table as the wizards make it: `{"source", "hidden", "headings", "formats"}` (foreign keys joined to their parent's display column) |
+| `meta.app_activity(days default 30)` | (098) The current application's page views, sign-ins and errors of the last days (1 to 366, at most 10,000 rows, no IP addresses), for a signed-in user with the `admin` role of that application; others get an error. The Activity page of the Create Application wizard reads it |
+| `meta.wizard_files(table)` | (097) The `bytea` columns and the columns holding their file name, mime type, size and change time |
 | `meta.export_app(alias)` | The application as JSON (`pgkiln/2` format) |
 | `meta.import_app(json, alias default null)` | Import an export, optionally under a new alias; returns the new app id |
 | `meta.hash_password(text)` | A bcrypt hash for `meta.app_user.password_hash` / `meta.developer.password_hash` |
@@ -293,7 +297,7 @@ Options of `meta.generate_page` (all optional; column names must be columns of t
 
 | Kind | Options |
 |---|---|
-| all | `label` (page name and menu entry), `icon`, `nav` (add a navigation entry; default true, false for `form`) |
+| all | `label` (page name and menu entry; default the table's plural label, singular for `form`), `form_label` (the title of a form page; default the singular label), `icon`, `nav` (add a navigation entry; default true, false for `form`) |
 | `form` | `columns` (array), `mode` (`normal` or `modal`), `return_page` |
 | `cards` | `title`, `subtitle`, `body`, `badge`, `form_page` |
 | `calendar` | `start`, `end`, `title`, `drag` (boolean), `form_page` |
@@ -419,6 +423,7 @@ navigation entries and application processes have the same `build_option` column
 | `config` | Attributes per type ([chapter 4](04-pages-and-regions.md)) |
 | `rest_source` | A REST data source the region reads; `source` is then SQL over `rest` ([chapter 19](19-rest-data-sources.md)) |
 | `template_options` | text[]: CSS classes from a fixed list ([template options](04-pages-and-regions.md#template-options)) |
+| `position` | `banner`, `breadcrumb`, `left`, `body` (or null), `right`, `footer` ([display positions](04-pages-and-regions.md#side-columns-and-display-positions)) |
 
 **`item`**: `page_id`, `region_id`, `seq`, `name`, `label`, `type`, `lov`, `source_column`,
 `default_value`, `required`, `help`, `readonly_condition`, `authz`, `config` ([chapter 5](05-items.md)).
@@ -426,7 +431,9 @@ navigation entries and application processes have the same `build_option` column
 **`button`**: `page_id`, `region_id`, `seq`, `name`, `label`, `action` (`submit` / `redirect` / `da` /
 `document` / `menu`), `target_page`, `target_items` (jsonb), `condition`, `authz`, `hot`, `confirm`,
 `menu` (jsonb, for `menu`), `badge`, `badge_query` ([chapter 6](06-processing.md)), `template_options`
-(text[], [template options](04-pages-and-regions.md#template-options)).
+(text[], [template options](04-pages-and-regions.md#template-options)), `slot` (a region button's
+[button position](04-pages-and-regions.md#button-positions): `create`, `edit`, `change`, `copy`, `help`, `up`,
+`previous`, `close`, `delete`, `next` or `region` / null).
 
 **`dynamic_action`**: `page_id`, `seq`, `name`, `event`, `trigger_element`, `condition_type`,
 `condition_value`, `action`, `affected_items`, `affected_region_id`, `code`, `items_to_submit`,

package/docs/guide/11-from-apex.md

@@ -62,7 +62,7 @@ What's missing is listed in the [feature parity matrix](../apex-feature-parity.m
 | Application date format mask | Settings → Globalization → Date format (Oracle-style masks) |
 | Number format masks (`FML999G999G990D00`) on columns and items | `{"formats": {...}}` on report, grid and cards columns, `{"format_mask": "..."}` on charts and number/display items ([chapter 14](14-globalization.md#number-formats)) |
 | Automatic Time Zone | Settings → Globalization → Time zone and Automatic time zone; My account → Time zone ([chapter 14](14-globalization.md#time-zones)) |
-| Universal Theme's default style (26.1: *Iris*) | Base style *Iris* (the default for new applications) or *Standard* ([chapter 14](14-globalization.md#base-styles-iris-and-standard)) |
+| Universal Theme's default style (26.1: *Iris*) | Base style *Iris* (the default for new applications), *Lavender* or *Standard* ([chapter 14](14-globalization.md#base-styles-iris-lavender-and-standard)) |
 | Theme styles, *Enable End Users to Choose Theme Style* | Theme style (automatic/light/dark) and *Users may choose light or dark*; Theme Roller style variants with *Users may choose a style* ([chapter 14](14-globalization.md#style-variants-theme-roller)) |
 | Template Options (regions, buttons) | *Template options* in the Page Designer: CSS classes from a fixed list ([chapter 4](04-pages-and-regions.md#template-options)) |
 | ORDS | Not needed to serve apps; REST APIs with PostgREST, see [below](#ords-and-postgrest) |

package/docs/guide/12-development.md

@@ -116,7 +116,7 @@ src/
     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
     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, Standard; baseStyleOf → html data-style), Theme Roller style variants: fixed lists (fonts, sizes, corners), parseStyle/appStyles checks, the request's
+    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)
     template-options.ts    template options: the fixed CSS class list per region and button, templateClasses() (unknown values ignored)
     regions.ts             region shell + chart (drill-down links, gauge settings)/cards/dynamic dispatch with row limits, lazy placeholder and cache, buttons (menu buttons, badges)
@@ -210,7 +210,8 @@ src/
     shared.ts              Shared Components and access control
     designer.ts            page designer: component tree (with computations and branches), layout canvas and gallery, property editor, toolbar
     arrange.ts             page designer layout changes: move, column span, create from the gallery, undo / redo
-    sql.ts                 SQL Workshop: SQL commands, object browser
+    sql.ts                 SQL Workshop: the home and SQL commands (templates and drafts to review)
+    object-browser.ts      (sprint 75) the Object Browser: objects by type, system objects hidden, a table in tabs, column actions as SQL to review
     scripts.ts             SQL Workshop → SQL Scripts: editor, upload/download, run, results per statement, run history
     quicksql.ts            SQL Workshop → Quick SQL page (preview, save as script, run)
     querybuilder.ts        SQL Workshop → Query Builder: catalog, joins by foreign key or drawn, functions/group by, buildQuery() from the URL; the canvas is in builder.js

package/docs/guide/14-globalization.md

@@ -212,7 +212,7 @@ Under **Settings → Theme**, *Theme style* is **Automatic** (follow the device,
 has the same choice. The choice is saved on the account, so it applies in every application that
 allows it. For public applications it's kept in a cookie.
 
-## Base styles: Iris and Standard
+## Base styles: Iris, Lavender and Standard
 
 Every application has a **base style** (Settings → Theme → *Base style*; APEX: the Universal Theme's theme style,
 whose default in 26.1 is *Iris*). It sets the colours of the light and the dark theme, the corners, the font and the
@@ -220,12 +220,16 @@ shadows of the whole application:
 
 | Base style | Look |
 |---|---|
-| **Iris** (the default for new applications) | Indigo accent (`#5146d8`, `#a59cff` in dark mode), a deep indigo header, cool light greys, larger corners (12 px), softer shadows, rounded navigation items and pill-shaped primary buttons |
+| **Iris** (the default for new applications) | (0.42, like APEX 26's Iris) A white body, a dark warm-grey header (`#3a3632`) with a thin accent strip and a dark menu, a blue accent (`#2b62c4`, `#84aef2` in dark mode), 4 px corners, regions with a rule under their header, a dark primary button and a large bold page title on the body (no title band) |
+| **Lavender** | pgkiln's Iris until 0.41: indigo accent (`#5146d8`), a deep indigo header, cool light greys, 12 px corners, softer shadows, rounded navigation items and pill-shaped primary buttons |
 | **Standard** | pgkiln's look until 0.28: blue accent, navy header, 8 px corners. Applications created before 0.29 keep it until you change it |
 
 The accent and header colours under Settings → Theme, and the style variants below, change the base style's
 colours (in the light theme). Choosing a colour equal to a base style's own stores nothing, so switching the base
-style later changes it too. All text colours of both base styles meet WCAG AA contrast in light and dark mode.
+style later changes it too. All text colours of the base styles meet WCAG AA contrast in light and dark mode.
+
+New applications start in the **light** theme (Settings → Theme → *Mode*), with *Users may choose light or dark*
+on, as in APEX.
 
 ## Style variants (Theme Roller)
 

package/docs/guide/17-mobile.md

@@ -10,7 +10,7 @@ the home screen with its own icon, full screen, and working on when the network
 
 | Setting | What it does |
 |---|---|
-| Installable | Adds a web app manifest and a service worker to the application. Phones offer "Add to home screen" / "Install"; the app then opens full screen, without the browser bar |
+| Installable | Adds a web app manifest and a service worker to the application. Phones offer "Add to home screen" / "Install"; the app then opens full screen, without the browser bar. (0.42) Where the browser offers the installation (Chrome, Edge), the header shows an **Install app** button (APEX: the navigation bar's Install App entry) |
 | Name under the icon | The short name on the home screen (the application's name when empty) |
 | Keep visited pages on the device | Pages a user opened are shown again when there is no connection (with a notice that they may be out of date) |
 | Keep forms sent without a connection | Forms submitted offline are kept on the device and sent when the connection is back |

package/package.json

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

package/public/app.css

@@ -76,12 +76,100 @@
   color-scheme: dark;
 }
 
+/* ---------- base style "Iris" (theme.base = 'iris'; the default for new
+   applications, like APEX 26's Iris theme style): (sprint 72) a light body,
+   a dark warm-grey header and menu with a thin accent strip, square-ish
+   regions with a rule under their header, 4 px corners, a dark primary button
+   and a large page title on the body. Selectors are html[data-style="iris"]:
+   they beat the Standard values above, and the application's own colours
+   (src/runtime/styles.ts, html:root, later in the page) beat them in turn.
+   Contrast: text ≥ 15:1, muted ≥ 5.8:1, accent ≥ 5.5:1, menu text ≥ 10:1. */
+html[data-style="iris"] {
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-2: #f7f6f5;
+  --surface-3: #efedeb;
+  --text: #1f1c1a;
+  --muted: #645e59;
+  --border: #e2dfdc;
+  --accent: #2b62c4;
+  --accent-text: #ffffff;
+  --accent-soft: #e9f0fb;
+  --header: #3a3632;
+  --header-text: #f7f5f3;
+  --nav-bg: #2f2b28;
+  --nav-text: #ece8e4;
+  --nav-muted: #b9b2ab;
+  --nav-hover: #403b37;
+  --nav-active: #4a443f;
+  --nav-current: #ffffff;
+  --hot: #2f2b28;
+  --hot-text: #ffffff;
+  --radius: 4px;
+  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --shadow: none;
+}
+@media (prefers-color-scheme: dark) {
+  html[data-style="iris"]:not([data-theme="light"]) {
+    --bg: #1a1817;
+    --surface: #232120;
+    --surface-2: #2a2826;
+    --surface-3: #33302d;
+    --text: #ece9e6;
+    --muted: #aaa49e;
+    --border: #3a3633;
+    --accent: #84aef2;
+    --accent-text: #10131a;
+    --accent-soft: #23324a;
+    --header: #121110;
+    --header-text: #ece9e6;
+    --nav-bg: #1d1b1a;
+    --nav-text: #e2ded9;
+    --nav-muted: #a39c95;
+    --nav-hover: #2c2927;
+    --nav-active: #36322f;
+    --nav-current: #ffffff;
+    --hot: #ece9e6;
+    --hot-text: #1a1817;
+  }
+}
+html[data-style="iris"][data-theme="dark"] {
+  --bg: #1a1817;
+  --surface: #232120;
+  --surface-2: #2a2826;
+  --surface-3: #33302d;
+  --text: #ece9e6;
+  --muted: #aaa49e;
+  --border: #3a3633;
+  --accent: #84aef2;
+  --accent-text: #10131a;
+  --accent-soft: #23324a;
+  --header: #121110;
+  --header-text: #ece9e6;
+  --nav-bg: #1d1b1a;
+  --nav-text: #e2ded9;
+  --nav-muted: #a39c95;
+  --nav-hover: #2c2927;
+  --nav-active: #36322f;
+  --nav-current: #ffffff;
+  --hot: #ece9e6;
+  --hot-text: #1a1817;
+}
+html[data-style="iris"] .t-header { box-shadow: inset 0 3px 0 var(--accent); }
+html[data-style="iris"] .t-nav { border-right-color: transparent; }
+html[data-style="iris"] .t-titlebar { background: transparent; border-bottom: 0; padding: 1.25rem 1.5rem 0.25rem; }
+html[data-style="iris"] .t-titlebar h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
+html[data-style="iris"] .region-header h2 { font-size: 1.05rem; }
+html[data-style="iris"] .btn-hot { background: var(--hot); border-color: var(--hot); color: var(--hot-text); }
+html[data-style="iris"] .btn-hot:hover { background: color-mix(in srgb, var(--hot) 82%, var(--bg)); }
+html[data-style="iris"] .btn-hot .btn-badge { background: var(--hot-text); color: var(--hot); }
+
 /* ---------- base style "Iris" (theme.base = 'iris'; the default for new
    applications, like APEX 26.1's Iris theme style). Selectors are
-   html[data-style="iris"]: they beat the Standard values above, and the
+   html[data-style="lavender"]: they beat the Standard values above, and the
    application's own colours (src/runtime/styles.ts, html:root, later in the
    page) beat them in turn. Contrast: text ≥ 15:1, muted ≥ 5.8:1, accent ≥ 6.5:1. */
-html[data-style="iris"] {
+html[data-style="lavender"] {
   --bg: #f6f6fb;
   --surface: #ffffff;
   --surface-2: #f8f8fc;
@@ -101,7 +189,7 @@ html[data-style="iris"] {
   --shadow: 0 1px 2px rgb(30 27 75 / 5%), 0 2px 8px rgb(30 27 75 / 6%);
 }
 @media (prefers-color-scheme: dark) {
-  html[data-style="iris"]:not([data-theme="light"]) {
+  html[data-style="lavender"]:not([data-theme="light"]) {
     --bg: #121120;
     --surface: #1a1930;
     --surface-2: #201f38;
@@ -119,7 +207,7 @@ html[data-style="iris"] {
     --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
   }
 }
-html[data-style="iris"][data-theme="dark"] {
+html[data-style="lavender"][data-theme="dark"] {
   --bg: #121120;
   --surface: #1a1930;
   --surface-2: #201f38;
@@ -136,13 +224,13 @@ html[data-style="iris"][data-theme="dark"] {
   --nav-active: #2a2752;
   --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
 }
-/* Iris: rounded navigation pills instead of an edge bar, quieter region headers, pill-shaped primary buttons */
-html[data-style="iris"] .t-nav a[aria-current="page"] { box-shadow: none; border-radius: calc(var(--radius) * 0.75); }
-html[data-style="iris"] .t-nav a, html[data-style="iris"] .t-nav summary { border-radius: calc(var(--radius) * 0.75); }
-html[data-style="iris"] .region-header { border-bottom-color: transparent; }
-html[data-style="iris"] .region-header h2 { letter-spacing: -0.01em; }
-html[data-style="iris"] .btn-hot { border-radius: 999px; }
-html[data-style="iris"] :focus-visible { outline-color: var(--accent); }
+/* Lavender: rounded navigation pills instead of an edge bar, quieter region headers, pill-shaped primary buttons */
+html[data-style="lavender"] .t-nav a[aria-current="page"] { box-shadow: none; border-radius: calc(var(--radius) * 0.75); }
+html[data-style="lavender"] .t-nav a, html[data-style="lavender"] .t-nav summary { border-radius: calc(var(--radius) * 0.75); }
+html[data-style="lavender"] .region-header { border-bottom-color: transparent; }
+html[data-style="lavender"] .region-header h2 { letter-spacing: -0.01em; }
+html[data-style="lavender"] .btn-hot { border-radius: 999px; }
+html[data-style="lavender"] :focus-visible { outline-color: var(--accent); }
 
 * { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; }
@@ -225,17 +313,18 @@ details.menu > summary::-webkit-details-marker { display: none; }
 .t-nav ul ul { padding: 0 0 0 1.4rem; }
 .t-nav a, .t-nav summary {
   display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 6px;
-  color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 0.93rem;
+  color: var(--nav-text, var(--text)); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 0.93rem;
 }
 .t-nav summary { list-style: none; }
 .t-nav summary::-webkit-details-marker { display: none; }
-.t-nav summary::after { content: "›"; margin-left: auto; color: var(--muted); transition: transform 0.15s; }
+.t-nav summary::after { content: "›"; margin-left: auto; color: var(--nav-muted, var(--muted)); transition: transform 0.15s; }
 .t-nav details[open] > summary::after { transform: rotate(90deg); }
-.t-nav a:hover, .t-nav summary:hover { background: var(--surface-3); }
-.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
-.t-nav .in-trail { color: var(--accent); }
-.t-nav .icon { color: var(--muted); }
-.t-nav a[aria-current="page"] .icon, .t-nav .in-trail .icon { color: var(--accent); }
+.t-nav a:hover, .t-nav summary:hover { background: var(--nav-hover, var(--surface-3)); }
+/* (sprint 72) --nav-* let a style have a dark menu (Iris); without them the menu takes the page's colours */
+.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-current, var(--accent)); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
+.t-nav .in-trail { color: var(--nav-current, var(--accent)); }
+.t-nav .icon { color: var(--nav-muted, var(--muted)); }
+.t-nav a[aria-current="page"] .icon, .t-nav .in-trail .icon { color: var(--nav-current, var(--accent)); }
 
 /* ---------- main ---------- */
 .t-main { min-width: 0; }
@@ -259,6 +348,9 @@ details.menu > summary::-webkit-details-marker { display: none; }
 .region-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 2rem 1.75rem; border-radius: var(--radius);
   background: var(--accent-soft); color: var(--text); }
 .region-hero-icon .icon { width: 3rem; height: 3rem; color: var(--accent); }
+/* (097) the generated home page: the icon on a tile in the accent colour */
+.region-hero-icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: calc(var(--radius) + 4px); background: var(--accent); }
+.region-hero-icon .icon { width: 2.4rem; height: 2.4rem; color: var(--accent-text, #fff); }
 .region-hero-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
 .region-hero-buttons, .region-title-buttons, .region-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 @media (max-width: 640px) { .region-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; } }
@@ -401,7 +493,11 @@ details.btn-menu[open] > summary .btn-caret { transform: rotate(-90deg); }
 table.report { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 .report th, .report td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
 .report tbody tr:last-child td { border-bottom: 0; }
-.report th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2); font-weight: 650; }
+.report th { font-size: 0.85rem; color: var(--muted); background: var(--surface-2); font-weight: 650; }
+/* (097) the edit link of a row: a pencil in a narrow first column */
+.report th.row-edit, .report td.row-edit { width: 2.25rem; text-align: center; padding-left: 0.4rem; padding-right: 0.4rem; }
+.report td.row-edit a { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 6px; color: var(--accent); }
+.report td.row-edit a:hover, .report td.row-edit a:focus-visible { background: var(--accent-soft); }
 .report th a { color: inherit; text-decoration: none; display: inline-flex; gap: 0.3rem; }
 .report th a:hover { color: var(--accent); }
 .sort-ind { font-size: 0.7em; }
@@ -446,7 +542,19 @@ table.report { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
 
 /* horizontal bars */
-.chart-bar { display: flex; flex-direction: column; gap: 0.45rem; }
+.chart-bar { display: flex; flex-direction: column; gap: 0; }
+.chart-bar > .bar-row { padding: 0.22rem 0; }
+/* (097) gridlines behind the bars and a value axis under them */
+.bar-stack { position: relative; }
+.bar-grid { position: absolute; inset: -0.22rem 0; pointer-events: none; }
+.bar-gridline { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--chart-grid); }
+.bar-gridline.baseline { border-left-color: var(--chart-axis); }
+.bar-stack > .bar-track { position: relative; }
+.bar-axis { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 0.75rem; font-size: 0.72rem; color: var(--muted); }
+.bar-axis > :last-child { min-width: 3rem; }
+.bar-ticks { position: relative; height: 1.1rem; }
+.bar-ticks > span { position: absolute; top: 0.15rem; transform: translateX(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bar-ticks > span:first-child { transform: none; }
 .bar-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 0.75rem; align-items: center; font-size: 0.88rem; }
 .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
 .bar-stack { display: flex; flex-direction: column; gap: 2px; }
@@ -822,7 +930,7 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .card.metric { grid-template-columns: 1fr; row-gap: 0.25rem; }
   .metric-icon { grid-row: auto; width: 36px; height: 36px; }
   .metric-value { font-size: 1.35rem; }
-  .bar-row { grid-template-columns: minmax(60px, 35%) 1fr auto; gap: 0.5rem; }
+  .bar-row, .bar-axis { grid-template-columns: minmax(60px, 35%) 1fr auto; gap: 0.5rem; }
   .title-row .buttons { width: 100%; }
   .title-row .buttons .btn { flex: 1 1 auto; }
 
@@ -842,7 +950,9 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
     display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 0.75rem;
     border: 0; padding: 0.3rem 0.8rem; white-space: normal; max-width: none; text-align: left !important; overflow-wrap: anywhere;
   }
-  .report-reflow td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
+  .report-reflow td::before { content: attr(data-label); font-size: 0.8rem; font-weight: 650; color: var(--muted); }
+  .report-reflow td.row-edit { width: auto; text-align: left; }
+  .report-reflow td.row-edit::before { content: none; }
   .report-reflow td.empty { display: block; }
   .report-reflow td.empty::before { content: none; }
   .report-reflow td.pre { white-space: pre-wrap; }
@@ -1689,19 +1799,51 @@ dialog.crop-dialog::backdrop { background: rgb(15 20 30 / 55%); }
 .crop-dialog .buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }
 
 /* (079) Developer toolbar: shown to developers with a builder session in the same browser.
-   Fixed at the bottom left, collapsible (a <details>, so it works without JavaScript). */
-.devbar { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 900; max-width: calc(100vw - 1.5rem);
-  background: #1b2330; color: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 25%); font-size: 0.8125rem; }
-.devbar summary { cursor: pointer; padding: 0.4rem 0.75rem; font-weight: 600; list-style: none; }
-.devbar summary::-webkit-details-marker { display: none; }
-.devbar summary::before { content: '▸ '; }
-.devbar[open] summary::before { content: '▾ '; }
-.devbar ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; list-style: none; margin: 0; padding: 0 0.75rem 0.5rem; }
-.devbar a { color: #9cc8ff; }
-.devbar a:focus-visible, .devbar button:focus-visible, .devbar select:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 2px; }
-.devbar-debug { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
+   (sprint 72) A compact bar of icons centred at the bottom (APEX's runtime developer toolbar);
+   app.js docks it at the top, left or right and shrinks it to a slim tab when it is not used.
+   The page keeps room for it, so it never covers the menu's last entry or a report's pager. */
+.devbar { --devbar-size: 2.75rem; position: fixed; z-index: 900; left: 50%; bottom: 0.5rem; transform: translateX(-50%);
+  background: #1b2330; color: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgb(0 0 0 / 25%); font-size: 0.8125rem;
+  transition: transform 0.2s ease, opacity 0.2s ease; }
+.devbar-tools { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0.25rem; }
+.devbar .devbar-tool { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 7px; color: #dbe7ff;
+  background: none; border: 0; cursor: pointer; list-style: none; padding: 0; }
+.devbar-tool::-webkit-details-marker { display: none; }
+.devbar .devbar-tool:hover, .devbar-menu[open] > .devbar-tool, .devbar-quick[aria-pressed="true"] { background: #2f3b4f; color: #fff; }
+.devbar-debug-menu.is-on > .devbar-tool { color: #ffd166; }
+.devbar a, .devbar-pop a { color: #9cc8ff; }
+.devbar a:focus-visible, .devbar button:focus-visible, .devbar select:focus-visible, .devbar summary:focus-visible, .devbar input:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 2px; }
+.devbar-menu { position: relative; }
+.devbar-pop { position: absolute; bottom: calc(100% + 0.6rem); left: 50%; transform: translateX(-50%); min-width: 14rem; max-width: min(22rem, calc(100vw - 2rem));
+  background: #1b2330; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / 30%); padding: 0.6rem 0.75rem; display: grid; gap: 0.5rem; }
+.devbar-debug { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
+.devbar-debug label { flex-basis: 100%; }
 .devbar-debug select, .devbar-debug button { font: inherit; font-size: 0.8125rem; padding: 0.1rem 0.3rem; border-radius: 4px; border: 1px solid #5e6a7a; background: #2b3340; color: #fff; }
 .devbar-debug button { cursor: pointer; }
+.devbar-dock { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; }
+.devbar-dock legend { padding: 0; margin-bottom: 0.25rem; font-weight: 600; }
+.devbar-pop .devbar-facts { color: #fff; }
+/* docked at the top, or on the left or right edge (a column of icons) */
+.devbar[data-dock="top"] { bottom: auto; top: 0.5rem; }
+.devbar[data-dock="top"] .devbar-pop { bottom: auto; top: calc(100% + 0.6rem); }
+.devbar[data-dock="left"], .devbar[data-dock="right"] { left: 0.5rem; bottom: auto; top: 50%; transform: translateY(-50%); }
+.devbar[data-dock="right"] { left: auto; right: 0.5rem; }
+.devbar[data-dock="left"] .devbar-tools, .devbar[data-dock="right"] .devbar-tools { flex-direction: column; }
+.devbar[data-dock="left"] .devbar-pop { bottom: auto; top: 0; left: calc(100% + 0.6rem); transform: none; }
+.devbar[data-dock="right"] .devbar-pop { bottom: auto; top: 0; left: auto; right: calc(100% + 0.6rem); transform: none; }
+/* not used for a while: a slim tab at the edge; pointing at it or focusing it brings it back */
+.devbar.is-idle { opacity: 0.85; }
+.devbar.is-idle[data-dock="bottom"] { transform: translate(-50%, calc(100% - 6px)); }
+.devbar.is-idle[data-dock="top"] { transform: translate(-50%, calc(-100% + 6px)); }
+.devbar.is-idle[data-dock="left"] { transform: translate(calc(-100% + 6px), -50%); }
+.devbar.is-idle[data-dock="right"] { transform: translate(calc(100% - 6px), -50%); }
+.devbar.is-idle .devbar-tools { pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { .devbar { transition: none; } }
+/* room for the bar: the menu and the page end above it */
+body:has(.devbar[data-dock="bottom"]) .t-main, body:has(.devbar[data-dock="bottom"]) .t-nav > ul { padding-bottom: 3.75rem; }
+body:has(.devbar[data-dock="top"]) .t-body { padding-top: 3.25rem; }
+body:has(.devbar[data-dock="left"]) .t-body { padding-left: 3.25rem; }
+body:has(.devbar[data-dock="right"]) .t-main { padding-right: 3.5rem; }
 .devbar-page .t-main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
 .devbar-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
 .devbar-facts dd { margin: 0; overflow-wrap: anywhere; }
@@ -1743,3 +1885,61 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 /* (sprint 59) Quick edit from the developer toolbar */
 .quick-edit .qe-target { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: pointer; }
 .devbar-quick[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
+
+/* (sprint 76) the pager: rows per page; a Go button only without JavaScript */
+.pager-size { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.85rem; }
+.pager-size select { min-height: 0; padding: 0.15rem 0.4rem; }
+.js .no-js-only { display: none; }
+
+/* (sprint 76) the interactive report's Actions menu: one line per entry, submenus, forms in dialogs */
+.actions-menu .menu-panel { min-width: 15rem; padding: 0.3rem 0; }
+.ir-menu { list-style: none; margin: 0; padding: 0; }
+.ir-item > summary, .ir-link { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.9rem; cursor: pointer; list-style: none; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; text-align: left; }
+.ir-item > summary::-webkit-details-marker { display: none; }
+.ir-item > summary:hover, .ir-link:hover, .ir-item[open] > summary { background: var(--surface-3); }
+.ir-item > summary .icon, .ir-link .icon { color: var(--muted); }
+.ir-more { margin-left: auto; color: var(--muted); }
+.ir-sub > .ir-menu { padding-left: 1.25rem; }
+.ir-body { padding: 0.5rem 0.9rem 0.75rem; display: grid; gap: 0.5rem; }
+.ir-body .menu-section { padding: 0; border: 0; }
+.ir-columns { border: 0; margin: 0; padding: 0; display: grid; gap: 0.2rem; max-height: 50vh; overflow: auto; }
+.ir-columns legend { font-weight: 600; margin-bottom: 0.3rem; }
+.ir-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 0; width: min(34rem, calc(100vw - 2rem)); box-shadow: 0 12px 32px rgb(0 0 0 / 25%); }
+.ir-dialog::backdrop { background: rgb(0 0 0 / 35%); }
+.ir-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
+.ir-dialog-head h2 { margin: 0; font-size: 1.05rem; }
+.ir-dialog .ir-body { padding: 1rem; }
+.ir-dialog .filter-row { min-width: 0; }
+/* the search field with its column list (APEX: the magnifier's column menu) */
+.search-field { display: flex; flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
+.search-field:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
+.search-field .search-scope { border: 0; border-right: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); max-width: 9rem; background: var(--surface-2); }
+.search-field input[type=search] { border: 0; flex: 1; min-width: 0; background: transparent; }
+.search-field input[type=search]:focus { outline: none; }
+/* a column heading's menu */
+.th-menu { z-index: 60; width: 17rem; padding: 0.4rem 0; display: grid; gap: 0.3rem; max-height: 70vh; overflow: auto; }
+.th-menu-actions { display: grid; }
+.th-menu-actions a, .th-menu-values a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.9rem; color: var(--text); text-decoration: none; }
+.th-menu-actions a:hover, .th-menu-values a:hover, .th-menu a:focus-visible { background: var(--surface-3); }
+.th-menu input[type=search] { margin: 0.2rem 0.75rem; width: calc(100% - 1.5rem); }
+.th-menu-values { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
+.th-menu-values li.muted { padding: 0.35rem 0.9rem; }
+.js th[data-col] > a { cursor: pointer; }
+
+/* (sprint 76) a date item in the application's date format: the browser's picker on a hidden date field */
+.date-field { position: relative; }
+.date-native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
+
+/* (sprint 77) display positions: banner, breadcrumb bar, a side column, footer; button positions in a region */
+.t-pos-banner, .t-pos-breadcrumb { margin-bottom: 1rem; }
+.t-pos-breadcrumb { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
+.t-pos-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
+.t-columns { display: grid; gap: 1.25rem; align-items: start; }
+.t-columns-left { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); }
+.t-columns-right { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
+.t-columns-right > .t-side { order: 2; }
+.t-side .t-regions, .t-side { min-width: 0; }
+.t-side .region { grid-column: 1 / -1; }
+@media (max-width: 900px) { .t-columns-left, .t-columns-right { grid-template-columns: 1fr; } .t-columns-right > .t-side { order: 0; } }
+.region-footer-split { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
+.region-footer-split > div { display: flex; gap: 0.5rem; }