pgkiln 0.51.0 → 0.53.0

package/examples/hr/hr_66_team_development.sql

@@ -0,0 +1,58 @@
+-- =====================================================================
+-- HR example, part 66: Team Development (docs/guide/03-builder.md,
+-- "Team Development")
+--
+-- What Builder → Team Development → Set up installs in the Default
+-- workspace (the label groups Type and Priority, milestones 1.0 and 1.1,
+-- a bug report template and a canned response), and one issue about the
+-- HR application: "Salary rounding on page 12", a Bug of milestone 1.1,
+-- assigned to admin. The Page Designer of page 12 shows it, and the
+-- Workspace home counts it until it is closed. Issues are workspace data
+-- (the workspace export), not part of the HR application's export.
+-- =====================================================================
+
+insert into meta.team_label_group (workspace_id, name, description, seq) values
+  (1, 'Type', 'What kind of work the issue is.', 10),
+  (1, 'Priority', 'How soon it should be done.', 20)
+on conflict (workspace_id, lower(name)) do nothing;
+
+insert into meta.team_label (workspace_id, group_id, name, color, description, seq)
+select 1, g.id, l.name, l.color, l.description, l.seq
+  from (values ('Type', 'Bug', 'red', 'Something does not work as it should.', 10),
+               ('Type', 'Feature', 'blue', 'New functionality.', 20),
+               ('Type', 'Task', 'teal', 'Work to do that is neither a bug nor a feature.', 30),
+               ('Priority', 'High', 'orange', 'Do this first.', 10),
+               ('Priority', 'Medium', 'yellow', 'Do this soon.', 20),
+               ('Priority', 'Low', 'gray', 'Do this when there is time.', 30)) as l(grp, name, color, description, seq)
+  join meta.team_label_group g on g.workspace_id = 1 and g.name = l.grp
+on conflict (workspace_id, lower(name)) do nothing;
+
+insert into meta.team_milestone (workspace_id, name, description, due_date) values
+  (1, '1.0', 'The first release.', current_date + 30),
+  (1, '1.1', 'The first update after the release.', current_date + 90)
+on conflict (workspace_id, lower(name)) do nothing;
+
+insert into meta.team_template (workspace_id, kind, name, title, body, labels, seq) values
+  (1, 'issue', 'Bug report', 'Bug: ', E'## What happens\n\n\n## What should happen\n\n\n## Steps to reproduce\n\n1. \n2. \n', '{Bug}', 10),
+  (1, 'response', 'Thanks, we will look at it', null, 'Thank you for reporting this. We will look at it and keep this issue up to date.', '{}', 10)
+on conflict (workspace_id, kind, lower(name)) do nothing;
+
+with issue as (
+  insert into meta.team_issue (workspace_id, title, body, milestone_id, app_id, page_no, created_by)
+  select 1, 'Salary rounding on page 12',
+         E'The leave calendar shows daily salary costs rounded to whole euros; finance expects cents.\n\n'
+         || E'- Open **page 12** (Leave calendar)\n- Compare a day with the salary in `hr.emp`\n\n@admin can you have a look?',
+         (select id from meta.team_milestone where workspace_id = 1 and name = '1.1'),
+         a.id, 12, 'admin'
+    from meta.app a
+   where a.alias = 'hr'
+     and not exists (select 1 from meta.team_issue i where i.workspace_id = 1 and i.title = 'Salary rounding on page 12')
+  returning id
+), labelled as (
+  insert into meta.team_issue_label (issue_id, label_id)
+  select issue.id, l.id from issue join meta.team_label l on l.workspace_id = 1 and l.name in ('Bug', 'Medium')
+), assigned as (
+  insert into meta.team_issue_assignee (issue_id, username)
+  select issue.id, 'admin' from issue where exists (select 1 from meta.developer where username = 'admin')
+)
+insert into meta.team_issue_event (issue_id, username, action) select id, 'admin', 'created' from issue;

package/examples/hr/hr_67_workflow_outcomes.sql

