pgkiln 0.72.0 → 0.73.0

package/src/i18n/uk.ts

@@ -424,6 +424,19 @@ export const uk: Record<MessageKey, string> = {
   'lov.loading': "Завантаження…",
   'da.wait': "Зачекайте…",
   'lov.no_rows': "Нічого не знайдено.",
+  'shuttle.available': "Доступні",
+  'shuttle.chosen': "Вибрані",
+  'shuttle.move': "Перемістити",
+  'shuttle.move_all': "Перемістити всі",
+  'shuttle.remove': "Прибрати",
+  'shuttle.remove_all': "Прибрати всі",
+  'shuttle.up': "Вгору",
+  'shuttle.down': "Вниз",
+  'shuttle.top': "На початок",
+  'shuttle.bottom': "У кінець",
+  'shuttle.filter': "Фільтр",
+  'region.breadcrumb': "Навігаційний ланцюжок",
+  'region.no_help': "Для цієї сторінки немає довідки.",
   'search.did_you_mean': "Можливо, ви мали на увазі:",
   'error.lov_value': "{label}: виберіть значення зі списку.",
   'item.yes': "Так",

package/src/i18n/zh.ts

@@ -424,6 +424,19 @@ export const zh: Record<MessageKey, string> = {
   'lov.loading': "正在加载更多…",
   'da.wait': "请稍候…",
   'lov.no_rows': "未找到任何内容。",
+  'shuttle.available': "可选",
+  'shuttle.chosen': "已选",
+  'shuttle.move': "移入",
+  'shuttle.move_all': "全部移入",
+  'shuttle.remove': "移除",
+  'shuttle.remove_all': "全部移除",
+  'shuttle.up': "上移",
+  'shuttle.down': "下移",
+  'shuttle.top': "移到顶部",
+  'shuttle.bottom': "移到底部",
+  'shuttle.filter': "筛选",
+  'region.breadcrumb': "面包屑导航",
+  'region.no_help': "此页面没有帮助信息。",
   'search.did_you_mean': "您是不是要找：",
   'error.lov_value': "{label}：请从列表中选择一个值。",
   'item.yes': "是",

package/src/i18n.ts

@@ -451,6 +451,19 @@ const en = {
   'lov.loading': 'Loading more…',
   'da.wait': 'Please wait…',
   'lov.no_rows': 'Nothing found.',
+  'shuttle.available': 'Available',
+  'shuttle.chosen': 'Selected',
+  'shuttle.move': 'Move',
+  'shuttle.move_all': 'Move all',
+  'shuttle.remove': 'Remove',
+  'shuttle.remove_all': 'Remove all',
+  'shuttle.up': 'Move up',
+  'shuttle.down': 'Move down',
+  'shuttle.top': 'Move to top',
+  'shuttle.bottom': 'Move to bottom',
+  'shuttle.filter': 'Filter',
+  'region.breadcrumb': 'Breadcrumb',
+  'region.no_help': 'No help is available for this page.',
   'search.did_you_mean': 'Did you mean:',
   'error.lov_value': '{label}: choose a value from the list.',
   'item.yes': 'Yes',
@@ -1319,6 +1332,19 @@ const nl: Record<MessageKey, string> = {
   'lov.loading': 'Meer laden…',
   'da.wait': 'Even geduld…',
   'lov.no_rows': 'Niets gevonden.',
+  'shuttle.available': 'Beschikbaar',
+  'shuttle.chosen': 'Gekozen',
+  'shuttle.move': 'Verplaatsen',
+  'shuttle.move_all': 'Alles verplaatsen',
+  'shuttle.remove': 'Verwijderen',
+  'shuttle.remove_all': 'Alles verwijderen',
+  'shuttle.up': 'Omhoog',
+  'shuttle.down': 'Omlaag',
+  'shuttle.top': 'Bovenaan',
+  'shuttle.bottom': 'Onderaan',
+  'shuttle.filter': 'Filteren',
+  'region.breadcrumb': 'Kruimelpad',
+  'region.no_help': 'Er is geen help voor deze pagina.',
   'search.did_you_mean': 'Bedoelde u:',
   'error.lov_value': '{label}: kies een waarde uit de lijst.',
   'item.yes': 'Ja',

package/src/metadata.ts

@@ -159,7 +159,7 @@ export interface Region {
   title: string | null;
   /** (0.31, 073) optional, unique on the page */
   static_id?: string | null;
-  type: 'login' | 'report' | 'form' | 'chart' | 'cards' | 'static' | 'grid' | 'calendar' | 'dynamic' | 'facets' | 'tasks' | 'workflows' | 'map' | 'tree' | 'template_component' | 'smart_filters' | 'display_selector' | 'list' | 'data_reporter' | 'ai_assistant' | 'plugin' | 'url' | 'search' | 'form_designer';
+  type: 'login' | 'report' | 'form' | 'chart' | 'cards' | 'static' | 'grid' | 'calendar' | 'dynamic' | 'facets' | 'tasks' | 'workflows' | 'map' | 'tree' | 'template_component' | 'smart_filters' | 'display_selector' | 'list' | 'data_reporter' | 'ai_assistant' | 'plugin' | 'url' | 'search' | 'form_designer' | 'classic_report' | 'breadcrumb' | 'help_text';
   source: string | null;
   table_name: string | null;
   pk_column: string | null;
@@ -182,6 +182,7 @@ export type ItemType =
   | 'checkbox' | 'switch' | 'hidden' | 'display' | 'password'
   | 'checkbox_group' | 'multiselect' | 'popup_lov' | 'email' | 'tel' | 'url' | 'color' | 'file' | 'location'
   | 'richtext' | 'markdown' | 'rating' | 'combobox' | 'daterange' | 'qrcode' | 'plugin'
+  | 'shuttle' | 'select_one' | 'select_many'
   // (086) display image, geocoded address
   | 'image' | 'address';
 
@@ -363,6 +364,8 @@ export interface Page extends PageSummary {
   warn_unsaved: boolean;
   /** (087) 'minimal': no header and navigation */
   page_template: 'standard' | 'minimal' | 'left_side_column' | 'right_side_column';
+  /** (140) the page's help text (Markdown), shown by a help_text region */
+  help: string | null;
 }
 
 /** The static files a list of names refers to, in that order, with their version. */
@@ -406,7 +409,7 @@ export async function loadApp(alias: string) {
 export async function loadPage(appId: number, pageNo: number) {
   return runtime.one<Page>(
     `select p.id, p.app_id, p.page_no, p.name, p.title, p.requires_auth, p.parent_page, p.mode,
-            p.protection, p.authz, p.warn_unsaved, p.page_template,
+            p.protection, p.authz, p.warn_unsaved, p.page_template, p.help,
             ${agg('meta.region', 'page_id', 'p', 'p.app_id')} as regions,
             ${agg('meta.item', 'page_id', 'p', 'p.app_id')} as items,
             ${agg('meta.button', 'page_id', 'p', 'p.app_id')} as buttons,

package/src/runtime/items.ts

@@ -159,7 +159,7 @@ export async function lovContains(ctx: PageContext, lov: string | null, values:
 }
 
 /** Item types whose posted value must come from their list of values (a combobox takes free text by design). */
-export const LOV_CHECKED = new Set(['select', 'radio', 'checkbox_group', 'multiselect', 'popup_lov']);
+export const LOV_CHECKED = new Set(['select', 'radio', 'checkbox_group', 'multiselect', 'popup_lov', 'shuttle', 'select_one', 'select_many']);
 
 /** Rows a list of values reads when its item sets no config.max_rows (1 to 50,000). */
 export const LOV_MAX_ROWS = 5000;
@@ -168,9 +168,10 @@ export const lovMax = (item: Item, settings?: ComponentSettings) => {
   return Number.isFinite(n) && n >= 1 ? Math.min(n, 50_000) : settings ? componentSetting(settings, 'lov_max_rows') : LOV_MAX_ROWS;
 };
 
-const LOV_TYPES = new Set(['select', 'radio', 'checkbox_group', 'multiselect', 'popup_lov', 'combobox']);
+/** Item types that show a list of values (the Page Designer's "List of values"). */
+export const LOV_TYPES = new Set(['select', 'radio', 'checkbox_group', 'multiselect', 'popup_lov', 'combobox', 'shuttle', 'select_one', 'select_many']);
 const hasLov = (item: Item) => LOV_TYPES.has(item.type) || (item.type === 'display' && !!item.lov);
-export const MULTI_VALUE = new Set(['checkbox_group', 'multiselect']);
+export const MULTI_VALUE = new Set(['checkbox_group', 'multiselect', 'shuttle', 'select_many']);
 /** Multi-value items store their values colon-separated, as in APEX. */
 export const splitValues = (v: string) => (v ? v.split(':') : []);
 
@@ -324,6 +325,34 @@ export async function renderItem(ctx: PageContext, item: Item, hiddenByDa = fals
         </select>`;
         break;
       }
+      case 'shuttle': {
+        // (140; APEX: Shuttle) a <select multiple> that works without JavaScript; app.js turns it into two lists
+        // (available, chosen) with move and order buttons. The chosen values keep their order: they come first.
+        const chosen = splitValues(value);
+        const set = new Set(chosen);
+        const indexed = options.map((o, i) => ({ ...o, i }));
+        const ordered = [...chosen.flatMap((v) => indexed.filter((o) => o.value === v).slice(0, 1)), ...indexed.filter((o) => !set.has(o.value))];
+        const t = ctx.locale.t;
+        control = html`<div class="shuttle" data-shuttle="${id}" data-filter-label="${t('shuttle.filter')}" data-available-label="${t('shuttle.available')}" data-chosen-label="${t('shuttle.chosen')}" data-move-label="${t('shuttle.move')}" data-move-all-label="${t('shuttle.move_all')}" data-remove-label="${t('shuttle.remove')}" data-remove-all-label="${t('shuttle.remove_all')}" data-up-label="${t('shuttle.up')}" data-down-label="${t('shuttle.down')}" data-top-label="${t('shuttle.top')}" data-bottom-label="${t('shuttle.bottom')}">
+          <select id="${id}" name="${id}" multiple size="${Math.min(Math.max(options.length, 4), 10)}"${aria}>
+          ${ordered.map((o) => html`<option value="${o.value}" data-i="${o.i}"${set.has(o.value) ? raw(' selected') : ''}>${o.display}</option>`)}
+          </select></div>`;
+        break;
+      }
+      case 'select_one':
+      case 'select_many': {
+        // (140; APEX 24.2: Select One, Select Many) a <select> (or <select multiple>) that works without JavaScript;
+        // app.js adds a search field with a list box that filters the options as one types, and chips for the chosen values
+        const many = item.type === 'select_many';
+        const chosen = new Set(many ? splitValues(value) : value ? [value] : []);
+        const t = ctx.locale.t;
+        control = html`<div class="select-pick" data-select-pick="${many ? 'many' : 'one'}" data-search-label="${t('lov.search')}" data-none-label="${t('lov.no_rows')}" data-remove-label="${t('item.tag_remove')}">
+          <select id="${id}" name="${id}"${many ? html` multiple size="${Math.min(Math.max(options.length, 3), 8)}"` : ''}${aria}>
+          ${many || item.config?.null_label === false ? '' : html`<option value="">${item.config?.null_label ?? t('lov.none')}</option>`}
+          ${options.map((o) => html`<option value="${o.value}"${chosen.has(o.value) ? raw(' selected') : ''}>${o.display}</option>`)}
+          </select></div>`;
+        break;
+      }
       case 'popup_lov': {
         // a select list (the LOV's first max_rows rows) that works without JavaScript; app.js
         // turns it into a field with a button that searches the whole LOV on the server

package/src/runtime/page-regions.ts

@@ -0,0 +1,50 @@
+// (140) Two region types about the page itself: breadcrumb (APEX: Breadcrumb) shows the page's
+// breadcrumb trail, the pages above it by "Breadcrumb parent" (else Home), and help_text (APEX: Help
+// Text) shows the page's help text. The page's title bar shows the trail too, unless the page has a
+// breadcrumb region of its own.
+
+import { html, raw, type Raw } from '../html.ts';
+import type { Region } from '../metadata.ts';
+import { markdownHtml } from '../richtext.ts';
+import { pageAllowed } from './authz.ts';
+import { substitute, type PageContext } from './context.ts';
+import { expandShortcuts } from './shortcuts.ts';
+
+/** The pages above the current one (at most six), as links the user may follow. */
+export async function breadcrumbLinks(ctx: PageContext): Promise<Raw[]> {
+  const trail: { page_no: number; name: string }[] = [];
+  let p = ctx.app.pages.find((x) => x.page_no === ctx.page.parent_page);
+  for (let guard = 0; p && guard < 6; guard++) {
+    trail.unshift(p);
+    p = ctx.app.pages.find((x) => x.page_no === p!.parent_page);
+  }
+  if (!trail.length && ctx.page.page_no !== ctx.app.home_page) {
+    const home = ctx.app.pages.find((x) => x.page_no === ctx.app.home_page);
+    if (home) trail.push(home);
+  }
+  const links = [];
+  for (const t of trail) if (await pageAllowed(ctx, t.page_no)) links.push(html`<li><a href="${ctx.base}/${t.page_no}">${t.name}</a></li>`);
+  return links;
+}
+
+/** Whether the page shows a breadcrumb region (then its title bar leaves the trail out). */
+export const hasBreadcrumbRegion = (ctx: PageContext) => ctx.page.regions.some((r) => r.type === 'breadcrumb' && ctx.vis?.regions.has(r.id));
+
+/** A breadcrumb region: the trail and ({"current": false} leaves it out) the current page. */
+export async function renderBreadcrumbRegion(ctx: PageContext, r: Region): Promise<Raw> {
+  const links = await breadcrumbLinks(ctx);
+  const title = substitute(ctx.page.title ?? ctx.page.name, ctx, (v) => v);
+  const current = r.config?.current === false ? '' : html`<li><span aria-current="page">${title}</span></li>`;
+  return html`<nav class="region-crumbs" aria-label="${r.title || ctx.locale.t('region.breadcrumb')}"><ol class="crumbs">${links}${current}</ol></nav>`;
+}
+
+/** Markdown's punctuation, escaped in item values put into a help text (they stay text). */
+const mdEscape = (v: string) => v.replace(/[\\`*_{}[\]()#+\-.!~>|]/g, '\\$&');
+
+/** A help text region: the page's help text (Markdown with &ITEM. substitutions), else {"empty": "…"} or "No help…". */
+export async function renderHelpTextRegion(ctx: PageContext, r: Region): Promise<Raw> {
+  const help = ctx.page.help?.trim();
+  if (!help) return html`<p class="muted help-text-none">${typeof r.config?.empty === 'string' ? r.config.empty : ctx.locale.t('region.no_help')}</p>`;
+  const text = substitute(await expandShortcuts(ctx, help, 'text'), ctx, mdEscape);
+  return html`<div class="help-text rich-text">${raw(markdownHtml(text))}</div>`;
+}

package/src/runtime/region-cache.ts

@@ -23,7 +23,7 @@ import { bindValues, type PageContext } from './context.ts';
 // the placeholder is a link that renders the page with the region (r<id>_load=1).
 
 /** Region types that can be cached or loaded lazily (no form state of their own). */
-export const DEFERRABLE = new Set<Region['type']>(['report', 'chart', 'cards', 'dynamic', 'tree', 'template_component']);
+export const DEFERRABLE = new Set<Region['type']>(['report', 'classic_report', 'chart', 'cards', 'dynamic', 'tree', 'template_component']);
 
 export interface CacheSetting {
   scope: 'user' | 'session' | 'all';

package/src/runtime/regions.ts

@@ -37,6 +37,7 @@ import { renderPluginRegion } from './plugins.ts';
 import { renderUrlRegion } from './url-region.ts';
 import { renderSearch } from './search.ts';
 import { renderLoginRegion } from './signin.ts';
+import { renderBreadcrumbRegion, renderHelpTextRegion } from './page-regions.ts';
 
 // ---------------------------------------------------------------- buttons
 
@@ -335,6 +336,16 @@ async function renderBody(ctx: PageContext, r: Region, hidden: Set<string>): Pro
     case 'report':
       body = html`${await renderAiFilter(ctx, r)}${await renderReport(ctx, r, await renderItems(ctx, items, hidden))}`;
       break;
+    case 'classic_report':
+      // (140) the report renderer without the interactive features (report.ts: classic)
+      body = await renderReport(ctx, r, await renderItems(ctx, items, hidden));
+      break;
+    case 'breadcrumb':
+      body = await renderBreadcrumbRegion(ctx, r);
+      break;
+    case 'help_text':
+      body = await renderHelpTextRegion(ctx, r);
+      break;
     case 'form':
       body = html`<div class="form-grid">${await renderItems(ctx, items, hidden)}</div>`;
       break;

package/src/runtime/render.ts

@@ -20,6 +20,7 @@ import { buttonsFor, renderRegion } from './regions.ts';
 import { listTree, navbarMarkup, navMarkup } from './lists.ts';
 import { aiInputs, aiOutputs, aiProcessOf } from './ai.ts';
 import { frameOrigins } from './url-region.ts';
+import { breadcrumbLinks, hasBreadcrumbRegion } from './page-regions.ts';
 import { devbarHtml } from './devbar.ts';
 import { feedbackNode } from './feedback.ts';
 import { sessionLimits } from '../session.ts';
@@ -121,22 +122,6 @@ async function navTree(ctx: PageContext, topNav = false) {
   return render(null);
 }
 
-async function breadcrumb(ctx: PageContext) {
-  const trail: { page_no: number; name: string }[] = [];
-  let p = ctx.app.pages.find((x) => x.page_no === ctx.page.parent_page);
-  for (let guard = 0; p && guard < 6; guard++) {
-    trail.unshift(p);
-    p = ctx.app.pages.find((x) => x.page_no === p!.parent_page);
-  }
-  if (!trail.length && ctx.page.page_no !== ctx.app.home_page) {
-    const home = ctx.app.pages.find((x) => x.page_no === ctx.app.home_page);
-    if (home) trail.push(home);
-  }
-  const links = [];
-  for (const t of trail) if (await pageAllowed(ctx, t.page_no)) links.push(html`<li><a href="${ctx.base}/${t.page_no}">${t.name}</a></li>`);
-  return links;
-}
-
 // ---------------------------------------------------------------- theme
 
 /** Per-app colours (Theme Roller) and the style variant in use. Only checked values reach the CSS (styles.ts). */
@@ -392,7 +377,8 @@ export async function renderPage(ctx: PageContext) {
   // (078) the origins of the page's URL regions (also those a refresh or lazy load shows later)
   for (const o of frameOrigins(ctx.page.regions.filter((r) => ctx.vis!.regions.has(r.id)))) ctx.frameSrc?.add(o);
   const title = substitute(ctx.page.title ?? ctx.page.name, ctx, (v) => v);
-  const crumbs = ctx.dialog ? [] : await breadcrumb(ctx);
+  // (140) a page with a breadcrumb region shows the trail there instead
+  const crumbs = ctx.dialog || hasBreadcrumbRegion(ctx) ? [] : await breadcrumbLinks(ctx);
   const das = dynamicActionsJson(ctx);
 
   const main = html`

package/src/runtime/report.ts

@@ -239,7 +239,10 @@ export function selectionOf(page: { items: { name: string }[] }, r: Region) {
 
 export function reportState(ctx: PageContext, r: Region): ReportState {
   const p = ctx.params;
-  const size = parseInt(p.get(key(r, 'n')) ?? '', 10) || Number(r.config.page_size) || componentSetting(ctx.app.component_settings, 'report_rows');
+  // (140) a classic report: no rows-per-page choice; "pagination": "none" shows its rows on one page
+  const classic = r.type === 'classic_report';
+  const size = classic && r.config.pagination === 'none' ? Math.min(maxRows(r, 500) ?? 500, 500)
+    : (!classic && parseInt(p.get(key(r, 'n')) ?? '', 10)) || Number(r.config.page_size) || componentSetting(ctx.app.component_settings, 'report_rows');
   const st: ReportState = {
     search: (p.get(key(r, 'q')) ?? '').trim(),
     searchCol: (p.get(key(r, 'qc')) ?? '').trim() || null,
@@ -288,6 +291,13 @@ export function reportState(ctx: PageContext, r: Region): ReportState {
     seek: null as Seek | null,
   };
   st.seek = parseSeek(ctx, r, st);
+  // (140) a classic report has none of an interactive report's settings: sorting, paging and (when searchable) the search only
+  if (classic) {
+    Object.assign(st, { searchCol: null, hideCols: [], filters: [], breakCol: null, aggregates: [], highlights: [], computations: [], view: 'report',
+      groupBy: { columns: [], functions: [] }, pivot: null, chart: null, area: null, near: null });
+    if (r.config.searchable !== true) st.search = '';
+    if (r.config.pagination === 'none') st.page = 1;
+  }
   return st;
 }
 
@@ -814,8 +824,10 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
   const t = ctx.locale.t;
   const c = ctx.client!;
   const st = reportState(ctx, r);
-  const searchable = r.config.searchable !== false;
-  const interactive = r.config.interactive !== false && searchable;
+  // (140; APEX: Classic Report) no Actions menu, column menus or saved reports; a search field only with {"searchable": true}
+  const classic = r.type === 'classic_report';
+  const searchable = classic ? r.config.searchable === true : r.config.searchable !== false;
+  const interactive = !classic && r.config.interactive !== false && searchable;
   // (sprint 78; APEX: a faceted search's results have no search bar) one search field: the facets'
   const searchBox = !ctx.page.regions.some((x) => x.type === 'facets' && x.config.search === true && Number(x.config.report) === r.id && ctx.vis?.regions.has(x.id) !== false);
 
@@ -1193,6 +1205,17 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
     ? html`<p class="sel-count muted" data-sel-count="${r.id}" aria-live="polite">${selected.size ? t('report.selected_count', { n: selected.size }) : ''}</p>
       ${elsewhere.map((v) => html`<input type="hidden" name="${selection!.item}" value="${v}" data-sel-other>`)}`
     : '';
+  if (classic) {
+    const pager = r.config.pagination === 'none'
+      ? (info.more ? html`<p class="region-limit">${t('region.first_rows', { n: st.size })}</p>` : '')
+      : info.more || info.page > 1 || searchable ? pagerNav(ctx, r, info) : '';
+    const shaped = classicTemplate(ctx, r, cols, info.rows, fmtOf, linkIdx >= 0 ? (row) => linkAttrs(ctx, link!.page, rowItems(row)) : null);
+    if (shaped) return html`${toolbar}${shaped}${pager}`;
+    return html`${toolbar}<div class="table-wrap"><table class="report report-classic${r.config.mobile === 'scroll' ? '' : ' report-reflow'}">
+      <thead><tr>${header}</tr></thead>
+      <tbody>${body.length ? body : html`<tr><td colspan="${cols.length + lead || 1}" class="empty">${empty}</td></tr>`}</tbody>
+    </table></div>${pager}`;
+  }
   return html`${toolbar}${switcher}${errors}${selectionNote}
     <div class="table-wrap"><table class="report${r.config.mobile === 'scroll' ? '' : ' report-reflow'}"${selIdx >= 0 ? raw(` data-sel-region="${r.id}"`) : ''}>
       <thead><tr>${header}</tr></thead>
@@ -1201,3 +1224,32 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
     </table></div>
     ${info.more || info.page > 1 || searchable ? pagerNav(ctx, r, info) : ''}`;
 }
+
+/** (140) A classic report's templates besides the table ({"report_template": …}). */
+export const CLASSIC_TEMPLATES = ['standard', 'value_pairs', 'badges', 'media_list'] as const;
+
+/**
+ * (140; APEX: the classic report templates Value Attribute Pairs, Badge List and Media List) The rows in another shape
+ * than a table; null for the table ("standard"). value_pairs: each row as headings and values; badges: the first column
+ * as the label and the second as the value; media_list: a title (column title, else the first) and a text (column
+ * description, text or body, else the second), the title a link when the report has one.
+ */
+function classicTemplate(ctx: PageContext, r: Region, cols: { f: pg.FieldDef; i: number }[], rows: unknown[][], fmtOf: (name: string) => Formatter,
+  linkOf: ((row: unknown[]) => Raw) | null): Raw | null {
+  const tpl = r.config.report_template;
+  if (!tpl || tpl === 'standard' || !(CLASSIC_TEMPLATES as readonly string[]).includes(tpl)) return null;
+  const text = (row: unknown[], c: { f: pg.FieldDef; i: number } | undefined) => (c ? cell(row[c.i], c.f.dataTypeID, fmtOf(c.f.name)) : '');
+  if (!rows.length) return html`<p class="empty">${r.config.empty ?? ctx.locale.t('report.no_data')}</p>`;
+  if (tpl === 'value_pairs')
+    return html`<div class="cr-pairs">${rows.map((row) => html`<dl>${cols.map((c) => html`<dt>${headingOf(r, c.f.name, ctx.locale.tr)}</dt><dd>${text(row, c)}</dd>`)}</dl>`)}</div>`;
+  if (tpl === 'badges')
+    return html`<ul class="cr-badges">${rows.map((row) => {
+      const inner = html`<span class="cr-badge-value">${text(row, cols[1] ?? cols[0])}</span><span class="cr-badge-label">${cols[1] ? text(row, cols[0]) : ''}</span>`;
+      return html`<li>${linkOf ? html`<a ${linkOf(row)}>${inner}</a>` : inner}</li>`;
+    })}</ul>`;
+  const named = (...names: string[]) => cols.find((c) => names.includes(c.f.name.toLowerCase()));
+  const titleCol = named('title') ?? cols[0];
+  const textCol = named('description', 'text', 'body') ?? cols.find((c) => c !== titleCol);
+  return html`<ul class="cr-media">${rows.map((row) => html`<li><div class="cr-media-title">${linkOf ? html`<a ${linkOf(row)}>${text(row, titleCol)}</a>` : text(row, titleCol)}</div>${
+    textCol ? html`<p class="cr-media-text">${text(row, textCol)}</p>` : ''}</li>`)}</ul>`;
+}