@conduction/nextcloud-vue 2.102.0 → 2.104.0

package/l10n/en.json

@@ -1727,6 +1727,10 @@
     "On": "On"
   },
   "plurals": {
+    "{count} member": [
+      "{count} member",
+      "{count} members"
+    ],
     "{count} selected": [
       "{count} selected",
       "{count} selected"

package/l10n/nl.json

@@ -1940,6 +1940,10 @@
     "On": "Aan"
   },
   "plurals": {
+    "{count} member": [
+      "{count} lid",
+      "{count} leden"
+    ],
     "{count} selected": [
       "{count} geselecteerd",
       "{count} geselecteerd"

package/package.json

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

@@ -153,6 +153,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `mapLabel` | `String` | `''` | Label for the map view-toggle option (defaults to "Map"). Only shown when `showMap` |
 | `mapIcon` | `String` | `''` | MDI icon name for the map option (defaults to the built-in map-marker icon). Resolved via `CnIcon` |
 | `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set |
+| `searchPlacement` | `String` | `''` | Board look only: `'toolbar'` draws the search field on row 1, before Filter and the view switch, instead of at the start of row 2 |
 | `searchValue` | `String` | `''` | Current value of the inline search field (controlled) |
 | `searchPlaceholder` | `String` | `''` | Placeholder / accessible label for the inline search field |
 | `showCountWithSearch` | `Boolean` | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls. No effect without `showSearch` |

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -18,6 +18,20 @@
 				@description Under the board look: saved views as chips and the Save view button, in row 1 after the quick-filter chips.
 			-->
 			<slot name="actions-end" />
+			<!-- `searchPlacement: "toolbar"`: the search field on row 1, before
+			     Filter and the view switch, instead of opening row 2. -->
+			<div v-if="showSearch && searchInToolbar"
+				class="cn-actions-bar__search cn-actions-bar__search--toolbar"
+				data-testid="cn-actions-bar-search-toolbar">
+				<Magnify :size="18" class="cn-actions-bar__search-icon" />
+				<input
+					type="search"
+					class="cn-actions-bar__search-input"
+					:placeholder="searchPlaceholder || t('nextcloud-vue', 'Search…')"
+					:value="searchValue"
+					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
+					@input="onSearchInput">
+			</div>
 			<!--
 				Filter and the view switch are one unit: when row 1 is full they
 				wrap together to the start of the next line (the DqZaken board),
@@ -373,7 +387,7 @@
 
 		<!-- Board look, row 2: the search field, then the active filters. -->
 		<div v-if="isBoardLayout" class="cn-actions-bar__row cn-actions-bar__row--search" data-testid="cn-actions-bar-row-search">
-			<div v-if="showSearch" class="cn-actions-bar__search">
+			<div v-if="showSearch && !searchInToolbar" class="cn-actions-bar__search">
 				<Magnify :size="18" class="cn-actions-bar__search-icon" />
 				<input
 					type="search"
@@ -383,7 +397,7 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="showCount && hasTotal" class="cn-actions-bar__count">
+			<span v-else-if="showCount && hasTotal && !searchInToolbar" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<slot name="after-search" />
@@ -943,6 +957,19 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Where the board look draws the search field: `''` (the default) at
+		 * the start of row 2, `'toolbar'` on row 1 before Filter and the view
+		 * switch (DqTeamwachtrij). No effect outside the board look.
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		searchPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/** Current value of the inline search field (controlled) */
 		searchValue: {
 			type: String,
@@ -1101,6 +1128,16 @@ export default {
 	],
 
 	computed: {
+		/**
+		 * Whether the search field sits on the board's row 1.
+		 *
+		 * @spec openspec/changes/index-search-on-toolbar/specs/index-page/spec.md#requirement-the-search-field-can-sit-on-the-toolbar-row
+		 * @return {boolean}
+		 */
+		searchInToolbar() {
+			return this.isBoardLayout && this.searchPlacement === 'toolbar'
+		},
+
 		/**
 		 * Whether the board toolbar is drawn: the `layout` prop, else the look
 		 * the app provides.

package/src/components/CnAppRoot/CnAppRoot.md

@@ -67,7 +67,7 @@ With loading state, custom components, translate, permissions, and custom page t
 |------|------|----------|---------|-------------|
 | `manifest` | Object | Yes | — | Reactive manifest object from `useAppManifest`. Provides `manifest.dependencies`, `manifest.menu`, and is propagated via provide/inject |
 | `appId` | String | Yes | — | Nextcloud app id. Forwarded to `NcContent` and `CnDependencyMissing` |
-| `appDisplayName` | String | No | `''` | Human-readable name shown in the Nextcloud top bar. When set it overrides the technical `appId` so a virtual app shows its own name (e.g. "Pet Store") instead of the host app id. |
+| `appDisplayName` | String | No | `''` | Human-readable name shown in the Nextcloud top bar. When set it overrides the technical `appId` so a virtual app shows its own name (e.g. "Pet Store") instead of the host app id. The user settings dialog, the setup wizard and the credentials section show it through the app's `translate`; without it they show the name Nextcloud's app menu gives (localised), else the id with a capital, never the bare id. The top bar's own name, which also keys the stored list-pane width (`pane-list-size-<name>`), stays untranslated so a reader's pane width survives a language switch. |
 | `persistManifestDelta` | Function | No | `null` | In-app editing (ADR-041) persistence hook, called with the minimal manifest delta on save. When Buildiq is reachable for the user, CnAppRoot provides a shared `cnManifestEditor` + `cnOpenBuildAvailable` (the inject key deliberately keeps its old spelling — see the rename note in CHANGELOG); the page action rows (`CnDashboardPage`/`CnDetailPage`/`CnIndexPage`) then render an icon-only `CnBuildiqEditButton` inline with their normal buttons, and the body grid becomes drag/resizable in edit mode. Omit to keep edits in-memory only. |
 | `dataSources` | Object \| null | No | `null` | App registers/schemas for the in-app pages editor (ADR-041). Lets the Edit-pages modal offer Register / Schema / Columns dropdowns for `index`/`detail` pages instead of free-text slug inputs, so a created page actually renders a table. Shape: `{ registers: [{ value, label, schemas: [{ value, label, columns: string[] }] }] }`. Provided to descendants as `cnDataSources`; when omitted the editor falls back to free-text register/schema fields. **A snapshot** — captured once, so it cannot show anything created after boot. Prefer `dataSourcesLoader`. |
 | `dataSourcesLoader` | Function \| null | No | `null` | Async loader for the same data, re-invoked every time a pages-editor modal opens: `async () => ({ registers: [...] })`. Because `provide()` runs once, the static `dataSources` snapshot can never change — so a register or schema created after the app booted (in another tab, the OpenRegister UI, or via the API) would never appear in the dropdowns. A loader fixes that with no page reload, and moves the fetch off the app-boot path onto the far rarer editor-open path. When both props are given, `dataSources` seeds the initial list and the loader's result replaces it on the first refresh. Provided to descendants as the `cnDataSourcesState` holder plus a `cnRefreshDataSources()` action. |

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -180,7 +180,7 @@
 				<div class="cn-app-root__setup">
 					<CnSetupWizard
 						:appId="appId"
-						:appName="appDisplayName || (manifest && manifest.name) || appId"
+						:appName="shownAppName"
 						:steps="manifest.setup.steps"
 						:cancellable="false"
 						:completedStepIds="setupCompletedStepIds"
@@ -441,7 +441,7 @@
 			<div v-if="setupWizardOpen" class="cn-app-root__setup-optional">
 				<CnSetupWizard
 					:appId="appId"
-					:appName="appDisplayName || (manifest && manifest.name) || appId"
+					:appName="shownAppName"
 					:steps="manifest.setup.steps"
 					:cancellable="true"
 					:completedStepIds="setupCompletedStepIds"
@@ -580,7 +580,7 @@
 						<CnCredentials
 							scope="personal"
 							:appId="appId"
-							:appName="appDisplayName || (manifest && manifest.name) || appId"
+							:appName="shownAppName"
 							:appCredentials="(manifest && manifest.credentials) || []" />
 					</NcAppSettingsSection>
 					<!--
@@ -747,6 +747,7 @@ import {
 import { RegistryKindError } from '../../errors/RegistryKindError.js'
 import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
+import { appShownName } from '../../utils/appShownName.js'
 import { BUILT_IN_FORMATTERS } from '../../utils/builtInFormatters.js'
 import { addDiagnosticsListener, clearReportedDiagnostics, reportDiagnostic } from '../../utils/diagnostics.js'
 import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
@@ -3134,6 +3135,22 @@ export default {
 			return this.userSettingsTitle || this.libraryCopy('User settings')
 		},
 
+		/**
+		 * The app's name as the reader reads it: `appDisplayName` or the
+		 * manifest's `name` through the app's translate, else the name
+		 * Nextcloud's app menu shows (localised), else the id with a capital.
+		 * Used for the user settings dialog, the setup wizard and the
+		 * credentials section; never for NcContent's `appName`, which also
+		 * keys the stored list-pane width (`pane-list-size-<appName>`).
+		 *
+		 * @spec openspec/changes/app-shown-name-in-chrome/specs/app-root/spec.md#requirement-the-app-chrome-shows-the-apps-localised-name
+		 * @return {string}
+		 */
+		shownAppName() {
+			const given = this.appDisplayName || (this.manifest && this.manifest.name) || ''
+			return appShownName(this.appId, given ? this.translate(given) : '')
+		},
+
 		/**
 		 * The props of the user-settings dialog: `NcAppSettingsDialog`'s, or
 		 * under the board look CnUserSettingsDialog's (eyebrow, subtitle and
@@ -3149,7 +3166,7 @@ export default {
 			const props = {
 				open: this.userSettingsOpen,
 				title: this.resolvedUserSettingsTitle,
-				appName: this.appDisplayName || (this.manifest && this.manifest.name) || this.appId || '',
+				appName: this.shownAppName,
 			}
 			if (this.userSettingsEyebrow) {
 				props.eyebrow = this.translate(this.userSettingsEyebrow)

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

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -1839,6 +1839,9 @@ export default {
 		 * and renders exactly as it did before this existed, which is the
 		 * property that makes shipping it safe on every dashboard at once.
 		 *
+		 * Deprecated: layout belongs to Buildiq. Kept working for one release.
+		 *
+		 * @deprecated
 		 * @type {boolean}
 		 */
 		userLayout: {
@@ -2216,9 +2219,25 @@ export default {
 		 * @return {boolean}
 		 */
 		gridEditable() {
+			return this.isEditing || this.editingBody
+		},
+
+		/**
+		 * Whether Buildiq is editing the page (the injected `cnEditingBody`
+		 * ref, or a plain boolean). Buildiq is the layout editor: while it
+		 * edits, the grid shows and changes the manifest layout, also on a
+		 * page with `userLayout`.
+		 *
+		 * @return {boolean}
+		 */
+		editingBody() {
 			const e = this.cnEditingBody
-			const buildiqEditing = Boolean(e && typeof e === 'object' && 'value' in e ? e.value : e)
-			return this.isEditing || buildiqEditing
+			return Boolean(e && typeof e === 'object' && 'value' in e ? e.value : e)
+		},
+
+		/** @return {boolean} Whether the grid shows this user's arrangement. */
+		showsUserLayout() {
+			return this.userLayout && !this.editingBody && Array.isArray(this.userLayoutItems)
 		},
 
 		/**
@@ -2279,9 +2298,7 @@ export default {
 		 * @return {Array<object>} The layout.
 		 */
 		renderedLayout() {
-			const base = (this.userLayout && Array.isArray(this.userLayoutItems))
-				? this.userLayoutItems
-				: this.layout
+			const base = this.showsUserLayout ? this.userLayoutItems : this.layout
 			// The KPI row is not part of the grid.
 			if (Array.isArray(this.kpiRow) && this.kpiRow.length > 0 && Array.isArray(base)) {
 				return base.filter((item) => !this.kpiRow.includes(item.widgetId))
@@ -3577,7 +3594,8 @@ export default {
 			// write below is for the admin editor, which edits the page for
 			// everybody; doing it for a user rearranging their own dashboard
 			// would rewrite the page for everyone who opens it after them.
-			if (this.userLayout && Array.isArray(this.userLayoutItems)) {
+			// While Buildiq edits, the drag is the admin's and goes below.
+			if (this.showsUserLayout) {
 				this.userLayoutDirty = true
 				this.userLayoutItems = this.userLayoutItems.map((item) => {
 					const u = (Array.isArray(updated) ? updated : []).find((candidate) => String(candidate.id) === String(item.id)
@@ -3586,6 +3604,11 @@ export default {
 					return (u ? { ...item, ...this.geometryFrom(u) } : item)
 				})
 				this.$emit('layout-change', this.userLayoutItems)
+				// Outside an in-page edit session no Done will come to save
+				// the arrangement, so it is saved now.
+				if (!this.isEditing) {
+					this.saveUserLayout()
+				}
 
 				return
 			}

package/src/components/CnDataTable/CnDataTable.md

@@ -229,6 +229,7 @@ features are folded in here as opt-in props (bare-table usage is unchanged):
 - `borderless` — drop the container's card chrome so the table sits flush inside
   a parent card (e.g. a `CnWidgetWrapper` dashboard slot).
 - `limit` — show only the first N rows; with `viewAllRoute` a "View all" footer appears.
+- `pageSize` — rows per page: one page of the rows the table holds, with the board's pager under them ("4 of 7", the page buttons, Next) once there is more than one page (DqCatalogus). 0 (the default) shows every row, or the first `limit`.
 - `viewAllRoute` / `viewAllLabel` — the footer control's route and label. It renders
   as a real `<a :href>` when the router resolves the route, and as a
   `<button type="button">` (emitting `view-all`) otherwise, so it always has a