@conduction/nextcloud-vue 2.101.0 → 2.103.0

package/l10n/en.json

@@ -1720,7 +1720,11 @@
     "Made {date}": "Made {date}",
     "expires {date}": "expires {date}",
     "Loading …": "Loading …",
-    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys"
+    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys",
+    "No contacts linked": "No contacts linked",
+    "No relations yet": "No relations yet",
+    "Period": "Period",
+    "On": "On"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1933,7 +1933,11 @@
     "Expires today": "Verloopt vandaag",
     "Made {date}": "Gemaakt {date}",
     "expires {date}": "verloopt {date}",
-    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag"
+    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag",
+    "No contacts linked": "Geen contacten gekoppeld",
+    "No relations yet": "Nog geen relaties",
+    "Period": "Periode",
+    "On": "Aan"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.101.0",
+  "version": "2.103.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/CnActionsBar/CnActionsBar.md

@@ -217,6 +217,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `showBuildiqButton` | Boolean | `true` | Whether the buildiq square renders in the bar (the index page takes it into its header under the board look) |
 | `bulkNoun` | String | `''` | The plural in the bulk band lead, "With the selected <noun>" (default "items") |
 | `bulkHint` | String | `''` | The 13px hint after the bulk band's buttons |
+| `bulkBandAlways` | Boolean | `false` | Board look: draw the bulk band before anything is selected too, its buttons disabled until there is a selection (DqZaken, DqWerkbord). Only when the band has an action to offer. |
 
 
 `showBuildiqButton` is documented in the prop table of the component reference (board look, screens-chrome-parity).

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -507,12 +507,15 @@
 
 	<!--
 		Board look: the bulk band is its own row between the toolbar and the
-		table card, outside the toolbar element, and only while rows are
-		selected. The count stays announced by the live region above.
+		table card, outside the toolbar element, while rows are selected; with
+		`bulkBandAlways` also before, its buttons disabled until there is a
+		selection (DqZaken, DqWerkbord). The count stays announced by the live
+		region above.
 	-->
 	<div
-		v-if="isBoardLayout && selectable && selectedIds.length > 0"
+		v-if="isBoardLayout && selectable && (selectedIds.length > 0 || (bulkBandAlways && bulkBandHasActions))"
 		class="cn-actions-bar__band"
+		:class="{ 'cn-actions-bar__band--idle': selectedIds.length === 0 }"
 		role="region"
 		:aria-label="t('nextcloud-vue', 'Actions for the selection')"
 		data-testid="cn-bulk-band">
@@ -520,12 +523,14 @@
 		<NcButton
 			v-if="showMassCopy"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-copy')">
 			{{ t('nextcloud-vue', 'Copy selected') }}
 		</NcButton>
 		<NcButton
 			v-if="showMassDelete"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-delete')">
 			{{ t('nextcloud-vue', 'Delete selected') }}
 		</NcButton>
@@ -533,7 +538,7 @@
 			v-for="entry in bulkActions"
 			:key="entry.id"
 			variant="secondary"
-			:disabled="entry.disabled === true"
+			:disabled="entry.disabled === true || selectedIds.length === 0"
 			:data-testid="`cn-bulk-action-${entry.id}`"
 			:lang="bulkLang(entry)"
 			@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