@@ -0,0 +1,113 @@
+-- =====================================================================
+-- HR example, part 67: custom task outcomes, task events and
+-- notifications, a Send E-Mail step, drafts and versions of a workflow
+-- (migration 123; docs/guide/06-processing.md, "Approvals" and "Workflows")
+--
+-- SALARY_DECISION is a task with three outcomes instead of Approve / Reject:
+-- Yes, No and Undecided. Its owners (role admin) get an e-mail when a task
+-- is created (notification SALARY_TASK); when one is completed an event
+-- records the decision as a notification for the initiator.
+--
+-- SALARY_CHANGE asks for that decision and branches on its outcome:
+--   1. APPROVE  the task (an administrator decides)
+--   2. DECIDE   YES: apply the new salary; UNDECIDED: ask again; otherwise the end
+--   3. APPLY    the new salary (SQL)
+--   4. TELL     an e-mail to the employee (version 2: a send_mail step)
+-- Version 1 had no TELL step and is inactive; version 2 is active; version 3
+-- is in development with a draft step (BUDGET_CHECK) that is still a
+-- placeholder: it is drawn dashed, and can't be activated until it is
+-- replaced. Instances of version 1 can be migrated to version 2 under
+-- Shared Components → Workflows → SALARY_CHANGE → Migrate running instances.
+--
+-- Start one from SQL (e.g. the SQL Workshop, signed in to the application):
+--   select meta.start_workflow('SALARY_CHANGE', '7499', '{"ENAME": "Allen", "NEW_SAL": 1760}')
+-- and decide on it under My tasks (page 14) as king.
+-- =====================================================================
+
+insert into meta.email_template (app_id, name, subject, html_body, text_body)
+select id, 'SALARY_TASK', 'To decide: #SUBJECT#',
+$h$<p>A salary change waits for your decision: <b>#SUBJECT#</b>.</p>
+<p>Requested by #INITIATOR#. Decide under <i>My tasks</i> in HR Demo.</p>$h$,
+$t$A salary change waits for your decision: #SUBJECT#.
+
+Requested by #INITIATOR#. Decide under "My tasks" in HR Demo.$t$
+  from meta.app where alias = 'hr'
+union all
+select id, 'SALARY_CHANGED', 'Your salary changes to #NEW_SAL#',
+$h$<p>Dear #ENAME#,</p><p>Your new salary of <b>#NEW_SAL#</b> was approved by #TASK_APPROVER#.</p><p>Kind regards,<br>HR</p>$h$,
+$t$Dear #ENAME#,
+
+Your new salary of #NEW_SAL# was approved by #TASK_APPROVER#.
+
+Kind regards,
+HR$t$
+  from meta.app where alias = 'hr';
+
+insert into meta.task_definition (app_id, name, type, subject, owner_roles, admin_role, priority, due_in, outcomes, events, notifications)
+select id, 'SALARY_DECISION', 'approval', 'Salary of &ENAME. to &NEW_SAL.', '{admin}'::text[], 'admin', 2, '5 days',
+       $o$[{"name": "YES", "label": "Yes", "colour": "success"},
+           {"name": "NO", "label": "No", "colour": "danger"},
+           {"name": "UNDECIDED", "label": "Undecided", "colour": "warning"}]$o$::jsonb,
+       $e$[{"on": "complete", "type": "sql", "code": "select hr.salary_decided(:DETAIL_PK::int, :OUTCOME, :INITIATOR)"}]$e$::jsonb,
+       '{"create": "SALARY_TASK"}'::jsonb
+  from meta.app where alias = 'hr';
+
+-- Notifications are for other users, which RLS forbids the app: security definer, like the onboarding ones.
+create function hr.salary_decided(p_empno int, p_outcome text, p_initiator text) returns void
+language plpgsql security definer set search_path = hr, pg_catalog as $$
+begin
+  insert into hr.notification (username, message)
+  select p_initiator, format('Salary change of %s: %s.', initcap(e.ename), lower(p_outcome))
+    from hr.emp e where e.empno = p_empno;
+end
+$$;
+create function hr.salary_change_apply(p_empno int, p_sal numeric) returns timestamptz
+language plpgsql security definer set search_path = hr, pg_catalog as $$
+begin
+  if p_sal is null or p_sal <= 0 then
+    raise exception 'A salary is more than 0.';
+  end if;
+  update hr.emp set sal = p_sal where empno = p_empno;
+  return now();
+end
+$$;
+-- the e-mail address of an employee's account (the accounts are pgkiln's, not the application's)
+create function hr.employee_email(p_empno int) returns text
+language sql stable security definer set search_path = hr, pg_catalog as $$
+  select a.email from hr.emp e join meta.account a on lower(a.username) = lower(e.username) where e.empno = p_empno and a.active
+$$;
+revoke all on function hr.salary_decided(int, text, text), hr.salary_change_apply(int, numeric), hr.employee_email(int) from public;
+grant execute on function hr.salary_decided(int, text, text), hr.salary_change_apply(int, numeric), hr.employee_email(int) to hr_app;
+
+-- version 1, then version 2 (with the e-mail) becomes active, then version 3 in development (a draft step)
+insert into meta.workflow_definition (app_id, name, title, description, admin_role, steps)
+select id, 'SALARY_CHANGE', 'Salary of &ENAME. to &NEW_SAL.', 'A salary change, decided by an administrator (Yes, No or Undecided).', 'admin',
+$s$[
+  {"name": "APPROVE", "type": "task", "task": "SALARY_DECISION"},
+  {"name": "DECIDE", "type": "switch", "cases": [{"outcome": "YES", "next": "APPLY"}, {"outcome": "UNDECIDED", "next": "APPROVE"}], "otherwise": "END"},
+  {"name": "APPLY", "type": "sql", "code": "select hr.salary_change_apply(:DETAIL_PK::int, :NEW_SAL::numeric) as applied_at", "next": "END"},
+  {"name": "END", "type": "end"}
+]$s$::jsonb
+  from meta.app where alias = 'hr';
+
+select meta.new_workflow_version(d.id) from meta.workflow_definition d join meta.app a on a.id = d.app_id where a.alias = 'hr' and d.name = 'SALARY_CHANGE';
+update meta.workflow_definition d set dev_steps = $s$[
+  {"name": "APPROVE", "type": "task", "task": "SALARY_DECISION"},
+  {"name": "DECIDE", "type": "switch", "cases": [{"outcome": "YES", "next": "APPLY"}, {"outcome": "UNDECIDED", "next": "APPROVE"}], "otherwise": "END"},
+  {"name": "APPLY", "type": "sql", "code": "select hr.salary_change_apply(:DETAIL_PK::int, :NEW_SAL::numeric) as applied_at"},
+  {"name": "TELL", "type": "send_mail", "to": "select hr.employee_email(:DETAIL_PK::int)", "template": "SALARY_CHANGED", "next": "END"},
+  {"name": "END", "type": "end"}
+]$s$::jsonb
+  from meta.app a where a.id = d.app_id and a.alias = 'hr' and d.name = 'SALARY_CHANGE';
+select meta.activate_workflow_version(d.id) from meta.workflow_definition d join meta.app a on a.id = d.app_id where a.alias = 'hr' and d.name = 'SALARY_CHANGE';
+
+select meta.new_workflow_version(d.id) from meta.workflow_definition d join meta.app a on a.id = d.app_id where a.alias = 'hr' and d.name = 'SALARY_CHANGE';
+update meta.workflow_definition d set dev_steps = $s$[
+  {"name": "BUDGET_CHECK", "type": "draft", "note": "check the department's budget", "next": "APPROVE"},
+  {"name": "APPROVE", "type": "task", "task": "SALARY_DECISION"},
+  {"name": "DECIDE", "type": "switch", "cases": [{"outcome": "YES", "next": "APPLY"}, {"outcome": "UNDECIDED", "next": "APPROVE"}], "otherwise": "END"},
+  {"name": "APPLY", "type": "sql", "code": "select hr.salary_change_apply(:DETAIL_PK::int, :NEW_SAL::numeric) as applied_at"},
+  {"name": "TELL", "type": "send_mail", "to": "select hr.employee_email(:DETAIL_PK::int)", "template": "SALARY_CHANGED", "next": "END"},
+  {"name": "END", "type": "end"}
+]$s$::jsonb
+  from meta.app a where a.id = d.app_id and a.alias = 'hr' and d.name = 'SALARY_CHANGE';

