pgkiln 0.31.0 → 0.36.0

package/examples/hr/hr_53_data_settings.sql

@@ -0,0 +1,108 @@
+-- =====================================================================
+-- HR example, part 53: data and settings (migration 086;
+-- docs/guide/06-processing.md "Application settings", "User preferences",
+-- "Data export"; docs/guide/14-globalization.md "Dynamic translations";
+-- docs/guide/05-items.md "Display image", "Geocoded address")
+--
+-- Application settings SUPPORT_EMAIL and LEAVE_APPROVAL (Shared
+-- Components → Application settings), read with meta.get_app_setting.
+-- Dynamic translations of the department names in Dutch and German:
+-- meta.lang(dname). Page 43 "Data and settings" (Administration):
+--   - P43_DEPTNO, a department (names through meta.lang), kept per user
+--     across sessions ({"persist": "user"});
+--   - P43_EMPNO, an employee of that department, also kept per user, and
+--     P43_PHOTO, the employee's photo from hr.emp.photo (display image);
+--   - P43_ADDRESS, a geocoded address whose position goes into P43_LOCATION
+--     (the "Check address" button shows where the server has GEOCODER_URL);
+--   - Excel and CSV downloads of the department's employees (the download
+--     process with {"export": …}, APEX_DATA_EXPORT).
+-- =====================================================================
+
+insert into meta.app_setting (app_id, name, value, description, required, valid_values)
+select a.id, s.name, s.value, s.description, s.required, s.valid_values
+  from meta.app a, (values
+  ('SUPPORT_EMAIL', 'hr-support@example.com', 'Where users write with questions; shown on page 43.', true, null::text[]),
+  ('LEAVE_APPROVAL', 'manager', 'Who approves leave requests: the manager, or the HR department.', true, '{manager,hr}'::text[])
+  ) as s (name, value, description, required, valid_values)
+ where a.alias = 'hr';
+
+insert into meta.dynamic_translation (app_id, language, source, target)
+select a.id, t.language, t.source, t.target
+  from meta.app a, (values
+  ('nl', 'ACCOUNTING', 'BOEKHOUDING'), ('nl', 'RESEARCH', 'ONDERZOEK'), ('nl', 'SALES', 'VERKOOP'), ('nl', 'OPERATIONS', 'BEDRIJFSVOERING'),
+  ('de', 'ACCOUNTING', 'BUCHHALTUNG'), ('de', 'RESEARCH', 'FORSCHUNG'), ('de', 'SALES', 'VERTRIEB'), ('de', 'OPERATIONS', 'BETRIEB')
+  ) as t (language, source, target)
+ where a.alias = 'hr';
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 43, 'Data and settings', 'Data and settings', 1 from meta.app where alias = 'hr';
+
+insert into meta.region (page_id, seq, title, type, columns, template)
+select p.id, r.seq, r.title, 'static', 12, 'standard'
+  from meta.page p join meta.app a on a.id = p.app_id, (values (10, 'Employee'), (20, 'Visit address')) as r (seq, title)
+ where a.alias = 'hr' and p.page_no = 43;
+
+insert into meta.item (page_id, region_id, seq, name, label, type, lov, help, config)
+select p.id, (select r.id from meta.region r where r.page_id = p.id and r.title = i.region), i.seq, i.name, i.label, i.type, i.lov, i.help, i.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  ('Employee', 10, 'P43_DEPTNO', 'Department', 'select',
+   'select meta.lang(dname), deptno from hr.dept order by 1', 'Remembered for you, also after you sign out.',
+   '{"persist": "user", "submit_on_change": true, "null_label": "- All -"}'),
+  ('Employee', 20, 'P43_EMPNO', 'Employee', 'select',
+   'select initcap(ename), empno from hr.emp where :P43_DEPTNO is null or deptno = :P43_DEPTNO::int order by 1', null,
+   '{"persist": "user", "submit_on_change": true, "null_label": "- Choose -"}'),
+  ('Employee', 30, 'P43_PHOTO', 'Photo', 'image', null, null,
+   '{"sql": "select photo, photo_mime from hr.emp where empno = :P43_EMPNO::int", "alt": "Photo of the employee", "width": 160}'),
+  ('Employee', 40, 'P43_SUPPORT', 'Questions?', 'display', null, 'The application setting SUPPORT_EMAIL.', '{}'),
+  ('Visit address', 50, 'P43_ADDRESS', 'Address', 'address', null, 'Type the address and choose it from the list.',
+   '{"coordinates_item": "P43_LOCATION"}'),
+  ('Visit address', 60, 'P43_LOCATION', 'Position', 'location', null, null, '{}')
+  ) as i (region, seq, name, label, type, lov, help, config)
+ where a.alias = 'hr' and p.page_no = 43;
+
+insert into meta.button (page_id, region_id, seq, name, label, action)
+select p.id, (select r.id from meta.region r where r.page_id = p.id and r.title = 'Employee'), b.seq, b.name, b.label, 'submit'
+  from meta.page p join meta.app a on a.id = p.app_id, (values (10, 'EXPORT_XLSX', 'Download Excel'), (20, 'EXPORT_CSV', 'Download CSV')) as b (seq, name, label)
+ where a.alias = 'hr' and p.page_no = 43;
+
+insert into meta.process (page_id, seq, name, type, point, code, when_button, config)
+select p.id, x.seq, x.name, x.type, x.point, x.code, x.button, x.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Support address', 'sql', 'load', 'select meta.get_app_setting(''SUPPORT_EMAIL'') as p43_support', null, '{}'),
+  (20, 'Employees as Excel', 'download', 'submit',
+   'select e.empno, initcap(e.ename) as name, initcap(e.job) as job, e.hiredate, e.sal as salary, meta.lang(d.dname) as department
+  from hr.emp e left join hr.dept d on d.deptno = e.deptno
+ where :P43_DEPTNO is null or e.deptno = :P43_DEPTNO::int
+ order by e.ename', 'EXPORT_XLSX', '{"export": "xlsx", "file_name": "employees", "title": "Employees"}'),
+  (30, 'Employees as CSV', 'download', 'submit',
+   'select e.empno, initcap(e.ename) as name, initcap(e.job) as job, e.hiredate, e.sal as salary, meta.lang(d.dname) as department
+  from hr.emp e left join hr.dept d on d.deptno = e.deptno
+ where :P43_DEPTNO is null or e.deptno = :P43_DEPTNO::int
+ order by e.ename', 'EXPORT_CSV', '{"export": "csv", "file_name": "employees"}')
+  ) as x (seq, name, type, point, code, button, config)
+ where a.alias = 'hr' and p.page_no = 43;
+
+insert into meta.nav_entry (app_id, parent_id, seq, label, icon, target_page)
+select a.id, n.id, 40, 'Data and settings', 'settings', 43
+  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
+  ('Data and settings', 'Gegevens en instellingen'),
+  ('Employee', 'Medewerker'),
+  ('Visit address', 'Bezoekadres'),
+  ('Department', 'Afdeling'),
+  ('Photo', 'Foto'),
+  ('Questions?', 'Vragen?'),
+  ('Address', 'Adres'),
+  ('Position', 'Positie'),
+  ('Download Excel', 'Excel downloaden'),
+  ('Download CSV', 'CSV downloaden'),
+  ('Remembered for you, also after you sign out.', 'Wordt voor u onthouden, ook na afmelden.'),
+  ('The application setting SUPPORT_EMAIL.', 'De applicatie-instelling SUPPORT_EMAIL.'),
+  ('Type the address and choose it from the list.', 'Typ het adres en kies het uit de lijst.')
+  ) as t (source, target)
+ where a.alias = 'hr'
+on conflict do nothing;

