pgkiln 0.40.0 → 0.42.0

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/docs/guide/19-rest-data-sources.md

@@ -111,7 +111,7 @@ Shared Components → **REST data sources** → ＋ Add.
 | URL | `https://api.example.com/v1/cities/{city}/weather`: `{name}` is a path parameter. The host is fixed: parameters can only come after it |
 | Method | `GET`, `POST`, `PUT`, `PATCH`, `DELETE` |
 | Web credential | The name of a web credential, or empty |
-| Parameters | JSON: `[{"name": "city", "in": "path", "default": "&P1_CITY.", "required": true}, {"name": "units", "in": "query", "default": "metric"}]`. `in` is `path`, `query`, `header` or `body`. Defaults may use `&ITEM.` substitutions |
+| Parameters | JSON: `[{"name": "city", "in": "path", "default": "&P1_CITY.", "required": true}, {"name": "units", "in": "query", "default": "metric"}]`. `in` is `path`, `query`, `header` or `body`. Defaults may use `&ITEM.` substitutions. `key`: the service's own name for a query, header or body parameter when it isn't lower case with `_`, e.g. `{"name": "page_size", "in": "query", "key": "pageSize"}`; `Authorization`, `Cookie`, `Host` and the transport headers can't be header parameters |
 | Headers | JSON: extra request headers, e.g. `{"Accept-Language": "en"}`. Not for secrets (use a web credential); `Authorization`, `Cookie`, `Host` and the transport headers can't be set |
 | Body | For `POST`, `PUT`, `PATCH`: a JSON template, `{name}` becomes the parameter's value as a JSON string. Empty: the `body` parameters as a JSON object |
 | Row selector | Where the rows are in the response: `items`, `data.results`, `$.list[*]`. Empty: the response itself (an array, or one object as one row) |
@@ -238,6 +238,44 @@ nothing. Two runs of one source never overlap. The last 100 runs per source are
 application's synchronisations start switched off. `AUTOMATIONS=off` stops scheduled and queued
 runs on that server.
 