package/examples/hr/hr_68_component_details.sql

@@ -0,0 +1,96 @@
+-- =====================================================================
+-- HR example, part 68: component details of APEX 26.1 (migration 124;
+-- docs/guide/05-items.md "Popup LOV", docs/guide/07-dynamic-actions.md
+-- "Wait popup" and "Menu entry chosen")
+--
+-- Page 47 "Component details":
+--   * P47_REF, a popup LOV over 6,000 reference numbers: the dialog loads
+--     the next 100 as the list scrolls (no More button).
+--   * RECALC, a submit button whose process takes two seconds: a dynamic
+--     action shows the wait popup on its click; the next page removes it.
+--   * CHECK ("Check in the background"): wait popup, an Ajax call (execute_sql,
+--     a second and a half) that fills P47_RESULT, remove wait popup.
+--   * ACTIONS, a menu button: a link, and two entries that run dynamic
+--     actions (event menu_entry): COUNT (the same Ajax call with a wait
+--     popup) and HELLO (a success message).
+-- =====================================================================
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 47, 'Component details', 'Component details', 1 from meta.app where alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source)
+select p.id, 10, 'Component details', 'static', 12, 'standard',
+       '<p>A popup list of values that loads more rows as you scroll, a wait popup around a long process and an Ajax call, and a menu button whose entries run dynamic actions.</p>'
+  from meta.page p join meta.app a on a.id = p.app_id
+ where a.alias = 'hr' and p.page_no = 47;
+
+insert into meta.item (page_id, region_id, seq, name, label, type, lov, config, help)
+select p.id, r.id, i.seq, i.name, i.label, i.type, i.lov, i.config::jsonb, i.help
+  from meta.page p join meta.app a on a.id = p.app_id
+  join meta.region r on r.page_id = p.id and r.title = 'Component details', (values
+  (10, 'P47_REF', 'Reference', 'popup_lov',
+   'select ''REF-'' || lpad(n::text, 5, ''0'') || '' · '' || (array[''Accounting'', ''Research'', ''Sales'', ''Operations''])[1 + n % 4] as name, n as ref
+  from generate_series(1, 6000) n
+ order by n',
+   '{"page_size": 100}', '6,000 reference numbers: scroll the dialog to load more.'),
+  (20, 'P47_RESULT', 'Result', 'text', null, '{}', 'Filled by the Ajax call behind Check in the background, or Actions → Count employees.')
+  ) as i (seq, name, label, type, lov, config, help)
+ where a.alias = 'hr' and p.page_no = 47;
+
+insert into meta.button (page_id, region_id, seq, name, label, action, hot, menu)
+select p.id, r.id, b.seq, b.name, b.label, b.action, b.hot, b.menu::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id
+  join meta.region r on r.page_id = p.id and r.title = 'Component details', (values
+  (10, 'RECALC', 'Recalculate', 'submit', true, null),
+  (20, 'CHECK', 'Check in the background', 'da', false, null),
+  (30, 'ACTIONS', 'Actions', 'menu', false,
+   '[{"label": "Count employees", "action": "COUNT", "icon": "users"},
+     {"label": "Say hello", "action": "HELLO", "icon": "bell"},
+     {"label": "Pick an employee", "page": 26, "icon": "search"}]')
+  ) as b (seq, name, label, action, hot, menu)
+ where a.alias = 'hr' and p.page_no = 47;
+
+-- the long process: two seconds on RECALC
+insert into meta.process (page_id, seq, name, type, point, code, when_button, success_message)
+select p.id, 10, 'Recalculate (slow)', 'sql', 'submit', 'select pg_sleep(2)', 'RECALC', 'Recalculated.'
+  from meta.page p join meta.app a on a.id = p.app_id
+ where a.alias = 'hr' and p.page_no = 47;
+
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_items, code, message)
+select p.id, d.seq, d.name, d.event, d.trig, d.action, d.affected, d.code, d.message
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Wait while recalculating', 'click', 'RECALC', 'wait_popup', null, null, 'Recalculating…'),
+  (20, 'Wait for the check', 'click', 'CHECK', 'wait_popup', null, null, 'Checking…'),
+  (30, 'The check', 'click', 'CHECK', 'execute_sql', 'P47_RESULT',
+   'select (select count(*) from hr.emp) || '' employees, checked at '' || to_char(clock_timestamp(), ''HH24:MI:SS'') as p47_result from pg_sleep(1.5)', null),
+  (40, 'Check done', 'click', 'CHECK', 'remove_wait_popup', null, null, null),
+  (50, 'Wait for the count', 'menu_entry', 'COUNT', 'wait_popup', null, null, 'Counting employees…'),
+  (60, 'The count', 'menu_entry', 'COUNT', 'execute_sql', 'P47_RESULT',
+   'select (select count(*) from hr.emp) || '' employees, counted at '' || to_char(clock_timestamp(), ''HH24:MI:SS'') as p47_result from pg_sleep(1.5)', null),
+  (70, 'Count done', 'menu_entry', 'COUNT', 'remove_wait_popup', null, null, null),
+  (80, 'Hello', 'menu_entry', 'HELLO', 'show_success', null, null, 'Hello from a menu entry.')
+  ) as d (seq, name, event, trig, action, affected, code, message)
+ where a.alias = 'hr' and p.page_no = 47;
+
+insert into meta.nav_entry (app_id, seq, label, icon, target_page)
+select id, 34, 'Component details', 'list', 47 from meta.app where alias = 'hr';
+
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', t.source, t.target
+  from meta.app a, (values
+  ('Component details', 'Componentdetails'),
+  ('Reference', 'Referentie'),
+  ('Result', 'Resultaat'),
+  ('Recalculate', 'Herberekenen'),
+  ('Check in the background', 'Op de achtergrond controleren'),
+  ('Actions', 'Acties'),
+  ('Count employees', 'Medewerkers tellen'),
+  ('Say hello', 'Hallo zeggen'),
+  ('Recalculating…', 'Herberekenen…'),
+  ('Checking…', 'Controleren…'),
+  ('Counting employees…', 'Medewerkers tellen…'),
+  ('Recalculated.', 'Herberekend.'),
+  ('Hello from a menu entry.', 'Hallo vanuit een menu-item.')
+  ) as t(source, target)
+ where a.alias = 'hr'
+on conflict do nothing;