package/examples/hr/hr_54_region_templates.sql

@@ -0,0 +1,67 @@
+-- =====================================================================
+-- HR example, part 54: region templates (migration 088;
+-- docs/guide/04-pages-and-regions.md "Region templates")
+--
+-- Page 44 "Region templates" (Administration):
+--   - a hero region (an icon, the title, text and a button);
+--   - a title bar with buttons; a buttons container;
+--   - "Leave policy" opens an inline dialog and "Help" an inline drawer
+--     (dynamic actions "Open region"; a link to #R<id> opens them too);
+--   - a carousel (a display selector with style carousel) over three
+--     regions, turning every 8 seconds;
+--   - the steps of onboarding as a wizard progress list above a wizard
+--     region.
+-- =====================================================================
+
+insert into meta.page (app_id, page_no, name, title, parent_page)
+select id, 44, 'Region templates', 'Region templates', 1 from meta.app where alias = 'hr';
+
+insert into meta.list (app_id, name, type, description)
+select id, 'HR_ONBOARDING_STEPS', 'static', 'The steps of onboarding (a wizard progress list on page 44)' from meta.app where alias = 'hr';
+
+insert into meta.list_entry (app_id, list_name, seq, label, target_page)
+select a.id, 'HR_ONBOARDING_STEPS', e.seq, e.label, e.page
+  from meta.app a, (values (10, 'Personal details', 44), (20, 'Contract', 3), (30, 'Equipment', 28), (40, 'Done', 1)) as e (seq, label, page)
+ where a.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, r.template, r.source, r.config::jsonb
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Welcome to HR', 'static', 'hero',
+   '<p>Everything about the people in the company: employees, departments, leave and reviews.</p>', '{"icon": "users"}'),
+  (20, 'Employees this month', 'static', 'title_bar', '<p class="muted">Hires and departures of the current month.</p>', '{}'),
+  (30, 'Actions', 'static', 'buttons_container', null, '{}'),
+  (40, 'Leave policy', 'static', 'inline_dialog',
+   '<p>Everyone has 25 days of leave a year. Ask your manager at least two weeks ahead; approvals come by e-mail.</p>', '{}'),
+  (50, 'Help', 'static', 'inline_drawer',
+   '<p>This page shows the region templates: hero, title bar, buttons container, inline dialog and drawer, carousel and wizard.</p>', '{}'),
+  (60, 'Highlights', 'display_selector', 'plain', null, '{"style": "carousel", "interval": 8, "show_all": false}'),
+  (61, 'New colleagues', 'static', 'standard', '<p>Three people joined the Research department this month.</p>', '{"display_selector": true}'),
+  (62, 'Anniversaries', 'static', 'standard', '<p>KING celebrates 45 years with the company.</p>', '{"display_selector": true}'),
+  (63, 'Open positions', 'static', 'standard', '<p>Two analysts and a clerk: see the intranet.</p>', '{"display_selector": true}'),
+  (70, 'Onboarding steps', 'list', 'plain', null, '{"list": "HR_ONBOARDING_STEPS", "template": "wizard_progress"}'),
+  (80, 'Personal details', 'static', 'wizard', '<p>Step 1: check your name, address and bank account in My account.</p>', '{}')
+  ) as r (seq, title, type, template, source, config)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.button (page_id, region_id, seq, name, label, action, hot, target_page)
+select p.id, (select r.id from meta.region r where r.page_id = p.id and r.title = b.region), b.seq, b.name, b.label, b.action, b.hot, b.target
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  ('Welcome to HR', 10, 'EMPLOYEES', 'See the employees', 'redirect', true, 2),
+  ('Employees this month', 20, 'POLICY', 'Leave policy', 'da', false, null),
+  ('Actions', 30, 'HELP', 'Help', 'da', false, null)
+  ) as b (region, seq, name, label, action, hot, target)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.dynamic_action (page_id, seq, name, event, trigger_element, action, affected_region_id)
+select p.id, d.seq, d.name, 'click', d.button, 'open_region', (select r.id from meta.region r where r.page_id = p.id and r.title = d.region)
+  from meta.page p join meta.app a on a.id = p.app_id, (values
+  (10, 'Open the leave policy', 'POLICY', 'Leave policy'),
+  (20, 'Open the help', 'HELP', 'Help')
+  ) as d (seq, name, button, region)
+ where a.alias = 'hr' and p.page_no = 44;
+
+insert into meta.nav_entry (app_id, parent_id, seq, label, icon, target_page)
+select a.id, n.id, 50, 'Region templates', 'layers', 44
+  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';

