pgkiln 0.45.0 → 0.47.0

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

@@ -819,7 +819,9 @@ 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; 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
+  *No*. Its ⋮ menu (APEX: the facet's menu) has *Clear* (when values are chosen) and *Sort by count* (the
+  default) or *Sort by name*; the order is a URL parameter (`r<report id>_fo_<column>=name`) that Apply and
+  Reset keep. 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
@@ -1127,7 +1129,7 @@ Attributes (the region's **Settings** in the page designer):
 | Key | Meaning |
 |---|---|
 | `list` | The list's name (upper case) |
-| `template` | `links` (default: nested links), `badges` (a row of tiles with the badge as the value), `cards` (a card per entry with its description), `tabs` (the top-level entries as tabs) or `wizard_progress` (numbered steps: the entry of the current page is the current step, the ones before it are done and link back; APEX: Wizard Progress) |
+| `template` | `links` (default: nested links), `badges` (a row of tiles with the badge as the value), `cards` (a card per entry with its description; (sprint 88) a colour band and the icon in a round badge, in the chart palette's order), `tabs` (the top-level entries as tabs) or `wizard_progress` (numbered steps: the entry of the current page is the current step, the ones before it are done and link back; APEX: Wizard Progress) |
 
 The HR example's page 31 (Shortcuts) shows a static list with each template (with a badge from an
 item, child entries, a manager-only entry and one of an excluded build option) and a department
@@ -1198,6 +1200,76 @@ region when an application is replaced. The HR example's page 36 (*My reports*)
 (a view without the user name and photo columns) and leave requests (row level security: an
 employee sees only their own), with King's shared report *Salary by department*.
 
+### `form_designer` (Form Designer)
+
+A **Form Designer** region (sprint 85; pgkiln's own, APEX has no counterpart) lets the application's
+administrators build their own data entry forms in the running application, without a developer
+and without a new release. Like the [Data Reporter](#data_reporter-data-reporter), the developer
+decides *what* may be edited; the administrators decide *how* the forms look and who uses them.
+
+**The developer** places the region (page designer gallery: *Form Designer*) and, in its
+**Settings**, chooses **who may design forms** (an [authorization scheme](08-security.md); without
+one nobody can) and adds **data sources**: a table or view each (pgkiln's own `meta` schema and the
+system schemas are never offered), with a static id, a label and a description. Per source:
+
+- the **columns** forms may show and change, with a label and, for a select list or radio group,
+  a **list of values**: a shared one of the application (`LOV:NAME`) or `STATIC:Display;value,…`
+  (never SQL: designers can't write queries);
+- the **key column** that identifies a row (the primary key of a new table; choose one for a view),
+  needed to change and delete rows;
+- what forms on it **may** do at most: **add**, **change** and **delete** rows.
+
+A new source offers all its columns except binary and JSON ones, allows adding and (with a key)
+changing rows, never deleting. Untick generated keys and audit columns; the builder warns when the
+application's database role lacks a privilege a source needs.
+
+**Designers** (users that pass the scheme) see *New form* and a *Design form* link under each
+form. The designer is a plain form (it works without JavaScript): a name, a description, what
+users may do (within what the source allows) and a row per offered column: *On the form*,
+*Order*, *Label*, *Help text*, *Required*, *Display* (a field by the column's type; a text area for
+text; a select list or radio group for a column with a list of values) and a *Default* for new
+rows, and *In the list* for the columns of the form's list of rows. A form is a **draft** until
+*Published* is ticked: only designers see drafts.
+
+**Users** see the published forms as cards. A form with list columns opens on its rows (newest
+first, paged, `page_size`) with *Add* and an *Edit* link per row; a form without list columns
+only adds rows: it opens on an empty form, and after *Save* on the next empty one. Fields follow
+the column's type: a number field, the [date picker](05-items.md#the-date-picker) in the
+application's date format for dates, the browser's date and time field for timestamps, a
+checkbox for booleans.
+
+How it stays safe:
+
+- rows are read and written as the **application's database role**: grants and [row level
+  security](08-security.md) apply (in the HR example an employee changes only their own meetings);
+- a form's definition is checked against the region's settings before it renders or saves: only
+  offered columns that exist and can be read, displays the column's type allows, actions the
+  source allows; anything else is dropped. Only the form's fields are written; identifiers are
+  only the developer's schema, table and column names, always quoted; values and row keys are
+  always parameters; a value of a list of values must be in the list;
+- **lost updates** are refused: a row changed since its form was opened is not overwritten (the
+  user sees what they typed, with a message);
+- forms are stored in `meta.user_form`, reached by applications only through the view
+  `meta.user_forms` (the forms of the application) and the functions `meta.save_user_form` /
+  `meta.delete_user_form`; saving rows and forms needs the CSRF token and a region the user can
+  see, designing also the region's authorization scheme. Every saved, changed or deleted row and
+  form is in the activity log (event `form_designer`).
+
+Attributes (written by the region's **Settings**):
+
+| Key | Default | Meaning |
+|---|---|---|
+| `sources` | | `[{"id": "orders", "label": "Orders", "description": "…", "schema": "sales", "table": "orders", "key": "id", "columns": [{"name": "customer", "label": "Customer"}, {"name": "status", "lov": "LOV:ORDER_STATUS"}], "insert": true, "update": true, "delete": false}]` |
+| `design_authz` | | The authorization scheme designers pass; none: nobody designs |
+| `page_size` | `25` | Rows per page of a form's list (5 to 200) |
+| `empty` | `No data found.` | Text when a form's list has no rows |
+
+The sources travel with the application export (they are the region's attributes); the forms are
+data of the installation, like Data Reporter reports: not exported, and they stay with their
+region when an application is replaced. The HR example's page 45 (*Forms*, under Administration)
+offers departments, meetings and employees (changing only) to administrators, with the published
+forms *Departments* and *Book a meeting*.
+
 ### `ai_assistant` (AI assistant)
 
 An **AI assistant** region (APEX: AI Assistant, AI agents and tools) is a chat with an

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: 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` |
+| `date` | a text field in the item's date format mask, else the application's date format, else `YYYY-MM-DD`, with pgkiln's [date picker](#the-date-picker) (sprint 84; was the browser's); 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 |
@@ -31,7 +31,7 @@ page, optionally inside a region. Name them `P<page>_<NAME>` (uppercase letters,
 | `markdown` | Markdown textarea with a toolbar; shown formatted when read-only | the Markdown text |
 | `rating` | star rating (radio buttons drawn as stars) | `1` … `max` (default 5) |
 | `combobox` | free text with suggestions from the list of values; several values become tags | **colon-separated** values, e.g. `SQL:Sales` |
-| `daterange` | two date pickers, *From* and *To* | `from:to`, e.g. `2026-01-01:2026-06-30` |
+| `daterange` | two date fields, *From* and *To*, in the date format with the date picker (the picker keeps *From* on or before *To*) | `from:to`, e.g. `2026-01-01:2026-06-30` |
 | `qrcode` | display only: the value as a QR code (SVG drawn on the server) | whatever was set |
 | `image` | display only: a picture from a URL in the value, or a BLOB from a query ([Display image](#display-image-and-geocoded-address)) | a URL, or nothing |
 | `address` | a text field with *Check address*: the installation's geocoder offers matching addresses ([Geocoded address](#display-image-and-geocoded-address)) | the address as text |
@@ -51,6 +51,18 @@ where hiredate between nullif(split_part(:P20_PERIOD, ':', 1), '')::date
                    and coalesce(nullif(split_part(:P20_PERIOD, ':', 2), '')::date, 'infinity')
 ```
 
+
+### The date picker
+
+(sprint 84; APEX: the date picker) A date item, a date range item, an interactive grid's date cell and a
+faceted search's own date range and the task list's vacation rule are text in the date format: the item's date format mask, else the
+application's date format (Settings → Globalization), else `YYYY-MM-DD`. The calendar button next to the
+field (or Alt+↓ in it) opens a month of days under it: the chosen day marked, today outlined, the week
+starting on the language's first day. Arrow keys move a day or a week, Page Up and Page Down a month
+(with Shift a year), Home and End to the week's first and last day, Enter or Space choose, Escape
+closes; *Today* and *Clear* below. Typed dates are read back in the format (and `YYYY-MM-DD` always
+works), so the field works without JavaScript. Timestamp items and grid timestamp cells still use the
+browser's date and time field.
 ## Properties
 
 | Property | Meaning |

package/docs/guide/08-security.md

@@ -507,7 +507,7 @@ matures. Privileges show up in **SQL Workshop → Object Browser**.
 A `data_load` process loads files as the app role too, also with a data load definition: a
 definition naming a table the role can't write fails like any other insert, and a process only
 finds the definitions of its own application. XML files with a document type declaration are
-refused ([chapter 16](16-files.md#data-loading)). The SQL Workshop (SQL Commands, SQL Scripts,
+refused ([chapter 16](16-files.md#data-loading)). The SQL Workshop (the SQL Worksheet, SQL Scripts,
 Quick SQL, Load Data, Unload Data, Sample Data) runs as the owner instead, so every developer can change any table: keep
 developer accounts to people you trust with the database.
 

package/docs/guide/09-reference.md

@@ -427,7 +427,7 @@ navigation entries and application processes have the same `build_option` column
 | Column | Description |
 |---|---|
 | `page_id`, `seq`, `title` | |
-| `type` | `report`, `grid`, `form`, `chart`, `cards`, `calendar`, `facets`, `smart_filters`, `display_selector`, `map`, `tree`, `template_component`, `list`, `data_reporter`, `ai_assistant`, `tasks`, `workflows`, `static`, `dynamic` |
+| `type` | `report`, `grid`, `form`, `chart`, `cards`, `calendar`, `facets`, `smart_filters`, `display_selector`, `map`, `tree`, `template_component`, `list`, `data_reporter`, `form_designer`, `ai_assistant`, `tasks`, `workflows`, `static`, `dynamic` |
 | `source` | SELECT (or HTML for `static`) |
 | `table_name`, `pk_column` | For `form` and `grid` |
 | `pk_item` | For `form`: the item holding the key |

package/docs/guide/10-tutorial.md

@@ -20,7 +20,7 @@ Then open http://127.0.0.1:3100/a/tasks and sign in as `ann` / `ann-password` or
 
 ## Step 1: the table and the business logic
 
-Open **SQL Workshop → SQL Commands** and run:
+Open **SQL Workshop → SQL Worksheet**, paste this and press **Run Script** (F5):
 
 ```sql
 create schema tasks;

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

@@ -169,7 +169,8 @@ Tips:
   together.
 - **Errors are hidden by default**: unexpected errors show a reference number unless the app is in
   debug mode.
-- **Dates**: date items use ISO format (`2026-10-01`) and the browser's date picker; format masks
+- **Dates**: date items, date ranges, grid date cells and facet ranges are text in the application's date format
+  (else ISO, `2026-10-01`) with pgkiln's date picker; format masks
   apply to report, grid and cards columns and to number and display items
   ([number formats](14-globalization.md#number-formats)).
 - **Modal pages** open over the calling page, and close and refresh it after a successful submit,

package/docs/guide/12-development.md

@@ -66,7 +66,12 @@ src/
   sampledata-words.ts      built-in name, city, company and word lists of Sample Data
   unload.ts                Unload Data: unloadStatement() (one SELECT), openUnload() (cursor, batches, CSV/JSON/XLSX/XML encoders on Postgres text values)
   xml.ts                   safe XML reader (no DTDs or entities, limits) and xmlTable(): rows from a repeating element (unit tested)
-  sqlscript.ts             SQL scripts: splitScript() (statements, line numbers, psql commands), runScript() (stop/continue, transaction, savepoints)
+  sqlscript.ts             SQL scripts: splitScript() (statements, line numbers and offsets, psql commands), runScript() (stop/continue, transaction, savepoints)
+  sqlworksheet.ts          (sprint 91) the worksheet's runs: pickStatements() (at the cursor, a selection, all), runStatements() (a log per
+                           statement, psql command tags, notices, error line and column), explainStatement() (EXPLAIN / rolled-back ANALYZE)
+  tabledef.ts              (sprint 95) a table as a definition: readTable(), checkTable(), tableSql() (CREATE, or ALTER from the catalog's version)
+  sqlformat.ts             (sprint 93) formatSql(): the worksheet's Format (clauses per line, keyword case; strings and comments kept)
+  sqlplan.ts               (sprint 92) EXPLAIN (FORMAT JSON) as a tree: parsePlan() (self time, slowest step, misestimates), planText()
   quicksql.ts              Quick SQL: shorthand parser and PostgreSQL DDL generator (unit tested)
   xlsx.ts                  Excel writer for report downloads and Unload Data (typed cells, streamed through fflate's Zip)
   automations.ts           cron parser, next run in a time zone, scheduler (also meta.task_expire_tick, 094), running automations (the actions run
@@ -154,6 +159,8 @@ src/
     tasks.ts               task list region and task actions (approvals); (094) the vacation rule panel and route
     data-reporter.ts       Data Reporter region (migration 057): sources from the region's config, checkDef (offered columns, whitelists),
                            reportQuery/chartQuery, the list and editor (GET form), save/delete routes (meta.save_data_report)
+    form-designer.ts       Form Designer region (migration 106): sources from the region's config, checkFormDef (offered columns, displays,
+                           actions), forms as cards, a form's rows, a row's form (lost update hash), the designer; row/design/delete routes
     workflows.ts           workflow console region and its actions
     ai.ts                  Generate text with AI: the ai_generate process (config checks, &ITEM. as delimited escaped data,
                            schemas from items, answers into items), aiInputs/aiOutputs for its dynamic action (route in routes.ts)
@@ -209,10 +216,18 @@ src/
     mail.ts                Workspace utilities → Mail services (administrators: providers, write-only secret, allowed senders,
                            applications with From and daily limit, test) and Applications → Activity → Mail (retry, cancel)
     shared.ts              Shared Components and access control
-    designer.ts            page designer: component tree (with computations and branches), layout canvas and gallery, property editor, toolbar
+    designer.ts            page designer: component tree (with computations and branches), layout canvas and gallery, property editor, toolbar;
+                           (sprint 86) GET /builder/apps/:app/pages/:no, /builder/pages/:id redirects browsers there (designerUrl in ui.ts)
+    errors.ts              (sprint 86) the builder's HTML 404 and 500 pages for browsers (wantsHtml, a not-found handler and an onSend hook)
     arrange.ts             page designer layout changes: move, column span, create from the gallery, undo / redo
-    sql.ts                 SQL Workshop: the home and SQL commands (templates and drafts to review)
+    sql.ts                 SQL Workshop: the home and the session's schema
+    worksheet.ts           (sprint 91) the SQL Worksheet (Database Actions' SQL; /sql/commands too): navigator (pickSchema, objects with
+                           columns, objectStatements), toolbar, output tabs, history (meta.sql_history, 108), plan trees, Run as an app's role, (sprint 93) Save / Rename / Download as SQL Scripts, bind and substitution values, POST /sql/worksheet/format; GET /sql/worksheet/navigator
     object-browser.ts      (sprint 75) the Object Browser: objects by type, system objects hidden, a table in tabs, column actions as SQL to review
+    table-editor.ts        (sprint 95) Table Properties: GET/POST /sql/objects/table (create, edit ?o=, ?template=), fromForm(), Preview / Apply
+                           (one transaction) / Open in the worksheet
+    object-actions.ts      (sprint 94) an object's ⋯ menu (objectMenu) in the worksheet and the Object Browser: Quick DDL (objectDdl), Drop with
+                           dependents, Add index / trigger / policy as drafts; GET /sql/objects/action, /sql/objects/panel (Open in a panel)
     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
@@ -241,6 +256,7 @@ src/
     themeroller.ts         Settings → Theme Roller: style variants (add, edit, rename, delete), default style, users may choose
     subscriptions.ts       Shared Components → Subscriptions: subscribe, refresh, unsubscribe, subscribers and publish; the note under a component
     reporter.ts            page designer: Data Reporter settings (sources: table or view, offered columns, labels, masks; sharing)
+    form-designer.ts       page designer: Form Designer settings (designers' scheme; sources: key, actions, offered columns, labels, lists of values)
     workingcopies.ts       Working copies: list and create, compare with differences, merge or refresh with conflict choices, delete
     rest.ts                REST module endpoints list and curl example (Shared Components)
     workflows.ts           workflow versions, diagram and instances (Shared Components)
@@ -274,6 +290,8 @@ public/
   app.css                  theme (light/dark, responsive; --font, --font-size, --radius for style variants; template option classes to-*)
   app.js                   client runtime: dialogs (dialog_closed actions), popup LOVs, dynamic actions (focus, classes, messages), grids (add/duplicate rows, master-detail refresh, move/resize columns, copy/paste of cell ranges), menus, lazy regions, maps (Leaflet layers, marker clusters, heat layer, layer legend, area/distance filter) (no inline JS)
   code-editor.js, .css     builder code editor: enhances <textarea data-code>, highlighting, suggestions (no dependencies)
+  worksheet.js, .css       (sprint 91) the SQL Worksheet: run keys with the cursor, output tabs, navigator swap and search, drag and drop, splitters;
+                           (92) grid sort, value dialog, history filter; (93) worksheet tabs in localStorage, Files, binds dialog, format, find, case
   builder.css              builder only: IDE look (dark chrome, icon rail, panes), builder light/dark tokens
   builder.js               builder only: tabs, component tree, property filter, drag and drop on the layout
   builder-icons.svg        builder only: icons of the rail, toolbar and designer (b-*)
@@ -293,6 +311,10 @@ test/
   unload.test.ts           Unload Data: CSV/JSON/XLSX/XML output, read back with Load Data, read-only and one-statement checks, streaming
   app-from-file.test.ts    Create → From a file: proposed names and types, app + table + rows + pages, row errors, login, validation
   workshop.test.ts         SQL scripts, Quick SQL pages, query builder, data load definitions (Load Data, the process, export)
+  tabledef.test.ts         (sprint 95) table definitions round trip: CREATE, read, ALTER, read again; mistakes
+  table-editor.test.ts     (sprint 95) the Table Properties page: preview, apply, a failing apply rolls back, template, worksheet
+  object-actions.test.ts   (sprint 94) object menus: Quick DDL, Drop with dependents, Add index / trigger / policy, the panel, not-found
+  worksheet.test.ts        (sprint 91) the SQL Worksheet: statement at the cursor, Run Script log, plans, notices, history, navigator, Run as
   quicksql.test.ts         Quick SQL parser and DDL generator
   xml.test.ts              XML reader: rows, attributes, paths, refused DTDs and entities, limits
   printing.test.ts         report PDFs
@@ -338,6 +360,7 @@ test/
   helpers.ts               a cookie-keeping test browser
   e2e/responsive.test.ts   browser tests at phone/tablet/desktop widths (Playwright)
   e2e/code-editor.test.ts  the code editor in a browser: highlighting, keys, suggestions, touch, screen readers
+  e2e/worksheet.test.ts    (sprint 91) the SQL Worksheet in a browser: run keys, tabs, navigator, drag and drop, splitters, phone, no JavaScript
   e2e/items.test.ts        sprint 26 item types in a browser: editors, tags, stars, dates, reveal; without JavaScript
   e2e/designer.test.ts     page designer: panes per width, drag and drop, keyboard, Arrange buttons, builder theme
   e2e/calendar.test.ts     calendar drag and drop and create on click, view switching, chart drill-down

package/docs/guide/16-files.md

@@ -265,7 +265,7 @@ parsing, type inference and limits.)
 3. The result shows the rows inserted, updated and skipped, with a link to the table in the
    Object Browser.
 
-Load Data runs as the builder's owner connection, like SQL Commands.
+Load Data runs as the builder's owner connection, like the SQL Worksheet.
 
 ### SQL Workshop → Unload Data
 
@@ -352,7 +352,7 @@ Rows to develop and test with (APEX 26.1's Data Generator / "sample data for dev
    Definitions are shared by the developers of the installation, like SQL scripts, and not part of
    an application export (they describe tables, not an application).
 
-Sample Data runs as the builder's owner connection (like SQL Commands: triggers run, row level
+Sample Data runs as the builder's owner connection (like the SQL Worksheet: triggers run, row level
 security doesn't apply to the owner), on a connection of its own that is closed afterwards, with a
 statement timeout (`SAMPLE_DATA_STATEMENT_TIMEOUT`, default `5min`) and at most
 `SAMPLE_DATA_MAX_ROWS` rows per run (default 100,000). Table and column names come from the

package/examples/hr/hr_61_form_designer.sql

@@ -0,0 +1,80 @@
+-- =====================================================================
+-- HR example, part 61: a Form Designer (docs/guide/04-pages-and-regions.md,
+-- "Form Designer")
+--
+-- Page 45 "Forms": the application's administrators (authorization scheme
+-- ADMIN) build data entry forms on three tables the developer offers in the
+-- region's settings, and publish them for every employee:
+--   - "Departments": hr.dept, add and change rows;
+--   - "Meetings": hr.meeting, add, change and delete rows; its row level
+--     security still applies (an employee changes only their own meetings);
+--   - "Employees": hr.emp, change rows only, with the job and department
+--     as lists of values.
+-- Two published forms are there to start from: "Departments" (a list of
+-- departments with Add and Edit) and "Book a meeting" (no list: the form
+-- only adds rows). Forms are installation data: not part of the export.
+-- =====================================================================
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 45, 'Forms', 'Forms', 1 from meta.app where alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template, config)
+select p.id, 10, 'Form Designer', 'form_designer', 12, 'standard', $j${
+  "design_authz": "ADMIN",
+  "page_size": 15,
+  "sources": [
+    {"id": "departments", "label": "Departments", "description": "Department names and locations.",
+     "schema": "hr", "table": "dept", "key": "deptno", "insert": true, "update": true, "delete": false,
+     "columns": [{"name": "dname", "label": "Department"}, {"name": "loc", "label": "Location"}]},
+    {"id": "meetings", "label": "Meetings", "description": "Meetings in the planner; employees change only their own.",
+     "schema": "hr", "table": "meeting", "key": "id", "insert": true, "update": true, "delete": true,
+     "columns": [{"name": "title", "label": "Title"}, {"name": "starts_at", "label": "Starts"}, {"name": "ends_at", "label": "Ends"}, {"name": "private", "label": "Private"}]},
+    {"id": "employees", "label": "Employees", "description": "Job, department and salary of employees.",
+     "schema": "hr", "table": "emp", "key": "empno", "insert": false, "update": true, "delete": false,
+     "columns": [{"name": "ename", "label": "Name"}, {"name": "job", "label": "Job", "lov": "LOV:JOBS"}, {"name": "deptno", "label": "Department", "lov": "LOV:DEPARTMENTS"},
+                 {"name": "hiredate", "label": "Hire date"}, {"name": "sal", "label": "Salary"}]}
+  ]}$j$::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id
+ where a.alias = 'hr' and p.page_no = 45;
+
+-- two published forms to start from (forms are installation data: not part of the export)
+insert into meta.user_form (app_id, region_id, name, description, published, definition, created_by, updated_by)
+select a.id, r.id, f.name, f.description, true, f.definition, 'king', 'king'
+  from meta.app a join meta.page p on p.app_id = a.id and p.page_no = 45 join meta.region r on r.page_id = p.id and r.type = 'form_designer',
+       (values
+  ('Departments', 'Add a department or change its name and location.',
+   '{"source": "departments",
+     "fields": [{"column": "dname", "label": "", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "loc", "label": "", "help": "The city.", "required": false, "display": "auto", "default": ""}],
+     "list": ["dname", "loc"], "actions": {"insert": true, "update": true, "delete": false}}'::jsonb),
+  ('Book a meeting', 'Put a meeting in the planner.',
+   '{"source": "meetings",
+     "fields": [{"column": "title", "label": "What", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "starts_at", "label": "", "help": "", "required": true, "display": "auto", "default": ""},
+                {"column": "ends_at", "label": "", "help": "Leave empty for a meeting without an end.", "required": false, "display": "auto", "default": ""},
+                {"column": "private", "label": "Only visible to me", "help": "", "required": false, "display": "auto", "default": "false"}],
+     "list": [], "actions": {"insert": true, "update": false, "delete": false}}'::jsonb)
+  ) as f (name, description, definition)
+ where a.alias = 'hr';
+
+insert into meta.nav_entry (app_id, parent_id, seq, label, icon, target_page)
+select a.id, n.id, 60, 'Forms', 'file', 45
+  from meta.app a join meta.nav_entry n on n.app_id = a.id and n.label = 'Administration' and n.parent_id is null
+ where a.alias = 'hr';
+
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', t.source, t.target
+  from meta.app a, (values
+  ('Forms', 'Formulieren'),
+  ('Form Designer', 'Formulierbouwer'),
+  ('Department names and locations.', 'Namen en vestigingsplaatsen van afdelingen.'),
+  ('Meetings', 'Vergaderingen'),
+  ('Meetings in the planner; employees change only their own.', 'Vergaderingen in de planner; medewerkers wijzigen alleen hun eigen.'),
+  ('Job, department and salary of employees.', 'Functie, afdeling en salaris van medewerkers.'),
+  ('Title', 'Titel'),
+  ('Starts', 'Begint'),
+  ('Ends', 'Eindigt'),
+  ('Private', 'Privé')
+  ) as t (source, target)
+ where a.alias = 'hr'
+on conflict do nothing;

package/package.json

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

package/public/app.css

@@ -1152,6 +1152,13 @@ td[data-add]:hover > .cal-add, .cal-add:focus-visible { opacity: 1; }
 .facet { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
 .facet legend { font-weight: 650; font-size: 0.85rem; margin-bottom: 0.3rem; padding: 0; display: flex; gap: 0.5rem; }
 .facet-clear { font-weight: 400; font-size: 0.8rem; }
+.facet:has(> .facet-menu) { position: relative; }
+.facet:has(> .facet-menu) > legend { padding-right: 1.6rem; }
+.facet-menu { position: absolute; top: 0; right: 0; }
+.facet-menu > summary { cursor: pointer; padding: 0 0.35rem; border-radius: 4px; color: var(--muted); }
+.facet-menu > summary:hover, .facet-menu[open] > summary { background: var(--surface-3); color: inherit; }
+.facet-menu .menu-panel { left: auto; right: 0; min-width: 11rem; }
+.facet-menu .menu-links a[aria-current] { font-weight: 650; }
 .facet-value { font-weight: 400; font-size: 0.9rem; }
 /* (sprint 65) a facet's chart of its counts, collapsed under the legend */
 .facet-chart { margin: 0.1rem 0 0.4rem; }
@@ -1965,9 +1972,25 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .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 */
+/* (sprint 76) a date item in the application's date format */
 .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 84; APEX: the date picker) a month of days under a date field (app.js) */
+.date-picker { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; background: var(--surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(16 24 40 / 18%); padding: 0.5rem; min-width: 17rem; }
+.date-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
+.date-picker-title { font-weight: 650; text-transform: capitalize; }
+.date-picker-grid { border-collapse: collapse; width: 100%; }
+.date-picker-grid th { font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0.2rem 0; text-align: center; }
+.date-picker-grid td { padding: 1px; text-align: center; }
+.date-picker-grid button { width: 2.2rem; height: 2.1rem; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.date-picker-grid button:hover { background: var(--surface-3); }
+.date-picker-grid button.date-other { color: var(--muted); }
+.date-picker-grid button.date-today { box-shadow: inset 0 0 0 1px var(--accent); }
+.date-picker-grid button.date-selected { background: var(--accent); color: var(--accent-text); }
+.date-picker-grid button:disabled { opacity: 0.35; cursor: not-allowed; }
+.date-picker-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
+.date-picker-foot { display: flex; justify-content: space-between; margin-top: 0.4rem; }
+.js .grid-table tbody td[data-col]:not(:focus-within) .date-field > .btn { visibility: hidden; }
 
 /* (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; }
@@ -1982,3 +2005,40 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 @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; }
+
+/* (sprint 85) the Form Designer region (form-designer.ts): forms as cards with a Design link, the designer's field table, a row's form */
+.fd-cards > li { display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-design-link { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }
+.fd-fields input.fd-seq { width: 4.5rem; }
+.fd-fields td select { min-width: 8rem; }
+.fd-fields td input:not([type=checkbox]):not(.fd-seq) { min-width: 6rem; width: 100%; }
+.fd-form { margin: 0.75rem 0; }
+.fd-radios { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
+.fd-new { margin-top: 1rem; }
+
+/* (sprint 88, GEN-4; APEX: the Cards list template and the hero region) a list's cards each get a colour band
+   and their icon in a round badge, in the chart palette's order; the hero sits on the page background */
+.list-cards > li { --card-color: var(--series-1); }
+.list-cards > li:nth-child(8n+2) { --card-color: var(--series-2); }
+.list-cards > li:nth-child(8n+3) { --card-color: var(--series-3); }
+.list-cards > li:nth-child(8n+4) { --card-color: var(--series-4); }
+.list-cards > li:nth-child(8n+5) { --card-color: var(--series-5); }
+.list-cards > li:nth-child(8n+6) { --card-color: var(--series-6); }
+.list-cards > li:nth-child(8n+7) { --card-color: var(--series-7); }
+.list-cards > li:nth-child(8n+8) { --card-color: var(--series-8); }
+.list-card { border-top: 4px solid var(--card-color); }
+.list-card-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
+  background: color-mix(in srgb, var(--card-color) 16%, transparent); color: var(--card-color); }
+.list-card-icon .icon { width: 1.3rem; height: 1.3rem; }
+.list-card-head { gap: 0.75rem; }
+.region-hero { background: transparent; padding-left: 0; padding-right: 0; }
+
+/* (sprint 88, GEN-4; APEX: the page footer) the application's version and Back to top, under the content */
+.t-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem;
+  margin: 0 1.5rem 1rem; max-width: calc(1500px - 3rem); padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }
+@media (max-width: 640px) { .t-footer { margin: 0 0.75rem 1rem; } }
+.t-footer .t-top { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; }
+.t-footer .t-top:hover, .t-footer .t-top:focus-visible { color: var(--accent); }
+.t-footer .icon { width: 1rem; height: 1rem; }
+@media print { .t-footer { display: none; } }
+.list-card:hover { border-top-color: var(--card-color); }