@@ -719,6 +724,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: draw the bulk band also before anything is selected, its
+		 * buttons disabled until there is a selection, as DqZaken and DqWerkbord
+		 * draw it. Only when the band has an action to offer.
+		 */
+		bulkBandAlways: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** The 13px hint after the board bulk band's buttons (`config.bulkHint`). */
 		bulkHint: {
 			type: String,
@@ -1117,6 +1132,18 @@ export default {
 			return t('nextcloud-vue', '{count} active', { count: this.filterCount })
 		},
 
+		/**
+		 * Whether the bulk band has an action to offer: copy, delete, a
+		 * declared bulk action or the host's own buttons.
+		 *
+		 * @return {boolean}
+		 */
+		bulkBandHasActions() {
+			return this.showMassCopy || this.showMassDelete
+				|| (Array.isArray(this.bulkActions) && this.bulkActions.length > 0)
+				|| Boolean(this.$slots['selection-actions'])
+		},
+
 		/**
 		 * The bold lead of the board bulk band.
 		 *

package/src/components/CnChartWidget/CnChartWidget.md

@@ -18,7 +18,7 @@ When `CnDashboardPage` resolves a widget definition with `type: "chart"`, it mou
 }
 ```
 
-Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
+Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`, `emptyCellLabel`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
 
 Area chart — time series data:
 
@@ -107,7 +107,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `horizontal` | Boolean | `false` | Render `type: "bar"` charts horizontally (row bars); an explicit `options.plotOptions.bar.horizontal` still wins |
 | `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 | `''` | `bar-list` / `matrix`: a line under the rows, through the host's translate |
+| `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 |
+| `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) |
 | `valueAxisBaseline` | String | `'auto'` | How the value axis picks its baseline, so a small difference cannot read as a dramatic one. `'auto'` anchors magnitude marks (bar/area) at zero and stops line charts zooming past a quarter of the data's magnitude; `'zero'` always anchors at zero; `'fit'` restores plain ApexCharts autoscaling — use it for series that live far from zero (a percentage hovering 95–99), where a zero baseline flattens the signal. Pie-family charts, negative series, empty data and stacked charts (`options.chart.stacked` — where the visible height is the per-category sum, not the largest datapoint) always autoscale; an explicit `options.yaxis.min`/`max` still wins. The ceiling rounds up to a nice number (7 → 8, 62 → 80). |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -126,6 +126,12 @@
 				</p>
 			</slot>
 		</div>
+		<p
+			v-if="footnote && chartComponent && !showEmptyState && type !== 'bar-list' && type !== 'matrix'"
+			class="cn-chart-widget__footnote"
+			data-testid="cn-chart-widget-footnote">
+			{{ hostTranslate(footnote) }}
+		</p>
 	</div>
 </template>
 
@@ -368,8 +374,9 @@ export default {
 		},
 
 		/**
-		 * A line under a `bar-list` or `matrix` ("Klik een balk om de zaken
-		 * te zien"), through the host's translate.
+		 * A line under the chart ("Klik een balk om de zaken te zien"),
+		 * through the host's translate: under the rows of a `bar-list` or
+		 * `matrix`, and under the plot of an ApexCharts type.
 		 *
 		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-bar-list
 		 */
@@ -605,6 +612,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * `matrix`: the text of a cell without a value ("geen"), through the
+		 * host's translate. Empty (the default) leaves the cell blank.
+		 *
+		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-matrix
+		 */
+		emptyCellLabel: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Manifest dataSource block. When set, `series` /
 		 * `categories` / `labels` are resolved from the GraphQL
@@ -1442,7 +1460,7 @@ export default {
 						const value = Number(raw)
 						return Number.isFinite(value) && raw !== null && raw !== undefined
 							? { text: this.formatPlain(value), level: levelOf(value), color: '', current: isCurrent }
-							: { text: '', level: 0, color: '', current: isCurrent }
+							: { text: this.emptyCellLabel ? this.hostTranslate(this.emptyCellLabel) : '', level: 0, color: '', current: isCurrent }
 					}),
 				})),
 			}
