pgkiln 0.72.0 → 0.73.0

package/public/app.css

@@ -1693,6 +1693,54 @@ td.tc-cell { overflow-wrap: anywhere; }
 }
 .tag-remove:hover, .tag-remove:focus-visible { background: var(--surface-3); }
 
+/* (140) shuttle: two lists, the move buttons between them and the order buttons after them (stacked on phones) */
+.shuttle-ui { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 0.5rem; align-items: stretch; }
+.shuttle-col { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
+.shuttle-col .shuttle-list { flex: 1; min-height: 9rem; }
+.shuttle-moves, .shuttle-order { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; }
+.shuttle-btn { min-width: 2.4rem; justify-content: center; font-size: 1rem; line-height: 1; }
+[dir=rtl] .shuttle-moves .shuttle-btn span { display: inline-block; transform: scaleX(-1); }
+@media (max-width: 640px) {
+  .shuttle-ui { grid-template-columns: minmax(0, 1fr) auto; }
+  .shuttle-col:first-child { grid-column: 1 / -1; }
+  .shuttle-moves { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
+  .shuttle-moves .shuttle-btn span { display: inline-block; transform: rotate(90deg); }
+}
+/* (140) select one / select many: a search field with a list box under it; chips above it */
+.select-pick-ui { position: relative; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+.select-pick-list {
+  position: absolute; z-index: 30; top: 100%; inset-inline: 0; margin: 0.15rem 0 0; padding: 0.25rem 0; list-style: none; max-height: 16rem; overflow-y: auto;
+  background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.75); box-shadow: var(--shadow);
+}
+.select-pick-list[hidden] { display: none; }
+.select-pick-list li { padding: 0.4rem 0.7rem; cursor: pointer; overflow-wrap: anywhere; }
+.select-pick-list li[aria-selected=true] { font-weight: 600; }
+.select-pick-list li[aria-selected=true]::before { content: "✓ "; }
+.select-pick-list li.is-active, .select-pick-list li:hover { background: var(--surface-3); }
+.select-pick-list li.select-pick-none { cursor: default; color: var(--muted); }
+/* (140) a breadcrumb region and a help text region */
+.region-crumbs .crumbs { font-size: 0.9rem; margin: 0; }
+.region-crumbs .crumbs [aria-current] { color: var(--text); font-weight: 600; }
+.help-text { overflow-wrap: anywhere; }
+.help-text > :first-child { margin-top: 0; }
+.help-text > :last-child { margin-bottom: 0; }
+/* (140) classic report templates */
+.cr-pairs { display: flex; flex-direction: column; gap: 0.75rem; }
+.cr-pairs dl { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
+.cr-pairs dl:last-child { border-bottom: 0; padding-bottom: 0; }
+.cr-pairs dt { font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
+.cr-pairs dd { margin: 0; overflow-wrap: anywhere; }
+.cr-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
+.cr-badges li { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; overflow-wrap: anywhere; }
+.cr-badges .cr-badge-value { font-size: 1.4rem; font-weight: 700; }
+.cr-badges .cr-badge-label { font-size: 0.85rem; color: var(--muted); }
+.cr-media { list-style: none; margin: 0; padding: 0; }
+.cr-media li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
+.cr-media li:last-child { border-bottom: 0; }
+.cr-media .cr-media-title { font-weight: 600; }
+.cr-media .cr-media-text { margin: 0.15rem 0 0; color: var(--muted); }
+@media (max-width: 640px) { .cr-pairs dl { grid-template-columns: minmax(0, 1fr); } }
+
 .date-range { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
 .range-part { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 12rem; min-width: 0; }
 .range-part .sub { font-size: 0.85rem; color: var(--muted); min-width: 2.2rem; }

package/public/app.js

@@ -264,6 +264,8 @@ const pgkilnUnsaved = (() => {
     if (el.closest('[data-range]')) return els.some((e) => e.value) ? els.slice(0, 2).map((e) => e.value).join(':') : '';
     if (el.type === 'radio') return (els.find((e) => e.checked) || {}).value || '';
     if (el.type === 'checkbox') return el.checked ? 'true' : 'false';
+    // (140) a multi-value list (multiselect, shuttle, select many): its values colon-separated, in order
+    if (el.tagName === 'SELECT' && el.multiple) return [...el.selectedOptions].map((o) => o.value).join(':');
     return el.value;
   }
 
@@ -281,7 +283,10 @@ const pgkilnUnsaved = (() => {
       els.slice(0, 2).forEach((e, i) => (e.value = parts[i] || ''));
     } else if (el.type === 'radio') els.forEach((e) => (e.checked = e.value === value));
     else if (el.type === 'checkbox') el.checked = ['true', 't', 'on', '1', 'yes', 'y'].includes(String(value).toLowerCase());
-    else el.value = value ?? '';
+    else if (el.tagName === 'SELECT' && el.multiple) {
+      const values = String(value ?? '').split(':').filter(Boolean);
+      for (const o of el.options) o.selected = values.includes(o.value);
+    } else el.value = value ?? '';
     if (depth < 5) {
       depth++;
       el.dispatchEvent(new Event('change', { bubbles: true }));
@@ -2162,6 +2167,377 @@ function popupLov(sel) {
   });
 }
 
+// (140; APEX: Shuttle) Two lists, available and chosen, with buttons to move one or all values across and to
+// order the chosen ones. The item's own <select multiple> (it works without JavaScript) stays in the form, hidden:
+// its selected options are the value, in the order of the chosen list (they come first in it).
+function enhanceShuttles(root) {
+  const boxes = root.matches?.('[data-shuttle]') ? [root] : [...(root.querySelectorAll?.('[data-shuttle]') ?? [])];
+  boxes.forEach(shuttle);
+}
+document.addEventListener('pgkiln:replaced', (e) => e.detail && enhanceShuttles(e.detail));
+enhanceShuttles(document);
+function shuttle(box) {
+  const sel = box.querySelector('select[multiple]');
+  if (!sel || box.dataset.enhanced) return;
+  box.dataset.enhanced = '1';
+  const d = box.dataset;
+  const id = sel.id;
+  const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+  const name = (label?.textContent || sel.name).replace(/\*\s*$/, '').trim();
+  const el = (tag, cls) => {
+    const x = document.createElement(tag);
+    if (cls) x.className = cls;
+    return x;
+  };
+  const list = (suffix, text) => {
+    const l = el('select', 'shuttle-list');
+    l.multiple = true;
+    l.id = `${id}_${suffix}`;
+    l.size = Math.max(sel.size || 6, 6);
+    l.setAttribute('aria-label', `${name}: ${text}`);
+    for (const a of ['aria-describedby', 'aria-invalid']) if (sel.hasAttribute(a)) l.setAttribute(a, sel.getAttribute(a));
+    return l;
+  };
+  const avail = list('available', d.availableLabel || 'Available');
+  const chosen = list('chosen', d.chosenLabel || 'Selected');
+  const filter = el('input', 'shuttle-filter');
+  filter.type = 'search';
+  filter.id = `${id}_filter`;
+  filter.autocomplete = 'off';
+  filter.placeholder = d.filterLabel || 'Filter';
+  filter.setAttribute('aria-label', `${name}: ${d.filterLabel || 'Filter'}`);
+  filter.setAttribute('aria-controls', avail.id);
+  const button = (cmd, text, glyph) => {
+    const b = el('button', 'btn btn-sm shuttle-btn');
+    b.type = 'button';
+    b.dataset.cmd = cmd;
+    b.title = text;
+    b.setAttribute('aria-label', text);
+    const g = el('span');
+    g.setAttribute('aria-hidden', 'true');
+    g.textContent = glyph;
+    b.append(g);
+    return b;
+  };
+  const moves = el('div', 'shuttle-moves');
+  moves.setAttribute('role', 'group');
+  moves.append(button('all', d.moveAllLabel || 'Move all', '»'), button('move', d.moveLabel || 'Move', '›'), button('remove', d.removeLabel || 'Remove', '‹'), button('none', d.removeAllLabel || 'Remove all', '«'));
+  const order = el('div', 'shuttle-order');
+  order.setAttribute('role', 'group');
+  order.append(button('top', d.topLabel || 'Move to top', '⤒'), button('up', d.upLabel || 'Move up', '↑'), button('down', d.downLabel || 'Move down', '↓'), button('bottom', d.bottomLabel || 'Move to bottom', '⤓'));
+  const left = el('div', 'shuttle-col');
+  left.append(filter, avail);
+  const right = el('div', 'shuttle-col');
+  right.append(chosen);
+  const ui = el('div', 'shuttle-ui');
+  ui.append(left, moves, right, order);
+  sel.hidden = true;
+  box.append(ui);
+  if (label) label.htmlFor = avail.id;
+
+  const src = new Map(); // a shown option → the item's option
+  const lovIndex = (o) => Number(o.dataset.i ?? 0);
+  // the item's options: the chosen ones first (in their order), then the others in the list of values' order
+  const arrange = (picked) => {
+    const rest = [...sel.options].filter((o) => !picked.includes(o)).sort((a, b) => lovIndex(a) - lovIndex(b));
+    for (const o of sel.options) o.selected = picked.includes(o);
+    sel.append(...picked, ...rest);
+  };
+  const picked = () => [...sel.options].filter((o) => o.selected);
+  const draw = (keep = new Set()) => {
+    const q = filter.value.trim().toLowerCase();
+    const fill = (l, opts) => {
+      l.replaceChildren(
+        ...opts.map((o) => {
+          const x = new Option(o.text, o.value);
+          x.selected = keep.has(o);
+          src.set(x, o);
+          return x;
+        }),
+      );
+    };
+    src.clear();
+    fill(avail, [...sel.options].filter((o) => !o.selected && (!q || o.text.toLowerCase().includes(q))));
+    fill(chosen, picked());
+  };
+  let own = false;
+  const changed = (keep) => {
+    draw(keep);
+    own = true;
+    sel.dispatchEvent(new Event('change', { bubbles: true }));
+    own = false;
+  };
+  const marked = (l) => [...l.selectedOptions].map((x) => src.get(x)).filter(Boolean);
+  const run = (cmd) => {
+    let now = picked();
+    let keep = new Set();
+    if (cmd === 'move' || cmd === 'all') {
+      const add = cmd === 'all' ? [...avail.options].map((x) => src.get(x)) : marked(avail);
+      if (!add.length) return;
+      now = [...now, ...add];
+      keep = new Set(add);
+    } else if (cmd === 'remove' || cmd === 'none') {
+      const drop = cmd === 'none' ? now : marked(chosen);
+      if (!drop.length) return;
+      now = now.filter((o) => !drop.includes(o));
+      keep = new Set(drop);
+    } else {
+      const m = marked(chosen);
+      if (!m.length) return;
+      keep = new Set(m);
+      const others = now.filter((o) => !keep.has(o));
+      if (cmd === 'top') now = [...m, ...others];
+      else if (cmd === 'bottom') now = [...others, ...m];
+      else {
+        const step = cmd === 'up' ? -1 : 1;
+        const idx = (cmd === 'up' ? m : [...m].reverse()).map((o) => now.indexOf(o));
+        for (const i of idx) {
+          const j = i + step;
+          if (j < 0 || j >= now.length || keep.has(now[j])) continue;
+          [now[i], now[j]] = [now[j], now[i]];
+        }
+      }
+    }
+    arrange(now);
+    changed(keep);
+  };
+  ui.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-cmd]');
+    if (b) run(b.dataset.cmd);
+  });
+  avail.addEventListener('dblclick', () => run('move'));
+  chosen.addEventListener('dblclick', () => run('remove'));
+  // the keyboard: Enter moves the marked values across; in the chosen list Alt+arrows order them
+  avail.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      run('move');
+    }
+  });
+  chosen.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === 'Delete') {
+      e.preventDefault();
+      run('remove');
+    } else if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      e.preventDefault();
+      run(e.key === 'ArrowUp' ? (e.shiftKey ? 'top' : 'up') : e.shiftKey ? 'bottom' : 'down');
+    }
+  });
+  // the lists' own change events are not the item's
+  for (const l of [avail, chosen]) l.addEventListener('change', (e) => e.stopPropagation());
+  filter.addEventListener('input', () => draw(new Set(marked(avail))));
+  filter.addEventListener('change', (e) => e.stopPropagation());
+  filter.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') e.preventDefault();
+  });
+  // a dynamic action (Set value, Clear) changed the item
+  sel.addEventListener('change', () => {
+    if (!own) draw();
+  });
+  arrange(picked());
+  draw();
+}
+
+// (140; APEX 24.2: Select One, Select Many) A search field over the item's list of values: typing filters a list
+// box below it (arrow keys, Enter, Escape); Select Many shows the chosen values as chips with a remove button.
+// The item's <select> (single or multiple; it works without JavaScript) stays in the form, hidden, as the value.
+function enhanceSelectPicks(root) {
+  const boxes = root.matches?.('[data-select-pick]') ? [root] : [...(root.querySelectorAll?.('[data-select-pick]') ?? [])];
+  boxes.forEach(selectPick);
+}
+let selectPickSeq = 0;
+document.addEventListener('pgkiln:replaced', (e) => e.detail && enhanceSelectPicks(e.detail));
+enhanceSelectPicks(document);
+function selectPick(box) {
+  const sel = box.querySelector('select');
+  if (!sel || box.dataset.enhanced) return;
+  box.dataset.enhanced = '1';
+  const d = box.dataset;
+  const many = sel.multiple;
+  const id = sel.id;
+  const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.id = `${id}_search`;
+  input.className = 'select-pick-input';
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.placeholder = d.searchLabel || 'Search…';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'false');
+  for (const a of ['aria-describedby', 'aria-invalid', 'aria-required']) if (sel.hasAttribute(a)) input.setAttribute(a, sel.getAttribute(a));
+  const listId = `${id}_listbox_${++selectPickSeq}`;
+  input.setAttribute('aria-controls', listId);
+  const list = document.createElement('ul');
+  list.id = listId;
+  list.className = 'select-pick-list';
+  list.setAttribute('role', 'listbox');
+  if (label) list.setAttribute('aria-label', label.textContent.replace(/\*\s*$/, '').trim());
+  if (many) list.setAttribute('aria-multiselectable', 'true');
+  list.hidden = true;
+  const chips = document.createElement('ul');
+  chips.className = 'tag-list select-pick-chips';
+  const ui = document.createElement('div');
+  ui.className = 'select-pick-ui';
+  if (many) ui.append(chips);
+  ui.append(input, list);
+  sel.hidden = true;
+  box.append(ui);
+  if (label) label.htmlFor = input.id;
+  const status = document.createElement('span');
+  status.className = 'sr-only';
+  status.setAttribute('aria-live', 'polite');
+  ui.append(status);
+
+  let active = -1;
+  let shown = [];
+  const options = () => [...sel.options];
+  const textOf = (o) => o.text;
+  const syncInput = () => {
+    if (!many) input.value = sel.value ? (sel.selectedOptions[0]?.text ?? '') : '';
+  };
+  const drawChips = () => {
+    if (!many) return;
+    chips.replaceChildren(
+      ...[...sel.selectedOptions].map((o) => {
+        const li = document.createElement('li');
+        li.className = 'tag';
+        li.append(o.text);
+        const x = document.createElement('button');
+        x.type = 'button';
+        x.className = 'tag-remove';
+        x.textContent = '×';
+        x.setAttribute('aria-label', (d.removeLabel || 'Remove {value}').replace('{value}', o.text));
+        x.addEventListener('click', () => {
+          o.selected = false;
+          changed();
+          input.focus();
+        });
+        li.append(x);
+        return li;
+      }),
+    );
+  };
+  let own = false;
+  const changed = () => {
+    drawChips();
+    syncInput();
+    if (!list.hidden) draw();
+    own = true;
+    sel.dispatchEvent(new Event('change', { bubbles: true }));
+    own = false;
+  };
+  const setActive = (i) => {
+    active = i;
+    [...list.children].forEach((li, n) => li.classList.toggle('is-active', n === i));
+    const li = list.children[i];
+    if (li && li.id) {
+      input.setAttribute('aria-activedescendant', li.id);
+      li.scrollIntoView?.({ block: 'nearest' });
+    } else input.removeAttribute('aria-activedescendant');
+  };
+  const draw = () => {
+    const q = (many || input.dataset.typed ? input.value : '').trim().toLowerCase();
+    shown = options().filter((o) => (many ? o.value !== '' : true) && (!q || textOf(o).toLowerCase().includes(q)));
+    list.replaceChildren(
+      ...shown.map((o, n) => {
+        const li = document.createElement('li');
+        li.id = `${listId}_${n}`;
+        li.setAttribute('role', 'option');
+        li.setAttribute('aria-selected', String(o.selected && (many || o.value !== '')));
+        li.textContent = textOf(o);
+        li.addEventListener('mousedown', (e) => e.preventDefault()); // keep the focus in the field
+        li.addEventListener('click', () => pick(n));
+        return li;
+      }),
+    );
+    if (!shown.length) {
+      const li = document.createElement('li');
+      li.className = 'select-pick-none';
+      li.textContent = d.noneLabel || 'Nothing found.';
+      list.append(li);
+    }
+    status.textContent = shown.length ? '' : d.noneLabel || 'Nothing found.';
+    setActive(shown.length ? Math.min(Math.max(active, 0), shown.length - 1) : -1);
+  };
+  const open = () => {
+    if (!list.hidden) return;
+    list.hidden = false;
+    input.setAttribute('aria-expanded', 'true');
+    active = many ? 0 : Math.max(0, options().findIndex((o) => o.selected));
+    draw();
+  };
+  const close = () => {
+    list.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    delete input.dataset.typed;
+    if (many) input.value = '';
+    else syncInput();
+  };
+  const pick = (n) => {
+    const o = shown[n];
+    if (!o) return;
+    if (many) {
+      o.selected = !o.selected;
+      input.value = '';
+      active = n;
+      changed();
+    } else {
+      sel.value = o.value;
+      close();
+      changed();
+    }
+  };
+  input.addEventListener('focus', () => {
+    if (!many) input.select?.();
+  });
+  input.addEventListener('click', open);
+  input.addEventListener('input', () => {
+    input.dataset.typed = '1';
+    if (list.hidden) open();
+    active = 0;
+    draw();
+  });
+  input.addEventListener('change', (e) => e.stopPropagation()); // the item's value is the select's
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (list.hidden) return open();
+      if (shown.length) setActive((active + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % shown.length);
+    } else if (e.key === 'Enter') {
+      if (list.hidden) return;
+      e.preventDefault();
+      if (active >= 0) pick(active);
+    } else if (e.key === 'Escape') {
+      if (list.hidden) return;
+      e.preventDefault();
+      close();
+    } else if (e.key === 'Backspace' && many && !input.value && sel.selectedOptions.length) {
+      sel.selectedOptions[sel.selectedOptions.length - 1].selected = false;
+      changed();
+    } else if (e.key === 'Tab') close();
+  });
+  input.addEventListener('blur', () => {
+    if (list.hidden) return;
+    // Select One: a field emptied by the user chooses no value
+    if (!many && input.dataset.typed && !input.value.trim() && [...sel.options].some((o) => o.value === '')) {
+      sel.value = '';
+      close();
+      changed();
+    } else close();
+  });
+  // a dynamic action (Set value, Clear) changed the item
+  sel.addEventListener('change', () => {
+    if (own) return;
+    drawChips();
+    if (document.activeElement !== input) syncInput();
+  });
+  drawChips();
+  syncInput();
+}
+
 // Builder: role suggestions. Clicking a role adds it to the roles field of
 // the same form; in a form with an application select, only that app's
 // suggestions are shown.

