pgkiln 0.50.0 → 0.52.0

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/package.json

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

package/public/app.css

@@ -2042,3 +2042,49 @@ a.search-hit:hover, a.search-hit:focus-visible { background: var(--accent-soft);
 .t-footer .icon { width: 1rem; height: 1rem; }
 @media print { .t-footer { display: none; } }
 .list-card:hover { border-top-color: var(--card-color); }
+
+/* (sprint 110) Data Reporter: a saved report's link and actions, column descriptions */
+.reporter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.75rem; min-width: 0; }
+.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: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--border); 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.9s linear infinite; } }

package/public/app.js

@@ -483,6 +483,9 @@ const pgkilnUnsaved = (() => {
     // (077) APEX: apex.page.isChanged()
     isChanged: () => pgkilnUnsaved.changed(),
     setValue: (name, value) => setItemValue(name, value),
+    // (124) APEX: apex.widget.waitPopup; the returned function removes it
+    waitPopup: (message) => (showWait(message == null ? '' : String(message)), removeWait),
+    removeWaitPopup: () => removeWait(),
     showSuccess: (message) => showMessage(String(message), 'success'),
     showError: (message, item) => (item ? itemError(item, String(message)) : showMessage(String(message), 'error')),
     clearErrors: (...items) => clearErrors(items),
@@ -521,6 +524,39 @@ const pgkilnUnsaved = (() => {
     }
   }
 
+  // (124) APEX: Show / Remove Wait Popup. A modal dialog (the page below is inert, Escape doesn't
+  // close it) with a spinner and a status text read out by screen readers; <main> is aria-busy.
+  // It goes with the page on a submit; a submit the browser refused (an invalid field) or a page
+  // restored from the back/forward cache removes it.
+  let waitDlg = null;
+  function showWait(message) {
+    if (!waitDlg) {
+      waitDlg = document.createElement('dialog');
+      waitDlg.className = 'wait-popup';
+      waitDlg.tabIndex = -1;
+      const spin = document.createElement('span');
+      spin.className = 'wait-popup-spinner';
+      spin.setAttribute('aria-hidden', 'true');
+      const p = document.createElement('p');
+      p.className = 'wait-popup-text';
+      p.id = 'pgkiln-wait-text';
+      p.setAttribute('role', 'status');
+      waitDlg.setAttribute('aria-labelledby', p.id);
+      waitDlg.append(spin, p);
+      waitDlg.addEventListener('cancel', (e) => e.preventDefault());
+      body.appendChild(waitDlg);
+    }
+    waitDlg.querySelector('.wait-popup-text').textContent = message || text('da.wait');
+    if (!waitDlg.open) waitDlg.showModal();
+    (document.getElementById('main') || body).setAttribute('aria-busy', 'true');
+  }
+  function removeWait() {
+    if (waitDlg && waitDlg.open) waitDlg.close();
+    (document.getElementById('main') || body).removeAttribute('aria-busy');
+  }
+  document.addEventListener('invalid', () => waitDlg && waitDlg.open && removeWait(), true);
+  window.addEventListener('pageshow', (e) => e.persisted && removeWait());
+
   async function runDa(da, initial, value, extra) {
     const holds = conditionHolds(da, value);
     switch (da.action) {
@@ -567,6 +603,13 @@ const pgkilnUnsaved = (() => {
       case 'print':
         window.print();
         return;
+      // (124) the wait popup: until remove_wait_popup, the next page or a refused submit
+      case 'wait_popup':
+        showWait(da.message);
+        return;
+      case 'remove_wait_popup':
+        removeWait();
+        return;
       case 'current_position':
         return new Promise((resolve) => {
           if (!navigator.geolocation) return showError(text('item.locate_error')), resolve();
@@ -679,6 +722,28 @@ const pgkilnUnsaved = (() => {
   }
 
   const das = meta.das || [];
+  // (121) an AI agent's javascript tools: after the answer, the registered function of the action
+  // (pgkiln.actions.register) and the dynamic actions of the custom event of that name, with the arguments
+  scriptsLoaded.then(async () => {
+    for (const el of document.querySelectorAll('.assistant-action[data-ai-action]')) {
+      const name = el.dataset.aiAction;
+      let args = {};
+      try {
+        args = JSON.parse(el.dataset.aiArgs || '{}');
+      } catch {
+        // ignored
+      }
+      const region = el.closest('[id^="R"]');
+      el.remove();
+      const fn = actions.get(name);
+      try {
+        if (fn) await fn({ value: args, items: [], region, elements: [], message: null });
+        await runChain(das.filter((da) => da.event === 'custom' && da.trigger.some((t) => String(t).toLowerCase() === name.toLowerCase())), JSON.stringify(args));
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
   document.addEventListener('change', (e) => {
     const name = e.target.name;
     if (!name) return;
@@ -688,7 +753,7 @@ const pgkilnUnsaved = (() => {
   });
   document.addEventListener('click', (e) => {
     const btn = e.target.closest('[data-button]');
-    if (!btn) return;
+    if (!btn || e.target.closest('[data-menu-entry]')) return;
     const run = das.filter((da) => da.event === 'click' && da.trigger.includes(btn.dataset.button));
     // "Generate text with AI" on a submit button: the AJAX call replaces the submit
     // (without JavaScript the button submits and the page process runs instead)
@@ -705,6 +770,21 @@ const pgkilnUnsaved = (() => {
       });
     }
   });
+  // (124) menu_entry: an entry {"action": NAME} of a menu button was chosen (a declined confirm
+  // stops it in the capture handler below). Trigger: the entry's name or the menu button's name;
+  // the value a client-side condition tests is the entry's name.
+  document.addEventListener('click', (e) => {
+    const entry = e.target.closest?.('[data-menu-entry]');
+    if (!entry) return;
+    const name = entry.dataset.menuEntry;
+    const menu = entry.closest('details.menu');
+    const owner = (menu && menu.dataset.button) || '';
+    if (menu) {
+      menu.open = false;
+      menu.querySelector('summary')?.focus();
+    }
+    runChain(das.filter((da) => da.event === 'menu_entry' && (da.trigger.includes(name) || (owner && da.trigger.includes(owner)))), name);
+  });
   for (const da of das) if (da.event !== 'dialog_closed' && ['show', 'hide', 'enable', 'disable'].includes(da.action)) runDa(da, true);
   runChain(das.filter((da) => da.event === 'load'));
 
@@ -1882,7 +1962,7 @@ document.querySelectorAll('[data-rds]').forEach((nav) => {
 
 // Popup list of values: the select (which works without JavaScript) is hidden
 // behind a read-only field and a button that opens a dialog searching the
-// item's list of values on the server, page by page.
+// item's list of values on the server, page by page (loaded as the list scrolls).
 function enhancePopupLovs(root) {
   const selects = root.matches?.('select[data-popup-lov]') ? [root] : [...(root.querySelectorAll?.('select[data-popup-lov]') ?? [])];
   selects.forEach(popupLov);
@@ -1964,8 +2044,16 @@ function popupLov(sel) {
     sel.dispatchEvent(new Event('change', { bubbles: true }));
     dlg.close();
   };
+  // (124) infinite scrolling: the next page loads when the end of the list scrolls into view
+  // (APEX: lazy loading); without IntersectionObserver the dialog pages with ‹ and More
+  const infinite = 'IntersectionObserver' in window;
+  let observer = null;
+  let seq = 0;
+  let loading = false;
   async function load(p) {
     page = p;
+    const my = ++seq;
+    const append = infinite && p > 0;
     const results = dlg.querySelector('.popup-lov-results');
     const params = new URLSearchParams({ q: dlg.querySelector('.popup-lov-search').value, p: String(p), __csrf: csrf });
     // a cascading LOV sends its parents' current values
@@ -1975,31 +2063,45 @@ function popupLov(sel) {
       if (el) params.set(parent, el.value);
     }
     let json;
+    loading = true;
     try {
       const res = await fetch(d.popupLov, { method: 'POST', body: params, headers: { accept: 'application/json' }, credentials: 'same-origin' });
       json = await res.json();
       if (!res.ok) throw new Error(json.error || res.statusText);
     } catch (e) {
-      results.textContent = e.message;
+      if (my !== seq) return;
+      loading = false;
+      const end = results.querySelector('.popup-lov-sentinel');
+      if (append && end) end.textContent = e.message;
+      else results.textContent = e.message;
       return;
     }
-    results.replaceChildren();
-    if (!json.rows.length) {
-      const none = document.createElement('p');
-      none.textContent = d.noneLabel || 'Nothing found.';
-      results.append(none);
-      return;
-    }
-    const table = document.createElement('table');
-    table.className = 'popup-lov-table';
-    const tr = table.createTHead().insertRow();
-    for (const hd of json.headings) {
-      const th = document.createElement('th');
-      th.scope = 'col';
-      th.textContent = hd;
-      tr.append(th);
+    // a newer search (or page) replaced this one
+    if (my !== seq) return;
+    loading = false;
+    observer?.disconnect();
+    results.querySelector('.popup-lov-pages, .popup-lov-sentinel')?.remove();
+    let tb = append ? results.querySelector('.popup-lov-table tbody') : null;
+    if (!tb) {
+      results.replaceChildren();
+      if (!json.rows.length) {
+        const none = document.createElement('p');
+        none.textContent = d.noneLabel || 'Nothing found.';
+        results.append(none);
+        return;
+      }
+      const table = document.createElement('table');
+      table.className = 'popup-lov-table';
+      const tr = table.createTHead().insertRow();
+      for (const hd of json.headings) {
+        const th = document.createElement('th');
+        th.scope = 'col';
+        th.textContent = hd;
+        tr.append(th);
+      }
+      tb = table.createTBody();
+      results.append(table);
     }
-    const tb = table.createTBody();
     for (const r of json.rows) {
       const row = tb.insertRow();
       r.columns.forEach((v, i) => {
@@ -2015,7 +2117,19 @@ function popupLov(sel) {
       });
       if (r.value === sel.value) row.className = 'is-current';
     }
-    results.append(table);
+    if (infinite) {
+      if (!json.more) return;
+      const end = document.createElement('p');
+      end.className = 'popup-lov-sentinel muted';
+      end.textContent = d.loadingLabel || 'Loading more…';
+      results.append(end);
+      // the implicit root: whichever box scrolls the list (the dialog's body or the results), it clips
+      observer = observer || new IntersectionObserver((entries) => {
+        if (entries.some((x) => x.isIntersecting) && !loading) load(page + 1);
+      });
+      observer.observe(end);
+      return;
+    }
     if (json.more || page > 0) {
       const nav = document.createElement('div');
       nav.className = 'popup-lov-pages';

package/public/builder.css

@@ -1359,3 +1359,119 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .sm-toolbar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; }
 .sm-toolbar select { width: auto; }
 .sm-toolbar [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
+
+/* (sprint 109, WS-1) the Workspace home (/builder/home) */
+.wh-title { margin: 0 0 14px; font-size: var(--fs-xl); overflow-wrap: anywhere; }
+.wh-summary h2, .wh-top-head h2 { margin: 0 0 10px; }
+.wh-stats a.stat { color: inherit; text-decoration: none; }
+.wh-stats a.stat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+.wh-stats a.stat span { color: var(--accent); }
+.wh-top-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
+.wh-top-head h2 { margin: 0; }
+.wh-timeframe { display: inline-flex; }
+.wh-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 10px 0 20px; }
+.wh-top > .region { margin: 0; min-width: 0; }
+.wh-message { margin-bottom: 16px; }
+.wh-message-text { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
+.wh-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
+.wh-edit > summary::-webkit-details-marker { display: none; }
+.wh-edit[open] > summary { margin-bottom: 10px; }
+.wh-release { display: flex; gap: 0.6rem; align-items: flex-start; }
+.wh-release p { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
+.wh-release-form { margin-top: 10px; }
+@media (max-width: 640px) {
+  .wh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .wh-stats .stat { padding: 0.6rem 0.75rem; }
+  .wh-stats .stat b { font-size: 1.2rem; }
+}
+
+/* (sprint 110) App Builder → Data Reporter: datasets */
+.dataset-checks { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0 0.5rem; overflow-wrap: anywhere; }
+.dataset-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
+.dataset-filter > select, .dataset-filter > input { flex: 1 1 10rem; min-width: 0; }
+.dataset-columns input { min-width: 0; width: 100%; }
+.dataset-page pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
+.dataset-schema { flex-wrap: wrap; }
+.dataset-schema > select { flex: 1 1 10rem; min-width: 0; }
+
+/* (sprint 113) Team Development: issues, board, labels, milestones, templates */
+.team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
+.team-head h1 { margin: 0; font-size: var(--fs-xl); }
+.team-head .team-counts { margin: 0; flex: 1 1 200px; }
+.team-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
+@media (min-width: 1024px) { .team-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
+.team-main { min-width: 0; }
+.team-side { min-width: 0; }
+.team-side section { padding: 10px 0; border-top: 1px solid var(--border); }
+.team-side section:first-child { border-top: 0; padding-top: 0; }
+.team-side h2 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
+.team-side p, .team-side li { overflow-wrap: anywhere; }
+.team-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 10px; }
+.team-filters .field { margin: 0; min-width: 0; }
+.team-filters select, .team-filters input { width: 100%; min-width: 0; }
+.team-filters .buttons { margin: 0; }
+.team-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.team-issue { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
+.team-issue.is-closed { opacity: 0.8; }
+.team-issue-title { display: flex; gap: 6px; align-items: baseline; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
+.team-issue-title .icon { flex: none; width: 15px; height: 15px; color: var(--hot); align-self: center; }
+.team-issue.is-closed .team-issue-title .icon { color: var(--success, #2f7d32); }
+.team-issue-title a { min-width: 0; }
+.team-labels { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
+.team-issue-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; overflow-wrap: anywhere; }
+.team-issue-meta span { display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
+.team-issue-meta .icon { width: 13px; height: 13px; flex: none; }
+.team-label { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
+.team-label-red { background: #b42318; color: #fff; }
+.team-label-orange { background: #c4520f; color: #fff; }
+.team-label-yellow { background: #e6b400; color: #1e1d1b; }
+.team-label-green { background: #2f7d32; color: #fff; }
+.team-label-teal { background: #0e7a74; color: #fff; }
+.team-label-blue { background: #1a5f99; color: #fff; }
+.team-label-purple { background: #6941c6; color: #fff; }
+.team-label-gray { background: #5e5a54; color: #fff; }
+.team-board-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
+.team-board-filters { margin-bottom: 10px; }
+.team-board-filters > summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
+.team-board-filters[open] > summary { margin-bottom: 8px; }
+.team-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: start; }
+.team-col { min-width: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
+.team-col-head { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: var(--fs-sm, 0.9rem); overflow-wrap: anywhere; }
+.team-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
+.team-move select { flex: 1 1 120px; min-width: 0; }
+.team-status { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-right: 6px; }
+.team-status-open { background: var(--accent-soft); color: var(--text); }
+.team-status-closed { background: var(--surface-3); color: var(--muted); }
+.team-issue-h { margin: 0 0 4px; font-size: var(--fs-lg, 1.2rem); overflow-wrap: anywhere; }
+.team-md { overflow-wrap: anywhere; min-width: 0; }
+.team-md pre { overflow-x: auto; max-width: 100%; }
+.team-body { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
+.mention { font-weight: 600; color: var(--accent); }
+.team-timeline { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
+.team-comment { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
+.team-comment-head { margin-bottom: 4px; overflow-wrap: anywhere; }
+.team-event { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
+.team-event .icon { flex: none; width: 13px; height: 13px; margin-top: 3px; }
+.team-response-pick, .team-template-pick, .team-save-view { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; margin-bottom: 8px; }
+.team-response-pick .field, .team-template-pick .field { margin: 0; min-width: 0; flex: 1 1 200px; }
+.team-save-view input { flex: 1 1 140px; min-width: 0; }
+.team-edit { margin-top: 16px; }
+.team-edit > summary { list-style: none; }
+.team-edit[open] > summary { margin-bottom: 10px; }
+.team-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; min-width: 0; }
+.team-check-group { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-bottom: 4px; }
+.team-check-group > .small { flex-basis: 100%; }
+.team-label-list, .team-template-list, .team-milestones, .team-views, .team-mentions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.team-label-list li, .team-template-list li, .team-views li, .team-mentions li { overflow-wrap: anywhere; min-width: 0; }
+.team-views li { display: flex; gap: 6px; justify-content: space-between; align-items: center; }
+.team-views a[aria-current] { font-weight: 700; }
+.team-inline-edit { margin-top: 4px; }
+.team-inline-edit[open] { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
+.team-milestone { padding: 8px 0; border-bottom: 1px solid var(--border); }
+.team-milestone-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; overflow-wrap: anywhere; }
+.team-milestone-head .icon { width: 14px; height: 14px; margin-right: 4px; }
+.team-progress { width: 100%; max-width: 360px; height: 8px; }
+.team-page-issues { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); overflow-wrap: anywhere; }
+.team-page-issues .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
+.wh-team-n { margin-left: auto; padding-left: 8px; }
+.feedback-issue { margin: 4px 0; }

package/public/builder.js

@@ -1282,3 +1282,50 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
   });
   for (const b of form.querySelectorAll('[data-cron-nojs]')) b.hidden = true;
 })();
+
+// (123) Workflow diagram as PNG: the server's SVG file drawn on a canvas. Without JavaScript the
+// button stays hidden and the SVG link is the download.
+(() => {
+  for (const button of document.querySelectorAll('[data-wf-png]')) {
+    const link = button.parentElement?.querySelector('[data-wf-svg]');
+    if (!link || typeof HTMLCanvasElement === 'undefined') continue;
+    button.hidden = false;
+    button.addEventListener('click', async () => {
+      button.disabled = true;
+      try {
+        const res = await fetch(link.href, { credentials: 'same-origin' });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const svg = await res.text();
+        const img = new Image();
+        await new Promise((ok, fail) => {
+          img.onload = ok;
+          img.onerror = () => fail(new Error('The diagram could not be drawn.'));
+          img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+        });
+        const scale = 2;
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.round((img.naturalWidth || 800) * scale));
+        canvas.height = Math.max(1, Math.round((img.naturalHeight || 600) * scale));
+        const g = canvas.getContext('2d');
+        g.fillStyle = '#ffffff';
+        g.fillRect(0, 0, canvas.width, canvas.height);
+        g.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const blob = await new Promise((ok) => canvas.toBlob(ok, 'image/png'));
+        if (!blob) throw new Error('The browser could not make a PNG.');
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'workflow.png';
+        const name = /([^/?]+)\.svg/.exec(res.headers.get('content-disposition') || '');
+        if (name) a.download = `${name[1]}.png`;
+        document.body.append(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(a.href), 10000);
+      } catch (e) {
+        window.alert(e.message);
+      } finally {
+        button.disabled = false;
+      }
+    });
+  }
+})();