@@ -2388,6 +2406,8 @@ export default {
 		 * Map an endpoint payload whose `rowsPath` names an array of rows:
 		 * each row is a series (name at `rowLabelPath`, values at
 		 * `rowValuesPath`), the categories are at `labelsPath`.
+		 * A missing value stays null; a `matrix` keeps a text value ("none")
+		 * as text, other types read it as 0.
 		 *
 		 * @param {unknown} payload The plucked payload.
 		 * @param {object} es The `endpointSource` block.
@@ -2398,12 +2418,23 @@ export default {
 			const rows = getByPath(payload, es.rowsPath)
 			const rawLabels = es.labelsPath ? getByPath(payload, es.labelsPath) : undefined
 			const labels = Array.isArray(rawLabels) ? rawLabels.map((v) => ((v === null || v === undefined) ? '' : String(v))) : []
+			const keepText = this.type === 'matrix'
+			const cellOf = (v) => {
+				if (v === null || v === undefined) {
+					return null
+				}
+				const num = typeof v === 'string' && v.trim() === '' ? NaN : Number(v)
+				if (Number.isFinite(num)) {
+					return num
+				}
+				return keepText && typeof v === 'string' ? v : 0
+			}
 			const series = (Array.isArray(rows) ? rows : []).map((row) => {
 				const name = getByPath(row, es.rowLabelPath || 'label')
 				const values = getByPath(row, es.rowValuesPath || 'values')
 				return {
 					name: (name === null || name === undefined) ? '' : String(name),
-					data: Array.isArray(values) ? values.map((v) => (v === null || v === undefined ? null : Number(v) || 0)) : [],
+					data: Array.isArray(values) ? values.map(cellOf) : [],
 				}
 			})
 			return { series, categories: labels, labels }
@@ -2690,6 +2721,13 @@ export default {
 	margin: 0;
 }
 
+/* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
+   its own line height while the canvas takes the rest of a fitted column. */
+.cn-chart-widget > .cn-chart-widget__footnote {
+	flex: 0 0 auto;
+	margin-top: 8px;
+}
+
 .cn-chart-widget__matrix {
 	display: grid;
 	gap: 4px;

package/src/components/CnConversationThread/CnConversationThread.md

@@ -23,6 +23,23 @@ Read-only, for a closed record:
   ]" />
 ```
 
+Channel chips and a header action. `channel-filter` draws All plus a chip per channel with its count, `channels` lists labels that always get a chip, and the `header-actions` slot puts buttons beside the title:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  channel-filter
+  :channels="['E-mail', 'Letter']"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', side: 'them', channel: 'E-mail', text: 'Could I see the documents?' },
+    { id: 2, side: 'us', channel: 'E-mail', text: 'They are on their way.' },
+  ]">
+  <template #header-actions>
+    <NcButton>Log contact</NcButton>
+  </template>
+</CnConversationThread>
+```
+
 No messages yet:
 
 ```vue

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -9,13 +9,27 @@
 		data-testid="cn-conversation-thread"
 		:aria-labelledby="title ? titleId : null"
 		:aria-label="title ? null : fallbackLabel">
-		<component
-			:is="titleTag"
-			v-if="title"
-			:id="titleId"
-			class="cn-conversation-thread__title">
-			{{ title }}
-		</component>
+		<div v-if="title || $slots['header-actions']" class="cn-conversation-thread__header">
+			<component
+				:is="titleTag"
+				v-if="title"
+				:id="titleId"
+				class="cn-conversation-thread__title">
+				{{ title }}
+			</component>
+			<div v-if="$slots['header-actions']" class="cn-conversation-thread__header-actions">
+				<!-- @slot header-actions Buttons beside the title, for example "Log contact". -->
+				<slot name="header-actions" />
+			</div>
+		</div>
+
+		<CnQuickFilterBar
+			v-if="channelChips.length > 0"
+			inline
+			class="cn-conversation-thread__channels"
+			:tabs="channelChips"
+			:activeIndex="activeChannelIndex"
+			@update:activeIndex="onChannelChip" />
 
 		<p v-if="loading && rows.length === 0"
 			class="cn-conversation-thread__empty"
@@ -27,9 +41,13 @@
 			{{ emptyText }}
 		</p>
 
+		<p v-else-if="shownRows.length === 0" class="cn-conversation-thread__empty" data-testid="cn-conversation-channel-empty">
+			{{ emptyText }}
+		</p>
+
 		<ol v-else class="cn-conversation-thread__messages">
 			<li
-				v-for="row in rows"
+				v-for="row in shownRows"
 				:key="row.key"
 				class="cn-conversation-thread__message"
 				:class="`cn-conversation-thread__message--${row.side}`"
@@ -93,6 +111,7 @@
 import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
+import CnQuickFilterBar from '../CnQuickFilterBar/CnQuickFilterBar.vue'
 import { prefixUrl } from '../../utils/headers.js'
 import { userLocale } from '../../utils/userLocale.js'
 
@@ -126,6 +145,7 @@ export default {
 	name: 'CnConversationThread',
 
 	components: {
+		CnQuickFilterBar,
 		NcButton,
 	},
 
@@ -204,6 +224,24 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Draw channel chips above the messages: All, then one per channel
+		 * with its count. Choosing one shows only that channel's messages.
+		 */
+		channelFilter: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Channel labels that always get a chip, in this order, also when no
+		 * message uses them yet. Channels the messages use follow.
+		 */
+		channels: {
+			type: Array,
+			default: () => [],
+		},
+
 		/** Shown when there are no messages yet. */
 		emptyText: {
 			type: String,
@@ -224,6 +262,8 @@ export default {
 		conversationThreadUid += 1
 		return {
 			draft: '',
+			/** The channel the chips narrow the thread to; '' is All. */
+			activeChannel: '',
 			sending: false,
 			errorMessage: '',
 			titleId: `cn-conversation-title-${conversationThreadUid}`,
@@ -262,6 +302,47 @@ export default {
 				})
 		},
 
+		/**
+		 * The channel labels with a chip: the declared ones, then the ones
+		 * the messages use.
+		 *
+		 * @return {Array<string>} The labels, each once.
+		 */
+		channelLabels() {
+			const declared = (Array.isArray(this.channels) ? this.channels : []).filter((label) => typeof label === 'string' && label !== '')
+			return [...new Set([...declared, ...this.rows.map((row) => row.channel).filter(Boolean)])]
+		},
+
+		/**
+		 * The chips: All, then each channel, each with its count. Empty
+		 * without `channelFilter` or without channels.
+		 *
+		 * @return {Array<{label: string, count: number}>} The chips.
+		 */
+		channelChips() {
+			if (!this.channelFilter || this.channelLabels.length === 0) {
+				return []
+			}
+			return [
+				{ label: t('nextcloud-vue', 'All'), count: this.rows.length },
+				...this.channelLabels.map((label) => ({ label, count: this.rows.filter((row) => row.channel === label).length })),
+			]
+		},
+
+		/** @return {number} The pressed chip: 0 for All. */
+		activeChannelIndex() {
+			const index = this.channelLabels.indexOf(this.activeChannel)
+			return index < 0 ? 0 : index + 1
+		},
+
+		/** @return {Array<object>} The rows on the chosen channel, or all of them. */
+		shownRows() {
+			if (this.channelChips.length === 0 || this.activeChannelIndex === 0) {
+				return this.rows
+			}
+			return this.rows.filter((row) => row.channel === this.activeChannel)
+		},
+
 		/**
 		 * Whether there is something to send and nothing in flight.
 		 *
@@ -289,6 +370,16 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Narrow the thread to the chip's channel; the All chip (0) clears it.
+		 *
+		 * @param {number|null} index The chip index.
+		 * @return {void}
+		 */
+		onChannelChip(index) {
+			this.activeChannel = index > 0 ? (this.channelLabels[index - 1] || '') : ''
+		},
+
 		/**
 		 * Up to two initials of a name, for the avatar.
 		 *
@@ -370,6 +461,20 @@ export default {
 	gap: calc(3.5 * var(--default-grid-baseline));
 }
 
+.cn-conversation-thread__header {
+	align-items: flex-start;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(3 * var(--default-grid-baseline));
+	justify-content: space-between;
+}
+
+.cn-conversation-thread__header-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
 .cn-conversation-thread__title {
 	font-size: 1.1em;
 	font-weight: 700;

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -15,12 +15,27 @@
 			:endpoint="replyAction ? '' : endpoint"
 			:loading="loading"
 			:emptyText="content.emptyText ? tr(content.emptyText) : undefined"
+			:channelFilter="content.channelChips === true"
+			:channels="channelLabels"
 			@send="onSend"
-			@sent="onSent" />
+			@sent="onSent">
+			<template v-if="headerAction" #header-actions>
+				<NcButton
+					data-testid="cn-conversation-header-action"
+					@click="onHeaderAction">
+					<template v-if="headerAction.icon" #icon>
+						<CnIcon :name="headerAction.icon" :size="20" />
+					</template>
+					{{ tr(headerAction.label) }}
+				</NcButton>
+			</template>
+		</CnConversationThread>
 	</div>
 </template>
 
 <script>
+import { NcButton } from '@nextcloud/vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import CnConversationThread from './CnConversationThread.vue'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { fetchReferenceObjects } from '../../utils/boardReferenceColumns.js'
@@ -45,12 +60,20 @@ import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveF
  * `replyAction`, an action descriptor the app decides the meaning of: it is
  * dispatched with `args: [{ text, objectId }]` and `props.text`. After a send
  * the source is read again.
+ *
+ * `channelChips: true` draws a chip per channel above the thread (every
+ * `channelMap` label, in map order, then any other channel a message uses).
+ * `headerAction` is a button beside the title (`{ label, icon?, ...action }`,
+ * DqZaakContact's "Contact vastleggen"), dispatched like `replyAction` with
+ * `args: [{ objectId }]`; after it the source is read again.
  */
 export default {
 	name: 'CnConversationWidget',
 
 	components: {
 		CnConversationThread,
+		CnIcon,
+		NcButton,
 	},
 
 	inject: {
@@ -102,6 +125,18 @@ export default {
 			return source && typeof source === 'object' && source.register && source.schema ? source : null
 		},
 
+		/** @return {object|null} The header action, or null without a label. */
+		headerAction() {
+			const action = this.content?.headerAction
+			return action && typeof action === 'object' && typeof action.label === 'string' && action.label !== '' ? action : null
+		},
+
+		/** @return {Array<string>} The `channelMap` labels, translated, each once. */
+		channelLabels() {
+			const map = this.content?.channelMap && typeof this.content.channelMap === 'object' ? this.content.channelMap : {}
+			return [...new Set(Object.values(map).filter((label) => typeof label === 'string' && label !== '').map((label) => this.tr(label)))]
+		},
+
 		/** @return {object|null} The reply action, or null. */
 		replyAction() {
 			const action = this.content?.replyAction
@@ -254,6 +289,30 @@ export default {
 			this.onSent({ text })
 		},
 
+		/**
+		 * Run `headerAction` with the record id, then read the source again.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async onHeaderAction() {
+			if (!this.headerAction) {
+				return
+			}
+			const { label, icon, ...rest } = resolveDeepTokens(this.headerAction, this.tokenCtx)
+			const action = { ...rest, args: [{ objectId: this.objectId }] }
+			try {
+				const outcome = await (typeof this.cnDispatchAction === 'function'
+					? this.cnDispatchAction(action)
+					: dispatchAction(action, { router: this.$router || null }))
+				if (outcome === false) {
+					return
+				}
+			} catch {
+				return
+			}
+			await this.loadSource()
+		},
+
 		/**
 		 * Show an accepted reply at once, without waiting for the record.
 		 *

package/src/components/CnDashboardPage/CnDashboardPage.md

@@ -126,12 +126,15 @@ predicate's field value into their text wherever it says `{value}` (e.g.
 | `gridMargin` | Number | `12` | Grid margin (gutter) in pixels between widgets |
 | `emptyLabel` | String | `'No widgets configured'` | Text shown in the empty state when `layout` is empty |
 | `unavailableLabel` | String | `'Widget not available'` | Text shown for unknown or unavailable widgets |
-| `userLayout` | Boolean | `false` | Keep a per-user arrangement of this page. Off by default: a page without it makes **no** layout request and renders exactly as before. |
+| `userLayout` | Boolean | `false` | **Deprecated** (layout belongs to Buildiq; removed after this release). Keep a per-user arrangement of this page. Off by default: a page without it makes **no** layout request and renders exactly as before. |
 | `appId` | String | `''` | The Nextcloud app the user layout is stored under. Required for `userLayout` to do anything. |
 | `userLayoutStore` | Object | `null` | A store exposing `loadDashboardLayout` / `saveDashboardLayout` / `resetDashboardLayout`, usually one carrying [`dashboardLayoutsPlugin`](../../../docs/store/plugins/dashboard-layouts.md). Left unset, the page reads and writes user preferences directly. |
 
 ## Per-user layout
 
+> **Deprecated: layout belongs to Buildiq.** Arranging a page is Buildiq's job (Ruben, 18 Oct 2026): its **Indeling aanpassen** edits the layout everybody sees. `userLayout` still works for this release and will be removed after it. While Buildiq edits the page (`cnEditingBody`), the grid shows the manifest layout, and a drag or resize goes into the manifest Buildiq saves, also on a page with `userLayout`. A user arrangement made outside an in-page edit session is saved at once, because no **Done** follows to save it.
+
+
 With `userLayout: true` and an `appId`, this page loads the current user's arrangement before the first grid render and merges it over the manifest layout. The rules are [`mergeUserLayout`](../../../docs/utilities/merge-user-layout.md)'s: **the manifest decides which widgets exist, the user decides where they sit.**
 
 ```vue