package/examples/hr/hr_70_data_security.sql

@@ -0,0 +1,79 @@
+-- =====================================================================
+-- HR example, part 70: data security per table (sprint 119, WS-13;
+-- docs/guide/08-security.md "Data security per table")
+--
+-- hr.emp_masked, the masking view that SQL Workshop › hr.emp › Security
+-- writes when sal and comm are masked (empty) for everyone but the
+-- application role manager. It runs as hr_masking, so row level security
+-- on hr.emp would still apply inside it. hr_app keeps SELECT on hr.emp
+-- because the other pages read it: the Security page warns that the mask
+-- holds only where the view is read.
+--
+-- Page 48 "Salaries (masked)": a report on the view. Signed in as KING
+-- (manager) it shows salaries; as ALLEN (no manager role) they are empty.
+-- =====================================================================
+
+do $role$ begin
+  if not exists (select from pg_roles where rolname = 'hr_masking') then
+    create role hr_masking nologin;
+  end if;
+end $role$;
+grant hr_masking to current_user;
+grant usage on schema hr to hr_masking;
+grant select on hr.emp to hr_masking;
+grant hr_app to hr_masking;
+
+create view hr.emp_masked with (security_barrier) as
+select t.empno,
+       t.ename,
+       t.job,
+       t.mgr,
+       t.hiredate,
+       case when (select meta.has_role('manager')) then t.sal end as sal,
+       case when (select meta.has_role('manager')) then t.comm end as comm,
+       t.deptno,
+       t.active,
+       t.username,
+       t.photo,
+       t.photo_name,
+       t.photo_mime,
+       t.work_location
+  from hr.emp t;
+alter view hr.emp_masked owner to hr_masking;
+comment on view hr.emp_masked is 'pgkiln masking view of emp: {"table":"emp","roles":["manager"],"cols":{"comm":{"mask":"null","see":["manager"],"others":false},"sal":{"mask":"null","see":["manager"],"others":false}}}';
+grant select on hr.emp_masked to hr_app;
+
+do $check$ begin
+  if exists (select from pg_roles r where r.rolname = 'hr_masking'
+              and (r.rolsuper or r.rolbypassrls or pg_has_role(r.oid, (select relowner from pg_class where oid = 'hr.emp'::regclass), 'USAGE'))) then
+    raise exception 'the masking role hr_masking would bypass row level security on hr.emp';
+  end if;
+end $check$;
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 48, 'Salaries (masked)', 'Salaries (masked)', 1 from meta.app where alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template, source, config)
+select p.id, r.seq, r.title, r.type, 12, 'standard', r.source, r.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Salaries (masked)', 'static',
+   '<p>This report reads <code>hr.emp_masked</code>: salary and commission are only shown to the role <b>manager</b>. Open SQL Workshop › hr.emp › Security to change who sees what.</p>', '{}'),
+  (20, 'Employees', 'report',
+   'select ename, job, sal, comm from hr.emp_masked where active order by ename',
+   '{"page_size": 15, "headings": {"ename": "Name", "job": "Job", "sal": "Salary", "comm": "Commission"}}')
+  ) as r (seq, title, type, source, config)
+ where a.alias = 'hr' and p.page_no = 48;
+
+insert into meta.nav_entry (app_id, seq, label, icon, target_page)
+select id, 35, 'Salaries (masked)', 'shield', 48 from meta.app where alias = 'hr';
+
+insert into meta.translation (app_id, language, source, target)
+select a.id, 'nl', t.source, t.target
+  from meta.app a, (values
+  ('Salaries (masked)', 'Salarissen (gemaskeerd)'),
+  ('Employees', 'Medewerkers'),
+  ('Salary', 'Salaris'),
+  ('Commission', 'Commissie')
+  ) as t(source, target)
+ where a.alias = 'hr'
+on conflict do nothing;

