@conduction/nextcloud-vue 2.56.0-beta.34 → 2.56.0-beta.36

package/src/dialogs/CnTransitionInputDialog.vue

@@ -14,6 +14,7 @@
 		@closing="$emit('close')">
 		<div
 			class="cn-transition-input"
+			:aria-busy="busy ? 'true' : null"
 			data-testid="cn-modal"
 			data-testid-modal="cn-transition-input-dialog">
 			<!-- A refusal keeps this dialog open with what was typed still in
@@ -29,8 +30,18 @@
 				class="cn-transition-input__field"
 				:class="{ 'cn-transition-input__field--refused': isRefused(field.key) }"
 				:data-testid="`cn-transition-input-${field.key}`">
+				<!-- An input that declares its choices is picked from them. -->
+				<NcSelect v-if="field.widget === 'select'"
+					:modelValue="selectedOption(field)"
+					:options="field.options"
+					label="label"
+					:inputLabel="requiredLabel(field)"
+					:clearable="!field.required"
+					:data-testid="`cn-transition-input-select-${field.key}`"
+					@update:modelValue="setValue(field.key, $event && $event.value !== undefined ? $event.value : '')" />
+
 				<!-- An input that points at another record is picked, never typed. -->
-				<div v-if="field.widget === 'reference'" class="cn-transition-input__reference">
+				<div v-else-if="field.widget === 'reference'" class="cn-transition-input__reference">
 					<label class="cn-transition-input__label">{{ requiredLabel(field) }}</label>
 					<CnResourceSelect
 						:register="field.referenceRegister"
@@ -128,11 +139,18 @@
 				@click="$emit('close')">
 				{{ t('nextcloud-vue', 'Cancel') }}
 			</NcButton>
+			<!-- Busy while the parent's POST runs: a transition can take
+			     seconds, and a confirm button that only greys out reads as one
+			     that did nothing. -->
 			<NcButton
 				variant="primary"
 				:disabled="!canConfirm"
+				:aria-busy="busy ? 'true' : null"
 				data-testid="cn-transition-input-confirm"
 				@click="onConfirm">
+				<template v-if="busy" #icon>
+					<NcLoadingIcon :size="20" data-testid="cn-transition-input-busy" />
+				</template>
 				{{ confirmLabel }}
 			</NcButton>
 		</template>
@@ -141,7 +159,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CnDialog from '../components/CnDialog/CnDialog.vue'
 import CnResourceSelect from '../components/CnResourceSelect/CnResourceSelect.vue'
 import { dialogBoardMixin } from '../mixins/dialogBoard.js'
@@ -164,7 +182,13 @@ import { fieldsFromSchema } from '../utils/schema.js'
  * from the property `title`, booleans render as a switch, numbers as a number
  * field, and long text (`maxLength > 255` or a `textarea`/`markdown` format)
  * as a textarea. Anything else — including a field the schema does not
- * declare — falls back to a plain labelled text input. Deliberately minimal:
+ * declare — falls back to a plain labelled text input.
+ *
+ * An input may also say how it is asked for, which matters when the choices
+ * depend on the record rather than on its schema: `label` names the field,
+ * and `options: [{ value, label }]` turns it into a picker that shows each
+ * `label` and sends the chosen `value`. An input that declares neither is
+ * rendered from the schema as before. Deliberately minimal:
  * text, textarea, number and checkbox cover transition inputs; this is not a
  * form engine (use `CnFormDialog` for full object forms).
  *
@@ -186,9 +210,11 @@ export default {
 		CnResourceSelect,
 		CnDialog,
 		NcButton,
+		NcLoadingIcon,
 		NcTextField,
 		NcTextArea,
 		NcCheckboxRadioSwitch,
+		NcSelect,
 	},
 
 	mixins: [dialogBoardMixin],