package/src/builder/advisor.ts

@@ -15,6 +15,7 @@ import { configColumns, searchConfigProblems, textSearchConfig, tsvectorSql } fr
 import { COMPONENTS } from './components.ts';
 import { DISTANCES, PGVECTOR_MISSING, vectorColumnDims, vectorSchema, type Distance } from '../vector.ts';
 import { appEntries, type Entry } from './search.ts';
+import { LOV_CHECKED } from '../runtime/items.ts';
 import { appHeader, BASE, developer, region, send, shell, type Req } from './ui.ts';
 
 // App Builder → Advisor (APEX: Advisor): checks an application without
@@ -48,7 +49,7 @@ export function sqlFields(kind: string, row: any): { name: string; shape: SqlSha
   switch (kind) {
     case 'region':
       return [
-        ...(['report', 'grid', 'chart', 'cards', 'calendar', 'map', 'tree', 'dynamic'].includes(row.type) && row.source?.trim() && !row.rest_source ? [{ name: 'source', shape: 'select' as const }] : []),
+        ...(['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' },
       ];
     case 'item':
@@ -428,6 +429,9 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
     if (kind === 'region' && row.type === 'grid' && !all.some((x) => x.kind === 'process' && x.row.type === 'grid_dml' && x.row.region_id === row.id))
       missing(e, 'Source', 'No grid_dml process saves this grid, so it is read-only.', 'info');
     if (kind === 'region' && row.type === 'form' && row.pk_item && !items.has(String(row.pk_item).toUpperCase())) missing(e, 'Primary key item', `Item ${row.pk_item} doesn't exist.`);
+    // (140) a list item (select list, radio group, shuttle, select one or many …) shows no choices without a list of values
+    if (kind === 'item' && LOV_CHECKED.has(row.type) && !String(row.lov ?? '').trim())
+      missing(e, 'List of values', `A ${row.type} item needs a list of values: it has no choices, and no value passes the check on submit.`, 'warning');
     // (078) a URL region: a literal origin, valid attributes
     if (kind === 'region' && row.type === 'url') {
       const target = urlTarget(row.source);

package/src/builder/arrange.ts

@@ -45,6 +45,7 @@ export const REGION_LABELS: Record<string, [string, string]> = {
   workflows: ['Workflow Console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static Content', 'region'], dynamic: ['Dynamic Content', 'code'],
   template_component: ['Template Component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'], form_designer: ['Form Designer', 'file'],
   ai_assistant: ['AI Assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'], login: ['Login', 'lock'], plugin: ['Plug-in', 'layers'],
+  classic_report: ['Classic Report', 'table'], breadcrumb: ['Breadcrumb', 'chevron'], help_text: ['Help Text', 'help'],
 };
 export const ITEM_LABELS: Record<string, [string, string]> = {
   text: ['Text Field', 'item'], textarea: ['Text Area', 'item'], number: ['Number Field', 'item'], date: ['Date Picker', 'calendar'],
@@ -53,6 +54,7 @@ export const ITEM_LABELS: Record<string, [string, string]> = {
   email: ['E-mail', 'inbox'], tel: ['Phone Number', 'item'], url: ['URL', 'item'], color: ['Color Picker', 'item'], file: ['File Upload', 'upload'],
   location: ['Location', 'map'], richtext: ['Rich Text Editor', 'edit'], markdown: ['Markdown Editor', 'code'], rating: ['Star Rating', 'check'],
   combobox: ['Combobox (Tags)', 'list'], daterange: ['Date Range', 'calendar'], qrcode: ['QR Code', 'scan'], image: ['Display Image', 'file'], address: ['Geocoded Address', 'map'], hidden: ['Hidden', 'item'], display: ['Display Only', 'file'], password: ['Password', 'key'],
+  shuttle: ['Shuttle', 'arrow-right'], select_one: ['Select One', 'search'], select_many: ['Select Many', 'check'],
 };
 export const BUTTON_LABELS: Record<string, [string, string]> = {
   submit: ['Submit Page', 'button'], redirect: ['Redirect to Page', 'button'], da: ['Dynamic Action', 'bolt'], document: ['Download Document', 'download'],
@@ -212,6 +214,11 @@ export async function createComponent(c: Q, pid: number, kind: LayoutKind, type:
     if (!REGION_TYPES().includes(type)) throw new LayoutError(400, 'Unknown region type.');
     id = (await c.query(`insert into meta.region (page_id, seq, title, type, source) values ($1, 999999, $2, $3, $4) returning id`,
       [pid, `New ${REGION_LABELS[type]?.[0].toLowerCase() ?? type}`, type, NEW_REGION_SOURCE[type] ?? null])).rows[0].id;
+    // (140) a breadcrumb goes in the breadcrumb bar, without a frame of its own (unless it is dropped elsewhere)
+    if (type === 'breadcrumb') {
+      await c.query(`update meta.region set template = 'plain', title = 'Breadcrumb' where id = $1`, [id]);
+      if (!o.position && !o.before) o = { ...o, position: 'breadcrumb' };
+    }
   } else {
     const region = await targetRegion(c, pid, o.region ?? '');
     if (kind === 'item') {

package/src/builder/components.ts

@@ -116,9 +116,9 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'title', common: true, label: 'Title', kind: 'text', group: 'Identification' },
       { name: 'static_id', label: 'Static ID', kind: 'text', group: 'Identification',
         help: 'Optional, unique on the page: lower case letters, digits, _ and -, starting with a letter. Names the region in exported files (so renaming it keeps them) and is data-static-id on the page, for CSS and JavaScript.' },
-      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search', 'classic_report', 'breadcrumb', 'help_text'], group: 'Identification' },
       { name: 'source', common: true, label: 'Source', kind: 'code', wide: true, group: 'Source',
-        help: 'report/grid: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
+        help: 'report/grid/classic_report: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
       { name: 'rest_source', label: 'REST data source', kind: 'rest_source', group: 'Source',
         help: 'Read the rows of a REST data source (Shared Components) instead of a table: the source above is then optional SQL over them, e.g. select * from rest where price > 10. Parameters: {"rest_params": {"city": "&P1_CITY."}} in the attributes.' },
       { name: 'table_name', common: true, label: 'Table (form, grid)', kind: 'text', help: 'e.g. sales.orders', group: 'Source' },
@@ -149,13 +149,13 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     validate: (v) => formatSettingsProblem(v.config),
     fields: [
       { name: 'name', common: true, label: 'Name', kind: 'upper', help: 'Referenced in SQL as :NAME, e.g. P3_NAME', group: 'Identification' },
-      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin'], group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin', 'shuttle', 'select_one', 'select_many'], group: 'Identification' },
       { name: 'label', common: true, label: 'Label', kind: 'text', group: 'Identification' },
       { name: 'region_id', common: true, label: 'Region', kind: 'region', group: 'Layout' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
       { name: 'source_column', common: true, label: 'Source column (form)', kind: 'text', group: 'Source' },
       { name: 'default_value', common: true, label: 'Default value', kind: 'text', group: 'Source' },
-      { name: 'lov', common: true, label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect store values colon-separated: string_to_array(:P1_X, \':\')' },
+      { name: 'lov', common: true, label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect/shuttle/select_many store values colon-separated: string_to_array(:P1_X, \':\')' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: ITEM_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the item (APEX: Template Options).' },
       { name: 'required', common: true, label: 'Value required', kind: 'bool', group: 'Validation' },
@@ -163,7 +163,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'readonly_condition', label: 'Read-only condition (SQL)', kind: 'code', group: 'Security', help: 'When true the item is shown read-only and ignored on submit.' },
       { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
       buildOption('Security'),
-      { name: 'config', label: 'Attributes (JSON)', kind: 'json', group: 'Attributes', help: '{"submit_on_change":true,"null_label":"- All -","cascade_parents":"P3_DEPTNO","wide":true}. {"warn_unsaved":false}: a change of this item doesn\'t count for the page\'s "Warn on unsaved changes". Lists of values read at most {"max_rows":5000} rows. File items: {"filename_column":"photo_name","mime_column":"photo_mime","size_column":"photo_size","updated_column":"photo_updated","accept":"image/*,.pdf","max_mb":2,"capture":"environment","max_px":1600} (capture opens the camera on phones; max_px makes photos smaller before upload). {"crop":"1:1"} lets the user crop a picture before upload (free, 1:1, 4:3, 3:4, 16:9, 3:2, 2:3). Several files: {"multiple":true,"max_files":5,"table":"doc.attachment","parent_column":"ticket_id","key_column":"id"} with the content column as source (one row per file). Text items: {"scan":true} adds a barcode/QR scan button where the browser can read codes. Location items hold "lat,lng" with a "Use my location" button. Rich text: sanitised HTML; markdown: Markdown text ({"rows":10}). Rating: {"max":5} stars, stored as 1..max. Combobox: free text with list-of-values suggestions, values colon-separated ({"multiple":false} for one value). Date range: "from:to" (ISO dates; split_part(:P1_X, \':\', 1)). QR code: shows the value as a QR code ({"ecc":"M","size":200,"show_value":true}). Password: {"reveal":true} adds a show/hide button. Image (display image): the value is an https URL, a path or a data:image URL; or {"sql":"select photo, photo_mime from hr.emp where id = :P3_ID"} shows the first column of the first row (a BLOB); {"alt":"Photo of &P3_NAME.","width":160,"height":160}. Address: {"coordinates_item":"P3_LOCATION","country":"nl"} (a "Check address" button where the installation has a geocoder, GEOCODER_URL; the chosen address\'s position goes into the item as "lat,lng"). Any item: {"persist":"user"} keeps its value per user across sessions (a user preference named like the item). Number and display items: {"format_mask":"999G999G990D00"} shows the number in the language\'s notation (FML999G990D00 adds the currency) and reads it back on submit. · plugin: {"plugin":"name","attributes":{"NAME":"value"}} (an item plug-in: a text field its JavaScript enhances)' },
+      { name: 'config', label: 'Attributes (JSON)', kind: 'json', group: 'Attributes', help: '{"submit_on_change":true,"null_label":"- All -","cascade_parents":"P3_DEPTNO","wide":true}. {"warn_unsaved":false}: a change of this item doesn\'t count for the page\'s "Warn on unsaved changes". Lists of values read at most {"max_rows":5000} rows. File items: {"filename_column":"photo_name","mime_column":"photo_mime","size_column":"photo_size","updated_column":"photo_updated","accept":"image/*,.pdf","max_mb":2,"capture":"environment","max_px":1600} (capture opens the camera on phones; max_px makes photos smaller before upload). {"crop":"1:1"} lets the user crop a picture before upload (free, 1:1, 4:3, 3:4, 16:9, 3:2, 2:3). Several files: {"multiple":true,"max_files":5,"table":"doc.attachment","parent_column":"ticket_id","key_column":"id"} with the content column as source (one row per file). Text items: {"scan":true} adds a barcode/QR scan button where the browser can read codes. Location items hold "lat,lng" with a "Use my location" button. Rich text: sanitised HTML; markdown: Markdown text ({"rows":10}). Rating: {"max":5} stars, stored as 1..max. Combobox: free text with list-of-values suggestions, values colon-separated ({"multiple":false} for one value). Shuttle: two lists (available, chosen) with move and order buttons; the chosen values colon-separated in their order. Select One / Select Many: a search field over the list of values (Select Many: chosen values as chips, colon-separated); {"null_label":"- None -"} or false for Select One. Date range: "from:to" (ISO dates; split_part(:P1_X, \':\', 1)). QR code: shows the value as a QR code ({"ecc":"M","size":200,"show_value":true}). Password: {"reveal":true} adds a show/hide button. Image (display image): the value is an https URL, a path or a data:image URL; or {"sql":"select photo, photo_mime from hr.emp where id = :P3_ID"} shows the first column of the first row (a BLOB); {"alt":"Photo of &P3_NAME.","width":160,"height":160}. Address: {"coordinates_item":"P3_LOCATION","country":"nl"} (a "Check address" button where the installation has a geocoder, GEOCODER_URL; the chosen address\'s position goes into the item as "lat,lng"). Any item: {"persist":"user"} keeps its value per user across sessions (a user preference named like the item). Number and display items: {"format_mask":"999G999G990D00"} shows the number in the language\'s notation (FML999G990D00 adds the currency) and reads it back on submit. · plugin: {"plugin":"name","attributes":{"NAME":"value"}} (an item plug-in: a text field its JavaScript enhances)' },
     ],
   },
   button: {

package/src/builder/designer.ts

@@ -404,6 +404,11 @@ export async function designerRoutes(app: FastifyInstance) {
             ${select('build_option', 'Build option', p.build_option ?? '', buildOptionChoices(lk, p.build_option),
               'While the option is excluded (or "Not": included) the page does not exist in the running application.')}
           </div></fieldset>
+          <fieldset class="prop-group"><legend>Help</legend><div class="form-grid">
+            <div class="field" data-wide><label class="label" for="f_help">Help text</label>
+              <textarea id="f_help" name="help" rows="5" maxlength="20000">${p.help ?? ''}</textarea>
+              <small class="help">Markdown with &amp;ITEM. substitutions. A region of type Help Text on the page shows it (APEX: Page → Help).</small></div>
+          </div></fieldset>
           <div class="buttons"><button class="btn btn-hot">${tx('pd.save_page')}</button></div>
         </form>`, true)])}
         ${await usedInPanel(p.app_id, 'page', p)}
@@ -505,9 +510,10 @@ export async function designerRoutes(app: FastifyInstance) {
       const before = await owner.one('select app_id, page_no from meta.page where id = $1', [req.params.pid]);
       await owner.query(
         `update meta.page set page_no = $2, name = $3, title = $4, requires_auth = $5, mode = $6, parent_page = $7, authz = $8, protection = $9, build_option = $10,
-                dialog_position = $11, dialog_size = $12, static_includes = $13, warn_unsaved = $14, page_template = $15, page_group = $16 where id = $1`,
+                dialog_position = $11, dialog_size = $12, static_includes = $13, warn_unsaved = $14, page_template = $15, page_group = $16, help = $17 where id = $1`,
         [req.params.pid, Number(b.page_no), b.name?.trim(), b.title?.trim() || null, b.requires_auth === 'true', b.mode, b.parent_page ? Number(b.parent_page) : null, b.authz || null, b.protection, b.build_option?.trim().toUpperCase() || null,
-         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true', ['minimal', 'left_side_column', 'right_side_column'].includes(b.page_template ?? '') ? b.page_template : 'standard', b.page_group?.trim() || null],
+         ['left', 'right', 'top', 'bottom'].includes(b.dialog_position ?? '') ? b.dialog_position : 'center', ['small', 'large'].includes(b.dialog_size ?? '') ? b.dialog_size : 'medium', parseIncludes(b.static_includes), b.warn_unsaved === 'true', ['minimal', 'left_side_column', 'right_side_column'].includes(b.page_template ?? '') ? b.page_template : 'standard', b.page_group?.trim() || null,
+         typeof b.help === 'string' && b.help.trim() ? b.help.replace(/\r\n?/g, '\n').trim().slice(0, 20000) : null],
       );
       // the page's lock and comments follow a new page number
       if (before && before.page_no !== Number(b.page_no))

package/src/builder/i18n/de.ts

@@ -552,6 +552,9 @@ export const de: BuilderMessages = {
   'gallery.region.search': 'Suche',
   'gallery.region.login': 'Anmeldung',
   'gallery.region.plugin': 'Plug-in',
+  'gallery.region.classic_report': 'Klassischer Bericht',
+  'gallery.region.breadcrumb': 'Navigationspfad',
+  'gallery.region.help_text': 'Hilfetext',
   'gallery.item.text': 'Textfeld',
   'gallery.item.textarea': 'Textbereich',
   'gallery.item.number': 'Zahlenfeld',
@@ -582,6 +585,9 @@ export const de: BuilderMessages = {
   'gallery.item.display': 'Nur anzeigen',
   'gallery.item.password': 'Kennwort',
   'gallery.item.plugin': 'Plug-in',
+  'gallery.item.shuttle': 'Shuttle',
+  'gallery.item.select_one': 'Einzelauswahl (Suche)',
+  'gallery.item.select_many': 'Mehrfachauswahl (Suche)',
   'gallery.button.submit': 'Seite weiterleiten',
   'gallery.button.redirect': 'Zu Seite umleiten',
   'gallery.button.da': 'Dynamische Aktion',

package/src/builder/i18n/en.ts

@@ -555,6 +555,9 @@ export const en = {
   'gallery.region.search': 'Search',
   'gallery.region.login': 'Login',
   'gallery.region.plugin': 'Plug-in',
+  'gallery.region.classic_report': 'Classic Report',
+  'gallery.region.breadcrumb': 'Breadcrumb',
+  'gallery.region.help_text': 'Help Text',
   'gallery.item.text': 'Text Field',
   'gallery.item.textarea': 'Text Area',
   'gallery.item.number': 'Number Field',
@@ -585,6 +588,9 @@ export const en = {
   'gallery.item.display': 'Display Only',
   'gallery.item.password': 'Password',
   'gallery.item.plugin': 'Plug-in',
+  'gallery.item.shuttle': 'Shuttle',
+  'gallery.item.select_one': 'Select One',
+  'gallery.item.select_many': 'Select Many',
   'gallery.button.submit': 'Submit Page',
   'gallery.button.redirect': 'Redirect to Page',
   'gallery.button.da': 'Dynamic Action',