pgkiln 0.81.0 → 0.83.0

package/public/app.js

@@ -341,9 +341,17 @@ const pgkilnUnsaved = (() => {
       case 'in_list': return da.cond.value.split(',').map((s) => s.trim()).includes(v);
       case 'is_null': return v === '';
       case 'is_not_null': return v !== '';
+      // (156) numbers compared as numbers, other values (ISO dates) as text
+      case 'greater': return v !== '' && compare(v, da.cond.value) > 0;
+      case 'greater_equal': return v !== '' && compare(v, da.cond.value) >= 0;
+      case 'less': return v !== '' && compare(v, da.cond.value) < 0;
+      case 'less_equal': return v !== '' && compare(v, da.cond.value) <= 0;
+      case 'not_in_list': return !da.cond.value.split(',').map((s) => s.trim()).includes(v);
       default: return true;
     }
   }
+  const NUM = /^\s*-?\d+(\.\d+)?\s*$/;
+  const compare = (a, b) => (NUM.test(a) && NUM.test(b) ? Number(a) - Number(b) : a < b ? -1 : a > b ? 1 : 0);
 
   // ------------------------------------------------------------ messages and errors (dynamic actions)
   // class names a dynamic action may add or remove (the database checks the same pattern)
@@ -499,6 +507,10 @@ const pgkilnUnsaved = (() => {
 
   /** (085) what runDa returns to stop the actions after it (a declined confirm) */
   const STOP = Symbol('stop');
+  /** (161) the element of a component event (a grid row, calendar cell, map, tree node): execute_javascript's `element` */
+  let componentElement = null;
+  /** (156) does a Cancel Event in these actions hold its condition (decided at once, so the event's effect can be stopped)? */
+  const cancels = (list) => list.some((da) => da.action === 'cancel_event' && conditionHolds(da));
   const text = (k) => (meta.texts && meta.texts[k]) || k;
 
   /** The actions of one event and trigger, one after the other in sequence order; false when one stopped them. */
@@ -580,6 +592,37 @@ const pgkilnUnsaved = (() => {
     }
     if (initial || !holds) return;
     switch (da.action) {
+      // (156) stops the actions after it; the triggering event's own effect is stopped by its handler (cancels())
+      case 'cancel_event':
+        return STOP;
+      case 'set_style':
+        for (const el of targets(da)) for (const [k, v] of Object.entries(da.styles || {})) el.style.setProperty(k, v);
+        return;
+      case 'collapse_tree':
+      case 'expand_tree':
+        for (const el of targets(da)) el.querySelectorAll('.tree-view details').forEach((d) => (d.open = da.action === 'expand_tree'));
+        return;
+      case 'show_ai_assistant':
+        for (const el of targets(da)) {
+          const dlg = el.closest('dialog[data-inline-region]') || (el.matches('dialog[data-inline-region]') ? el : null);
+          if (dlg && !dlg.open) dlg.showModal();
+          el.hidden = false;
+          const details = el.querySelector(':scope > details');
+          if (details) details.open = true;
+          const input = el.querySelector('textarea, input[type=text]') || (el.id && document.querySelector(`form[id^="${el.id}"] textarea`));
+          if (input) input.focus();
+          else el.scrollIntoView({ block: 'nearest' });
+        }
+        return;
+      case 'trigger_geocoding':
+        for (const n of da.items) document.querySelector(`[data-geocode="${CSS.escape(n)}"]`)?.click();
+        return;
+      case 'open_report_dialog':
+        for (const el of targets(da)) {
+          const item = da.dialog && el.querySelector(`.ir-item[data-ir-dialog="${CSS.escape(da.dialog)}"]`);
+          if (item) item.open = true;
+        }
+        return;
       case 'alert':
         window.alert(da.message || '');
         return;
@@ -593,6 +636,11 @@ const pgkilnUnsaved = (() => {
       case 'clear':
         for (const n of da.items) setItemValue(n, '');
         return;
+      // (161) set_value without SQL on a component event: the event's value, set in the browser
+      case 'set_value':
+        if (!da.eventValue) break;
+        for (const n of da.items) setItemValue(n, value == null ? '' : String(value));
+        return;
       case 'open_region':
       case 'close_region':
         for (const el of targets(da)) {
@@ -690,7 +738,7 @@ const pgkilnUnsaved = (() => {
         const fn = da.fn && actions.get(da.fn);
         if (!fn) return console.warn(`pgkiln: no function "${da.fn}" registered (pgkiln.actions.register) for dynamic action ${da.id}`);
         try {
-          await fn({ value, items: da.items, region: da.region ? document.getElementById(`R${da.region}`) : null, elements: targets(da), message: da.message });
+          await fn({ value, items: da.items, region: da.region ? document.getElementById(`R${da.region}`) : null, elements: targets(da), message: da.message, element: componentElement });
         } catch (e) {
           console.error(e);
           showError(e.message);
@@ -698,6 +746,12 @@ const pgkilnUnsaved = (() => {
         return;
       }
     }
+    // (156) before_refresh: the region's actions run before its refresh is asked for
+    if (da.action === 'refresh_region' && da.region) {
+      const r = document.getElementById(`R${da.region}`);
+      const before = regionRun('before_refresh', r);
+      if (before.length && !(await runChain(before))) return;
+    }
     const data = { ...(extra || {}) };
     for (const n of da.submit) data[n] = itemValue(n);
     const busy = targets(da);
@@ -727,6 +781,12 @@ const pgkilnUnsaved = (() => {
   }
 
   const das = meta.das || [];
+  // region events (trigger: region ids or static ids, case-insensitive)
+  const regionRun = (event, region) => {
+    if (!region || !/^R\d+$/.test(region.id || '')) return [];
+    const keys = [region.id.slice(1), (region.dataset.staticId || '').toLowerCase()].filter(Boolean);
+    return das.filter((da) => da.event === event && da.trigger.some((t) => keys.includes(String(t).toLowerCase())));
+  };
   // (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 () => {
@@ -760,6 +820,8 @@ const pgkilnUnsaved = (() => {
     const btn = e.target.closest('[data-button]');
     if (!btn || e.target.closest('[data-menu-entry]')) return;
     const run = das.filter((da) => da.event === 'click' && da.trigger.includes(btn.dataset.button));
+    // (156) a Cancel Event whose condition holds: the button doesn't submit or follow its link
+    if (cancels(run)) e.preventDefault();
     // "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)
     const ai = run.some((da) => da.action === 'ai_generate');
@@ -803,12 +865,120 @@ const pgkilnUnsaved = (() => {
   document.addEventListener('focusin', itemEvent('focus'));
   document.addEventListener('focusout', itemEvent('blur'));
   document.addEventListener('keyup', itemEvent('key_release'));
-  // region events (trigger: region ids or static ids, case-insensitive)
-  const regionRun = (event, region) => {
-    if (!region || !/^R\d+$/.test(region.id || '')) return [];
-    const keys = [region.id.slice(1), (region.dataset.staticId || '').toLowerCase()].filter(Boolean);
-    return das.filter((da) => da.event === event && da.trigger.some((t) => keys.includes(String(t).toLowerCase())));
+  // (156) key_down, key_press (a key that types a character), select (text selected in an item)
+  document.addEventListener('keydown', (e) => {
+    const name = e.target && e.target.name;
+    if (!name) return;
+    const down = das.filter((da) => da.event === 'key_down' && da.trigger.includes(name));
+    const press = e.key && e.key.length === 1 && !e.ctrlKey && !e.metaKey ? das.filter((da) => da.event === 'key_press' && da.trigger.includes(name)) : [];
+    // a Cancel Event on key_down / key_press keeps the key out of the field
+    if (cancels([...down, ...press])) e.preventDefault();
+    if (down.length) runChain(down);
+    if (press.length) runChain(press);
+  });
+  document.addEventListener('select', itemEvent('select'), true);
+  // double_click, mouse_enter, mouse_leave: an item (its name), a button (its name) or a region (id or static id)
+  const elementRun = (event, target) => {
+    if (!target || !target.closest) return [];
+    const item = target.closest('[name]');
+    const btn = target.closest('[data-button]');
+    const region = target.closest('section[id^="R"], div[id^="R"], dialog[id^="R"]');
+    const names = [item && item.name, btn && btn.dataset.button].filter(Boolean);
+    return [...new Set([...das.filter((da) => da.event === event && da.trigger.some((t) => names.includes(t))), ...regionRun(event, region)])];
   };
+  document.addEventListener('dblclick', (e) => {
+    const run = elementRun('double_click', e.target);
+    if (run.length) runChain(run);
+  });
+  // enter / leave: once per element, not again while moving inside it
+  const hovered = new Set();
+  document.addEventListener('mouseover', (e) => {
+    for (const da of elementRun('mouse_enter', e.target)) if (!hovered.has(da)) { hovered.add(da); runChain([da]); }
+  });
+  document.addEventListener('mouseout', (e) => {
+    const leaving = elementRun('mouse_enter', e.target).concat(elementRun('mouse_leave', e.target));
+    const still = new Set([...elementRun('mouse_enter', e.relatedTarget), ...elementRun('mouse_leave', e.relatedTarget)]);
+    for (const da of leaving) {
+      if (still.has(da)) continue;
+      hovered.delete(da);
+      if (da.event === 'mouse_leave') runChain([da]);
+    }
+  });
+  // resize, scroll: the window (at most one run per animation frame)
+  for (const [event, dom] of [['resize', 'resize'], ['scroll', 'scroll']]) {
+    const run = das.filter((da) => da.event === event);
+    if (!run.length) continue;
+    let queued = false;
+    window.addEventListener(dom, () => {
+      if (queued) return;
+      queued = true;
+      requestAnimationFrame(() => { queued = false; runChain(run); });
+    }, { passive: true });
+  }
+  // page_unload: the page is left (only quick, local actions finish)
+  window.addEventListener('pagehide', () => runChain(das.filter((da) => da.event === 'page_unload')));
+  // facets_change: a faceted search region's facets were applied (the page came back from its form)
+  {
+    const params = new URLSearchParams(location.search);
+    const changed = params.get('facets_changed');
+    if (changed) {
+      params.delete('facets_changed');
+      history.replaceState(history.state, '', `${location.pathname}${params.size ? `?${params}` : ''}${location.hash}`);
+      runChain(regionRun('facets_change', document.getElementById(`R${changed.replace(/\D/g, '')}`)));
+    }
+  }
+  // (161) component events of grid, calendar, map and tree regions (trigger: the region). The component
+  // raises pgkiln:component {event, element, value}; detail.cancelled tells it a cancel_event holds
+  // (the calendar's Create link, the tree node's link) and detail.ran how many actions run.
+  document.addEventListener('pgkiln:component', (e) => {
+    const d = e.detail || {};
+    const region = d.element && d.element.closest && d.element.closest('section[id^="R"], div[id^="R"], dialog[id^="R"]');
+    const run = regionRun(d.event, region);
+    d.ran = run.length;
+    if (!run.length) return;
+    const value = d.value == null ? '' : String(d.value);
+    if (run.some((da) => da.action === 'cancel_event' && conditionHolds(da, value))) d.cancelled = true;
+    componentElement = d.element;
+    runChain(run, value).finally(() => (componentElement = null));
+  });
+  // grid_save: the page that comes back after a grid's Save
+  for (const id of meta.savedGrids || []) {
+    const run = regionRun('grid_save', document.getElementById(`R${id}`));
+    if (run.length) runChain(run);
+  }
+  // calendar_view_change: the page that comes back from a calendar's view or period link (cal_changed=<region>)
+  {
+    const params = new URLSearchParams(location.search);
+    const changed = params.get('cal_changed');
+    if (changed) {
+      params.delete('cal_changed');
+      history.replaceState(history.state, '', `${location.pathname}${params.size ? `?${params}` : ''}${location.hash}`);
+      const region = document.getElementById(`R${changed.replace(/\D/g, '')}`);
+      const run = regionRun('calendar_view_change', region);
+      if (run.length) runChain(run, region.querySelector('.calendar')?.dataset.view || '');
+    }
+  }
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest?.('.calendar .cal-toolbar a[href]');
+    const region = a && a.closest('section[id^="R"], div[id^="R"]');
+    if (!region || !regionRun('calendar_view_change', region).length) return;
+    const url = new URL(a.href, location.href);
+    url.searchParams.set('cal_changed', region.id.slice(1));
+    a.href = url.pathname + url.search + url.hash;
+  }, true);
+  // tree_selection_change: a node's label chosen (not the disclosure of a linked branch); the node is marked
+  document.addEventListener('click', (e) => {
+    const node = e.target.closest?.('.tree-view li[data-node]');
+    if (!node) return;
+    const summary = e.target.closest('summary');
+    if (summary && !summary.querySelector(':scope > span:not(.sr-only), :scope > a')) return;
+    const d = { event: 'tree_selection_change', element: node, value: node.dataset.node };
+    document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: d }));
+    if (!d.ran) return;
+    node.closest('.tree-view').querySelectorAll('li.tree-selected').forEach((li) => li.classList.remove('tree-selected'));
+    node.classList.add('tree-selected');
+    if (d.cancelled) e.preventDefault();
+  });
   // after_refresh: a region replaced by a refresh, a lazy load or a master row
   document.addEventListener('pgkiln:replaced', (e) => {
     const run = regionRun('after_refresh', e.detail);
@@ -1011,6 +1181,10 @@ const pgkilnUnsaved = (() => {
     const dlg = document.getElementById('t-dialog');
     if (dlg) dlg.close();
     if (!e.data.reload) return;
+    // (157) items a close_dialog process returned: items of the same name on this page take their values
+    if (e.data.items && typeof e.data.items === 'object')
+      for (const [name, value] of Object.entries(e.data.items))
+        if (/^[A-Z][A-Z0-9_]{0,99}$/.test(name) && typeof value === 'string' && wrapperOf(name)) setItemValue(name, value);
     const page = /^\d{1,9}$/.test(String(e.data.page || '')) ? String(e.data.page) : '';
     const handlers = das.filter((da) => da.event === 'dialog_closed' && (!da.trigger.length || da.trigger.includes(page)));
     if (!handlers.length) return location.reload();
@@ -1028,10 +1202,23 @@ const pgkilnUnsaved = (() => {
 
   // ------------------------------------------------------------ calendar
   // Create on click: a click on an empty day or hour slot follows its "+" link.
+  // (161) a day or hour chosen (a click on the cell or its "+"): calendar_date_select; its cancel_event keeps the link closed
+  let addClicked = false;
   document.addEventListener('click', (e) => {
-    const cell = e.target.closest?.('.calendar [data-add]');
-    if (!cell || e.target.closest('a, button')) return;
-    cell.querySelector(':scope > .cal-add')?.click();
+    if (addClicked) return void (addClicked = false);
+    const cell = e.target.closest?.('.calendar [data-date]');
+    if (!cell) return;
+    const add = e.target.closest('a.cal-add');
+    if (!add && e.target.closest('a, button')) return;
+    const d = { event: 'calendar_date_select', element: cell, value: cell.dataset.date };
+    document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: d }));
+    if (d.cancelled) return void e.preventDefault();
+    const link = !add && cell.hasAttribute('data-add') && cell.querySelector(':scope > .cal-add');
+    if (link) {
+      addClicked = true;
+      link.click();
+      addClicked = false;
+    }
   });
   // Drag and drop (mouse): drop an event on a day or hour slot; the server moves it
   // and sends the calendar back. Without JS (and from the keyboard) the event's
@@ -1248,7 +1435,10 @@ const pgkilnUnsaved = (() => {
 
   // Inside a dialog: close on success or cancel.
   if (window.parent !== window) {
-    const tell = (reload) => window.parent.postMessage({ type: 'pgkiln:close', reload, page: body.dataset.dialogPage || '' }, location.origin);
+    // (157) a close_dialog process's items go along to the page below
+    let items = null;
+    try { items = body.dataset.dialogItems ? JSON.parse(body.dataset.dialogItems) : null; } catch { items = null; }
+    const tell = (reload) => window.parent.postMessage({ type: 'pgkiln:close', reload, page: body.dataset.dialogPage || '', items }, location.origin);
     if (body.dataset.dialogClose) tell(true);
     document.addEventListener('click', (e) => {
       if (!e.target.closest('[data-dialog-cancel]')) return;
@@ -1324,6 +1514,9 @@ const pgkilnUnsaved = (() => {
     return row;
   }
 
+  /** (161) grid_row_init: a new row (Add row, Duplicate); the condition sees the row's number among the new rows */
+  const rowInit = (row) => document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: { event: 'grid_row_init', element: row, value: row.dataset.newRow } }));
+
   /** The editable control of a cell, if any. */
   const control = (td) => td?.querySelector('input:not([type=hidden]), select');
 
@@ -1364,6 +1557,7 @@ const pgkilnUnsaved = (() => {
     if (add) {
       const row = addRow(add.closest('[data-grid]'));
       row?.querySelector('input:not([type=hidden]), select')?.focus();
+      if (row) rowInit(row);
       return;
     }
     // Duplicate: the row's values in a new row (without JS a link does it on the server)
@@ -1380,6 +1574,7 @@ const pgkilnUnsaved = (() => {
         if (from && control(td) && control(from)) setCell(td, control(from).tagName === 'SELECT' ? control(from).value : cellText(from));
       }
       control(row.querySelector('td[data-col]:not([hidden])'))?.focus();
+      rowInit(row);
       return;
     }
     if (e.target.closest('[data-grid-del]')) {
@@ -1841,7 +2036,20 @@ document.addEventListener('change', (e) => {
     const custom = e.target.closest('fieldset')?.querySelector('[data-facet-range]');
     custom?.querySelectorAll('input').forEach((i) => (i.value = ''));
   }
-  e.target.form?.requestSubmit();
+  // (156) the page that comes back runs the region's facets_change dynamic actions
+  const f = e.target.form;
+  const region = e.target.closest('[id^="R"]');
+  if (f && region && /^R\d+$/.test(region.id)) {
+    let mark = f.querySelector('input[name="facets_changed"]');
+    if (!mark) {
+      mark = document.createElement('input');
+      mark.type = 'hidden';
+      mark.name = 'facets_changed';
+      f.appendChild(mark);
+    }
+    mark.value = region.id.slice(1);
+  }
+  f?.requestSubmit();
 });
 document.addEventListener('input', (e) => {
   const box = e.target.closest?.('[data-facet-range]');
@@ -3116,6 +3324,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // without a Referer: the tiles get the site's origin only (no paths or item values)
     window.L.tileLayer(data.tiles, { attribution: data.attribution, maxZoom: 19, referrerPolicy: 'strict-origin-when-cross-origin' }).addTo(map);
     const popup = (p) => {
+      // (161) a marker or shape clicked (its popup opens): map_object_click sees its id, else its title
+      el.dispatchEvent(new CustomEvent('pgkiln:component', { bubbles: true, detail: { event: 'map_object_click', element: el, value: p.id ?? p.title ?? '' } }));
       // built with the DOM, not HTML strings: titles and texts are data
       const box = document.createElement('div');
       const b = document.createElement('strong');
@@ -3159,9 +3369,22 @@ document.addEventListener('DOMContentLoaded', () => {
     if (data.layers.some((l) => l.kind === 'heat')) heatLegend(map, data.legend);
     if (several) layerSwitch(map, group, built, data.layersLabel);
     if (f) areaFilter(map, f);
+    // (161) map_change: moved or zoomed by the user (after the first view); the condition sees the zoom level
+    map.on('moveend', () => el.dispatchEvent(new CustomEvent('pgkiln:component', { bubbles: true, detail: { event: 'map_change', element: el, value: map.getZoom() } })));
   }
 });
 
+// (159) Leaflet path options from a shape layer's checked style
+function shapeStyle(st, kind) {
+  if (!st) return {};
+  const o = {};
+  if (st.stroke_color) o.color = st.stroke_color;
+  if (typeof st.stroke_width === 'number') o.weight = st.stroke_width;
+  if (st.fill_color) { o.fillColor = st.fill_color; o.fill = kind !== 'lines'; }
+  if (typeof st.opacity === 'number') { if (kind === 'lines') o.opacity = st.opacity; else o.fillOpacity = st.opacity; }
+  return o;
+}
+
 // One layer's Leaflet parts: markers (clustered or not) or a heat map, with its lines and areas.
 function layerParts(l, popup, data, several) {
   const parts = [];
@@ -3170,8 +3393,14 @@ function layerParts(l, popup, data, several) {
   else for (const p of l.points) parts.push(placeMarker(p, l, popup, several));
   if (l.shapes.length)
     parts.push(window.L.geoJSON({ type: 'FeatureCollection', features: l.shapes }, {
-      style: () => (several ? { className: `map-c${l.color}` } : {}),
-      onEachFeature: (f, layer) => layer.bindPopup(() => popup(f.properties)),
+      // (159) a lines / polygons / extruded layer's colours, width and opacity (checked on the server: #rrggbb, numbers)
+      style: (f) => ({ ...(several ? { className: `map-c${l.color}` } : {}), ...shapeStyle(f.properties && f.properties.style, l.kind) }),
+      onEachFeature: (f, layer) => {
+        layer.bindPopup(() => popup(f.properties));
+        // a shape's title as its tooltip (and its height on an extruded layer)
+        const tip = [f.properties && f.properties.title, f.properties && typeof f.properties.height === 'number' ? String(f.properties.height) : ''].filter(Boolean).join(': ');
+        if (tip && layer.bindTooltip) layer.bindTooltip(tip, { sticky: true });
+      },
     }));
   return parts;
 }

package/public/builder.css

@@ -401,6 +401,10 @@ body.ide {
 .ide-head-actions { margin-left: auto; }
 .ide-tabs { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; }
 .ide-page > .ide-tabs { margin-top: 0; border-bottom: 1px solid var(--border); }
+/* (sprint 163) regions and two-column rows stacked on a page always have a gap between them (pages used to rely on
+   an explicit .u-spacer, and the ones without one let a region touch the one above); not the regions side by side in a
+   grid, which have the grid's gap; :where() keeps it weaker than any page's own margin rule */
+:where(.ide-page :is(.region, .columns, :has(> .region)) + :is(.region, .columns, :has(> .region)):not(:is(.columns, .qs-columns, .vec-columns, .ws-cols, .wh-top, [class*="grid"]) > *)) { margin-top: 1rem; }
 .ide-tab {
   position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px 9px; color: var(--muted); text-decoration: none;
   border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; font-weight: 550;
@@ -1340,7 +1344,7 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .cron-field-grid input { width: 100%; font-family: var(--mono, monospace); }
 .cron-preview { border-left: 3px solid var(--accent); padding: 0.4rem 0.8rem; margin: 0.6rem 0; background: var(--accent-soft); border-radius: 0 4px 4px 0; }
 .cron-runs { margin: 0.25rem 0 0; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }
-.cron-error { color: var(--danger, #b42318); }
+.cron-error { color: var(--danger); }
 .cron-sql { white-space: pre-wrap; overflow-wrap: anywhere; }
 /* (sprint 102) SQL Monitor: refresh controls, session actions, bars in Top SQL */
 .sm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
@@ -1526,7 +1530,7 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .mail-queue-filters .field { min-width: 0; flex: 1 1 160px; max-width: 260px; }
 .mail-queue-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
 .mail-queue-stats .stat b { font-size: 1.3rem; }
-.stat.stat-bad b { color: var(--danger, #b42318); }
+.stat.stat-bad b { color: var(--danger); }
 .inline-form { display: inline; margin: 0; }
 .mail-failures .buttons { flex-wrap: wrap; gap: 6px; }
 .mail-answer { overflow-wrap: anywhere; font-family: var(--font-mono, monospace); font-size: 0.85em; }
@@ -1648,3 +1652,22 @@ a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
 
 /* (sprint 139, AP-6) OpenTelemetry */
 .otel-problem { color: var(--danger); overflow-wrap: anywhere; }
+
+/* (sprint 163) an application's REST API page: status pills under the intro, the New client form behind a button */
+.api-intro { max-width: 80ch; margin: 0 0 0.6rem; }
+.api-status { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
+.api-status li { display: inline-block; border: 1px solid var(--border); border-radius: 14px; padding: 3px 12px; font-size: 0.875rem; overflow-wrap: anywhere; }
+.api-status li.is-ok > span:first-child { color: var(--success); }
+.api-status li.is-bad { border-color: var(--danger); }
+.api-status li.is-bad > span:first-child { color: var(--danger); font-weight: 700; }
+.api-top { align-items: start; }
+.api-top form > .field + .field { margin-top: 0.9rem; }
+.api-sub { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
+.api-new > summary { list-style: none; display: inline-flex; }
+.api-new > summary::-webkit-details-marker { display: none; }
+.api-new[open] > summary { margin-bottom: 0.75rem; }
+.api-new-body { border-top: 1px solid var(--border); padding-top: 0.75rem; }
+.api-client-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
+.api-client-actions select { width: auto; min-height: 0; padding-block: 0.2rem; font-size: 0.8125rem; }
+.api-client-actions .inline-form { display: flex; gap: 6px; align-items: center; }
+.api-clients td.actions { text-align: end; }

package/public/data-modeler.js

@@ -10,6 +10,9 @@
 // Strict CSP: no inline styles; geometry goes into SVG attributes, sizes through the CSSOM.
 (() => {
   'use strict';
+  // (sprint 162) texts in the builder's language: #builder-texts (shell(), keys js.*), English in en.ts
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
   // the data dictionary's Print button
   for (const b of document.querySelectorAll('.dm-dict-actions [data-dm=print]')) {
     b.hidden = false;
@@ -104,7 +107,7 @@
     btn('redo').disabled = !redo.length;
     const d = dirty();
     btn('save').classList.toggle('btn-hot', d);
-    status.textContent = d ? 'Unsaved changes' : '';
+    status.textContent = d ? msg('js.dm.unsaved') : '';
   }
   function remember(before) {
     undo.push(before);
@@ -136,15 +139,15 @@
       format: 'json',
       positions: JSON.stringify([...boxes].map(([name, b]) => ({ name, x: Math.round(b.x), y: Math.round(b.y) }))),
     });
-    status.textContent = 'Saving…';
+    status.textContent = msg('js.dm.saving');
     try {
       const res = await fetch(saveForm.action, { method: 'POST', body, credentials: 'same-origin', headers: { accept: 'application/json' } });
       if (!res.ok) throw new Error(String(res.status));
       saved = JSON.stringify(snapshot());
       changed();
-      status.textContent = 'Saved';
+      status.textContent = msg('js.dm.saved');
     } catch (e) {
-      status.textContent = `Not saved (${e.message}): try again`;
+      status.textContent = msg('js.dm.not_saved', { error: e.message });
     }
   }
   btn('save').addEventListener('click', save);
@@ -333,7 +336,7 @@
       ctx.drawImage(img, 0, 0, W, H);
       c.toBlob((blob) => blob && download(blob, `${fileName}.png`), 'image/png');
     };
-    img.onerror = () => (status.textContent = 'The PNG could not be made: export SVG instead');
+    img.onerror = () => (status.textContent = msg('js.dm.no_png'));
     img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText())}`;
   });
   btn('print').addEventListener('click', () => {

package/public/sql-monitor.js

@@ -7,6 +7,9 @@
 // JavaScript the page's Refresh link reloads it.
 (() => {
   'use strict';
+  // (sprint 162) texts in the builder's language: #builder-texts (shell(), keys js.*), English in en.ts
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
   const live = document.querySelector('[data-sm-live]');
   const controls = document.querySelector('[data-sm-controls]');
   if (!live || !controls) return;
@@ -26,7 +29,7 @@
 
   const show = () => {
     pause.setAttribute('aria-pressed', paused ? 'true' : 'false');
-    pause.textContent = paused ? 'Resume' : 'Pause';
+    pause.textContent = paused ? msg('js.sm.resume') : msg('js.sm.pause');
     live.classList.toggle('is-paused', paused);
   };
   const schedule = () => {
@@ -52,7 +55,7 @@
       paused = true;
       show();
       const note = live.querySelector('[data-sm-updated]');
-      if (note) note.textContent = 'Refresh stopped: the monitor could not be reached (signed out?). Reload the page.';
+      if (note) note.textContent = msg('js.sm.stopped');
     }
   }
   select.addEventListener('change', () => {

package/src/appfiles.ts

@@ -108,11 +108,11 @@ function sniff(b: Buffer) {
 // Code columns that move to a sibling file when they are long or multi-line.
 const CODE: Record<string, Record<string, string>> = {
   region: { source: 'sql', condition: 'sql' },
-  item: { default_value: 'sql', readonly_condition: 'sql' },
+  item: { default_value: 'sql', readonly_condition: 'sql', condition_expr: 'sql' },
   button: { condition: 'sql', badge_query: 'sql' },
-  dynamic_action: { code: 'sql' },
-  validation: { expression: 'sql' },
-  process: { code: 'sql' },
+  dynamic_action: { code: 'sql', server_condition_expr: 'sql' },
+  validation: { expression: 'sql', condition_expr: 'sql' },
+  process: { code: 'sql', condition_expr: 'sql' },
   computation: { expression: 'sql', condition_expr: 'sql' },
   branch: { condition_expr: 'sql' },
   app_process: { code: 'sql' },

package/src/builder/advisor.ts

@@ -1,3 +1,4 @@
+import { declarativeCondition } from './conditions.ts';
 import type { FastifyInstance } from 'fastify';
 import pg from 'pg';
 import { applyBinds, splitStatements } from '../binds.ts';
@@ -52,15 +53,16 @@ export function sqlFields(kind: string, row: any): { name: string; shape: SqlSha
     case 'region':
       return [
         ...(['report', 'classic_report', 'grid', 'chart', 'cards', 'calendar', 'map', 'tree', 'dynamic'].includes(row.type) && row.source?.trim() && !row.rest_source ? [{ name: 'source', shape: 'select' as const }] : []),
-        { name: 'condition', shape: 'boolean' },
+        ...conditionSql(row, 'condition'),
       ];
     case 'item':
       return [
         ...(row.lov?.trim() && !/^(STATIC|LOV):/i.test(row.lov.trim()) ? [{ name: 'lov', shape: 'select' as const }] : []),
         { name: 'readonly_condition', shape: 'boolean' },
+        ...conditionSql(row),
       ];
     case 'button':
-      return [{ name: 'condition', shape: 'boolean' }, { name: 'badge_query', shape: 'select' }];
+      return [...conditionSql(row, 'condition'), { name: 'badge_query', shape: 'select' }];
     case 'computation':
     case 'app_computation':
       return [
@@ -70,9 +72,16 @@ export function sqlFields(kind: string, row: any): { name: string; shape: SqlSha
     case 'branch':
       return conditionSql(row);
     case 'dynamic_action':
-      return row.action === 'set_value' ? [{ name: 'code', shape: 'select' }] : row.action === 'execute_sql' ? [{ name: 'code', shape: 'statements' }] : [];
+      return [
+        ...(row.action === 'set_value' ? [{ name: 'code', shape: 'select' as const }] : row.action === 'execute_sql' ? [{ name: 'code', shape: 'statements' as const }] : []),
+        ...conditionSql({ condition_type: row.server_condition_type }, 'server_condition_expr'),
+      ];
     case 'validation':
-      return row.type === 'sql' ? [{ name: 'expression', shape: 'boolean' }] : row.type === 'regex' ? [{ name: 'expression', shape: 'regex' }] : [];
+      return [
+        ...(row.type === 'sql' ? [{ name: 'expression', shape: 'boolean' as const }] : row.type === 'regex' ? [{ name: 'expression', shape: 'regex' as const }]
+          : row.type === 'exists' || row.type === 'not_exists' ? [{ name: 'expression', shape: 'select' as const }] : []),
+        ...conditionSql(row),
+      ];
     case 'process':
       return [
         ...(row.type === 'sql' ? [{ name: 'code', shape: 'statements' as const }] : row.type === 'download' ? [{ name: 'code', shape: 'select' as const }] : []),
@@ -104,9 +113,14 @@ export function sqlFields(kind: string, row: any): { name: string; shape: SqlSha
   }
 }
 
-/** The SQL of a computation's or branch's condition (migration 029). */
-const conditionSql = (row: any): { name: string; shape: SqlShape }[] =>
-  row.condition_type === 'sql' ? [{ name: 'condition_expr', shape: 'boolean' }] : row.condition_type === 'exists' || row.condition_type === 'not_exists' ? [{ name: 'condition_expr', shape: 'select' }] : [];
+/**
+ * The SQL of a server-side condition (migrations 029, 147). `field` holds the expression; for regions and
+ * buttons (`condition`) no type means SQL.
+ */
+const conditionSql = (row: any, field = 'condition_expr'): { name: string; shape: SqlShape }[] => {
+  const type = row.condition_type || (field === 'condition' && row.condition?.trim() ? 'sql' : null);
+  return type === 'sql' ? [{ name: field, shape: 'boolean' }] : type === 'exists' || type === 'not_exists' ? [{ name: field, shape: 'select' }] : [];
+};
 
 export const EXPLAINABLE = /^\s*(\(|select|with|values|table|insert|update|delete|merge)\b/i;
 
@@ -273,6 +287,28 @@ function structureFindings(x: AppRows): Finding[] {
     else if (!all.some((r) => r.kind === 'region' && r.row.type === 'login' && r.row.page_id === page.id))
       out.push({ severity: 'error', entry: null, field, message: `Page ${app.login_page} has no Login region: nobody can sign in.` });
   }
+  // (154, CD-2) a SQL condition one declarative type can say: no query, and it reads in words in the tree
+  for (const r of all) {
+    const field = r.kind === 'region' || r.kind === 'button' ? 'condition'
+      : ['item', 'validation', 'process', 'computation', 'app_computation', 'branch'].includes(r.kind) ? 'condition_expr' : null;
+    if (!field || (r.row.build_option ?? '') === 'COMMENTED_OUT') continue;
+    const sql = (r.row.condition_type ?? (field === 'condition' ? 'sql' : null)) === 'sql' ? r.row[field] : null;
+    const d = sql ? declarativeCondition(sql) : null;
+    if (!d) continue;
+    const what = [d.condition_expr && `expression ${d.condition_expr}`, d.condition_value && `value ${d.condition_value}`].filter(Boolean).join(', ');
+    out.push({ severity: 'info', entry: x.byKey.get(`${r.kind}-${r.row.id}`) ?? null, field: 'Server-side condition',
+      message: `The SQL condition ${String(sql).trim()} can be the condition type ${d.condition_type}${what ? ` (${what})` : ''}: decided without a query, and shown in words.` });
+  }
+  // (155, CD-1) a SQL validation one declarative type says exactly
+  const VALIDATION_OF: Record<string, string> = { item_not_null: 'not_null', item_equals: 'equals', item_in_list: 'in_list' };
+  for (const r of all) {
+    if (r.kind !== 'validation' || r.row.type !== 'sql' || (r.row.build_option ?? '') === 'COMMENTED_OUT') continue;
+    const d = declarativeCondition(r.row.expression);
+    const type = d && VALIDATION_OF[d.condition_type ?? ''];
+    if (!d || !type) continue;
+    out.push({ severity: 'info', entry: x.byKey.get(`validation-${r.row.id}`) ?? null, field: 'Type',
+      message: `The SQL validation ${String(r.row.expression).trim()} can be the type ${type} with associated item ${d.condition_expr}${d.condition_value ? ` and value ${d.condition_value}` : ''}: no query.` });
+  }
   const groups = new Set(all.filter((r) => r.kind === 'page_group').map((r) => r.row.name));
   for (const p of [...pages].sort((a, b) => a.page_no - b.page_no))
     if (p.page_group != null && !groups.has(p.page_group))