package/examples/hr/hr_55_page_groups.sql

@@ -0,0 +1,24 @@
+-- =====================================================================
+-- HR example, part 55: page groups (migration 089;
+-- docs/guide/03-builder.md "Page groups")
+--
+-- The HR pages in four groups, shown and filtered in the App Builder's
+-- page list (Shared Components → Page groups).
+-- =====================================================================
+insert into meta.page_group (app_id, name, description)
+select a.id, g.name, g.description
+  from meta.app a, (values
+  ('Employees', 'Employees, departments and their reviews'),
+  ('Leave', 'Leave requests, the calendar and the planner'),
+  ('Administration', 'Pages for administrators'),
+  ('Showcase', 'Pages that show one feature each')
+  ) as g (name, description)
+ where a.alias = 'hr';
+
+update meta.page p set page_group = g.name
+  from meta.app a, (values
+  ('Employees', array[2, 3, 4, 5, 8, 11, 19, 20, 27]),
+  ('Leave', array[6, 7, 12, 22, 24]),
+  ('Administration', array[9, 10, 43, 44])
+  ) as g (name, pages)
+ where a.alias = 'hr' and p.app_id = a.id and p.page_no = any (g.pages);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.31.0",
+  "version": "0.36.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",
@@ -73,6 +73,7 @@
     "ldapts": "^9.2.0",
     "leaflet": "^1.9.4",
     "lucide-static": "^1.52.0",