@@ -199,7 +225,11 @@ export default {
 		 * `x-openregister-lifecycle.transitions.<action>.inputs` (server-derived
 		 * or config-declared); `label` doubles as dialog title + confirm label.
 		 *
-		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean}>}}
+		 * An input may carry a `label` for its field and `options` to pick
+		 * from, each `{ value, label }`; the picker shows the label and sends
+		 * the value.
+		 *
+		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean, label?: string, options?: Array<{value: string, label?: string}>}>}}
 		 */
 		transition: {
 			type: Object,
@@ -296,6 +326,8 @@ export default {
 					required: input.required === true,
 					picker: input.picker && typeof input.picker === 'object' ? input.picker : null,
 					fields: Array.isArray(input.fields) ? input.fields.filter((f) => typeof f === 'string') : null,
+					label: typeof input.label === 'string' && input.label.trim() !== '' ? input.label.trim() : null,
+					options: this.declaredOptions(input.options),
 				}))
 		},
 
@@ -305,26 +337,40 @@ export default {
 		 * widget from the type/format); the widget is then clamped to the minimal
 		 * set this dialog renders (text / textarea / number / checkbox). Fields
 		 * the schema does not declare fall back to a plain text input.
+		 *
+		 * An input that declares `options` is a picker whatever the schema
+		 * says, because its choices are the ones this transition offers on
+		 * this record. A declared `label` names the field over the schema's.
 		 */
 		fields() {
 			const keys = this.inputs.map((input) => input.field)
 			const resolved = fieldsFromSchema(this.schema, { include: keys, includeReadOnly: true })
 			return this.inputs.map((input) => {
 				const field = resolved.find((f) => f.key === input.field)
+				if (input.options) {
+					return {
+						key: input.field,
+						label: input.label || (field && field.label) || input.field,
+						description: (field && field.description) || '',
+						widget: 'select',
+						options: input.options,
+						required: input.required,
+					}
+				}
 				const prop = (this.schema && this.schema.properties && this.schema.properties[input.field]) || null
 				if (prop && prop.type === 'object' && prop.properties && typeof prop.properties === 'object') {
 					return this.objectField(input, prop)
 				}
 				if (!field) {
-					return { key: input.field, label: input.field, description: '', widget: 'text', required: input.required }
+					return { key: input.field, label: input.label || input.field, description: '', widget: 'text', required: input.required }
 				}
 				if (field.reference && field.reference.multiple !== true) {
 					const register = field.reference.register || this.register
 					if (register !== '') {
-						return { ...field, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
+						return { ...field, label: input.label || field.label, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
 					}
 				}
-				return { ...field, widget: this.clampWidget(field.widget), required: input.required }
+				return { ...field, label: input.label || field.label, widget: this.clampWidget(field.widget), required: input.required }
 			})
 		},
 
@@ -438,6 +484,40 @@ export default {
 			}
 		},
 
+		/**
+		 * The choices an input declares, as `[{ value, label }]`, or null when
+		 * it declares none. An option without a value is dropped, because it
+		 * cannot be sent; one without a label shows its value.
+		 *
+		 * @param {unknown} options The input's declared `options`.
+		 * @return {Array<{value: string, label: string}>|null}
+		 */
+		declaredOptions(options) {
+			if (!Array.isArray(options)) {
+				return null
+			}
+			const usable = options
+				.filter((option) => option && typeof option === 'object'
+					&& (typeof option.value === 'string' || typeof option.value === 'number')
+					&& String(option.value).trim() !== '')
+				.map((option) => ({
+					value: String(option.value),
+					label: typeof option.label === 'string' && option.label.trim() !== '' ? option.label.trim() : String(option.value),
+				}))
+			return usable.length > 0 ? usable : null
+		},
+
+		/**
+		 * The option a picker field currently holds, or null.
+		 *
+		 * @param {object} field The select field descriptor.
+		 * @return {{value: string, label: string}|null}
+		 */
+		selectedOption(field) {
+			const value = this.values[field.key]
+			return field.options.find((option) => option.value === String(value ?? '')) || null
+		},
+
 		/**
 		 * Ids a reference picker must not offer: the current record, when the
 		 * input's `picker.excludeSelf` says so.

package/src/index.js

@@ -542,6 +542,8 @@ export { currentTheme, useCurrentTheme } from './composables/useCurrentTheme.js'
 export { ROADMAP_LABEL_BLOCKLIST } from './utils/roadmapLabelBlocklist.js'
 // The words a person reads for a notification rule key (never the raw key).
 export { humaniseRuleKey, notificationRuleLabel } from './utils/notificationRuleLabel.js'
+// An identifier-shaped key made readable (`shortDescription` → "Short description").
+export { humaniseKey } from './utils/humaniseKey.js'
 
 // Shared field validators. These are UX affordances that run in the browser —
 // they do NOT replace server-side validation, which stays authoritative at the

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.93.0",
+	"version": "2.96.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -150,6 +150,7 @@
 							"title": { "type": "string", "description": "i18n key / text for the tour name (restart menu)." },
 							"trigger": { "type": "string", "enum": ["first-visit", "version-bump", "empty-index", "manual"], "default": "manual", "description": "When the tour auto-starts." },
 							"minAppVersion": { "type": "string", "description": "Semver; the tour is inert below this app version." },
+							"startOn": { "type": "array", "items": { "type": "string", "minLength": 1 }, "minItems": 1, "uniqueItems": true, "description": "Route names the tour may auto-start on. A user who first lands anywhere else, such as on a case opened from a link, does not get the tour there: it waits until they reach one of these routes. Without it a tour whose first step is centered starts wherever the user lands. Has no effect on a tour started by hand." },
 							"steps": {
 								"type": "array",
 								"description": "Ordered steps.",
@@ -808,6 +809,11 @@
 			"pattern": "^@row\\.[A-Za-z][A-Za-z0-9_.@]*$",
 			"description": "Row context: a field of the row a row action runs on (@row.<field>, dot path allowed), read by the field-list widget's rowActions request url and payload (payload values resolve at any depth). Mirrors SENTINEL_TOKEN_PATTERNS.row."
 		},
+		"sentinelContextToken": {
+			"type": "string",
+			"pattern": "^@context\\.[A-Za-z][A-Za-z0-9_.]*$",
+			"description": "Detail context: a record a detail page reads beside the loaded one (`config.visibilityContext`), read by a grid widget's or a tab's `visibleWhen` field as @context.<name>.<field> (dot path allowed). Mirrors SENTINEL_TOKEN_PATTERNS.context."
+		},
 		"sentinelSubjectToken": {
 			"type": "string",
 			"pattern": "^@subject\\.[A-Za-z][A-Za-z0-9_.]*$",
@@ -826,6 +832,7 @@
 				{ "$ref": "#/$defs/sentinelAnswerToken" },
 				{ "$ref": "#/$defs/sentinelRowToken" },
 				{ "$ref": "#/$defs/sentinelSubjectToken" },
+				{ "$ref": "#/$defs/sentinelContextToken" },
 				{ "$ref": "#/$defs/sentinelDeprecatedToken" }
 			]
 		},
@@ -4297,7 +4304,7 @@
 						},
 						"headerButtons": {
 							"type": "array",
-							"description": "type='index': buttons beside the page title, as the board's \"Export\" and \"New case\" (zuiddrecht-pixel-gaps-3). `action` is `add` (the Add flow; the label defaults to the Add label), `export` (the export leaf in `format`, else the export dialog; under the board look it reads \"Download\" by default), `actions-menu` (the page's header actions as one labelled menu button, absent when the page has none), `import`, `refresh`, or the id of a `headerActions` entry. Under the board look the buttons render in a fixed order whatever the manifest declares: export, actions-menu, other secondary buttons, the buildiq square, then the primary button. Shown only with `showTitle`; when they show, the actions bar drops its Views and Actions menus, and the Add button and Export menu when a button takes their action. Maps to CnIndexPage `headerButtons`.",
+							"description": "type='index': buttons beside the page title, as the board's \"Export\" and \"New case\" (zuiddrecht-pixel-gaps-3). `action` is `add` (the Add flow; the label defaults to the Add label), `export` (the export leaf in `format`, else the export dialog; under the board look it reads \"Download\" by default), `actions-menu` (the page's header actions as one labelled menu button, absent when the page has none), `import`, `refresh`, or the id of a `headerActions` entry. Under the board look the buttons render in a fixed order whatever the manifest declares: export, actions-menu, other secondary buttons, the buildiq square, then the primary button. Shown only with `showTitle`; when they show, the actions bar drops its Views and Actions menus, and the Add button and Export menu when a button takes their action. Maps to CnIndexPage `headerButtons`. type='reports' (screens-reports-header-buttons, 2.96.0): the same buttons beside the reports page title, as board DcRapportages draws \"Downloaden\". There `label` is required and `action` is the id of a `headerActions` entry (same shape as on an index page), which says what the click does; every click also emits `header-action`. Under the board look the buildiq square sits between the secondary buttons and the primary one. Maps to CnReportsPage `headerButtons`.",
 							"items": {
 								"type": "object",
 								"additionalProperties": false,
@@ -4349,6 +4356,20 @@
 							"minLength": 1,
 							"description": "type='detail': the id of a widget in `widgets` to render inside the header on its own row under the title, without a card of its own, e.g. the stages bars (zuiddrecht-pixel-gaps-2). The widget leaves the body grid. Maps to CnDetailPage `headerWidget`."
 						},
+						"visibilityContext": {
+							"type": "object",
+							"description": "type='detail': records the page reads beside the loaded one, so a widget's or a tab's `visibleWhen` can ask about them (detail-widgets-visible-when). `{ <name>: { field, register, schema } }`: `field` is the property of the loaded record holding the other record's id, and a condition reads that record as `@context.<name>.<path>`, e.g. `{ \"field\": \"@context.caseType.category\", \"op\": \"in\", \"value\": [\"Sociaal domein\"] }`. A record that cannot be read is absent, so its condition fails safe. Maps to CnDetailPage `visibilityContext`.",
+							"additionalProperties": {
+								"type": "object",
+								"required": ["field", "register", "schema"],
+								"additionalProperties": false,
+								"properties": {
+									"field": { "type": "string", "minLength": 1, "description": "Dot-path on the loaded record to the id of the record to read." },
+									"register": { "type": "string", "minLength": 1, "description": "Register slug or id of the record to read." },
+									"schema": { "type": "string", "minLength": 1, "description": "Schema slug or id of the record to read." }
+								}
+							}
+						},
 						"mapConfig": {
 							"type": "object",
 							"additionalProperties": true,

package/src/utils/buildManifest.js

@@ -195,6 +195,7 @@ export function applyMenuRelocations(menu, relocations) {
 	if (!relocations || typeof relocations !== 'object') {
 		return menu
 	}
+	const heldEntries = captionsHoldingEntries(menu)
 	for (let pass = 0; pass < 5; pass++) {
 		const moves = []
 		for (let i = menu.length - 1; i >= 0; i--) {
@@ -240,9 +241,42 @@ export function applyMenuRelocations(menu, relocations) {
 			}
 		})
 	}
-	// Drop empty group shells left behind by relocations.
-	return menu.filter((m) => m.route || m.href || m.action
+	// Drop empty group shells left behind by relocations. A caption (a
+	// section heading) has no route and no children and is kept, unless the
+	// relocations emptied it: every entry under it moved away.
+	const kept = menu.filter((m) => m.type === 'caption' || m.route || m.href || m.action
 		|| (Array.isArray(m.children) && m.children.length > 0))
+	const holdingNow = captionsHoldingEntries(kept)
+	return kept.filter((m) => m.type !== 'caption' || !heldEntries.has(m) || holdingNow.has(m))
+}
+
+/**
+ * The captions (`type: "caption"`) that have at least one entry under them:
+ * a non-caption entry of the same section before the next caption.
+ *
+ * @param {Array<object>} menu The top-level menu.
+ * @return {Set<object>} The captions holding an entry.
+ */
+function captionsHoldingEntries(menu) {
+	const holding = new Set()
+	menu.forEach((entry, index) => {
+		if (entry.type !== 'caption') {
+			return
+		}
+		const section = entry.section ?? 'main'
+		for (let i = index + 1; i < menu.length; i++) {
+			const next = menu[i]
+			if ((next.section ?? 'main') !== section) {
+				continue
+			}
+			if (next.type === 'caption') {
+				break
+			}
+			holding.add(entry)
+			break
+		}
+	})
+	return holding
 }
 
 /**

package/src/utils/detailWidgetVisibility.js

@@ -0,0 +1,145 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * detailWidgetVisibility: whether a widget on a detail page shows for the
+ * loaded record, through the shared `visibleWhen` grammar.
+ *
+ * A detail page can name records it reads beside the loaded one
+ * (`visibilityContext`, e.g. a case's case type). A condition reads such a
+ * record as `@context.<name>.<path>`, so a widget can be shown for some case types
+ * only while the configuration stays in the app manifest.
+ *
+ * @module utils/detailWidgetVisibility
+ */
+
+import { cnFetchJson } from './cnFetch.js'
+import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen, isWorkspaceCondition } from './visibleWhen.js'
+
+/**
+ * Read a reference value as an id: a plain string or number, or an object
+ * carrying `id`, `uuid` or `@self.id` (an extended reference).
+ *
+ * @param {unknown} value The value of the reference field.
+ * @return {string} The id, or '' when there is none.
+ */
+function referenceId(value) {
+	if (typeof value === 'string' || typeof value === 'number') {
+		return String(value)
+	}
+	if (value && typeof value === 'object') {
+		const id = value.id ?? value.uuid ?? (value['@self'] && value['@self'].id)
+		return id === undefined || id === null ? '' : String(id)
+	}
+	return ''
+}
+
+/**
+ * The records a `visibilityContext` names for one loaded record.
+ *
+ * @param {object} context `{ <name>: { field, register, schema } }`.
+ * @param {object|null} record The loaded record.
+ * @return {Array<{key: string, register: string, schema: string, id: string}>} One entry per usable name; `id` is '' when the record holds no reference.
+ * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+ */
+export function visibilityContextRefs(context, record) {
+	if (!context || typeof context !== 'object' || !record || typeof record !== 'object') {
+		return []
+	}
+	return Object.entries(context)
+		.filter(([name, ref]) => name !== '' && ref && typeof ref === 'object'
+			&& typeof ref.field === 'string' && ref.field !== ''
+			&& typeof ref.register === 'string' && ref.register !== ''
+			&& typeof ref.schema === 'string' && ref.schema !== '')
+		.map(([name, ref]) => ({
+			key: name,
+			register: ref.register,
+			schema: ref.schema,
+			id: referenceId(ref.field.split('.').reduce((obj, part) => (obj === null || obj === undefined ? obj : obj[part]), record)),
+		}))
+}
+
+/**
+ * Read the records `refs` names. A reference without an id, and a read that
+ * fails, resolve `null`: the record is absent, and a condition on it fails
+ * safe rather than throwing out of the page.
+ *
+ * @param {Array<{key: string, register: string, schema: string, id: string}>} refs From {@link visibilityContextRefs}.
+ * @param {Map<string, object|null>} [cache] Rows already read, by `register/schema/id`.
+ * @return {Promise<object>} `{ <name>: row | null }`.
+ * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+ */
+export async function fetchVisibilityRows(refs, cache) {
+	const rows = {}
+	await Promise.all((refs || []).map(async (ref) => {
+		if (!ref.id) {
+			rows[ref.key] = null
+			return
+		}
+		const cacheKey = `${ref.register}/${ref.schema}/${ref.id}`
+		if (cache && cache.has(cacheKey)) {
+			rows[ref.key] = cache.get(cacheKey)
+			return
+		}
+		let row
+		try {
+			const body = await cnFetchJson(`/apps/openregister/api/objects/${encodeURIComponent(ref.register)}/${encodeURIComponent(ref.schema)}/${encodeURIComponent(ref.id)}`)
+			row = body && typeof body === 'object' ? body : null
+		} catch {
+			row = null
+		}
+		if (cache) {
+			cache.set(cacheKey, row)
+		}
+		rows[ref.key] = row
+	}))
+	return rows
+}
+
+/**
+ * The data a widget condition reads: the record, with the named records
+ * beside it under `@context.<name>`. Null while the record has not loaded.
+ *
+ * @param {object|null} record The loaded record.
+ * @param {object} [rows] `{ <name>: row | null }`.
+ * @return {object|null} The condition data.
+ * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+ */
+export function widgetConditionData(record, rows) {
+	if (!record || typeof record !== 'object') {
+		return null
+	}
+	return { ...record, '@context': { ...(rows || {}) } }
+}
+
+/**
+ * Whether a widget's own `visibleWhen` lets it show on a detail page.
+ *
+ * No condition: shown, as before. A workspace condition: shown, a detail page
+ * has no workspace. While the data is not there (`data` null, or `pending`):
+ * hidden, so the widget never shows and then vanishes. A local condition is
+ * decided here; an endpoint or source condition takes its answer from
+ * `answers` (by widget id) and is hidden until it has one.
+ *
+ * @param {object|null} widget The widget definition.
+ * @param {object|null} data From {@link widgetConditionData}.
+ * @param {{pending?: boolean, answers?: object}} [state] Whether named records are still on their way, and the remote answers.
+ * @return {boolean} Whether the widget shows.
+ * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+ */
+export function detailWidgetVisible(widget, data, state = {}) {
+	const cond = widget && typeof widget === 'object' ? widget.visibleWhen : null
+	if (cond === null || cond === undefined) {
+		return true
+	}
+	if (typeof cond === 'object' && !Array.isArray(cond) && isWorkspaceCondition(cond)) {
+		return true
+	}
+	if (!data || state.pending === true) {
+		return false
+	}
+	if (isLocallyDecidableVisibleWhen(cond)) {
+		return evaluateVisibleWhenLocal(cond, data)
+	}
+	return Boolean(state.answers && state.answers[widget.id] === true)
+}