package/package.json

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

package/public/app.css

@@ -155,8 +155,8 @@ html[data-style="iris"][data-theme="dark"] {
   --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-header { box-shadow: inset 0 3px 0 var(--strip, var(--accent)); }
+html[data-style="iris"] .t-nav { border-inline-end-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; }
@@ -225,7 +225,7 @@ html[data-style="lavender"][data-theme="dark"] {
   --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
 }
 /* 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[aria-current="page"] { border-inline-start-color: transparent; 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; }
@@ -243,8 +243,8 @@ h2 { font-size: 1rem; margin: 0; font-weight: 600; }
 .lead { font-size: 1.05rem; margin: 0; }
 [hidden] { display: none !important; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 0.5rem 1rem; }
-.skip-link:focus { left: 0.5rem; top: 0.5rem; }
+.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 0.5rem 1rem; }
+.skip-link:focus { inset-inline-start: 0.5rem; top: 0.5rem; }
 .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 /* (0.31) icon modifiers, like Font APEX's: "users lg", "refresh spin", "truck flip-h success" */
 .icon.icon-xs { width: 0.75em; height: 0.75em; } .icon.icon-sm { width: 0.875em; height: 0.875em; }
@@ -285,15 +285,15 @@ details.menu { position: relative; }
 details.menu > summary { list-style: none; }
 details.menu > summary::-webkit-details-marker { display: none; }
 .menu-panel {
-  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
+  position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; min-width: 240px;
   background: var(--surface); color: var(--text); border: 1px solid var(--border);
   border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%); padding: 0.4rem 0;
   max-height: min(80vh, 42rem); overflow: auto;
 }
-.menu-panel.align-right, .actions-menu .menu-panel { left: auto; right: 0; }
+.menu-panel.align-right, .actions-menu .menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
 .menu-section { padding: 0.5rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
 .menu-section + .menu-section { border-top: 1px solid var(--border); }
-.menu-links a, .menu-links button { color: var(--text); text-decoration: none; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.45rem; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
+.menu-links a, .menu-links button { color: var(--text); text-decoration: none; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.45rem; background: none; border: 0; font: inherit; cursor: pointer; text-align: start; }
 .menu-links a:hover, .menu-links button:hover { color: var(--accent); }
 .menu-links .icon { width: 1em; height: 1em; }
 .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; min-width: 320px; }
@@ -308,21 +308,31 @@ details.menu > summary::-webkit-details-marker { display: none; }
   body.nav-collapsed .t-body { grid-template-columns: 0 minmax(0, 1fr); }
   body.nav-collapsed .t-nav { visibility: hidden; }
 }