+    "nodemailer": "^10.0.12",
     "openai": "^7.28.0",
     "pdfkit": "^0.20.2",
     "pg": "^8.23.0",
@@ -81,6 +82,7 @@
   },
   "devDependencies": {
     "@types/node": "^26.6.3",
+    "@types/nodemailer": "^8.0.2",
     "@types/pdfkit": "^0.17.6",
     "@types/pg": "^8.23.1",
     "axe-core": "^4.14.0",

package/public/app.css

@@ -254,7 +254,43 @@ details.menu > summary::-webkit-details-marker { display: none; }
 
 /* ---------- regions ---------- */
 .region { min-width: 0; }
-.region-standard, .region-collapsible { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+.region-standard, .region-collapsible, .region-wizard, .region-inline_dialog, .region-inline_drawer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
+/* (088) more region templates */
+.region-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem; padding: 2rem 1.75rem; border-radius: var(--radius);
+  background: var(--accent-soft); color: var(--text); }
+.region-hero-icon .icon { width: 3rem; height: 3rem; color: var(--accent); }
+.region-hero-text h2 { font-size: 1.75rem; margin: 0 0 0.35rem; }
+.region-hero-buttons, .region-title-buttons, .region-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+@media (max-width: 640px) { .region-hero { grid-template-columns: 1fr; padding: 1.25rem 1rem; } }
+.region-title-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
+.region-title-bar h2 { margin: 0; font-size: 1.15rem; }
+.region-buttons_container .region-buttons { justify-content: flex-end; }
+.region-wizard { max-width: 640px; width: 100%; margin-left: auto; margin-right: auto; }
+dialog[data-inline-region] { padding: 0; max-width: min(640px, calc(100vw - 2rem)); width: 100%; color: var(--text); }
+dialog[data-inline-region]::backdrop { background: rgb(0 0 0 / 45%); }
+dialog[data-inline-region] .region-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
+dialog.region-inline_drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; max-width: min(480px, 100vw); border-radius: 0; }
+/* without JavaScript: a link to #R<id> shows it */
+dialog[data-inline-region]:target { display: block; position: fixed; inset: 2rem 0 auto; margin: 0 auto; z-index: 1000; }
+dialog.region-inline_drawer:target { inset: 0 0 0 auto; }
+/* (088) carousel (display selector style) and wizard progress (list template) */
+.rds-carousel { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
+.rds-carousel .rds-list { gap: 0.4rem; }
+.rds-carousel .rds-tab { font-size: 0; width: 0.75rem; height: 0.75rem; padding: 0; border-radius: 50%; background: var(--border); min-height: 0; }
+.rds-carousel .rds-tab.is-current { background: var(--accent); }
+.rds-carousel .rds-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.wizard-progress ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; counter-reset: none; }
+.wizard-step { flex: 1 1 0; min-width: 6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; position: relative; color: var(--muted); font-size: 0.85rem; }
+.wizard-step::before { content: ""; position: absolute; top: 0.95rem; left: -50%; right: 50%; border-top: 2px solid var(--border); z-index: 0; }
+.wizard-step:first-child::before { display: none; }
+.wizard-step a { color: inherit; text-decoration: none; display: contents; }
+.wizard-step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); font-weight: 600; }
+.wizard-step-no .icon { width: 1rem; height: 1rem; }
+.wizard-step.is-done, .wizard-step.is-current { color: var(--text); }
+.wizard-step.is-done .wizard-step-no { border-color: var(--accent); color: var(--accent); }
+.wizard-step.is-done::before, .wizard-step.is-current::before { border-top-color: var(--accent); }
+.wizard-step.is-current .wizard-step-no { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
+.wizard-step.is-current .wizard-step-label { font-weight: 600; }
 .region-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 50px; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
 .region-collapsible summary.region-header { cursor: pointer; list-style: none; }
 .region-collapsible summary.region-header::-webkit-details-marker { display: none; }
@@ -265,6 +301,9 @@ details.menu > summary::-webkit-details-marker { display: none; }
 .region-toolbar { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
 .region-static p:first-child { margin-top: 0; }
 .region-static p:last-child { margin-bottom: 0; }
+/* (078) URL region: the framed page fills the region's width; its height is a class per region (PageCss) */
+.url-frame { display: block; width: 100%; border: 1px solid var(--border, #d0d7de); border-radius: 6px; background: var(--surface, #fff); }
+.url-open { margin: 0.5rem 0 0; font-size: 0.875rem; }
 .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; margin-top: 1rem; }
 .columns .region { margin: 0; }
 
@@ -807,6 +846,14 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
 .grid-table tr.deleted td { opacity: 0.5; text-decoration: line-through; }
 .grid-table tr.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
 .grid-table tr.dirty td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
+/* the single row view: one row as a form */
+.grid-record { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius, 8px); display: grid; gap: 0.9rem; }
+.grid-record .grid-field { display: grid; gap: 0.3rem; align-content: start; }
+.grid-record .grid-value { min-height: 1.5rem; overflow-wrap: anywhere; }
+.grid-record.grid-new { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
+.grid-record.dirty { box-shadow: inset 3px 0 0 var(--accent); }
+.grid-record.deleted .form-grid { opacity: 0.5; text-decoration: line-through; }
+.grid-record-nav { justify-content: center; }
 .js .grid-template { display: none; }
 .grid-table .icon { width: 14px; height: 14px; }
 /* columns a user hid stay in the form (their values still post) */
@@ -1003,9 +1050,19 @@ input[type=color] { width: 4rem; min-height: 2.4rem; padding: 0.15rem; }
 /* single sign-on buttons on the login page */
 .sso-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
 .sso-buttons .btn { padding: 0.6rem; }
-.login-card .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
-.login-card .or::before, .login-card .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
+.login-card .or, .login-region .or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.85rem; }
+.login-card .or::before, .login-card .or::after, .login-region .or::before, .login-region .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
 .login-form { display: flex; flex-direction: column; gap: 1rem; }
+.login-forgot { align-self: center; font-size: 0.9rem; }
+/* (087) minimal pages (no header and navigation) and an application's own login page */
+.t-minimal-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; }
+.login-body .t-minimal-main { max-width: 420px; padding: 1rem; }
+.login-region { display: flex; flex-direction: column; gap: 1rem; }
+.login-region .btn { padding: 0.6rem; }
+.t-minimal .t-titlebar { background: none; border: 0; padding: 0 0 1rem; }
+.t-minimal .t-content { padding: 0; max-width: none; }
+/* on the sign-in backdrop the title sits on the header colour, like the built-in page's card title */
+.login-body .t-titlebar h1 { color: var(--header-text); text-align: center; }
 
 /* ---------- preferences: theme switch, language picker ---------- */
 .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-top: 0.35rem; }