package/src/utils/formatMetric.js

@@ -226,6 +226,35 @@ export function metricLocale() {
 	}
 }
 
+/**
+ * A format spec with its literal `prefix` / `suffix` run through the host
+ * translate function. A `@`-token, an empty string, or a missing translate
+ * leaves the affix as written.
+ *
+ * @param {object} format The `content.format` spec.
+ * @param {((text: string) => string)|null} translate The host translate function.
+ * @return {object} A copy of the spec (the same object when nothing changes).
+ * @spec openspec/changes/screens-metric-affix-translate/specs/dashboard-page/spec.md#requirement-a-metric-prefix-and-suffix-are-translated
+ */
+export function translateMetricAffixes(format, translate) {
+	const fmt = format || {}
+	if (typeof translate !== 'function') {
+		return fmt
+	}
+	let out = fmt
+	for (const key of ['prefix', 'suffix']) {
+		const text = fmt[key]
+		if (typeof text === 'string' && text.trim() !== '' && text.charAt(0) !== '@') {
+			const translated = translate(text)
+			if (typeof translated === 'string' && translated !== text) {
+				out = out === fmt ? { ...fmt } : out
+				out[key] = translated
+			}
+		}
+	}
+	return out
+}
+
 /**
  * Format a numeric value per a manifest `content.format` spec.
  *
@@ -250,11 +279,18 @@ export function metricLocale() {
  * @param {unknown}      value     The raw value to format.
  * @param {object} format    The `content.format` spec (`{ style, currency, currencyField, decimals, prefix, suffix }`).
  * @param {object} configCtx The page-level app-config map for `@config.<key>` resolution.
+ * A literal `prefix` / `suffix` (one that is not a `@config.` or `@object.`
+ * token) is run through `translate` when one is given, as every other
+ * manifest-authored string is, so an app's catalogue entry for " days"
+ * (" dagen") applies. A token is resolved, never translated.
+ *
  * @param {object|null} [object] The detail page's object, for `currencyField` and `@object.<field>`.
+ * @param {((text: string) => string)|null} [translate] The host app's translate function (`cnTranslate`).
  * @return {string} The formatted display string.
  * @spec openspec/changes/stat-currency-from-object/specs/dashboard-page/spec.md#requirement-a-money-value-is-shown-in-the-currency-the-entry-names
+ * @spec openspec/changes/screens-metric-affix-translate/specs/dashboard-page/spec.md#requirement-a-metric-prefix-and-suffix-are-translated
  */
