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

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",
@@ -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.56.0-beta.34",
+  "version": "2.56.0-beta.36",
   "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/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

@@ -28,21 +28,21 @@
 
 		<div class="grid-stack">
 			<div
-				v-for="(item, index) in layout"
+				v-for="item in itemsInRowOrder"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
 				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
-				:aria-label="resolveItemLabel(item, index)"
+				:aria-label="resolveItemLabel(item, layout.indexOf(item))"
 				:aria-describedby="itemDescribedBy"
 				: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">
@@ -71,6 +71,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { GridStack } from 'gridstack'
+import { planGrowth } from '../../utils/gridStack.js'
 // `gridstack` is a peerDependency (see package.json), not bundled — this
 // component's JS and the consumer's GridStack stylesheet MUST come from the
 // exact same installed copy, because GridStack's JS writes layout state
@@ -99,6 +100,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 +323,62 @@ 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: {
+		/**
+		 * The layout's items top to bottom, then left to right: the order the
+		 * items are in the page, so GridStack places them in that order.
+		 *
+		 * GridStack sizes a size-to-content cell while it adds the items, one
+		 * at a time, and an item it adds onto a cell that has already grown
+		 * moves itself below whatever it then collides with. In the layout's
+		 * own order a card declared after the lists (pipelinq's full-width
+		 * "client in focus" card) was added last, so when the banner above
+		 * it grew it skipped past the stat tiles AND the lists and landed at
+		 * the bottom. Added top to bottom, every card lands under the one
+		 * above it. It is also the order a screen reader and the Tab key
+		 * follow. An item without a row or column sorts after the items
+		 * that have one, in the layout's order.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {Array<object>} The items in row order.
+		 */
+		itemsInRowOrder() {
+			const items = Array.isArray(this.layout) ? [...this.layout] : []
+			const at = (value) => (Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER)
+			return items.sort((a, b) => (at(a.gridY) - at(b.gridY)) || (at(a.gridX) - at(b.gridX)))
+		},
+
+		/**
+		 * 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 +445,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 +510,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
@@ -492,6 +633,13 @@ export default {
 			)
 		},
 
+		/**
+		 * Build the GridStack grid on the rendered items, install the growth
+		 * wrapper (`keepOrderOnGrowth`) and listen for its changes.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {void}
+		 */
 		initGrid() {
 			if (this.cellHeightCssVar && typeof document !== 'undefined' && document.documentElement) {
 				document.documentElement.style.setProperty(this.cellHeightCssVar, `${this.cellHeight}px`)
@@ -499,7 +647,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,
@@ -508,6 +656,7 @@ export default {
 				removable: false,
 				...(this.columnOpts ? { columnOpts: this.columnOpts } : {}),
 			}, el)
+			this.keepOrderOnGrowth()
 
 			this.grid.on('change', (_event, items) => {
 				this.handleGridChange(items)
@@ -519,6 +668,87 @@ export default {
 			this.syncInteractivity()
 		},
 
+		/**
+		 * Let a size-to-content cell that grows push the cards under it down in
+		 * their order. GridStack resolves that collision itself, but not in
+		 * order: when pipelinq's banner grew from two rows to three, the
+		 * full-width card under the stat tiles landed below the lists, also
+		 * with `float: false`. Every grow after the grid is built, whether
+		 * GridStack measures it on resize or this grid's content observer asks
+		 * for it, now first moves the cards the growth reaches down by the
+		 * growth (`planGrowth`), bottom-most first, and only then grows the
+		 * cell, so GridStack has no collision left to resolve. The wrapper is
+		 * installed after `GridStack.init` has already measured the cells on
+		 * load; the order on load comes from adding the items in row order
+		 * (`itemsInRowOrder`). A cell that shrinks is left to GridStack as
+		 * before.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {void}
+		 */
+		keepOrderOnGrowth() {
+			const grid = this.grid
+			if (!grid || typeof grid.resizeToContent !== 'function' || typeof grid.update !== 'function') {
+				return
+			}
+			const resize = grid.resizeToContent.bind(grid)
+			grid.resizeToContent = (el) => {
+				const node = el && el.gridstackNode
+				const nodes = grid.engine && Array.isArray(grid.engine.nodes) ? grid.engine.nodes : null
+				const rows = node && nodes ? this.contentRows(el, node) : null
+				const plan = rows ? planGrowth(nodes, node, rows) : []
+				if (plan.length === 0) {
+					resize(el)
+					return
+				}
+				// Inside a batch the moves are not packed until the cell has grown.
+				const batching = Boolean(grid.engine.batchMode)
+				if (!batching) {
+					grid.batchUpdate()
+				}
+				for (const step of plan) {
+					grid.update(step.node.el, { y: step.y })
+				}
+				resize(el)
+				if (!batching) {
+					grid.batchUpdate(false)
+				}
+			}
+		},
+
+		/**
+		 * The rows a size-to-content cell needs for its content, measured the
+		 * way GridStack's `resizeToContent` measures it (the content's first
+		 * child, plus the cell's own padding), within its size-to-content row
+		 * maximum and its minimum and maximum height.
+		 *
+		 * @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 {HTMLElement} el The cell.
+		 * @param {object} node Its GridStack node.
+		 * @return {number|null} The rows, or null when it cannot be measured.
+		 */
+		contentRows(el, node) {
+			const cell = this.grid.getCellHeight(true)
+			const item = el.querySelector('.grid-stack-item-content')
+			const child = item && item.firstElementChild
+			if (!el.clientHeight || !cell || !child || !Number.isFinite(node.h)) {
+				return null
+			}
+			const padding = el.clientHeight - item.clientHeight
+			const itemHeight = node.h * cell - padding
+			const wanted = child.getBoundingClientRect().height || itemHeight
+			let rows = Math.ceil((node.h * cell + wanted - itemHeight) / cell)
+			if (Number.isInteger(node.sizeToContent) && rows > node.sizeToContent) {
+				rows = node.sizeToContent
+			}
+			if (node.minH && rows < node.minH) {
+				rows = node.minH
+			} else if (node.maxH && rows > node.maxH) {
+				rows = node.maxH
+			}
+			return rows
+		},
+
 		/**
 		 * Keep both editing lanes in step with whether an edit could actually be
 		 * kept: the pointer's handles, and — through `reflowed` feeding
@@ -586,6 +816,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 +1222,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

@@ -4587,6 +4587,11 @@ export default {
 			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