pgkiln 0.43.0 → 0.45.0

package/docs/guide/03-builder.md

@@ -371,15 +371,20 @@ The wizards (every *Create application* flow and the page wizards) make pages th
   forms and dialog titles the singular (*Employee*).
 - **Reports** show a foreign key's parent by its display column (a name, title or label, else its first
   text column): *Manager* shows KING, *Department* shows SALES. The key itself stays in the query,
-  hidden, so filters can use it. A row starts with a pencil that opens the form.
+  hidden, so filters can use it; a report never has two columns with the same heading (also a faceted
+  search report, whose facets filter on the display column). A row starts with a pencil that opens the form.
+- **Interactive grids** (the grid page and both grids of a master-detail page) use the same labels as
+  headings (*Department Number*, *Hire Date*); a foreign key is a select list of the parent's names.
 - **Files**: a `bytea` column becomes one file upload item that also fills the columns that go with it
   (`<col>_name`/`_filename`, `<col>_mime`/`_mime_type`, `<col>_size`, `<col>_updated`; or `filename`
   and `mime_type` next to the only `bytea` column). Reports leave these columns out. Columns named like
   *photo*, *image* or *logo* accept pictures only.
 - **Numbers** get a format mask with group separators (and the scale's decimals for `numeric(p,s)`),
-  in reports and forms alike, in the application's language (*2,850.00*); keys get none.
-- The **Dashboard** comes right after *Home* in the menu; its charts are titled *Employees by Manager*,
-  rows without a value are labelled *(none)*, and bar charts show the ten largest values (the rest is
+  in reports, read-only grid cells and forms alike, in the application's language (*2,850.00*); keys get none.
+- The **Dashboard** comes right after *Home* in the menu; its charts are titled *Employees by Manager*
+  (a count) or *Salary by Department* (the sum of an amount column: salary, total, price, cost, value…),
+  a donut for six groups or fewer, a line for a date, else a sorted bar; a grouping that says nothing (one
+  group, or every group the same size) is left out. Rows without a value are labelled *(none)*, and bar charts show the ten largest values (the rest is
   one *Other* bar). Tables with row-level security are left out (the application's role may see none of
   their rows); the result page says which.
 - The **Home** page has a hero with the application's icon and name, and a card per page of the menu
@@ -493,7 +498,7 @@ step, which keeps the table and type.
 | **Calendar** | A [calendar](04-pages-and-regions.md#calendar) region (month, week, day and list views) | Start: a date or timestamp column named like *start*, *begin* or *…_date* (not *created*/*updated*); end: one named like *end* or *until*; title: a name column, else the first foreign key's name |
 | **Chart** | A [chart](04-pages-and-regions.md#chart) region: bar, column, line, area, donut, pie or funnel of the row count, or the sum, average, minimum or maximum of a number column, per label | Label: the first foreign key (its parent's name), else a text column that isn't unique |
 | **Map** | A [map](04-pages-and-regions.md#map) region with popups and, if ticked, an interactive report of the same rows that the map filters (*Show this area in the list*) | Position: a PostGIS geometry or geography (markers, and lines and areas as shapes), a `point`, `lat`/`lng`-like number columns, or a *location* text column with `latitude,longitude` |
-| **Faceted search** | An interactive report (9 columns wide) and a [facets](04-pages-and-regions.md#facets-faceted-search) panel (3 columns, collapsible) with a search field | Up to six facets: foreign keys (values of the parent's name, which the report shows next to the key), booleans, text columns with few values, dates and numbers as ranges with *from*/*to* |
+| **Faceted search** | An interactive report (9 columns wide) and a [facets](04-pages-and-regions.md#facets-faceted-search) panel (3 columns, collapsible) with a search field | Up to six facets: foreign keys (values of the parent's name, which the report shows instead of the key), booleans, text columns with few values, dates and numbers as ranges with *from*/*to* |
 | **Master detail** | One page with a grid of the table and an editable grid of the selected row's details below it (the grids' [master-detail](04-pages-and-regions.md#grid-interactive-grid)): a hidden item for the selection, both grids with a grid DML process; new detail rows get the master's key | The detail table: a table with a foreign key to this table's primary key |
 
 Cards, Calendar, Map and Faceted search take an optional **Form page** number: it adds a modal
@@ -708,11 +713,13 @@ Chapters 4–7 describe every component type and property.
 
 While you are signed in to the builder, the pages of your applications show the **developer
 toolbar** when you run them in the same browser (APEX: the Runtime Developer Toolbar): a compact bar
-of icons, centred at the bottom, each with a tooltip. It isn't shown to anyone else, nor inside
+centred at the bottom, each tool an icon with a short text (*Home*, *App 12*, *Page 3*, *Session*,
+*Debug off*, *Quick edit*, *Customize*, *Info*) and a tooltip; on narrow screens, docked at the left or
+right, or with *Icons only* in Settings, just the icons. It isn't shown to anyone else, nor inside
 dialogs. The page keeps room for it, so it never covers the menu's last entry or a report's pager.
 After a few seconds without use it shrinks to a slim tab at the edge; point at it or Tab to it to
-bring it back. **Settings** (the last icon) docks it at the bottom, top, left or right and turns the
-hiding off (kept in your browser). It has:
+bring it back. **Settings** (the last icon) docks it at the bottom, top, left or right, turns the
+hiding off and shows *Icons only* (kept in your browser). It has:
 
 | Entry | Does |
 |---|---|
@@ -860,6 +867,11 @@ is the earlier page: every component in one rail, with **Access control** next t
 | **Lists of values** | Reusable queries for select lists, referenced as `LOV:NAME` |
 | **Application items** | Session variables not on any page, set only by server-side code |
 | **Application processes** | Code that runs *after login* or *before every page* |
+| **Component groups** | Sets of a library application's components that other applications subscribe to at once ([below](#component-groups)) |
+| **Component settings** | Defaults of built-in component types: rows per page, list of values rows, stars ([below](#component-settings)) |
+| **Report queries** | Named queries printed as PDF, Excel, CSV, JSON, XML or HTML with `?doc=NAME` ([chapter 16](16-files.md#report-queries)) |
+| **Shortcuts** | Named texts: `"NAME"` in static content, help texts and confirm messages ([chapter 2](02-concepts.md#shortcuts-name)) |
+| **Application computations** | Computations of (application) items for every page: at sign-in, before every page, after every submit ([chapter 6](06-processing.md#application-computations)) |
 | **REST modules** | REST endpoints (method, path, SQL) served by pgkiln, with an OpenAPI description ([chapter 13](13-rest-api.md#rest-modules-in-the-builder)) |
 | **Workflows** | Multi-step processes of tasks, SQL, web service calls (invoke API), decisions, waits and parallel branches, with versions and a diagram ([chapter 6](06-processing.md#workflows)) |
 | **Task definitions** | Approvals and action tasks: subject, owners, administrators, due date, the SQL that runs on completion ([chapter 6](06-processing.md#approvals-and-the-task-list)) |
@@ -900,6 +912,33 @@ log (`subscription`). A subscribed list of values that uses a REST data source n
 with the same name in the subscribing application. Subscriptions are links between the
 applications of this installation and are not exported (the type is).
 
+#### Component groups
+
+**Shared Components → Component Groups** (APEX: Component Groups, migration 105) names a set of a
+theme or library application's components, as `kind:name`: `lov:JOBS, authz_scheme:MANAGER,
+build_option:FEATURE_EXPORT, template_component:status_badge, list:SHORTCUTS`. Saving checks that
+the application has each one (and keeps its name as the application spells it). Another
+application of the same workspace subscribes to the whole group on its Subscriptions page
+(*Subscribe to a component group*): each component is copied and subscribed as above, and a member
+the library no longer has is skipped and named in the message. Groups are exported with the
+application (`shared/component-groups/`).
+
+### Component settings
+
+**Shared Components → Component Settings** (APEX: Component Settings, migration 105) are the
+application's defaults for its built-in component types, used where a component sets nothing itself
+(`meta.app.component_settings`, exported with the application):
+
+| Setting | pgkiln's default | Bounds |
+|---|---|---|
+| Reports: rows per page (`report_rows`) | 15 | 1–1,000 |
+| Interactive grids: rows per page (`grid_rows`) | 25 | 1–200 |
+| Popup lists of values: rows per page (`popup_lov_rows`) | 25 | 1–100 |
+| Lists of values: maximum rows (`lov_max_rows`) | 5,000 | 1–50,000 |
+| Star ratings: stars (`rating_max`) | 5 | 3–10 |
+
+A value out of its bounds (an edited export, say) is ignored: the default applies.
+
 ### Supporting objects
 
 APEX's *Supporting Objects*: SQL scripts that create, upgrade or remove what the application needs
@@ -1318,7 +1357,7 @@ imports as empty. Import refuses other formats.
 | Section | Contents |
 |---|---|
 | `app` | the application's settings (name, alias, home page, authentication, theme, languages, …) |
-| `authz_schemes`, `app_items`, `app_processes`, `lovs` | shared components |
+| `authz_schemes`, `app_items`, `app_processes`, `app_computations`, `shortcuts`, `report_queries`, `component_groups`, `lovs` | shared components |
 | `group_roles` | identity-provider group → role mappings |
 | `text_messages`, `translations` | globalization |
 | `report_layouts` | report layouts; the logo as base64 |

package/docs/guide/04-pages-and-regions.md

@@ -222,7 +222,8 @@ select e.empno, e.ename, e.job, d.dname as department, e.sal
 
 Features for end users:
 
-- **Search** across all columns, or in one column chosen in the list at the start of the search field
+- **Search** across all columns, or in one column chosen under the magnifier at the start of the search field
+  (it shows the column's name once one is chosen); Enter searches (without JavaScript, a *Go* button)
   (Enter searches; *Go* too).
 - **Column heading menu** (sprint 76; with JavaScript): clicking a heading opens a menu with *Sort ascending*,
   *Sort descending*, *Hide column*, *Control break* and the column's **values** with their counts (with the current
@@ -455,7 +456,9 @@ page). Regions with `"master": {"item": …}` are its details: they use the item
 select empno, ename, job, sal from hr.emp where deptno = :P27_DEPTNO::int
 ```
 
-and show *"Select a row above"* until a row is selected. With JavaScript the details are
+and show *"Select a row above"* until a row is selected. As in APEX, the page opens with the
+master's first row selected, and a search or filter that leaves the selected row out selects the
+first row it shows (a region placed above its master still waits for a selection). With JavaScript the details are
 refreshed in place (`GET …/region/:id`, no page reload); without, the link reloads the page.
 The selection is a signed link (bound to the application, page, user, region and value), so a
 user can only select a row the server showed them; the item is not taken from the URL or a
@@ -479,6 +482,13 @@ on its new rows (and never lets users edit it); saving new rows without a select
 The developer's `hidden` columns can't be grouped, charted or shown in the single row view.
 After **Save** the grid comes back as it was: its search, page, sort and view.
 
+**Navigation and edit mode** (APEX). With JavaScript an editable cell reads as text, with its
+column's format mask (*2,850.00*) or the list's display value, until it is edited: click it, or
+press Enter or F2 on it, or start typing (which replaces the value). On a cell the arrow keys move
+to the next cell; while editing, Escape goes back to the cell and Enter moves to the cell below.
+The control keeps the raw value; Tab moves through the controls as before. On a phone, where the
+rows are cards, the fields show as fields.
+
 **Copy and paste.** Click a cell and Shift+click another to select a range; Ctrl+C copies it
 as tab-separated text (which spreadsheets paste as cells). Ctrl+V pastes such text (from a
 spreadsheet or another grid) from the focused cell on, adding rows when the grid allows inserts;
@@ -807,7 +817,9 @@ link is the way to change its dates.
 A panel of filters, each with a live count, that filters a **report region on the same page**.
 Counts take the search and all *other* facets into account. Three kinds of facet:
 
-- **checkbox** (the default): the most frequent values of a column, each with a checkbox. With
+- **checkbox** (the default): the most frequent values of a column, each with a checkbox; after the seventh
+  the rest sit under *Show all (n)* (open when one of them is chosen), and a boolean's values read *Yes* and
+  *No*. With
   `"exclude": true` the facet gets an *Exclude the selected values* switch: the chosen values are
   then left out instead (rows where the column is empty stay).
 - **range**: a number or date column in ranges, as radio buttons ("Any", then each range). A
@@ -817,7 +829,11 @@ Counts take the search and all *other* facets into account. Three kinds of facet
 - **star**: a rating column as "5 stars and up", "4 stars and up", … down to 1 (`max`, default 5).
 
 With `"search": true` the panel starts with a search field: the same search as the report's own
-(`r<id>_q`, the row as text contains the term).
+(`r<id>_q`, the row as text contains the term). The report then shows no search field of its own (its
+*Actions* menu stays), so the page has one.
+
+The panel starts with the number of rows the search and the facets leave (*Total row count 14*,
+APEX's *Total Row Count*).
 
 **Facet charts** (APEX: facet charts): with `"chart": "bar"` or `"chart": "pie"` a facet shows its counts as a chart,
 collapsed under its heading (*Chart*). Each bar or slice, and each row of the chart's data table, links to the page

package/docs/guide/06-processing.md

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

package/docs/guide/09-reference.md

@@ -281,6 +281,7 @@ Run these as the owner (in the SQL Workshop, `psql` or migrations):
 | `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.wizard_grid_labels(table)` | (100) An interactive grid's `{"headings", "formats"}` as the wizards make them: the labels of `meta.wizard_column_label` and the number format masks (keys get none) |
 | `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) |
@@ -386,6 +387,19 @@ runtime role, never exported) ([chapter 19](19-rest-data-sources.md#web-credenti
 
 **`app_process`**: `app_id`, `seq`, `name`, `point` (`after_login` / `before_page`), `code`, `authz`.
 
+**`app_computation`** (102): `app_id`, `seq`, `item_name`, `point` (`after_authentication` / `before_header` /
+`after_submit`), `type`, `expression`, `condition_type`, `condition_expr`, `condition_value`, `authz`, `build_option`,
+`comments` ([chapter 6](06-processing.md#application-computations)).
+
+**`shortcut`** (103): `app_id`, `name` (uppercase, unique per app), `type` (`text` / `html` / `function_body`), `value`,
+`comments` ([chapter 2](02-concepts.md#shortcuts-name)).
+
+**`report_query`** (104): `app_id`, `name` (uppercase, unique per app), `description`, `query`, `format` (`pdf` / `xlsx` /
+`csv` / `json` / `xml` / `html`), `layout`, `file_name`, `title`, `authz`, `comments` ([chapter 16](16-files.md#report-queries)).
+
+**`component_group`** (105): `app_id`, `name`, `description`, `members` (`text[]` of `kind:name`) ([chapter 3](03-builder.md#component-groups)).
+`meta.app.component_settings` (105): `report_rows`, `grid_rows`, `popup_lov_rows`, `lov_max_rows`, `rating_max` ([chapter 3](03-builder.md#component-settings)).
+
 **`build_option`**: `app_id`, `name` (uppercase, unique per app), `status` (`include` / `exclude`),
 `description` ([chapter 6](06-processing.md#build-options)). `meta.build_option_on(app_id, ref)`
 tells whether a component with that `build_option` value is part of the application.

package/docs/guide/12-development.md

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

package/docs/guide/14-globalization.md

@@ -210,7 +210,11 @@ Under **Settings → Theme**, *Theme style* is **Automatic** (follow the device,
 **Light** or **Dark**. With **Users may choose light or dark** (on by default, like APEX's
 *Enable End Users to Choose Theme Style*), the user menu has an *Appearance* switch and My account
 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.
+allows it. Until a user chooses, an application opens in its own *Theme style* (a new Iris application
+light, also when the device is in dark mode); *Automatic* follows the device only when the application
+or the user chose it. A user who isn't signed in has the *Appearance* switch in the user menu (with
+*Sign in*), kept in a cookie of that application only (`pgkiln_mode`, path `/a/<alias>`), so a choice in
+one application doesn't change another's.
 
 ## Base styles: Iris, Lavender and Standard
 

package/docs/guide/16-files.md

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

package/docs/guide/18-cli.md

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

package/package.json

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

package/public/app.css

@@ -478,6 +478,8 @@ details.btn-menu[open] > summary .btn-caret { transform: rotate(-90deg); }
 .report-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; margin-bottom: 0.75rem; }
 .report-toolbar .field { flex: 0 1 240px; }
 .search { display: flex; gap: 0.4rem; flex: 1 1 320px; max-width: 560px; margin-left: auto; }
+/* (sprint 78) a report whose search is the facets': the Actions menu at the start of the toolbar */
+.report-toolbar .search:not(:has(input[type=search])) { flex: 0 1 auto; min-width: 0; margin-left: 0; }
 .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
 .chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.83rem; padding: 0.15rem 0.3rem 0.15rem 0.7rem; background: var(--accent-soft); border-radius: 99px; }
 .chip a { text-decoration: none; font-size: 1rem; line-height: 1; padding: 0 0.3rem; border-radius: 99px; }
@@ -1054,6 +1056,20 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table th.grid-drop-after { box-shadow: inset -3px 0 0 var(--accent); }
 /* copy and paste: a range of selected cells */
 .grid-table td.grid-cell-selected { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
+/* cell navigation mode (APEX): with JavaScript an editable cell reads as text (its formatted value, .grid-text)
+   until it is clicked or Enter / F2 edits it; arrow keys move between cells (app.js) */
+.grid-text { display: none; }
+.js .grid-table td[data-col]:not(.grid-frozen) { position: relative; }
+.js .grid-table tbody td[data-col]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
+.js .grid-table tbody td[data-col] :is(input:not([type=checkbox]), select) { border-color: transparent; background: transparent; box-shadow: none; }
+.js .grid-table tbody td[data-col] select { appearance: none; }
+.js .grid-table tbody td[data-col]:focus-within :is(input:not([type=checkbox]), select) { border-color: var(--border); background: var(--surface); appearance: auto; }
+.js .grid-table td[data-col] > .grid-text { display: flex; align-items: center; position: absolute; inset: 0; padding: 0 calc(0.85rem + 1px);
+  overflow: hidden; white-space: nowrap; pointer-events: none; }
+.js .grid-table td[data-col] > .grid-text.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+.js .grid-table td[data-col]:has(> .grid-text) :is(input, select) { color: transparent; }
+.js .grid-table td[data-col]:focus-within > .grid-text { display: none; }
+.js .grid-table td[data-col]:focus-within :is(input, select) { color: inherit; }
 .grid-columns-form { border-collapse: collapse; font-size: 0.85rem; }
 .grid-columns-form th, .grid-columns-form td { padding: 0.2rem 0.35rem; text-align: left; white-space: nowrap; }
 .grid-columns-form input[type=number] { width: 5.5rem; }
@@ -1144,6 +1160,10 @@ td[data-add]:hover > .cal-add, .cal-add:focus-visible { opacity: 1; }
 .facet-chart .donut-figure { max-width: 9rem; margin: 0 auto; }
 .facet-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .facet-count { font-size: 0.75rem; color: var(--muted); background: var(--surface-3); border-radius: 99px; padding: 0 0.5rem; font-variant-numeric: tabular-nums; }
+/* (sprint 78) values after the seventh, and the rows the filters leave */
+.facet-more > summary { cursor: pointer; font-size: 0.85rem; color: var(--accent, var(--link)); padding: 0.15rem 0; }
+.facet-more[open] > summary { margin-bottom: 0.2rem; }
+.facet-total { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
 .js .facet-actions .btn-hot { display: none; }
 .facet-exclude { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
 .facet-excluded .facet-value .facet-label { text-decoration: line-through; }
@@ -1210,6 +1230,9 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
   .report-reflow.grid-table .agg-row td.grid-lead { display: none; }
   .report-reflow.grid-table td.grid-lead:empty { display: none; }
   .grid-resize { display: none !important; }
+  /* a card shows its fields as fields: no navigation mode */
+  .js .report-reflow.grid-table td[data-col] > .grid-text { display: none; }
+  .js .report-reflow.grid-table tbody td[data-col] :is(input, select) { color: inherit; border-color: var(--border); background: var(--surface); appearance: auto; }
 }
 
 /* two-thirds / one-third columns on desktops (builder Users page) */
@@ -1811,6 +1834,14 @@ dialog.crop-dialog::backdrop { background: rgb(15 20 30 / 55%); }
 .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; }
+/* (sprint 79, UI-4) a text next to each icon (App 12, Page 3, Debug off); icons only when chosen or docked at a side */
+.devbar .devbar-tool:has(.devbar-text) { width: auto; min-width: 2.25rem; padding: 0 0.55rem; grid-auto-flow: column; gap: 0.35rem; white-space: nowrap; }
+.devbar[data-compact] .devbar-text, .devbar[data-dock="left"] .devbar-text, .devbar[data-dock="right"] .devbar-text { display: none; }
+.devbar[data-compact] .devbar-tool:has(.devbar-text), .devbar[data-dock="left"] .devbar-tool:has(.devbar-text), .devbar[data-dock="right"] .devbar-tool:has(.devbar-text) { width: 2.25rem; padding: 0; }
+@media (max-width: 900px) {
+  .devbar .devbar-text { display: none; }
+  .devbar .devbar-tool:has(.devbar-text) { width: 2.25rem; padding: 0; }
+}
 .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; }
@@ -1887,8 +1918,9 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .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 .pager-size { margin-right: 0; 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; }
+.pager-size label { white-space: nowrap; }
 .js .no-js-only { display: none; }
 
 /* (sprint 76) the interactive report's Actions menu: one line per entry, submenus, forms in dialogs */
@@ -1914,6 +1946,13 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .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); }
+/* (sprint 79, IR-3; APEX: the column scope in the magnifier of the search field) all columns: only the magnifier;
+   a column: the magnifier and its name */
+.search-scope-wrap { position: relative; display: flex; flex: none; }
+.search-scope-wrap > .icon { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
+.search-field .search-scope-wrap .search-scope { padding-left: 2rem; }
+.search-field .search-scope-wrap .search-scope:has(option[value=""]:checked) { width: 2.75rem; padding-right: 0.5rem; color: transparent; }
+.search-field .search-scope option { color: var(--text); }
 .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 */

package/public/app.js

@@ -1666,6 +1666,69 @@ const pgkilnUnsaved = (() => {
       data[i].forEach((v, j) => cells[c0 + j] && setCell(cells[c0 + j], v));
     }
   });
+
+  // ------------------------------------------------------------ cell navigation and edit mode (APEX)
+  // An editable cell reads as text (app.css) until it is edited: a click in it, Enter or F2 or typing
+  // edits it. On a cell the arrow keys move to the next one; while editing, Escape goes back to the
+  // cell and Enter to the cell below. Tab moves through the cells' controls as usual.
+  const cellSel = '[data-grid] table.grid-table > tbody:not(.grid-template) > tr > td[data-col]';
+  function focusCell(td, edit) {
+    if (!td) return;
+    const el = control(td);
+    if (edit && el && !el.disabled) {
+      el.focus();
+      if (el.type !== 'checkbox' && el.tagName !== 'SELECT') el.select?.();
+      return;
+    }
+    if (!td.hasAttribute('tabindex')) td.tabIndex = -1;
+    td.focus();
+  }
+  function neighbour(td, dr, dc) {
+    const rows = rowsOf(td.closest('[data-grid]'));
+    const { r, c } = at(td);
+    return rows[r + dr] ? shownCells(rows[r + dr])[c + dc] : undefined;
+  }
+  const MOVES = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+  document.addEventListener('keydown', (e) => {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+    const t = e.target;
+    if (t.matches?.(cellSel)) {
+      const el = control(t);
+      if (MOVES[e.key]) {
+        e.preventDefault();
+        focusCell(neighbour(t, ...MOVES[e.key]), false);
+      } else if (el && (e.key === 'Enter' || e.key === 'F2')) {
+        e.preventDefault();
+        focusCell(t, true);
+      } else if (el?.type === 'checkbox' && e.key === ' ') {
+        e.preventDefault();
+        el.click();
+      } else if (el && e.key.length === 1) focusCell(t, true); // the key types into the control
+      return;
+    }
+    const td = t.closest?.(cellSel);
+    if (!td || !t.matches('input, select')) return;
+    if (e.key === 'Escape') focusCell(td, false);
+    else if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const below = neighbour(td, 1, 0);
+      focusCell(below ?? td, !!below);
+    } else if (e.key === 'F2') focusCell(td, false);
+  });
+  // a click in a cell beside its control edits it
+  document.addEventListener('click', (e) => {
+    if (!e.shiftKey && e.target.matches?.(cellSel)) focusCell(e.target, true);
+  });
+  // an edited value shows as itself (a list's display value)
+  const syncText = (e) => {
+    const span = e.target.closest?.('td[data-col]')?.querySelector(':scope > .grid-text');
+    if (!span) return;
+    const el = e.target;
+    if (el.tagName === 'SELECT') span.textContent = el.selectedIndex > 0 ? el.options[el.selectedIndex].text : '';
+    else span.remove();
+  };
+  document.addEventListener('input', syncText);
+  document.addEventListener('change', syncText);
 })();
 
 // Faceted search: apply on change. A range facet's own from/to: typing picks
@@ -3642,7 +3705,7 @@ function areaFilter(map, f) {
   const bar = document.querySelector('.devbar');
   if (!bar) return;
   const KEY = 'pgkiln.devbar';
-  let prefs = { dock: 'bottom', autohide: true };
+  let prefs = { dock: 'bottom', autohide: true, compact: false };
   try { prefs = { ...prefs, ...JSON.parse(localStorage.getItem(KEY) || '{}') }; } catch {}
   if (!['bottom', 'top', 'left', 'right'].includes(prefs.dock)) prefs.dock = 'bottom';
   const save = () => { try { localStorage.setItem(KEY, JSON.stringify(prefs)); } catch {} };
@@ -3650,6 +3713,10 @@ function areaFilter(map, f) {
   settings?.closest('li')?.removeAttribute('hidden');
   const apply = () => {
     bar.dataset.dock = prefs.dock;
+    // (sprint 79) "Icons only": the tools without their texts
+    bar.toggleAttribute('data-compact', !!prefs.compact);
+    const compact = bar.querySelector('input[name="devbar-compact"]');
+    if (compact) compact.checked = !!prefs.compact;
     bar.querySelectorAll('input[name="devbar-dock"]').forEach((r) => { r.checked = r.value === prefs.dock; });
     const auto = bar.querySelector('input[name="devbar-autohide"]');
     if (auto) auto.checked = !!prefs.autohide;
@@ -3658,6 +3725,7 @@ function areaFilter(map, f) {
   bar.addEventListener('change', (e) => {
     if (e.target.name === 'devbar-dock') prefs.dock = e.target.value;
     else if (e.target.name === 'devbar-autohide') prefs.autohide = e.target.checked;
+    else if (e.target.name === 'devbar-compact') prefs.compact = e.target.checked;
     else return;
     save();
     apply();

package/src/appfiles.ts

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

package/src/builder/advisor.ts

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