@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/l10n/en.json

@@ -1,5 +1,16 @@
 {
   "translations": {
+    "Channel": "Channel",
+    "Outcome": "Outcome",
+    "Chat": "Chat",
+    "Counter": "Counter",
+    "Social media": "Social media",
+    "Letter": "Letter",
+    "Save contact moment": "Save contact moment",
+    "Saving…": "Saving…",
+    "Subject is required": "Subject is required",
+    "Cannot save right now": "Cannot save right now",
+    "Failed to save interaction": "Failed to save interaction",
     "You cannot see these files": "You cannot see these files",
     "Delete {name}? This cannot be undone here.": "Delete {name}? This cannot be undone here.",
     "Linked items": "Linked items",
@@ -326,6 +337,9 @@
     "Constant": "Constant",
     "Copy": "Copy",
     "Copied": "Copied",
+    "Copy the name": "Copy the name",
+    "Copy the value": "Copy the value",
+    "Copying did not work. Select the text and copy it yourself.": "Copying did not work. Select the text and copy it yourself.",
     "Show": "Show",
     "Copy {label}": "Copy {label}",
     "Show {label}": "Show {label}",
@@ -1403,7 +1417,8 @@
     "This answer was refused.": "This answer was refused.",
     "No value ({count})": "No value ({count})",
     "{start} to {end}": "{start} to {end}",
-    "Breadcrumb": "Breadcrumb"
+    "Breadcrumb": "Breadcrumb",
+    "Moving to {stage}": "Moving to {stage}"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1,5 +1,16 @@
 {
   "translations": {
+    "Channel": "Kanaal",
+    "Outcome": "Uitkomst",
+    "Chat": "Chat",
+    "Counter": "Balie",
+    "Social media": "Sociale media",
+    "Letter": "Brief",
+    "Save contact moment": "Contactmoment opslaan",
+    "Saving…": "Opslaan…",
+    "Subject is required": "Onderwerp is verplicht",
+    "Cannot save right now": "Opslaan kan nu niet",
+    "Failed to save interaction": "Het contactmoment is niet opgeslagen",
     "You cannot see these files": "Je kunt deze bestanden niet zien",
     "Delete {name}? This cannot be undone here.": "{name} verwijderen? Dit kun je hier niet ongedaan maken.",
     "Linked items": "Gekoppelde items",
@@ -348,6 +359,9 @@
     "Constant": "Constante",
     "Copy": "Kopiëren",
     "Copied": "Gekopieerd",
+    "Copy the name": "Naam kopiëren",
+    "Copy the value": "Waarde kopiëren",
+    "Copying did not work. Select the text and copy it yourself.": "Kopiëren lukte niet. Selecteer de tekst en kopieer hem zelf.",
     "Show": "Tonen",
     "Copy {label}": "{label} kopiëren",
     "Show {label}": "{label} tonen",
@@ -355,7 +369,7 @@
     "Copy items": "Items kopiëren",
     "Copy of {name}": "Kopie van {name}",
     "Copy property": "Eigenschap kopiëren",
-    "Copy selected": "Geselecteerde kopiëren",
+    "Copy selected": "Selectie kopiëren",
     "Copy {key}": "Kopieer {key}",
     "Create": "Aanmaken",
     "Create (C)": "Aanmaken (C)",
@@ -386,7 +400,7 @@
     "Delete note": "Notitie verwijderen",
     "Delete objects": "Objecten verwijderen",
     "Delete property": "Eigenschap verwijderen",
-    "Delete selected": "Geselecteerde verwijderen",
+    "Delete selected": "Selectie verwijderen",
     "Delete {key}": "Verwijder {key}",
     "Deprecated": "Verouderd",
     "Description": "Beschrijving",
@@ -1148,7 +1162,7 @@
     "Could not load entries.": "Kon registraties niet laden.",
     "Could not create client.": "Kon klant niet aanmaken.",
     "{count} selected": "{count} geselecteerd",
-    "Clear selection": "Selectie wissen",
+    "Clear selection": "Selectie opheffen",
     "Overdue by 1 day": "1 dag over tijd",
     "Overdue by {days} days": "{days} dagen over tijd",
     "Overdue": "Over tijd",
@@ -1547,7 +1561,30 @@
     "This answer was refused.": "Dit antwoord is geweigerd.",
     "No value ({count})": "Geen waarde ({count})",
     "{start} to {end}": "{start} tot {end} uur",
-    "Breadcrumb": "Kruimelpad"
+    "Breadcrumb": "Kruimelpad",
+    "Cannot move: this record has no id, so the move would create a duplicate instead of updating it.": "Verplaatsen kan niet: dit record heeft geen id, dus de verplaatsing zou een kopie maken in plaats van het record bij te werken.",
+    "Could not check whether this stage can be reached": "Kon niet controleren of deze fase bereikbaar is",
+    "Could not check which stages can be reached": "Kon niet controleren welke fases bereikbaar zijn",
+    "Could not load the stages": "De fases konden niet worden geladen",
+    "Just a moment, the last move is still running": "Een moment, de vorige verplaatsing loopt nog",
+    "Loading stages": "Fases laden",
+    "Move to {stage}": "Naar {stage} verplaatsen",
+    "Moved to {stage}": "Verplaatst naar {stage}",
+    "No stages to show": "Geen fases om te tonen",
+    "Not reachable from the current stage": "Niet bereikbaar vanuit de huidige fase",
+    "Stages": "Fases",
+    "The move could not be made": "De verplaatsing is niet gelukt",
+    "The record is not loaded yet": "Het record is nog niet geladen",
+    "The stages cannot be read for this record yet": "De fases van dit record zijn nog niet te lezen",
+    "This move is not possible right now": "Deze verplaatsing kan nu niet",
+    "This stage cannot be chosen right now": "Deze fase kan nu niet worden gekozen",
+    "Are you sure you want to \"{action}\"?": "Weet je zeker dat je \"{action}\" wilt uitvoeren?",
+    "Moved to {state}": "Verplaatst naar {state}",
+    "Moved {title} to {state}": "{title} verplaatst naar {state}",
+    "Transition failed": "De overgang is mislukt",
+    "Closed": "Afgesloten",
+    "Skip to {action}": "Ga naar {action}",
+    "Moving to {stage}": "Bezig met verplaatsen naar {stage}"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.82.0",
+  "version": "2.84.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

@@ -56,6 +56,11 @@
 			</div>
 		</div>
 
+		<!-- `versionCardPosition: "end"`: the app's sections come first, and the
+		     version card and the credential broker follow them (board DcBeheer
+		     starts with the app's own card). The same slot, rendered once. -->
+		<slot v-if="versionCardAtEnd" />
+
 		<!-- Version information card (version, up-to-date check, re-import, support footer) -->
 		<CnVersionInfoCard
 			v-if="showVersionCard"
@@ -151,8 +156,8 @@
 			:appCredentials="appCredentials"
 			data-testid="cn-admin-organisation-credentials" />
 
-		<!-- @slot default The app's own settings sections, rendered below the version card. -->
-		<slot />
+		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. -->
+		<slot v-if="!versionCardAtEnd" />
 
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
@@ -358,6 +363,20 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Where the version card (and the organisation credential broker) sits:
+		 * `start`, above the app's sections (the default), or `end`, after them,
+		 * for a page whose board starts with the app's own card. The keyboard
+		 * order follows, because the slot moves in the markup.
+		 *
+		 * @spec openspec/changes/screens-admin-settings-version-card-end/specs/settings-board-look/spec.md#requirement-the-version-card-can-follow-the-apps-sections
+		 */
+		versionCardPosition: {
+			type: String,
+			default: 'start',
+			validator: (value) => ['start', 'end'].includes(value),
+		},
+
 		/** Version card heading. */
 		versionTitle: {
 			type: String,
@@ -482,6 +501,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the app's sections come before the version card.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-admin-settings-version-card-end/specs/settings-board-look/spec.md#requirement-the-version-card-can-follow-the-apps-sections
+		 */
+		versionCardAtEnd() {
+			return this.versionCardPosition === 'end'
+		},
+
 		/**
 		 * The crumbs that have a label.
 		 *

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -154,7 +154,7 @@ export default {
 			if (!this.register || !this.schema || !this.objectId) {
 				return ''
 			}
-			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trail?${params.toString()}`
+			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/audit-trails?${params.toString()}`
 		},
 	},
 

package/src/components/CnBodySections/CnBodySections.vue

@@ -82,6 +82,8 @@ export default {
 		cnRegistry: { default: () => ({}) },
 		/** Legacy custom-component map provided by CnAppRoot. */
 		cnCustomComponents: { default: () => ({}) },
+		/** The host's translate function for manifest-authored strings, provided by CnAppRoot. */
+		cnTranslate: { default: null },
 	},
 
 	props: {
@@ -201,7 +203,7 @@ export default {
 				return {
 					id,
 					name,
-					title: (section && section.title) || '',
+					title: this.translateTitle((section && section.title) || ''),
 					card: !!(section && section.card),
 					colSpan: section && section.colSpan,
 					placement: section && section.placement,
@@ -213,6 +215,25 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest-authored section title in the reader's language.
+		 *
+		 * The title is written in the manifest, so it belongs to the host
+		 * app's catalogue, the same as every other manifest title the detail
+		 * page shows. A section heading printed raw read "Asked about" to a
+		 * Dutch handler on a pipelinq ticket (Zuiddrecht live round 3).
+		 *
+		 * @param {string} title The title as written in the manifest.
+		 * @return {string} The translated title, or '' when there is none.
+		 * @spec openspec/changes/detail-page-strings-dutch/specs/detail-page-strings-dutch/spec.md#requirement-the-detail-page-speaks-the-readers-language
+		 */
+		translateTitle(title) {
+			if (title === '' || typeof this.cnTranslate !== 'function') {
+				return title
+			}
+			return this.cnTranslate(title)
+		},
+
 		/**
 		 * Resolve a section's host-app component by registry name. Precedence
 		 * matches CnPageRenderer.resolveCustomComponent: the v2 `cnRegistry`

package/src/components/CnCountdownWidget/CnCountdownWidget.vue

@@ -69,6 +69,18 @@ const VARIANT_COLORS = Object.freeze({
  * negative number: "-3 days left" is a puzzle, and an overdue case is the one
  * state a handler must not have to decode.
  *
+ * ## A settled record
+ *
+ * `settledField` names a property on the record that is truthy once the work
+ * the date belongs to is done, such as a case in its final status. A settled
+ * record reads `settledLabel` (default "Closed") in no threshold colour, never
+ * "overdue": a closed case missed nothing that can still be acted on, and a red
+ * count of days on it sends a handler after a case that needs nobody.
+ *
+ * ```js
+ * content: { field: 'deadline', settledField: 'isFinalStatus', settledLabel: 'Handled' }
+ * ```
+ *
  * ## An unset date
  *
  * Renders a dash and no threshold colour. A case with no deadline is not urgent
@@ -91,8 +103,10 @@ export default {
 		 * - `icon` — MDI icon name.
 		 * - `thresholds` — `{ warn, danger }` in days remaining.
 		 * - `showDate` — render the absolute date underneath (default true).
+		 * - `settledField` — property on the record that is truthy once the work is done; the tile then reads `settledLabel` and never counts overdue.
+		 * - `settledLabel` — the headline of a settled record, run through the host's translate function (default "Closed").
 		 *
-		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean }}
+		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean, settledField?: string, settledLabel?: string }}
 		 */
 		content: {
 			type: Object,
@@ -115,6 +129,7 @@ export default {
 		return {
 			cnObjectContextInjected: inject('cnObjectContext', null),
 			cnDetailObjectContextInjected: inject('cnDetailObjectContext', null),
+			cnTranslate: inject('cnTranslate', null),
 		}
 	},
 
@@ -166,17 +181,44 @@ export default {
 			return Math.round((startOfDay(this.targetDate) - startOfDay(new Date())) / MS_PER_DAY)
 		},
 
-		/** @return {boolean} true once the date has passed. */
+		/**
+		 * Whether the record says its work is done (`settledField` is truthy).
+		 *
+		 * @return {boolean} True for a settled record.
+		 * @spec openspec/changes/countdown-settled-record/specs/countdown-settled-record/spec.md#requirement-a-settled-record-never-reads-as-overdue
+		 */
+		isSettled() {
+			const field = this.content?.settledField
+			if (!this.record || !field) {
+				return false
+			}
+			return Boolean(getByPath(this.record, field))
+		},
+
+		/**
+		 * Whether the date has passed on a record still open.
+		 *
+		 * @return {boolean} True when overdue.
+		 * @spec openspec/changes/countdown-settled-record/specs/countdown-settled-record/spec.md#requirement-a-settled-record-never-reads-as-overdue
+		 */
 		isOverdue() {
-			return this.daysRemaining !== null && this.daysRemaining < 0
+			return !this.isSettled && this.daysRemaining !== null && this.daysRemaining < 0
 		},
 
 		/**
 		 * The headline: the remaining time in words.
 		 *
 		 * @return {string} The headline text.
+		 * @spec openspec/changes/countdown-settled-record/specs/countdown-settled-record/spec.md#requirement-a-settled-record-never-reads-as-overdue
 		 */
 		headline() {
+			if (this.isSettled) {
+				const label = this.content?.settledLabel
+				if (label) {
+					return typeof this.cnTranslate === 'function' ? this.cnTranslate(label) : label
+				}
+				return t('nextcloud-vue', 'Closed')
+			}
 			const days = this.daysRemaining
 			if (days === null) {
 				return '—'
@@ -213,10 +255,11 @@ export default {
 		 * The threshold band this date falls in.
 		 *
 		 * @return {string} One of default / success / warning / error.
+		 * @spec openspec/changes/countdown-settled-record/specs/countdown-settled-record/spec.md#requirement-a-settled-record-never-reads-as-overdue
 		 */
 		variant() {
 			const days = this.daysRemaining
-			if (days === null) {
+			if (days === null || this.isSettled) {
 				return 'default'
 			}
 			if (days < 0) {

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -38,11 +38,11 @@
 				:tabindex="itemTabindex"
 				:gs-id="item.id"
 				:gs-x="item.gridX"
-				:gs-y="item.gridY"
+				:gs-y="scaledRow(item.gridY)"
 				:gs-w="item.gridWidth"
-				:gs-h="item.gridHeight"
+				:gs-h="scaledRow(item.gridHeight)"
 				:gs-min-w="minWidth"
-				:gs-min-h="minHeight"
+				:gs-min-h="minRows(item)"
 				:gs-size-to-content="sizeToContentAttr(item)"
 				@keydown="onItemKeydown($event, item)">
 				<div class="grid-stack-item-content">
@@ -99,6 +99,24 @@ let domIdCounter = 0
  */
 const MENU_ANCHOR_OFFSET = 8
 
+/**
+ * How many GridStack rows a layout row is drawn as on a grid with
+ * size-to-content cells (`wantsRowSplit`): 80px rows become 10px rows.
+ */
+const ROW_SPLIT = 8
+
+/**
+ * Whether a layout holds a size-to-content cell (`sizeToContent` true or a
+ * positive row maximum).
+ *
+ * @param {Array<object>} layout The layout items.
+ * @return {boolean} True when one does.
+ */
+function hasFitCell(layout) {
+	return Array.isArray(layout) && layout.some((item) => item
+		&& (item.sizeToContent === true || (Number.isFinite(item.sizeToContent) && item.sizeToContent > 0)))
+}
+
 /**
  * CnDashboardGrid — Low-level grid layout engine powered by GridStack.
  *
@@ -304,10 +322,38 @@ export default {
 			 * on that.
 			 */
 			reflowed: false,
+			/**
+			 * How many GridStack rows one layout row is drawn as: 1, or
+			 * ROW_SPLIT while `wantsRowSplit` holds. Set before the first render,
+			 * since GridStack reads the items' places from their attributes,
+			 * and again when the grid is rebuilt.
+			 */
+			rowSplit: (!this.editable && !this.float && hasFitCell(this.layout)) ? ROW_SPLIT : 1,
 		}
 	},
 
 	computed: {
+		/**
+		 * Whether the grid draws each layout row as ROW_SPLIT finer rows. A
+		 * size-to-content cell can only be a whole number of rows tall, so on
+		 * 80px rows it kept up to a row of empty space under its content and
+		 * a packing grid (`float: false`) could not close it (pipelinq and
+		 * dossiq Mijn werk, decidiq Mijn acties). Split into 10px rows the
+		 * cell ends within 10px of its content and the widgets below move up.
+		 *
+		 * Only in view mode, only on a packing grid with a size-to-content
+		 * cell: every other grid is built exactly as before. Item positions
+		 * and sizes scale with the rows, so every widget keeps its pixel
+		 * place and size until a cell shrinks; the layout itself, what edit
+		 * mode shows and what `layout-change` reports, stays in layout rows.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @return {boolean} True to split the rows.
+		 */
+		wantsRowSplit() {
+			return !this.editable && !this.float && hasFitCell(this.layout)
+		},
+
 		/**
 		 * @return {boolean} Whether the keyboard lane is live — items are
 		 *   focusable and the arrow keys reposition. Requires the opt-in prop,
@@ -374,6 +420,12 @@ export default {
 			this.syncInteractivity()
 		},
 
+		wantsRowSplit(wants) {
+			if (this.grid && (wants ? ROW_SPLIT : 1) !== this.rowSplit) {
+				this.rebuildGrid()
+			}
+		},
+
 		layout: {
 			deep: true,
 			handler(newLayout) {
@@ -433,11 +485,75 @@ export default {
 			}
 			// A number is GridStack's "size to content, but never taller than N rows" (a maximum).
 			if (Number.isFinite(v) && v > 0) {
-				return String(v)
+				return String(v * this.rowSplit)
 			}
 			return undefined
 		},
 
+		/**
+		 * A layout row coordinate or height in GridStack rows (`rowSplit`).
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @param {number|undefined} value The value in layout rows.
+		 * @return {number|undefined} The value in grid rows, or undefined when none is set.
+		 */
+		scaledRow(value) {
+			return Number.isFinite(value) ? value * this.rowSplit : undefined
+		},
+
+		/**
+		 * The smallest height an item may take, in grid rows: `minHeight`
+		 * layout rows, except for a size-to-content cell on split rows, which
+		 * may shrink to its content down to one grid row. The minimum is for
+		 * resizing by hand, and that only happens on whole rows in edit mode.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @param {object} item The layout item.
+		 * @return {number} The minimum height in grid rows.
+		 */
+		minRows(item) {
+			if (this.rowSplit !== 1 && this.sizeToContentAttr(item) !== undefined) {
+				return 1
+			}
+			return this.minHeight * this.rowSplit
+		},
+
+		/**
+		 * Build the grid again with the row split `wantsRowSplit` asks for, as
+		 * edit mode turns on or off: the items go back to their layout places in
+		 * the new rows, and the size-to-content cells are measured again.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @return {void}
+		 */
+		rebuildGrid() {
+			this.disconnectContentObserver()
+			this.grid.destroy(false)
+			this.grid = null
+			this.rowSplit = this.wantsRowSplit ? ROW_SPLIT : 1
+			this.$nextTick(() => {
+				if (!this.$refs.gridContainer) {
+					return
+				}
+				// GridStack wrote its own places onto the items; put the layout's back.
+				for (const item of this.layout) {
+					const el = this.$refs.gridContainer.querySelector(`[gs-id="${item.id}"]`)
+					if (!el) {
+						continue
+					}
+					for (const [name, value] of [['gs-y', this.scaledRow(item.gridY)], ['gs-h', this.scaledRow(item.gridHeight)], ['gs-min-h', this.minRows(item)], ['gs-size-to-content', this.sizeToContentAttr(item)]]) {
+						if (value === undefined) {
+							el.removeAttribute(name)
+						} else {
+							el.setAttribute(name, String(value))
+						}
+					}
+				}
+				this.initGrid()
+				this.observeContentSizes()
+			})
+		},
+
 		/**
 		 * Build the accessible name for a grid item. A custom `itemLabel` wins
 		 * outright; otherwise the first human-readable field on the item is used
@@ -499,7 +615,7 @@ export default {
 			const el = this.$refs.gridContainer.querySelector('.grid-stack')
 			this.grid = GridStack.init({
 				column: this.columns,
-				cellHeight: this.cellHeight,
+				cellHeight: this.cellHeight / this.rowSplit,
 				margin: this.margin,
 				float: this.float,
 				animate: true,
@@ -586,6 +702,12 @@ export default {
 			if (this.isReflowed()) {
 				return
 			}
+			// A grid on split rows is a view-mode grid: what changes in it is
+			// packing and size-to-content measuring, never a user's
+			// arrangement, and it is not reported as one.
+			if (this.rowSplit !== 1) {
+				return
+			}
 			if (!items || items.length === 0) {
 				return
 			}
@@ -986,7 +1108,7 @@ export default {
 						// grid's own position back, which matches and does
 						// nothing here.
 						const x = item.gridX ?? node.x
-						const y = item.gridY ?? node.y
+						const y = Number.isFinite(item.gridY) ? item.gridY * this.rowSplit : node.y
 						if (x !== node.x || y !== node.y) {
 							// The layout said where it goes; GridStack's `change`
 							// for it is not a user's arrangement and is not

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -4578,6 +4578,20 @@ export default {
 			// because the dispatcher only forwards `content` — honour it with a
 			// one-time deprecation warning so those cards render while authors
 			// migrate the key under `content`.
+			// Grid layout (`layout: "grid"`): stat tiles in columns.
+			const stats = content.stats !== undefined ? content.stats : props.stats
+			if (Array.isArray(stats)) {
+				out.stats = stats
+			}
+			const columns = content.columns !== undefined ? content.columns : props.columns
+			if (columns !== undefined) {
+				out.columns = Number(columns)
+			}
+			// `tiles: "box"`: each grid tile on a surface of its own.
+			const tiles = content.tiles !== undefined ? content.tiles : props.tiles
+			if (typeof tiles === 'string') {
+				out.tiles = tiles
+			}
 			const contentEntries = content.entries !== undefined ? content.entries : props.entries
 			if (contentEntries !== undefined) {
 				out.entries = contentEntries

package/src/components/CnDeltaWidget/CnDeltaWidget.vue

@@ -511,7 +511,7 @@ export default {
 		 * @return {string} The formatted string.
 		 */
 		formatNumber(value) {
-			return formatMetricValue(value, this.resolvedFormat, unwrapAppConfig(this.cnAppConfig))
+			return formatMetricValue(value, this.resolvedFormat, unwrapAppConfig(this.cnAppConfig), null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.md

@@ -446,6 +446,8 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 `headerCard` (default `false`) draws the header as a bordered card. `headerWidget` (default `''`) names a widget in `widgets` to render inside the header under the title, without a card of its own and out of the body grid: the stages bars of the board's case card.
 
+`visibilityContext` (default `{}`) names records the page reads beside the loaded one, `{ <name>: { field, register, schema } }`. A grid widget's `visibleWhen` is read against the record, and against those records as `@context.<name>.<path>`, so a case page can show a widget for some case types only (`{ "field": "@context.caseType.category", "op": "in", "value": ["Sociaal domein"] }`). A widget without `visibleWhen` shows as before; a conditional one stays out of the grid until the record and the named records have loaded.
+
 `showWidgetActions` (Boolean, default `true`): `false` (manifest `config.showWidgetActions: false`) drops the overflow Actions menu from the cards of the body grid and the side column, unless a widget definition sets `showActions: true`.
 
 ### Favourite and follow