-export function formatMetricValue(value, format, configCtx, object = null) {
+export function formatMetricValue(value, format, configCtx, object = null, translate = null) {
 	if (value === null || value === undefined) {
 		return '—'
 	}
@@ -263,7 +299,7 @@ export function formatMetricValue(value, format, configCtx, object = null) {
 		return String(value)
 	}
 
-	const fmt = resolveConfigFormat(format, configCtx, object)
+	const fmt = resolveConfigFormat(translateMetricAffixes(format, translate), configCtx, object)
 	const locale = metricLocale()
 	// `duration-hours` and `decimal` default to ONE fraction digit; the
 	// other styles keep the pre-existing default of 0.

package/src/utils/gridStack.js

@@ -53,3 +53,42 @@ export function readGridGeometry(items) {
 	}
 	return map
 }
+
+/**
+ * Where the items under a growing cell go so they keep their order: every item
+ * the growth would overlap moves down by the growth, and so does every item
+ * that move would overlap in turn. Items beside the cell stay put.
+ *
+ * GridStack resolves the same collision itself, but not in order: when
+ * pipelinq's size-to-content banner grew from two rows to three, the
+ * full-width card under the stat tiles landed below the lists.
+ *
+ * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+ * @param {Array<{x: number, y: number, w: number, h: number}>} nodes The grid's items (the growing one among them).
+ * @param {{x: number, y: number, w: number, h: number}} node The growing item.
+ * @param {number} h Its new height, in grid rows.
+ * @return {Array<{node: object, y: number}>} The items to move and their new row, bottom-most first.
+ */
+export function planGrowth(nodes, node, h) {
+	const delta = h - node.h
+	if (!(delta > 0)) {
+		return []
+	}
+	const moved = new Map()
+	const overlaps = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h
+	const queue = [{ x: node.x, y: node.y, w: node.w, h }]
+	while (queue.length > 0) {
+		const rect = queue.shift()
+		for (const other of nodes) {
+			if (other === node || moved.has(other) || !overlaps(rect, other)) {
+				continue
+			}
+			const next = { x: other.x, y: other.y + delta, w: other.w, h: other.h }
+			moved.set(other, next.y)
+			queue.push(next)
+		}
+	}
+	return [...moved.entries()]
+		.map(([item, y]) => ({ node: item, y }))
+		.sort((a, b) => b.y - a.y)
+}

package/src/utils/humaniseKey.js

@@ -0,0 +1,38 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Make an identifier-shaped key readable for a person. Pure: no Vue.
+ */
+
+/**
+ * Split camelCase, snake_case and kebab-case into words, keep acronyms, and
+ * capitalise only the first word.
+ *
+ * `caseAssigned` → "Case assigned", `object_created` → "Object created",
+ * `newBRPRecord` → "New BRP record".
+ *
+ * @param {string} key The key.
+ * @return {string} A readable sentence-case label, or the key when it has no words.
+ * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-nested-object-reads-as-a-list-per-key
+ */
+export function humaniseKey(key) {
+	const words = String(key || '')
+		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+		.split(/[\s_\-.]+/)
+		.filter(Boolean)
+	if (words.length === 0) {
+		return String(key || '')
+	}
+	return words
+		.map((word, index) => {
+			const isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word)
+			if (isAcronym) {
+				return word
+			}
+			const lower = word.toLowerCase()
+			return index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower
+		})
+		.join(' ')
+}

