@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/src/components/CnInteractionFormWidget/CnInteractionFormWidget.vue

@@ -183,7 +183,7 @@ export default {
 		/** Channel options `{ value, label }`. */
 		channelOptions() {
 			return Array.isArray(this.content.channels) && this.content.channels.length > 0
-				? this.content.channels
+				? this.content.channels.map((channel) => ({ ...channel, label: this.copy(channel && channel.label) }))
 				: [
 						{ value: 'telefoon', label: t('nextcloud-vue', 'Phone') },
 						{ value: 'email', label: t('nextcloud-vue', 'Email') },
@@ -204,10 +204,11 @@ export default {
 			const prop = properties[this.content.outcomeField || 'outcome']
 			if (prop && Array.isArray(prop.enum) && prop.enum.length > 0) {
 				const labels = prop['x-enum-labels'] || prop.enumLabels || {}
-				const tr = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
-				return prop.enum.map((value) => ({ value, label: tr(labels[value] || String(value)) }))
+				return prop.enum.map((value) => ({ value, label: this.copy(labels[value] || String(value)) }))
 			}
-			return Array.isArray(this.content.outcomes) ? this.content.outcomes : []
+			return Array.isArray(this.content.outcomes)
+				? this.content.outcomes.map((outcome) => ({ ...outcome, label: this.copy(outcome && outcome.label) }))
+				: []
 		},
 
 		/**
@@ -280,8 +281,7 @@ export default {
 		// `content.submitLabel` names what the form creates, e.g. "Save contact moment".
 		registerLabel() {
 			if (this.content.submitLabel) {
-				const tr = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
-				return tr(this.content.submitLabel)
+				return this.copy(this.content.submitLabel)
 			}
 			return t('nextcloud-vue', 'Register')
 		},
@@ -359,6 +359,29 @@ export default {
 		},
 
 		/** The default channel value (first configured channel, else `telefoon`). */
+		/**
+		 * A label the manifest supplies (a channel, an outcome, the submit
+		 * label), translated: the app's own translation first, since the words
+		 * are the app's, then the library's catalogue, then the text as
+		 * written. Before, a channel label was shown as written and the submit
+		 * label only reached the app's translate, so pipelinq showed "Phone"
+		 * and "Save contact moment" in English to a Dutch reader.
+		 *
+		 * @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language
+		 * @param {string} key The label as the manifest writes it.
+		 * @return {string} The translated label.
+		 */
+		copy(key) {
+			if (typeof key !== 'string' || key === '') {
+				return key
+			}
+			const host = typeof this.cnTranslate === 'function' ? this.cnTranslate(key) : key
+			if (typeof host === 'string' && host !== '' && host !== key) {
+				return host
+			}
+			return t('nextcloud-vue', key)
+		},
+
 		firstChannel() {
 			const ch = (this.content && this.content.channels) || []
 			return (Array.isArray(ch) && ch.length > 0 && ch[0].value) || 'telefoon'

package/src/components/CnObjectDataWidget/CnObjectDataWidget.md

@@ -121,7 +121,7 @@ export default {
 | `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
 | `objectType` | String | `''` | Registered object type slug used by `objectStore.saveObject()` |
 | `store` | Object | `null` | Explicit Pinia objectStore instance; auto-detected via Pinia when omitted |
-| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget } }` |
+| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. |
 | `columns` | Number | `3` | Number of CSS grid columns in the widget |
 | `collapsedFields` (`collapsed-fields`) | Number | `null` | Number of fields shown while collapsed, with a "Show all N fields" button for the rest. `null` fits the cell: the whole rows that fit stay, and the button only appears when the cell overflows |
 | `hideEmpty` | Boolean | `false` | Hide fields with no value instead of rendering an em dash. For discriminated supertypes (one `ticket` schema holding request/complaint/contactmoment), so the grid is type-aware without the schema enumerating which fields belong to which variant. Read grid only — the field being edited, a field with unsaved changes, and the Edit form stay visible; `false`/`0` are values and are never hidden. |

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -418,6 +418,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js'
 import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnObjectMetadataModal } from '../CnObjectMetadataModal/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -939,13 +940,18 @@ export default {
 				gridRow: (this.resolvedOverrides[field.key] && this.resolvedOverrides[field.key].gridRow) || 1,
 			}))
 
+			// Per-field condition: `overrides[key].visibleWhen` shows a field only
+			// for the objects it belongs to, such as a person's preferred name on
+			// a client that can also be an organisation.
+			const shown = withSpans.filter((field) => this.isVisibleByCondition(field))
+
 			if (!this.hideEmpty) {
-				return withSpans
+				return shown
 			}
 
 			// Keep a field the user is currently editing or has pending changes for,
 			// otherwise it would vanish mid-edit the moment its value is cleared.
-			return withSpans.filter((field) => field.key === this.editingField
+			return shown.filter((field) => field.key === this.editingField
 				|| field.key in this.dirtyFields
 				|| !this.isEmptyValue((this.objectData || {})[field.key]))
 		},
@@ -1709,6 +1715,29 @@ export default {
 			return !field.readOnly
 		},
 
+		/**
+		 * Evaluate a field's `visibleWhen` override against the object.
+		 *
+		 * The rule is the shared visibility predicate in its LOCAL mode
+		 * (`{ field, op, value }`, `all` / `any`, `appInstalled`), evaluated by
+		 * `evaluateVisibleWhenLocal` against the object with its unsaved
+		 * changes, so a field appears or goes the moment the field it depends
+		 * on changes. A rule that needs a request (`endpoint`, `source`) cannot
+		 * be decided here and is ignored: the field shows, as it did before
+		 * the rule existed.
+		 *
+		 * @param {object} field - Resolved field definition.
+		 * @return {boolean} True when the field is shown.
+		 */
+		isVisibleByCondition(field) {
+			const override = this.resolvedOverrides[field.key]
+			const rule = override ? override.visibleWhen : undefined
+			if (rule === undefined || rule === null || !isLocallyDecidableVisibleWhen(rule)) {
+				return true
+			}
+			return evaluateVisibleWhenLocal(rule, { ...(this.objectData || {}), ...this.dirtyFields })
+		},
+
 		/**
 		 * Evaluate a field's conditional read-only rule against the object data.
 		 *

package/src/components/CnRadioCardsWidget/CnRadioCardsWidget.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<fieldset class="cn-radio-cards" data-testid="cn-radio-cards" :aria-busy="busy ? 'true' : 'false'">
+	<fieldset class="cn-radio-cards"
+		:class="{ 'cn-radio-cards--list': isList }"
+		data-testid="cn-radio-cards"
+		:aria-busy="busy ? 'true' : 'false'">
 		<legend v-if="label" class="cn-radio-cards__legend">
 			{{ label }}
 		</legend>
@@ -52,7 +55,7 @@ let uid = 0
  * underneath, so the choice is perceivable without colour and works from the
  * keyboard.
  *
- * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md
+ * @spec openspec/changes/abstract-radio-cards/specs/abstract-radio-cards/spec.md
  */
 export default {
 	name: 'CnRadioCardsWidget',
@@ -72,6 +75,7 @@ export default {
 		 * - `options` (required) — `[{ value, label, description? }]`.
 		 * - `label` — a legend over the cards (visually shown).
 		 * - `columns` — 1, 2 or 3 (default 2).
+		 * - `variant` — `cards` (the default) or `list`: a compact list of radio buttons, one per line, with the description under the label and no card around each (board DcBeheer). A list is one column.
 		 * - `readOnly`.
 		 *
 		 * @type {object}
@@ -133,7 +137,20 @@ export default {
 			return this.tr(this.content.label || '')
 		},
 
+		/**
+		 * Whether the options draw as a compact list (`variant: "list"`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-radio-cards-list/specs/radio-cards/spec.md#requirement-radio-cards-can-draw-as-a-compact-list
+		 */
+		isList() {
+			return this.content.variant === 'list'
+		},
+
 		columns() {
+			if (this.isList) {
+				return 1
+			}
 			return [1, 3].includes(this.content.columns) ? this.content.columns : 2
 		},
 
@@ -185,7 +202,7 @@ export default {
 		 *
 		 * @param {object} option The chosen option.
 		 * @return {Promise<void>}
-		 * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
+		 * @spec openspec/changes/abstract-radio-cards/specs/abstract-radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
 		 */
 		async choose(option) {
 			if ((!this.objectUrl && !this.hasSave) || !this.content.field) {
@@ -310,6 +327,40 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* `variant: "list"`: one radio button per line, the description under the
+   label, no card around each (board DcBeheer, "Soort organisatie"). */
+.cn-radio-cards--list .cn-radio-cards__grid {
+	gap: 8px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__card,
+.cn-radio-cards--list .cn-radio-cards__card--selected {
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	font-size: 15px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__dot {
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__card--selected .cn-radio-cards__dot {
+	border-width: 5px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__title {
+	font-weight: 400;
+}
+
+.cn-radio-cards--list .cn-radio-cards__description {
+	font-size: 13px;
+}
+
 @media (max-width: 640px) {
 	.cn-radio-cards__grid--2,
 	.cn-radio-cards__grid--3 {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -212,7 +212,9 @@ export default {
 		/**
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
-		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText? }`.
+		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
+		 * valueLabels? }`. `valueLabels` maps a field's stored values to the labels
+		 * the templates show.
 		 *
 		 * @type {object}
 		 */
@@ -441,7 +443,40 @@ export default {
 		 * @return {string} The text, '' when a token is empty.
 		 */
 		fill(template, row) {
-			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), row, new Date(), this.templateContext) : ''
+			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), this.labelledRow(row), new Date(), this.templateContext) : ''
+		},
+
+		/**
+		 * The row as the templates read it: a field named in `valueLabels`
+		 * (`{ channel: { phone: "Phone", telefoon: "Phone" } }`) shows the
+		 * translated label of its stored value, so "{channel}" reads "Telefoon"
+		 * for both spellings the data holds. A value without a label stays as
+		 * stored. The pill, the badges and the sort read the stored value.
+		 *
+		 * @param {object} row The row.
+		 * @return {object} The row, or a shallow copy with labelled fields.
+		 * @spec openspec/changes/screens-record-list-value-labels/specs/record-list-value-labels/spec.md#requirement-a-record-list-template-can-show-a-label-for-a-stored-value
+		 */
+		labelledRow(row) {
+			const map = this.content?.valueLabels
+			if (!row || typeof row !== 'object' || !map || typeof map !== 'object') {
+				return row
+			}
+			let out = row
+			for (const [field, labels] of Object.entries(map)) {
+				const raw = row[field]
+				if (!labels || typeof labels !== 'object' || (typeof raw !== 'string' && typeof raw !== 'number')) {
+					continue
+				}
+				const label = labels[String(raw)]
+				if (typeof label === 'string' && label !== '') {
+					if (out === row) {
+						out = { ...row }
+					}
+					out[field] = this.translate(label)
+				}
+			}
+			return out
 		},
 
 		/**

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -32,9 +32,33 @@
   Spec: hydra openspec/architecture/adr-112-reports-are-one-page.md (ConductionNL/hydra#640).
 -->
 <template>
-	<div class="cn-reports-page">
+	<div class="cn-reports-page" :class="{ 'cn-reports-page--board': isBoard }">
 		<div class="cn-reports-page__header">
-			<h2 class="cn-reports-page__title">
+			<!-- The header buttons (`headerButtons`) beside the title, as the
+			     board's "Downloaden" and the buildiq square (board DcRapportages).
+			     Without them, and outside the board look, the title stands alone
+			     as before. -->
+			<div v-if="headerButtonsRow.length > 0" class="cn-reports-page__heading-row">
+				<h2 class="cn-reports-page__title">
+					{{ resolvedTitle }}
+				</h2>
+				<div class="cn-reports-page__header-buttons" data-testid="cn-reports-header-buttons">
+					<template v-for="button in headerButtonsRow" :key="button.key">
+						<CnBuildiqEditButton v-if="button.action === '__buildiq'" />
+						<NcButton
+							v-else
+							:variant="button.variant"
+							:data-testid="`cn-reports-header-button-${button.key}`"
+							@click="onHeaderButton(button)">
+							<template v-if="button.icon" #icon>
+								<CnIcon :name="button.icon" :size="20" />
+							</template>
+							{{ button.label }}
+						</NcButton>
+					</template>
+				</div>
+			</div>
+			<h2 v-else class="cn-reports-page__title">
 				{{ resolvedTitle }}
 			</h2>
 			<p v-if="resolvedDescription" class="cn-reports-page__description">
@@ -42,7 +66,44 @@
 			</p>
 		</div>
 
-		<div v-if="categoryOptions.length > 1" class="cn-reports-page__filter">
+		<!-- The board look (board DcRapportages): one section per category,
+		     headed by its label, instead of the category filter; each card
+		     draws its icon in a tile. -->
+		<template v-if="isBoard">
+			<p v-if="resolvedCards.length === 0"
+				class="cn-reports-page__empty"
+				data-testid="cn-reports-empty">
+				{{ resolvedEmptyLabel }}
+			</p>
+			<section v-for="section in boardSections"
+				:key="section.key"
+				class="cn-reports-page__section"
+				data-testid="cn-reports-section">
+				<h3 v-if="section.label" class="cn-reports-page__section-title">
+					{{ section.label }}
+				</h3>
+				<ul class="cn-reports-page__grid" data-testid="cn-reports-grid">
+					<li v-for="card in section.cards" :key="card.id" class="cn-reports-page__cell">
+						<a class="cn-reports-page__card"
+							data-testid="cn-report-card"
+							:href="hrefFor(card)"
+							@click="open(card, $event)">
+							<span v-if="card.icon" class="cn-reports-page__card-icon" aria-hidden="true">
+								<CnIcon :name="card.icon" :size="22" />
+							</span>
+							<span class="cn-reports-page__card-text">
+								<span class="cn-reports-page__card-title">{{ card.label }}</span>
+								<span v-if="card.description" class="cn-reports-page__card-description">
+									{{ card.description }}
+								</span>
+							</span>
+						</a>
+					</li>
+				</ul>
+			</section>
+		</template>
+
+		<div v-if="!isBoard && categoryOptions.length > 1" class="cn-reports-page__filter">
 			<label class="cn-reports-page__filter-label" :for="filterId">
 				{{ resolvedCategoryLabel }}
 			</label>
@@ -58,13 +119,13 @@
 			</select>
 		</div>
 
-		<p v-if="visibleCards.length === 0"
+		<p v-if="!isBoard && visibleCards.length === 0"
 			class="cn-reports-page__empty"
 			data-testid="cn-reports-empty">
 			{{ resolvedEmptyLabel }}
 		</p>
 
-		<ul v-else class="cn-reports-page__grid" data-testid="cn-reports-grid">
+		<ul v-else-if="!isBoard" class="cn-reports-page__grid" data-testid="cn-reports-grid">
 			<li v-for="card in visibleCards" :key="card.id" class="cn-reports-page__cell">
 				<a class="cn-reports-page__card"
 					data-testid="cn-report-card"
@@ -97,7 +158,12 @@
  * The Reports page: one surface listing an app's reports as cards.
  */
 import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
 import { defineAsyncComponent } from 'vue'
+import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
+import { useLook } from '../../composables/useLook.js'
+import { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
 export default {
@@ -107,9 +173,18 @@ export default {
 		// Loaded only for a page that declares widgets: a cards-only reports
 		// page does not pull the dashboard in.
 		CnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),
+		CnBuildiqEditButton,
+		CnIcon,
+		NcButton,
 	},
 
 	inject: {
+		/**
+		 * The v2 registry and the legacy customComponents map, provided by
+		 * CnAppRoot: a header action's named handler resolves against them.
+		 */
+		cnRegistry: { default: () => ({}) },
+		cnCustomComponents: { default: () => ({}) },
 		/**
 		 * The consuming app's translate function, provided by CnAppRoot.
 		 * Defaults to identity so the page still renders outside one.
@@ -228,6 +303,49 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Buttons beside the title (`config.headerButtons`), as the board's
+		 * "Downloaden". Each is `{ label, action, variant?, icon?, id? }`:
+		 * `action` is the id of a `headerActions` entry, which says what the
+		 * click does. Under the board look the buildiq square sits between the
+		 * secondary buttons and the primary one. Empty (the default) changes
+		 * nothing.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<{label: string, action: string, variant?: ('primary'|'secondary'), icon?: string, id?: string}>|null}
+		 */
+		headerButtons: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * The page's header actions (`config.headerActions`), in the shape of
+		 * an index page's: a header button names one by id. `handler` is a
+		 * function, `navigate` (with `route`, and `params`), `emit`, `none`,
+		 * or a registry name; `type: "navigate"` with a `target` URL opens
+		 * that URL in a new tab. Every click also emits `header-action`
+		 * `{ action, id }`, except for `handler: "none"`.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<object>|null}
+		 */
+		headerActions: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * The look to draw in: `board` or `nextcloud`. Absent: the look
+		 * CnAppRoot provides (`cnLook`), else `nextcloud`.
+		 *
+		 * @type {string|null}
+		 */
+		look: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Translate function. Falls back to injected `cnTranslate`.
 		 *
@@ -239,6 +357,13 @@ export default {
 		},
 	},
 
+	emits: ['header-action'],
+
+	setup(props) {
+		const { isBoard } = useLook(props)
+		return { isBoard }
+	},
+
 	data() {
 		return {
 			activeCategory: 'all',
@@ -283,6 +408,8 @@ export default {
 				'emptyLabel',
 				'widgets',
 				'layout',
+				'headerButtons',
+				'headerActions',
 			]) {
 				if (this[key] !== null && this[key] !== undefined) {
 					fromProps[key] = this[key]
@@ -322,6 +449,51 @@ export default {
 			})
 		},
 
+		/**
+		 * The declared header buttons that have a label and an action,
+		 * translated, each with a stable key and a variant.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []
+			return declared
+				.filter((button) => button && typeof button === 'object'
+					&& typeof button.action === 'string' && button.action !== ''
+					&& typeof button.label === 'string' && button.label !== '')
+				.map((button) => ({
+					key: String(button.id || button.action),
+					label: this.tr(button.label),
+					action: button.action,
+					variant: button.variant === 'primary' ? 'primary' : 'secondary',
+					icon: typeof button.icon === 'string' ? button.icon : '',
+				}))
+		},
+
+		/**
+		 * The header row in the order it renders. Without the board look:
+		 * the declared buttons in the declared order. Under the board look:
+		 * the secondary buttons, the buildiq square, then the primary ones,
+		 * as the board draws "Downloaden" and the square. No declared button
+		 * leaves the header as it was, without the square.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<object>} The buttons; the square is `{ key: '__buildiq', action: '__buildiq' }`.
+		 */
+		headerButtonsRow() {
+			const buttons = this.resolvedHeaderButtons
+			if (buttons.length === 0 || !this.isBoard) {
+				return buttons
+			}
+			const square = { key: '__buildiq', action: '__buildiq', variant: 'secondary', label: '', icon: '' }
+			return [
+				...buttons.filter((button) => button.variant !== 'primary'),
+				square,
+				...buttons.filter((button) => button.variant === 'primary'),
+			]
+		},
+
 		/**
 		 * The heading.
 		 *
@@ -385,6 +557,30 @@ export default {
 			return options
 		},
 
+		/**
+		 * The board look's sections: the cards without a category first, under
+		 * no heading, then one section per declared category that holds a
+		 * card, in the declared order, headed by its label.
+		 *
+		 * @spec openspec/changes/screens-reports-page-board-look/specs/reports-page/spec.md#requirement-the-reports-page-takes-the-board-look
+		 * @return {Array<{key: string, label: string, cards: Array<object>}>} The sections.
+		 */
+		boardSections() {
+			const declared = this.config.categories || {}
+			const sections = []
+			const loose = this.resolvedCards.filter((card) => !card.category || !Object.hasOwn(declared, card.category))
+			if (loose.length > 0) {
+				sections.push({ key: '__none', label: '', cards: loose })
+			}
+			for (const key of Object.keys(declared)) {
+				const cards = this.resolvedCards.filter((card) => card.category === key)
+				if (cards.length > 0) {
+					sections.push({ key, label: this.tr(declared[key]), cards })
+				}
+			}
+			return sections
+		},
+
 		/**
 		 * The cards the active filter admits.
 		 *
@@ -487,6 +683,47 @@ export default {
 			}
 		},
 
+		/**
+		 * A header button was clicked: run the `headerActions` entry it names
+		 * and emit `header-action`, as an index page's header button does.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @param {{action: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			const id = button.action
+			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
+			const entry = actions.find((action) => action && action.id === id) || null
+			const handler = entry ? entry.handler : undefined
+			if (handler === 'none') {
+				return
+			}
+			if (typeof handler === 'function') {
+				handler({ actionId: id })
+			} else if (handler === 'navigate' && entry.route) {
+				const params = (entry.params && typeof entry.params === 'object') ? entry.params : null
+				if (this.$router && typeof this.$router.push === 'function') {
+					this.$router.push(params ? { name: entry.route, params } : { name: entry.route })
+				}
+			} else if (entry && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '') {
+				window.open(entry.target, '_blank', 'noopener,noreferrer')
+			} else if (typeof handler === 'string' && handler !== 'emit') {
+				const resolved = resolveRegisteredHandler(handler, this.cnRegistry, this.cnCustomComponents)
+				if (typeof resolved === 'function') {
+					resolved({ actionId: id })
+				}
+			}
+			/**
+			 * A header button was clicked (`headerButtons`), after its
+			 * `headerActions` entry ran; not for `handler: "none"`.
+			 *
+			 * @event header-action
+			 * @property {{action: string, id: string}} payload The id of the `headerActions` entry the button names, as `action` and `id`.
+			 */
+			this.$emit('header-action', { action: id, id })
+		},
+
 		/**
 		 * Navigate by route NAME on a plain click; a modified or middle click
 		 * is left to the browser so it can open the card's href elsewhere.
@@ -518,6 +755,27 @@ export default {
 	margin: 0 0 4px;
 }
 
+.cn-reports-page__heading-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px 24px;
+}
+
+.cn-reports-page__heading-row .cn-reports-page__title {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+
+.cn-reports-page__header-buttons {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+
 .cn-reports-page__description {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);