-.t-nav { background: var(--nav-bg); border-right: 1px solid var(--border); overflow: hidden auto; }
+.t-nav { background: var(--nav-bg); border-inline-end: 1px solid var(--border); overflow: hidden auto; }
 .t-nav ul { list-style: none; margin: 0; padding: 0.5rem; }
-.t-nav ul ul { padding: 0 0 0 1.4rem; }
+/* (sprint 117) a subtree hangs on a guide line; the open trail's line in the accent */
+.t-nav ul ul { padding: 0; padding-inline-start: 0.35rem; margin-inline-start: 1.05rem; border-inline-start: 1px solid var(--nav-guide, color-mix(in srgb, var(--nav-text, var(--text)) 16%, transparent)); }
+.t-nav details:has(> summary.in-trail) > ul { border-inline-start-color: color-mix(in srgb, var(--nav-current, var(--accent)) 55%, transparent); }
 .t-nav a, .t-nav summary {
   display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 6px;
+  /* (sprint 117) the bar at the inline start (left, or right in RTL) marks the current page */
+  border-inline-start: 3px solid transparent; padding-inline-start: calc(0.65rem - 3px);
   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(--nav-muted, var(--muted)); transition: transform 0.15s; }
+.t-nav summary::after { content: "›"; margin-inline-start: auto; color: var(--nav-muted, var(--muted)); transition: transform 0.15s; }
 .t-nav details[open] > summary::after { transform: rotate(90deg); }
+/* RTL: the bidi algorithm mirrors "›" to "‹"; opened, it turns the other way to point down */
+[dir="rtl"] .t-nav details[open] > summary::after { transform: rotate(-90deg); }
 .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)); }
+/* (sprint 117) the selected entry (keyboard focus) gets a ring inside the menu, which scrolls and would clip one outside */
+.t-nav a:focus-visible, .t-nav summary:focus-visible { outline: 2px solid var(--nav-current, var(--accent)); outline-offset: -2px; }
+/* (sprint 72) --nav-* let a style have a dark menu (Iris); without them the menu takes the page's colours.
+   (sprint 117) Current page: filled, the accent bar and text. Its parent entries (the trail): bold, the menu's text
+   colour with an accent icon, no fill, so the two are told apart at a glance. */
+.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-current, var(--accent)); font-weight: 600; border-inline-start-color: var(--accent); }
+.t-nav .in-trail { color: var(--nav-text, var(--text)); font-weight: 600; }
 .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)); }
 
@@ -440,7 +450,8 @@ textarea.code { font-family: var(--mono); font-size: 0.84rem; line-height: 1.45;
 .has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
 .error { color: var(--danger); font-size: 0.82rem; font-weight: 500; }
 .default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
-[aria-busy="true"] { opacity: 0.55; transition: opacity 0.1s; }
+/* (sprint 117) a lighter processing indicator: a slight dim after 150 ms (no flicker on quick answers), a bar on regions (below) */
+[aria-busy="true"] { opacity: 0.8; cursor: progress; transition: opacity 0.2s ease 0.15s; }
 
 /* ---------- buttons ---------- */
 .buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@@ -902,10 +913,11 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .t-body { grid-template-columns: minmax(0, 1fr); }
   /* Drawer: opened by JS (body.nav-open) or, without JS, by the #t-nav link (:target). */
   .t-nav {
-    position: fixed; z-index: 25; top: 52px; bottom: 0; left: 0; width: min(300px, 85vw);
+    position: fixed; z-index: 25; top: 52px; bottom: 0; inset-inline-start: 0; width: min(300px, 85vw);
     box-shadow: 8px 0 24px rgb(0 0 0 / 20%); transition: transform 0.2s ease, visibility 0.2s;
     transform: translateX(-100%); visibility: hidden;
   }
+  [dir="rtl"] .t-nav { transform: translateX(100%); box-shadow: -8px 0 24px rgb(0 0 0 / 20%); }
   body.nav-open .t-nav, .t-nav:target { transform: none; visibility: visible; }
   body.nav-open .t-nav-backdrop { display: block; position: fixed; inset: 52px 0 0 0; z-index: 24; background: rgb(15 20 30 / 40%); }
   .t-regions > .region { grid-column: span 12 !important; }
@@ -950,7 +962,7 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .report-reflow tbody tr:hover { background: var(--surface); }
   .report-reflow td {
     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;
+    border: 0; padding: 0.3rem 0.8rem; white-space: normal; max-width: none; text-align: start !important; overflow-wrap: anywhere;
   }
   .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; }