+## REST source catalogs
+
+Workspace utilities → **REST Source Catalogs** (APEX: REST Source Catalogs) describes a web service once for the
+workspace: a **base URL** (e.g. `https://api.example.com/v1`) and its **services**, each an endpoint with a path after
+the base URL (`/pets/{pet_id}`), a method, and the same parameters, headers, body, row selector, columns, key columns
+and operations as a [REST data source](#rest-data-sources). Every developer of the workspace manages its catalogs.
+
+A catalog comes from:
+
+- an **OpenAPI 3.x or Swagger 2.0 document** in JSON (*Import a catalog*: upload `openapi.json`, paste it, or give its
+  URL, which the server reads, so the host must be on the [allow-list](#server-configuration-and-the-allow-list));
+- a **catalog file** downloaded from another workspace or installation (*Download* on the catalog's page);
+- **by hand**: a name and base URL, then *Add a service*.
+
+Reading an OpenAPI document, pgkiln takes for each `GET`, `POST`, `PUT`, `PATCH` and `DELETE` operation:
+
+| From the document | Becomes |
+|---|---|
+| `operationId` (or the method and path) | The service's name, e.g. `listPets` → `LIST_PETS` |
+| `servers[0].url` (variables at their defaults; Swagger 2: `schemes`, `host`, `basePath`) | The base URL. A relative one is read against the document's URL; or type the base URL |
+| `path`, `query` and `header` parameters (also the path's own) | Parameters: `petId` → `pet_id`, with `"key": "petId"` when the service's name differs; a schema `default` (or an `example`) as the default |
+| The scalar properties of a JSON request body | `body` parameters (nested objects and lists need a body template) |
+| The JSON schema of the `200`/`201` (or `default`) response | The row selector (a list, or the list property of an object such as `items`, `data` or `results`) and the columns with their types (`integer`, `number`, `boolean`, `date`, `date-time` → `timestamp`, objects and lists → `json`) |
+| A collection `GET /pets` with `GET`, `PUT`/`PATCH`, `DELETE /pets/{petId}` and `POST /pets` | Key columns and [write-back operations](#writing-back-from-forms-and-grids) on the collection's service, when the item's parameter names a column (`pet_id`, else `id`) |
+
+`$ref`s inside the document and `allOf` are followed. What a data source can't use (cookie and form parameters, the
+`Authorization` header, external `$ref`s, `HEAD` and `OPTIONS`) is listed after the import, never dropped silently.
+YAML documents: convert them to JSON first (most services offer `openapi.json` too).
+
+**Making a data source from a catalog**: an application's Shared Components → REST data sources → ＋ Add shows *From a
+REST source catalog* when the application's workspace has catalogs: pick a service, optionally another name and one
+of the application's web credentials. The data source is a **copy** (URL = base URL + path): changing or deleting the
+catalog later doesn't change it, and *Replace from a document* on a catalog's page replaces only the catalog's
+services. Credentials never belong to a catalog: each application signs in with its own web credential.
+
+Catalogs belong to the workspace (migration 095): they are not part of an application's export, but of the
+[workspace export](03-builder.md#export-and-import).
+
 ## The `invoke_api` process
 
 A page process of type `invoke_api` ([chapter 6](06-processing.md#processes)) calls a web service.

package/examples/hr/hr_59_gantt_editing.sql

@@ -0,0 +1,21 @@
+-- =====================================================================
+-- HR example, part 59: dragging tasks on a Gantt chart
+-- (docs/guide/04-pages-and-regions.md, chart regions)
+--
+-- The office move on page 32 "Project plan" (part 35) becomes editable for
+-- managers: drag a task to new dates or drag its end; the arrow keys do the
+-- same. The update runs as the application's role; a milestone (no end
+-- date) keeps having none.
+-- =====================================================================
+
+grant update (starts, ends) on hr.project_task to hr_app;
+
+update meta.region r
+   set config = r.config || jsonb_build_object(
+         'gantt_move', $q$update hr.project_task
+   set starts = :NEW_START::date,
+       ends = case when ends is null then null else :NEW_END::date end
+ where id = :TASK_ID::int$q$,
+         'gantt_move_authz', 'MANAGER')
+  from meta.page p join meta.app a on a.id = p.app_id
+ where p.id = r.page_id and a.alias = 'hr' and p.page_no = 32 and r.title = 'Office move';

package/examples/hr/hr_60_tree_charts.sql

@@ -0,0 +1,46 @@
+-- =====================================================================
+-- HR example, part 60: treemap, sunburst and timeline charts
+-- (docs/guide/04-pages-and-regions.md, chart regions)
+--
+-- On page 32 "Project plan":
+--   - a treemap of the salaries per department and job (node_id and
+--     parent_id make the hierarchy); a department drills down to its
+--     employees;
+--   - a sunburst of the head count: departments, their jobs and the
+--     employees in them;
+--   - a timeline of the hires, a lane per department.
+-- =====================================================================
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config)
+select p.id, r.seq, r.title, r.type, r.cols, r.tpl, r.source, r.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (90, 'Salaries by department and job', 'chart', 6, 'standard',
+   $q$select d.dname as "Department or job", 0 as "Salary", 'd' || d.deptno as node_id, null as parent_id, d.deptno
+  from hr.dept d
+ where exists (select 1 from hr.emp e where e.deptno = d.deptno and e.active)
+union all
+select initcap(e.job), sum(e.sal), 'd' || e.deptno || '-' || e.job, 'd' || e.deptno, e.deptno
+  from hr.emp e
+ where e.active
+ group by e.deptno, e.job
+ order by 3$q$,
+   '{"kind": "treemap", "link": {"page": 2, "items": {"P2_DEPTNO": "#deptno#"}}}'),
+  (100, 'Head count', 'chart', 6, 'standard',
+   $q$select d.dname as "Name", 0 as "Employees", 'd' || d.deptno as node_id, null as parent_id
+  from hr.dept d
+ where exists (select 1 from hr.emp e where e.deptno = d.deptno and e.active)
+union all
+select distinct initcap(e.job), 0, 'd' || e.deptno || '-' || e.job, 'd' || e.deptno
+  from hr.emp e where e.active
+union all
+select initcap(e.ename), 1, 'e' || e.empno, 'd' || e.deptno || '-' || e.job
+  from hr.emp e where e.active
+ order by 3$q$,
+   '{"kind": "sunburst"}'),
+  (110, 'Hires', 'chart', 12, 'standard',
+   $q$select initcap(e.ename) as "Employee", e.hiredate as "Hired", null::date as "Until", d.dname as series
+  from hr.emp e join hr.dept d using (deptno)
+ order by e.hiredate$q$,
+   '{"kind": "timeline"}')
+  ) r(seq, title, type, cols, tpl, source, config)
+ where a.alias = 'hr' and p.page_no = 32;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.40.0",
+  "version": "0.42.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; }
@@ -620,6 +728,41 @@ a.drill > .polar-sector:hover { fill-opacity: 1; }
 .gantt-bar:hover, .gantt-bar:focus-visible, .gantt-milestone:hover, .gantt-milestone:focus-visible { filter: brightness(1.12); }
 .gantt-deps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
 .gantt-dep { fill: none; stroke: var(--muted); stroke-width: 1.25px; }
+/* (sprint 70) treemap, sunburst and timeline */
+.treemap { position: relative; aspect-ratio: 16 / 10; max-height: 26rem; width: 100%; font-size: 0.78rem; }
+.tm-group, .tm-cell { position: absolute; box-sizing: border-box; overflow: hidden; }
+.tm-group { border: 1px solid var(--surface); }
+.tm-title { position: absolute; top: 0; left: 0; right: 0; padding: 0.1rem 0.35rem; font-weight: 650; color: var(--text); background: color-mix(in srgb, var(--c) 42%, var(--surface)); box-shadow: inset 0 -2px 0 var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 1; }
+/* tinted, with the page's text colour: contrast holds in light and dark */
+.tm-cell { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.2rem 0.35rem 0.2rem 0.5rem; border: 1px solid var(--surface); background: color-mix(in srgb, var(--c) 24%, var(--surface)); box-shadow: inset 3px 0 0 var(--c); color: var(--text); text-decoration: none; }
+.tm-leaf { background: color-mix(in srgb, var(--c) 32%, var(--surface)); }
+.tm-cell:hover, .tm-cell:focus-visible { filter: brightness(1.12); }
+.tm-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tm-value { opacity: 0.9; font-variant-numeric: tabular-nums; }
+.sb { fill: var(--c); stroke: var(--surface); stroke-width: 0.25; }
+.sb.d2 { fill-opacity: 0.78; } .sb.d3 { fill-opacity: 0.58; } .sb.d4 { fill-opacity: 0.4; }
+a.drill > .sb:hover { filter: brightness(1.12); }
+.timeline { font-size: 0.8rem; }
+.timeline-axis { position: relative; height: 1.5rem; border-bottom: 1px solid var(--chart-axis); font-size: 0.72rem; color: var(--muted); }
+.timeline-axis span { position: absolute; bottom: 0.3rem; padding-left: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.timeline-axis span.skip { visibility: hidden; }
+@media (max-width: 640px) { .timeline-axis span.odd { visibility: hidden; } }
+.timeline-lane { border-bottom: 1px solid var(--chart-grid); padding-top: 0.25rem; }
+.timeline-name { display: block; font-size: 0.75rem; font-weight: 650; color: var(--muted); }
+.timeline-plot { position: relative; overflow: hidden; }
+.tl-item, .tl-point { position: absolute; display: flex; align-items: center; height: 1.4rem; color: inherit; text-decoration: none; z-index: 2; outline-offset: 2px; }
+.tl-item { min-width: 3px; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); box-shadow: inset 3px 0 0 var(--c); }
+.tl-item .tl-label { padding: 0 0.35rem 0 0.5rem; white-space: nowrap; }
+.tl-point { gap: 0.3rem; margin-left: -0.35rem; white-space: nowrap; }
+.tl-dot { width: 0.7rem; height: 0.7rem; flex: none; border-radius: 50%; background: var(--c); }
+.tl-item:hover, .tl-item:focus-visible, .tl-point:hover .tl-dot, .tl-point:focus-visible .tl-dot { filter: brightness(1.12); }
+.gantt-editable [data-task] { cursor: grab; touch-action: none; }
+.gantt-editable .gantt-dragging { cursor: grabbing; z-index: 3; }
+.gantt-editable .gantt-moving { box-shadow: 0 0 0 2px var(--accent); }
+.gantt-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; background: color-mix(in srgb, var(--surface) 45%, transparent); }
+.gantt-editable [aria-busy="true"], .gantt-editable[aria-busy="true"] { opacity: 0.7; }
+.gantt-status { min-height: 1.3em; margin: 0.4rem 0 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
+.gantt-hint { margin: 0.2rem 0 0; font-size: 0.8rem; }
 .gantt-arrow { position: absolute; width: 0; height: 0; margin: -4px 0 0 -6px; border: 4px solid transparent; border-left: 6px solid var(--muted); border-right-width: 0; pointer-events: none; z-index: 1; }
 
 /* data table + tooltip */
@@ -787,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; }
 
@@ -807,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; }
@@ -1609,6 +1754,15 @@ td.to-col-center, th.to-col-center { text-align: center; }
 .reporter-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
 .reporter-chart { margin-bottom: 0.75rem; }
 .reporter-save { margin-top: 1rem; }
+.reporter-hello { margin-bottom: 0.5rem; }
+.reporter-hello p { margin: 0.2rem 0 0; }
+.reporter-cards { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.6rem; }
+.reporter-card { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; text-decoration: none; }
+.reporter-card:hover, .reporter-card:focus-visible { border-color: var(--accent); }
+.reporter-card strong { color: var(--accent); }
+.reporter-card .muted { font-size: 0.85rem; }
+.reporter-card-meta { margin-top: auto; font-size: 0.78rem; color: var(--muted); }
+.reporter-search { max-width: 30rem; margin: 0.25rem 0 0; }
 @media (max-width: 600px) {
   .reporter-row > .label { flex-basis: 100%; }
 }
@@ -1645,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; }