package/src/utils/notificationRuleLabel.js

@@ -28,6 +28,8 @@
  * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
  */
 
+import { humaniseKey } from './humaniseKey.js'
+
 /**
  * Pick the string for the current language out of a string or per-locale map.
  *
@@ -54,34 +56,14 @@ export function resolveLocalised(value, language = 'en') {
 }
 
 /**
- * Make a rule key readable: split camelCase, snake_case and kebab-case into
- * words, keep acronyms, and capitalise only the first word.
- *
- * `caseAssigned` → "Case assigned", `object_created` → "Object created",
- * `newBRPRecord` → "New BRP record".
+ * Make a rule key readable (`caseAssigned` → "Case assigned"); see `humaniseKey`.
  *
  * @param {string} key The rule key.
  * @return {string} A readable sentence-case label, or the key when it has no words.
+ * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md#requirement-a-notification-rule-reads-as-a-label
  */
 export function humaniseRuleKey(key) {
-	const words = String(key || '')
-		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
-		.split(/[\s_\-.]+/)
-		.filter(Boolean)
-	if (words.length === 0) {
-		return String(key || '')
-	}
-	return words
-		.map((word, index) => {
-			const isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word)
-			if (isAcronym) {
-				return word
-			}
-			const lower = word.toLowerCase()
-			return index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower
-		})
-		.join(' ')
+	return humaniseKey(key)
 }
 
 /**

package/src/utils/resolveManifestTokens.js

@@ -56,6 +56,7 @@ export const SENTINEL_RESOLVERS = Object.freeze({
 	answer: 'resolveAssignValue (utils/formAssign.js)',
 	row: 'CnFieldListWidget (rowActions request)',
 	subject: 'CnBannerWidget (action route)',
+	context: 'detailWidgetVisible (utils/detailWidgetVisibility.js)',
 })
 
 /**