@@ -992,14 +1004,14 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
   body.nav-top .t-body { display: block; }
   body.nav-top .t-nav {
     position: sticky; top: 52px; z-index: 18; visibility: visible; overflow: visible;
-    border-right: 0; border-bottom: 1px solid var(--border);
+    border-inline-end: 0; border-bottom: 1px solid var(--border);
   }
   body.nav-top .t-nav > ul { display: flex; gap: 0.25rem; padding: 0.3rem 0.75rem; }
   body.nav-top .t-nav li { position: relative; }
-  body.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
+  body.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-inline-start-color: transparent; }
   body.nav-top .t-nav details > ul {
-    position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 0.4rem;
-    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
+    position: absolute; top: calc(100% + 4px); inset-inline-start: 0; margin: 0; min-width: 220px; padding: 0.4rem;
+    background: var(--nav-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
   }
   body.nav-top .t-nav details > summary::after { transform: rotate(90deg); }
 }
@@ -2048,3 +2060,105 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .reporter-actions .buttons { margin: 0; }
 .reporter-link { flex: 1 1 14rem; min-width: 0; font-family: var(--mono, monospace); font-size: 0.85rem; }
 .reporter-coldesc { display: block; font-size: 0.78rem; }
+
+/* (121) AI agents: links a navigate tool built under an answer; tool arguments in the AI usage log */
+.assistant-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
+.assistant-links .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
+.ai-args { overflow-wrap: anywhere; word-break: break-word; }
+
+/* (sprint 112) the report's settings as chips under "Ask in your own words" (src/runtime/ai-filter.ts): Edit unfolds a small form */
+.ask-chips { margin: 0.6rem 0 0; padding: 0; list-style: none; }
+.ask-chip { flex-wrap: wrap; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding-right: 0.2rem; }
+.ask-chip-text { min-width: 0; }
+.ask-edit > summary { cursor: pointer; font-size: 0.78rem; text-decoration: underline; list-style: none; padding: 0 0.2rem; }
+.ask-edit > summary::-webkit-details-marker { display: none; }
+.ask-edit[open] { flex-basis: 100%; }
+.ask-edit-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; padding: 0.4rem 0.2rem 0.3rem; }
+.ask-field { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 8rem; max-width: 100%; }
+.ask-field label { font-size: 0.75rem; }
+.ask-field select, .ask-field input { min-width: 0; width: 100%; box-sizing: border-box; }
+.ask-chip-x { background: none; border: 0; color: inherit; font-size: 1rem; line-height: 1; padding: 0.15rem 0.4rem; border-radius: 99px; cursor: pointer; }
+.ask-chip-x:hover, .ask-chip-x:focus-visible { background: var(--surface); }
+/* (123) workflows: draft and send e-mail steps; custom task outcomes */
+.wf-send_mail rect { stroke: var(--success); stroke-width: 2; }
+.wf-draft rect { fill: var(--surface-2, var(--surface)); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }
+.wf-draft .wf-name, .wf-draft .wf-type { font-style: italic; }
+.btn.to-warning { background: var(--warning-soft); border-color: color-mix(in srgb, #b86e00 45%, var(--border)); color: var(--text); }
+.btn.to-warning:hover { background: color-mix(in srgb, var(--warning-soft) 80%, #b86e00); }
+.wf-export { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; }
+.wf-migrate-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.5rem 1rem; }
+.wf-migrate-map label { display: flex; flex-direction: column; gap: 0.2rem; overflow-wrap: anywhere; }
+.wf-migrate-map select { max-width: 100%; }
+.wf-problem { color: var(--danger); overflow-wrap: anywhere; }
+
+/* (sprint 115) the popup LOV's end of list while the next page loads, and the wait popup (dynamic action wait_popup) */
+.popup-lov-sentinel { margin: 0.5rem 0 0; text-align: center; font-size: 0.875rem; }
+dialog.wait-popup { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; max-width: min(360px, calc(100vw - 2rem)); display: none; }
+dialog.wait-popup[open] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
+dialog.wait-popup:focus { outline: none; }
+dialog.wait-popup::backdrop { background: rgb(15 20 30 / 35%); cursor: wait; }
+.wait-popup-spinner { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 18%, transparent); border-top-color: var(--accent); }
+.wait-popup-text { margin: 0; text-align: center; overflow-wrap: anywhere; }
+@media (prefers-reduced-motion: no-preference) { .wait-popup-spinner { animation: icon-spin 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } }
+
+/* ---------- (sprint 117, APEX 26.2) Pillar Light / Pillar Dark navigation appearances ----------
+   body.nav-pillar + nav-pillar-light / nav-pillar-dark (theme.appearance or a Theme Roller style's,
+   src/runtime/styles.ts). Header and menu read as one column ("pillar"); a header pillar strip in
+   --strip (Theme Roller), else the accent; the current page is a filled pill in the accent, its
+   parents bold with an accent guide line. Light: the page's own surfaces (dark ones in dark mode).
+   Dark: header and menu in the header colour. Contrast: menu text ≥ 7:1, the pill's text ≥ 4.5:1. */
+body.nav-pillar .t-header { box-shadow: inset 0 4px 0 var(--strip, var(--accent)); }
+body.nav-pillar .t-nav a, body.nav-pillar .t-nav summary { border-radius: 999px; }
+body.nav-pillar .t-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); border-inline-start-color: transparent; }
+body.nav-pillar .t-nav a[aria-current="page"] .icon { color: var(--accent-text); }
+body.nav-pillar .t-nav a:focus-visible, body.nav-pillar .t-nav summary:focus-visible { outline-color: var(--nav-text); }
+body.nav-pillar-light {
+  --header: var(--surface-2); --header-text: var(--text);
+  --nav-bg: var(--surface-2); --nav-text: var(--text); --nav-muted: var(--muted);
+  --nav-hover: var(--surface-3); --nav-active: var(--accent-soft); --nav-current: var(--accent);
+}
+body.nav-pillar-light .t-header { border-bottom: 1px solid var(--border); }
+body.nav-pillar-light .t-nav { border-inline-end-color: var(--border); }
+body.nav-pillar-light .icon-button:hover, body.nav-pillar-light .t-user > summary:hover,
+body.nav-pillar-light .t-navbar > ul > li > a:hover, body.nav-pillar-light .t-navbar > ul > li > details > summary:hover { background: var(--surface-3); }
+body.nav-pillar-light .t-navbar a[aria-current="page"] { background: var(--accent-soft); }
+body.nav-pillar-dark {
+  --nav-bg: var(--header); --nav-text: var(--header-text);
+  --nav-muted: color-mix(in srgb, var(--header-text) 72%, var(--header));
+  --nav-hover: color-mix(in srgb, var(--header) 86%, #ffffff); --nav-active: color-mix(in srgb, var(--header) 76%, #ffffff);
+  --nav-current: var(--header-text);
+  --nav-guide: color-mix(in srgb, var(--header-text) 22%, transparent);
+}
+body.nav-pillar-dark .t-nav { border-inline-end-color: transparent; }
+body.nav-pillar-dark .t-nav .in-trail .icon, body.nav-pillar-dark .t-nav a[aria-current="page"] .icon { color: inherit; }
+body.nav-pillar-dark .t-nav details:has(> summary.in-trail) > ul { border-inline-start-color: color-mix(in srgb, var(--strip, var(--accent)) 70%, var(--header-text)); }
+@media (min-width: 1024px) {
+  body.nav-pillar.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: none; }
+  body.nav-pillar-dark.nav-top .t-nav { border-bottom-color: transparent; }
+}
+
+/* ---------- (sprint 117, APEX 26.2) subtle colour utilities: a tinted background with readable text,
+   in light and dark mode (text mostly the page's text colour, so contrast holds for every hue).
+   u-color-1-subtle … u-color-15-subtle and u-color-{success,danger,warning,info,neutral}-subtle. */
+[class*="-subtle"][class*="u-color-"] {
+  background: color-mix(in srgb, var(--u-hue) 14%, var(--surface)); color: color-mix(in srgb, var(--u-hue) 38%, var(--text));
+  border-color: color-mix(in srgb, var(--u-hue) 32%, var(--surface));
+}
+.u-color-1-subtle { --u-hue: #309fdb; } .u-color-2-subtle { --u-hue: #13b6cf; } .u-color-3-subtle { --u-hue: #2ebfbc; }
+.u-color-4-subtle { --u-hue: #3caf85; } .u-color-5-subtle { --u-hue: #81bb5f; } .u-color-6-subtle { --u-hue: #c9cf1f; }
+.u-color-7-subtle { --u-hue: #f2bf2c; } .u-color-8-subtle { --u-hue: #f18b48; } .u-color-9-subtle { --u-hue: #e95b54; }
+.u-color-10-subtle { --u-hue: #e85d88; } .u-color-11-subtle { --u-hue: #ca589d; } .u-color-12-subtle { --u-hue: #8f5ea8; }
+.u-color-13-subtle { --u-hue: #5a68ad; } .u-color-14-subtle { --u-hue: #627c94; } .u-color-15-subtle { --u-hue: #8a7a6b; }
+.u-color-success-subtle { --u-hue: var(--success); } .u-color-danger-subtle { --u-hue: var(--danger); }
+.u-color-warning-subtle { --u-hue: #d18b00; } .u-color-info-subtle { --u-hue: var(--accent); } .u-color-neutral-subtle { --u-hue: var(--muted); }
+
+/* ---------- (sprint 117) the processing bar on a busy region (dynamic actions, refreshes) */
+.region[aria-busy="true"] { position: relative; }
+.region[aria-busy="true"]::after {
+  content: ""; position: absolute; z-index: 2; top: 0; inset-inline: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat, color-mix(in srgb, var(--accent) 15%, transparent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .region[aria-busy="true"]::after { animation: busy-slide 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
+}
+@keyframes busy-slide { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }