@conduction/nextcloud-vue 2.104.0 → 2.105.0

package/l10n/en.json

@@ -1724,7 +1724,10 @@
     "No contacts linked": "No contacts linked",
     "No relations yet": "No relations yet",
     "Period": "Period",
-    "On": "On"
+    "On": "On",
+    "Select a step on the canvas to see its settings.": "Select a step on the canvas to see its settings.",
+    "Show runs": "Show runs",
+    "Back to the step settings": "Back to the step settings"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -1937,7 +1937,10 @@
     "No contacts linked": "Geen contacten gekoppeld",
     "No relations yet": "Nog geen relaties",
     "Period": "Periode",
-    "On": "Aan"
+    "On": "Aan",
+    "Select a step on the canvas to see its settings.": "Kies een stap op het canvas om de instellingen te zien.",
+    "Show runs": "Uitvoeringen tonen",
+    "Back to the step settings": "Terug naar de stapinstellingen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.104.0",
+  "version": "2.105.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -160,7 +160,7 @@
 			<template #additional-items>
 				<!-- The board card: support as one fact row, the SLA address on the same line. -->
 				<div v-if="compactCard && showSupport && !supportAtEnd && !$slots.footer" class="cn-version-info__item" data-testid="cn-admin-settings-support-row">
-					<span class="cn-version-info__label">{{ supportTitle }}:</span>
+					<span class="cn-version-info__label">{{ supportTitle }}</span>
 					<span class="cn-version-info__value">
 						<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a><template v-if="slaEmail">, {{ slaInline }} <a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a></template>
 					</span>

package/src/components/CnChartWidget/CnChartWidget.md

@@ -108,6 +108,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `legendPosition` | String | `''` | Legend placement override (`top`/`bottom`/`left`/`right`); empty keeps the automatic placement |
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
 | `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). |
+| `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language. Categories that are not dates are left as is. |
 | `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |
 | `highlight` | Object | `null` | `matrix`: the cell to outline, `{ row, column, columnKeys? }`, tokens such as `@object.behaviour` resolved |
 | `cellSource` | Object | `null` | `matrix`: read the cells from records that each hold one cell (`{ register, schema, filter?, rowField, columnField, valueField, … }`), or with `cellsPath` from the cells inside one record, see [Bar list and matrix](#bar-list-and-matrix) |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -220,6 +220,22 @@ function parseBucketKey(key) {
 	)
 }
 
+/**
+ * A theme colour by CSS variable name, as a literal: ApexCharts writes colours
+ * into SVG attributes, where `var()` does not resolve.
+ *
+ * @param {string} name The variable, e.g. `--color-error`.
+ * @param {string} fallback The colour when the variable is unset (or no DOM).
+ * @return {string} The colour.
+ */
+function themeColor(name, fallback) {
+	if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') {
+		return fallback
+	}
+	const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+	return value || fallback
+}
+
 /** Event-bus channel CnWidgetWrapper's Refresh action broadcasts on. */
 const REFRESH_BUS_CHANNEL = 'cn:widget:refresh'
 
@@ -385,6 +401,31 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Horizontal reference lines on the value axis of a line, area or bar
+		 * chart, such as a norm: `[{ value, label?, color? }]`. Drawn dashed;
+		 * the label goes through the host's translate. The colour defaults to
+		 * the theme's error colour.
+		 *
+		 * @type {Array<{value: number, label?: string, color?: string}>}
+		 */
+		referenceLines: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * How date categories read on the x-axis: `month` ("jan") or
+		 * `month-year` ("jan 2026"), in the user's language. A category that
+		 * is not a date is shown as is. Empty shows the categories unchanged.
+		 *
+		 * @type {''|'month'|'month-year'}
+		 */
+		categoryFormat: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * The `matrix` cell to outline, usually the record's on a detail page:
 		 * `{ row, column, columnKeys? }`, where `row` and `column` take tokens
@@ -1505,6 +1546,51 @@ export default {
 			return this.footnote ? this.hostTranslate(this.footnote) : t('nextcloud-vue', 'Chart data')
 		},
 
+		/**
+		 * The x-axis categories as shown: with `categoryFormat`, date
+		 * categories as short months in the user's language.
+		 *
+		 * @return {Array<string|number>} The categories.
+		 */
+		displayCategories() {
+			const categories = Array.isArray(this.resolvedCategories) ? this.resolvedCategories : []
+			if (this.categoryFormat !== 'month' && this.categoryFormat !== 'month-year') {
+				return categories
+			}
+			const options = this.categoryFormat === 'month' ? { month: 'short' } : { month: 'short', year: 'numeric' }
+			return categories.map((category) => {
+				const date = typeof category === 'string' || typeof category === 'number' ? parseBucketKey(category) : null
+				return date ? date.toLocaleDateString(userLocale(), options) : category
+			})
+		},
+
+		/**
+		 * The `referenceLines` as ApexCharts annotations: dashed, labelled,
+		 * in the theme's error colour unless a line names its own.
+		 *
+		 * @return {Array<object>} The annotations, possibly empty.
+		 */
+		referenceAnnotations() {
+			const lines = (Array.isArray(this.referenceLines) ? this.referenceLines : [])
+				.filter((line) => line && Number.isFinite(Number(line.value)))
+			if (lines.length === 0) {
+				return []
+			}
+			const fallback = themeColor('--color-error', '#e04224')
+			return lines.map((line) => {
+				const color = line.color || fallback
+				return {
+					y: Number(line.value),
+					x: Number(line.value),
+					borderColor: color,
+					strokeDashArray: 6,
+					label: line.label
+						? { text: this.hostTranslate(line.label), borderColor: color, style: { color: '#fff', background: color } }
+						: { text: '' },
+				}
+			})
+		},
+
 		mergedOptions() {
 			const isPieType = ['pie', 'donut', 'radialBar'].includes(this.type)
 
@@ -1592,7 +1678,7 @@ export default {
 			if (!isPieType) {
 				if (this.resolvedCategories.length > 0) {
 					defaults.xaxis = {
-						categories: this.resolvedCategories,
+						categories: this.displayCategories,
 						labels: {
 							style: {
 								colors: 'var(--color-text-maxcontrast, #767676)',
@@ -1634,6 +1720,12 @@ export default {
 				}
 			}
 
+			// Reference lines, such as a norm, on the value axis.
+			if (!isPieType && this.referenceAnnotations.length > 0) {
+				const axisKey = (this.type === 'bar' && this.horizontal) ? 'xaxis' : 'yaxis'
+				defaults.annotations = { [axisKey]: this.referenceAnnotations }
+			}
+
 			// Add labels for pie/donut
 			if (isPieType && this.resolvedLabels.length > 0) {
 				defaults.labels = this.resolvedLabels

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -347,12 +347,12 @@
 				<label
 					v-else
 					class="cn-dashboard-page__page-filter">
-					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ pf.label }}</span>
+					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ effectiveTranslate(pf.label) }}</span>
 					<NcSelect
 						:modelValue="selectedPageFilterOption(pf)"
-						:options="pf.options || []"
+						:options="pageFilterSegments(pf)"
 						:clearable="false"
-						:inputLabel="pf.label || pf.key"
+						:inputLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
 						label="label"
 						:data-testid="'cn-page-filter-' + pf.key"
 						@update:modelValue="onPageFilterChange(pf, $event)" />
@@ -1106,6 +1106,9 @@ const CHART_PROP_KEYS = [
 	'highlight',
 	'cellSource',
 	'emptyCellLabel',
+	// A norm line and month categories on a line chart (DqDoorlooptijd).
+	'referenceLines',
+	'categoryFormat',
 ]
 
 /**
@@ -2886,12 +2889,12 @@ export default {
 				return null
 			}
 			const current = this.workspaceContext[pf.key]
-			return (pf.options || []).find((o) => o.value === current) || null
+			return this.pageFilterSegments(pf).find((o) => o.value === current) || null
 		},
 
 		/**
-		 * A page filter's options as segments, labels through the host
-		 * translate.
+		 * A page filter's options, labels through the host translate: the
+		 * segments of a segmented filter and the options of a select.
 		 *
 		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
 		 * @param {object} pf The page-filter descriptor.

package/src/components/CnDetailPage/CnDetailPage.md

@@ -427,6 +427,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
 | `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |
 | `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
+| `tabsFrom` | String | `''` | A field path, read like a `visibleWhen` field, whose list of tab ids picks the tabs of the page's `tabs` widgets and their order for this record: `@context.caseType.tabs` reads the list a case type keeps (DqAanbesteding: Inschrijvingen, Publicaties, Bestanden, Historie). A tab's id is its `id`, else its `widgetId`, or the string entry. An empty or missing list keeps the declared tabs; edit mode shows them all. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## The record as a place

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2567,6 +2567,22 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A field path whose value picks the tabs of the page's `tabs` widgets
+		 * and their order for this record (manifest `config.tabsFrom`), read
+		 * like a `visibleWhen` field: `@context.caseType.tabs` reads the list a
+		 * case type keeps. A non-empty list of tab ids (a tab's `id`, else its
+		 * `widgetId`, or the string entry itself) keeps those tabs in that
+		 * order and leaves the rest out. Any other value keeps the declared
+		 * tabs. Edit mode shows them all.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 */
+		tabsFrom: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -4551,7 +4567,7 @@ export default {
 		 */
 		bodyGridWidgets() {
 			if (this.hasGridLayout) {
-				return this.widgets
+				return this.pickTabs(this.widgets)
 			}
 			if (this.shouldRenderAutoBody) {
 				return this.autoBodyWidgets || []
@@ -4559,6 +4575,21 @@ export default {
 			return []
 		},
 
+		/**
+		 * The tab ids `tabsFrom` reads off this record, or null when it reads
+		 * no non-empty list (or the body is being edited).
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @return {Array<string>|null}
+		 */
+		pickedTabIds() {
+			if (!this.tabsFrom || this.editingBody || !this.widgetVisibilityData) {
+				return null
+			}
+			const ids = readVisibleWhenPath(this.widgetVisibilityData, this.tabsFrom)
+			return Array.isArray(ids) && ids.length > 0 ? ids.map((id) => String(id)) : null
+		},
+
 		/**
 		 * Whether the body renders as an adjustable widget grid (vs. the
 		 * hand-authored default slot). True for explicit grid pages and for the
@@ -4977,6 +5008,33 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The widget definitions with each `tabs` widget's tabs narrowed and
+		 * ordered by `pickedTabIds`; the definitions as given without a pick.
+		 * A new definition is returned for a changed widget; the declared one
+		 * is never mutated.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @param {Array<object>} widgets The widget definitions.
+		 * @return {Array<object>}
+		 */
+		pickTabs(widgets) {
+			const ids = this.pickedTabIds
+			if (!ids || !Array.isArray(widgets)) {
+				return widgets
+			}
+			const idOf = (tab) => String(typeof tab === 'string' ? tab : (tab && (tab.id ?? tab.widgetId)) ?? '')
+			return widgets.map((widget) => {
+				if (!widget || widget.type !== 'tabs' || !Array.isArray(widget.content?.tabs)) {
+					return widget
+				}
+				const tabs = ids
+					.map((id) => widget.content.tabs.find((tab) => idOf(tab) === id))
+					.filter(Boolean)
+				return tabs.length > 0 ? { ...widget, content: { ...widget.content, tabs } } : widget
+			})
+		},
+
 		/**
 		 * The tag after an admin-only entry in the board look ("beheerder",
 		 * DqZaakMeer), or null for any other entry or look. It is drawn by

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -460,7 +460,7 @@ export default {
 		 * @return {object}
 		 */
 		boardOptions() {
-			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton']
+			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton', 'actionsMenu']
 			const options = {}
 			for (const key of keys) {
 				if (this.board && this.board[key] !== undefined && this.board[key] !== null) {

package/src/components/CnFeaturesBoard/CnFeaturesBoard.vue

@@ -36,7 +36,7 @@
 						{{ t('nextcloud-vue', 'Suggest feature') }}
 					</NcButton>
 					<NcActions
-						v-if="!tabs"
+						v-if="!tabs && actionsMenu"
 						:menuName="t('nextcloud-vue', 'Actions')"
 						:forceName="true"
 						data-testid="cn-features-board-actions">
@@ -85,6 +85,7 @@
 				</button>
 			</div>
 			<NcActions
+				v-if="actionsMenu"
 				:menuName="t('nextcloud-vue', 'Actions')"
 				:forceName="true"
 				class="cn-features-board__tab-actions"
@@ -375,6 +376,8 @@ export default {
 
 		/** Show the Features and Roadmap folder tabs. */
 		tabs: { type: Boolean, default: true },
+		/** Show the Actions menu (suggest, buildiq, AI skills, support), in the header or the tab row; false draws none. */
+		actionsMenu: { type: Boolean, default: true },
 		/** `chips`: pill buttons with a count. `segmented`: a segmented control without counts. */
 		filter: {
 			type: String,

package/src/components/CnFlowsPage/CnFlowBoard.vue

@@ -36,7 +36,7 @@
 				<NcButton v-if="showRun"
 					:disabled="store.running || !store.flow.id"
 					data-testid="flow-board-run"
-					@click="$emit('run')">
+					@click="onRun">
 					{{ t('nextcloud-vue', 'Run') }}
 				</NcButton>
 				<NcButton v-if="testSubjectReady"
@@ -109,7 +109,7 @@
 					:key="group.app"
 					class="cn-flow-board__palette-group">
 					<h4 class="cn-flow-board__palette-app">
-						{{ group.app }}
+						{{ group.name }}
 					</h4>
 					<ul class="cn-flow-board__palette-list">
 						<li v-for="entry in group.entries" :key="entry.id">
@@ -135,7 +135,7 @@
 					:toolbarActions="false"
 					:addStep="!showPalette"
 					@save="$emit('save')"
-					@run="$emit('run')" />
+					@run="onRun" />
 				<div v-if="store.inRunView"
 					class="cn-flow-board__legend"
 					data-testid="flow-board-legend">
@@ -183,6 +183,15 @@
 					<h3 class="cn-flow-board__card-title" data-testid="flow-board-step-name">
 						{{ stepName }}
 					</h3>
+					<dl v-if="stepSettings.length > 0" class="cn-flow-board__settings">
+						<div v-for="setting in stepSettings"
+							:key="setting.key"
+							class="cn-flow-board__setting"
+							data-testid="flow-board-step-setting">
+							<dt>{{ setting.label }}</dt>
+							<dd>{{ setting.value }}</dd>
+						</div>
+					</dl>
 					<div class="cn-flow-board__step-actions">
 						<NcButton data-testid="flow-board-edit-step" @click="store.editingNodeId = store.selectedNodeId">
 							{{ t('nextcloud-vue', 'Edit step') }}
@@ -212,7 +221,23 @@
 						</NcButton>
 					</div>
 				</template>
-				<CnFlowSidebar v-else embedded />
+				<template v-else-if="showRuns">
+					<NcButton variant="tertiary"
+						class="cn-flow-board__runs-back"
+						data-testid="flow-board-hide-runs"
+						@click="showRuns = false">
+						{{ t('nextcloud-vue', 'Back to the step settings') }}
+					</NcButton>
+					<CnFlowSidebar embedded />
+				</template>
+				<div v-else class="cn-flow-board__inspector-empty" data-testid="flow-board-inspector-empty">
+					<p>{{ t('nextcloud-vue', 'Select a step on the canvas to see its settings.') }}</p>
+					<NcButton variant="secondary"
+						data-testid="flow-board-show-runs"
+						@click="showRuns = true">
+						{{ t('nextcloud-vue', 'Show runs') }}
+					</NcButton>
+				</div>
 			</aside>
 		</div>
 	</div>
@@ -232,6 +257,7 @@ import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import { FLOW_RUN_ACTIVE_STATUSES, useFlowStore } from '../../composables/useFlowStore.js'
 import { formatRelativeDate } from '../../utils/boardDate.js'
 import { flowOutcomeLevels, flowRunDurationMs, flowRunLogLines, flowRunName, formatFlowDuration } from '../../utils/flowRunLog.js'
+import { appDisplayNames } from '../../utils/nextcloudApps.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /**
@@ -278,7 +304,7 @@ export default {
 	},
 
 	data() {
-		return { runTab: 'step', testOpen: false, testRecord: null }
+		return { runTab: 'step', testOpen: false, testRecord: null, appNames: {}, showRuns: false }
 	},
 
 	computed: {
@@ -414,17 +440,25 @@ export default {
 			return { tone: 'success', text: this.t('nextcloud-vue', 'The flow is valid.') }
 		},
 
-		/** @return {Array<object>} The palette grouped by owning app. */
+		/**
+		 * The palette grouped by owning app, each group named by the app's
+		 * display name (its id when Nextcloud names none), the app that owns
+		 * this flow first.
+		 *
+		 * @return {Array<{app: string, name: string, entries: Array<object>}>} The groups.
+		 */
 		paletteGroups() {
 			const groups = {}
 			;(this.store.nodeCatalog || []).forEach((entry) => {
 				const app = String(entry?.app || String(entry?.id || '').split('.')[0] || '')
 				if (!groups[app]) {
-					groups[app] = { app, entries: [] }
+					groups[app] = { app, name: this.appNames[app] || app, entries: [] }
 				}
 				groups[app].entries.push(entry)
 			})
-			return Object.values(groups)
+			const list = Object.values(groups)
+			const host = list.findIndex((group) => group.app === this.app)
+			return host > 0 ? [list[host], ...list.slice(0, host), ...list.slice(host + 1)] : list
 		},
 
 		/** @return {object|null} The run on screen. */
@@ -477,6 +511,37 @@ export default {
 			return entry ? (entry.displayName || entry.id) : String(node?.type || '')
 		},
 
+		/**
+		 * The selected step's settings as its owner declares them in the
+		 * catalogue's `configForm`: label and value, a select's option label,
+		 * Yes or No for a switch. Unset settings are left out.
+		 *
+		 * @return {Array<{key: string, label: string, value: string}>} The settings.
+		 */
+		stepSettings() {
+			const node = this.store.selectedNode
+			const entry = node ? this.store.catalogEntry(node.type) : null
+			const config = (node && node.config) || {}
+			const form = (entry && Array.isArray(entry.configForm)) ? entry.configForm : []
+			return form
+				.filter((field) => field && field.key && config[field.key] !== undefined && config[field.key] !== null && config[field.key] !== '')
+				.map((field) => {
+					const raw = config[field.key]
+					const option = Array.isArray(field.options) ? field.options.find((o) => o && o.value === raw) : null
+					let value
+					if (option) {
+						value = String(option.label ?? option.value)
+					} else if (typeof raw === 'boolean') {
+						value = raw ? this.t('nextcloud-vue', 'Yes') : this.t('nextcloud-vue', 'No')
+					} else if (typeof raw === 'object') {
+						value = JSON.stringify(raw)
+					} else {
+						value = String(raw)
+					}
+					return { key: field.key, label: field.label || field.key, value }
+				})
+		},
+
 		/** @return {string} The selected step's name. */
 		stepName() {
 			const node = this.store.selectedNode
@@ -507,7 +572,36 @@ export default {
 		},
 	},
 
+	watch: {
+		// A selected step takes the panel back from the run history.
+		'store.selectedNodeId': function(id) {
+			if (id) {
+				this.showRuns = false
+			}
+		},
+	},
+
+	async created() {
+		// The palette names its groups by app display name; only the column
+		// palette draws them, so only it reads the names.
+		if (this.palette !== 'column') {
+			return
+		}
+		const { default: axios } = await import('@nextcloud/axios')
+		this.appNames = await appDisplayNames(axios)
+	},
+
 	methods: {
+		/**
+		 * Run the flow, with the run history in the panel to follow it.
+		 *
+		 * @return {void}
+		 */
+		onRun() {
+			this.showRuns = true
+			this.$emit('run')
+		},
+
 		/**
 		 * Run the saved flow once with the picked record as its subject, then
 		 * close the dialog; the run shows on the canvas as any run does.
@@ -822,6 +916,36 @@ export default {
 	text-align: center;
 }
 
+.cn-flow-board__settings {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin: 0;
+}
+
+.cn-flow-board__setting dt {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__setting dd {
+	margin: 2px 0 0;
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+
+.cn-flow-board__inspector-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-flow-board__inspector-empty p {
+	margin: 0;
+}
+
 .cn-flow-board__step-actions,
 .cn-flow-board__step-footer {
 	display: flex;

package/src/components/CnIndexPage/CnIndexPage.md

@@ -390,6 +390,7 @@ export default {
 | `showViewToggle` | Boolean | `true` | Whether to show the Cards/Table view toggle |
 | `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set. |
 | `search` | Boolean | `true` | `false` draws no inline search in the actions bar, also in the board look, which otherwise draws one on every index page (manifest: `config.search`). Wins over `inlineSearch`. |
+| `appConfig` | Object | `{}` | The app config `@config.<key>` tokens resolve against (manifest: `config.appConfig`), as on the dashboard and detail pages, merged over a config an ancestor provides on `cnAppConfig`. A quick filter's `filter` and its `label` / `activeLabel` take the token: `"Residence @config.municipality"` reads "Residence Zuiddrecht" (board DqContacten); the label is translated first, and a key the config does not hold leaves the token as written. |
 | `showCountWithSearch` | Boolean | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls (only relevant with `inlineSearch`, which otherwise takes the counter's place). Fed from the manifest as `pages[].config.showCountWithSearch`. |
 | `searchInFiles` | Boolean | `false` | "Also search inside files" switch beside the search box (manifest `config.searchInFiles`). On, a search with a term sends `_content_search=true`; rows found through a file show "Found in {file}" (`@self.matchedFile`). State kept in the route as `contentSearch=1`. Emits `content-search`. |
 | `searchPlaceholder` | String | `''` | Placeholder for the inline search field (manifest `config.searchPlaceholder`). |