@@ -1416,6 +1473,12 @@ td.tc-cell { overflow-wrap: anywhere; }
 
 .qr { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.3rem 0; }
 .qr-code { max-width: 100%; height: auto; border-radius: 4px; }
+/* (086) display image and address items */
+.display-image { padding: 0.3rem 0; }
+.display-image img { max-width: 100%; height: auto; border-radius: 4px; }
+.geocode-places { list-style: none; margin: 0.3rem 0 0; padding: 0.3rem 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
+.geocode-places li { padding: 0.15rem 0.6rem; }
+.geocode-places .link-button { text-align: start; }
 
 /* ---------- lists (list regions, navigation bar) ---------- */
 .list-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
@@ -1550,3 +1613,59 @@ dialog.crop-dialog::backdrop { background: rgb(15 20 30 / 55%); }
 .crop-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: nwse-resize; }
 .crop-stage { overflow: hidden; }
 .crop-dialog .buttons { display: flex; justify-content: flex-end; gap: 0.5rem; }
+
+/* (079) Developer toolbar: shown to developers with a builder session in the same browser.
+   Fixed at the bottom left, collapsible (a <details>, so it works without JavaScript). */
+.devbar { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 900; max-width: calc(100vw - 1.5rem);
+  background: #1b2330; color: #fff; border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 25%); font-size: 0.8125rem; }
+.devbar summary { cursor: pointer; padding: 0.4rem 0.75rem; font-weight: 600; list-style: none; }
+.devbar summary::-webkit-details-marker { display: none; }
+.devbar summary::before { content: '▸ '; }
+.devbar[open] summary::before { content: '▾ '; }
+.devbar ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; list-style: none; margin: 0; padding: 0 0.75rem 0.5rem; }
+.devbar a { color: #9cc8ff; }
+.devbar a:focus-visible, .devbar button:focus-visible, .devbar select:focus-visible { outline: 2px solid #9cc8ff; outline-offset: 2px; }
+.devbar-debug { display: flex; align-items: center; gap: 0.35rem; margin: 0; }
+.devbar-debug select, .devbar-debug button { font: inherit; font-size: 0.8125rem; padding: 0.1rem 0.3rem; border-radius: 4px; border: 1px solid #5e6a7a; background: #2b3340; color: #fff; }
+.devbar-debug button { cursor: pointer; }
+.devbar-page .t-main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
+.devbar-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
+.devbar-facts dd { margin: 0; overflow-wrap: anywhere; }
+.devbar-session code { overflow-wrap: anywhere; }
+@media print { .devbar { display: none; } }
+
+/* (080) Search region: one field, results grouped per search configuration */
+.search-form { margin-bottom: 1rem; }
+.search-group + .search-group { margin-top: 1rem; }
+.search-group h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }
+.search-hits { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
+.search-hits li + li { border-top: 1px solid var(--border); }
+.search-hit { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0.8rem; color: inherit; text-decoration: none; }
+a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft); }
+.search-icon { flex: none; color: var(--accent); }
+.search-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; overflow-wrap: anywhere; }
+.search-title { font-weight: 600; }
+.search-subtitle, .search-description { color: var(--muted); font-size: 0.875rem; }
+.search-hit mark { background: #fff3a3; color: inherit; border-radius: 2px; padding: 0 1px; }
+:root[data-theme="dark"] .search-hit mark { background: #6b5a00; }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .search-hit mark { background: #6b5a00; } }
+.search-hit .badge-pill { flex: none; }
+.search-more, .search-empty { margin: 0.4rem 0 0; }
+
+/* (084) Feedback: the users' page and the builder's list */
+.feedback-form .choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
+.feedback-list, .feedback-admin { list-style: none; margin: 0; padding: 0; }
+.feedback-list > li, .feedback-admin > li { border-top: 1px solid var(--border); padding: 0.75rem 0; }
+.feedback-list > li:first-child, .feedback-admin > li:first-child { border-top: 0; }
+.feedback-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; overflow-wrap: anywhere; }
+.feedback-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.4rem 0; }
+.feedback-response { background: var(--surface-2); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
+.feedback-response p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.25rem 0 0; }
+
+/* (085) Session timeout warning */
+.session-dialog { max-width: min(28rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 1.25rem; }
+.session-dialog::backdrop { background: rgb(0 0 0 / 40%); }
+.session-dialog p { margin: 0 0 1rem; }
+/* (sprint 59) Quick edit from the developer toolbar */
+.quick-edit .qe-target { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: pointer; }
+.devbar-quick[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }