@conduction/nextcloud-vue 2.103.0 → 2.105.0

package/l10n/en.json

@@ -1724,9 +1724,16 @@
     "No contacts linked": "No contacts linked",
     "No relations yet": "No relations yet",
     "Period": "Period",
-    "On": "On"
+    "On": "On",
+    "Select a step on the canvas to see its settings.": "Select a step on the canvas to see its settings.",
+    "Show runs": "Show runs",
+    "Back to the step settings": "Back to the step settings"
   },
   "plurals": {
+    "{count} member": [
+      "{count} member",
+      "{count} members"
+    ],
     "{count} selected": [
       "{count} selected",
       "{count} selected"

package/l10n/nl.json

@@ -1937,9 +1937,16 @@
     "No contacts linked": "Geen contacten gekoppeld",
     "No relations yet": "Nog geen relaties",
     "Period": "Periode",
-    "On": "Aan"
+    "On": "Aan",
+    "Select a step on the canvas to see its settings.": "Kies een stap op het canvas om de instellingen te zien.",
+    "Show runs": "Uitvoeringen tonen",
+    "Back to the step settings": "Terug naar de stapinstellingen"
   },
   "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.103.0",
+  "version": "2.105.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/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -160,7 +160,7 @@
 			<template #additional-items>
 				<!-- The board card: support as one fact row, the SLA address on the same line. -->
 				<div v-if="compactCard && showSupport && !supportAtEnd && !$slots.footer" class="cn-version-info__item" data-testid="cn-admin-settings-support-row">
-					<span class="cn-version-info__label">{{ supportTitle }}:</span>
+					<span class="cn-version-info__label">{{ supportTitle }}</span>
 					<span class="cn-version-info__value">
 						<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a><template v-if="slaEmail">, {{ slaInline }} <a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a></template>
 					</span>

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/CnChartWidget/CnChartWidget.md

@@ -108,6 +108,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `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 | `''` | 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 |
+| `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). |
+| `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language. Categories that are not dates are left as is. |
 | `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) |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -220,6 +220,22 @@ function parseBucketKey(key) {
 	)
 }
 
+/**
+ * A theme colour by CSS variable name, as a literal: ApexCharts writes colours
+ * into SVG attributes, where `var()` does not resolve.
+ *
+ * @param {string} name The variable, e.g. `--color-error`.
+ * @param {string} fallback The colour when the variable is unset (or no DOM).
+ * @return {string} The colour.
+ */
+function themeColor(name, fallback) {
+	if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') {
+		return fallback
+	}
+	const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+	return value || fallback
+}
+
 /** Event-bus channel CnWidgetWrapper's Refresh action broadcasts on. */
 const REFRESH_BUS_CHANNEL = 'cn:widget:refresh'
 
@@ -385,6 +401,31 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Horizontal reference lines on the value axis of a line, area or bar
+		 * chart, such as a norm: `[{ value, label?, color? }]`. Drawn dashed;
+		 * the label goes through the host's translate. The colour defaults to
+		 * the theme's error colour.
+		 *
+		 * @type {Array<{value: number, label?: string, color?: string}>}
+		 */
+		referenceLines: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * How date categories read on the x-axis: `month` ("jan") or
+		 * `month-year` ("jan 2026"), in the user's language. A category that
+		 * is not a date is shown as is. Empty shows the categories unchanged.
+		 *
+		 * @type {''|'month'|'month-year'}
+		 */
+		categoryFormat: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * The `matrix` cell to outline, usually the record's on a detail page:
 		 * `{ row, column, columnKeys? }`, where `row` and `column` take tokens
@@ -1505,6 +1546,51 @@ export default {
 			return this.footnote ? this.hostTranslate(this.footnote) : t('nextcloud-vue', 'Chart data')
 		},
 
+		/**
+		 * The x-axis categories as shown: with `categoryFormat`, date
+		 * categories as short months in the user's language.
+		 *
+		 * @return {Array<string|number>} The categories.
+		 */
+		displayCategories() {
+			const categories = Array.isArray(this.resolvedCategories) ? this.resolvedCategories : []
+			if (this.categoryFormat !== 'month' && this.categoryFormat !== 'month-year') {
+				return categories
+			}
+			const options = this.categoryFormat === 'month' ? { month: 'short' } : { month: 'short', year: 'numeric' }
+			return categories.map((category) => {
+				const date = typeof category === 'string' || typeof category === 'number' ? parseBucketKey(category) : null
+				return date ? date.toLocaleDateString(userLocale(), options) : category
+			})
+		},
+
+		/**
+		 * The `referenceLines` as ApexCharts annotations: dashed, labelled,
+		 * in the theme's error colour unless a line names its own.
+		 *
+		 * @return {Array<object>} The annotations, possibly empty.
+		 */
+		referenceAnnotations() {
+			const lines = (Array.isArray(this.referenceLines) ? this.referenceLines : [])
+				.filter((line) => line && Number.isFinite(Number(line.value)))
+			if (lines.length === 0) {
+				return []
+			}
+			const fallback = themeColor('--color-error', '#e04224')
+			return lines.map((line) => {
+				const color = line.color || fallback
+				return {
+					y: Number(line.value),
+					x: Number(line.value),
+					borderColor: color,
+					strokeDashArray: 6,
+					label: line.label
+						? { text: this.hostTranslate(line.label), borderColor: color, style: { color: '#fff', background: color } }
+						: { text: '' },
+				}
+			})
+		},
+
 		mergedOptions() {
 			const isPieType = ['pie', 'donut', 'radialBar'].includes(this.type)
 
@@ -1592,7 +1678,7 @@ export default {
 			if (!isPieType) {
 				if (this.resolvedCategories.length > 0) {
 					defaults.xaxis = {
-						categories: this.resolvedCategories,
+						categories: this.displayCategories,
 						labels: {
 							style: {
 								colors: 'var(--color-text-maxcontrast, #767676)',
@@ -1634,6 +1720,12 @@ export default {
 				}
 			}
 
+			// Reference lines, such as a norm, on the value axis.
+			if (!isPieType && this.referenceAnnotations.length > 0) {
+				const axisKey = (this.type === 'bar' && this.horizontal) ? 'xaxis' : 'yaxis'
+				defaults.annotations = { [axisKey]: this.referenceAnnotations }
+			}
+
 			// Add labels for pie/donut
 			if (isPieType && this.resolvedLabels.length > 0) {
 				defaults.labels = this.resolvedLabels

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -347,12 +347,12 @@
 				<label
 					v-else
 					class="cn-dashboard-page__page-filter">
-					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ pf.label }}</span>
+					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ effectiveTranslate(pf.label) }}</span>
 					<NcSelect
 						:modelValue="selectedPageFilterOption(pf)"
-						:options="pf.options || []"
+						:options="pageFilterSegments(pf)"
 						:clearable="false"
-						:inputLabel="pf.label || pf.key"
+						:inputLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
 						label="label"
 						:data-testid="'cn-page-filter-' + pf.key"
 						@update:modelValue="onPageFilterChange(pf, $event)" />
@@ -1106,6 +1106,9 @@ const CHART_PROP_KEYS = [
 	'highlight',
 	'cellSource',
 	'emptyCellLabel',
+	// A norm line and month categories on a line chart (DqDoorlooptijd).
+	'referenceLines',
+	'categoryFormat',
 ]
 
 /**
@@ -2886,12 +2889,12 @@ export default {
 				return null
 			}
 			const current = this.workspaceContext[pf.key]
-			return (pf.options || []).find((o) => o.value === current) || null
+			return this.pageFilterSegments(pf).find((o) => o.value === current) || null
 		},
 
 		/**
-		 * A page filter's options as segments, labels through the host
-		 * translate.
+		 * A page filter's options, labels through the host translate: the
+		 * segments of a segmented filter and the options of a select.
 		 *
 		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
 		 * @param {object} pf The page-filter descriptor.

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

package/src/components/CnDataTable/CnDataTable.vue

@@ -389,6 +389,18 @@
 				</button>
 			</slot>
 		</div>
+		<!-- `pageSize`: the board's pager under the rows, "4 of 7" and the
+		     page buttons (DqCatalogus). -->
+		<CnPagination
+			v-if="pageSize > 0 && totalRowCount > pageSize"
+			variant="board"
+			class="cn-data-table__pager"
+			:currentPage="currentPage"
+			:totalPages="pageCount"
+			:totalItems="totalRowCount"
+			:currentPageSize="pageSize"
+			data-testid="cn-data-table-pager"
+			@pageChanged="currentPage = $event" />
 	</div>
 </template>
 
@@ -400,6 +412,7 @@ import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import CnPagination from '../CnPagination/CnPagination.vue'
 import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
@@ -491,6 +504,7 @@ export default {
 		CnColumnFilterPopover,
 		CnIcon,
 		CnLockIndicator,
+		CnPagination,
 		CnUnreadMarker,
 		ChevronDown,
 		ChevronUp,
@@ -858,6 +872,19 @@ export default {
 			default: 0,
 		},
 
+		/**
+		 * Rows per page. Above 0 the table shows one page of its rows and the
+		 * board's pager under them ("4 of 7", page buttons, Next) once there is
+		 * more than one page. Pages the rows the table holds; 0 (the default)
+		 * shows them all, or the first `limit`.
+		 *
+		 * @spec openspec/changes/object-table-pager/specs/object-table/spec.md#requirement-an-object-table-can-page-its-rows
+		 */
+		pageSize: {
+			type: Number,
+			default: 0,
+		},
+
 		/**
 		 * vue-router route object for the "View all" footer link. The footer only
 		 * shows when set AND the rows are a `limit`-ed subset. Folded in from CnTableWidget.
@@ -1010,6 +1037,8 @@ export default {
 			aggregateRequestId: 0,
 			/** Rows fetched in self-fetch mode (register + schemaId). */
 			fetchedRows: [],
+			/** The page shown under `pageSize`. */
+			currentPage: 1,
 			/** Personal-lens reports (`@self.lenses`) of the latest self-fetch response. */
 			fetchedLenses: {},
 			/** True while a self-fetch request is in flight. */
@@ -1125,9 +1154,23 @@ export default {
 		 * @return {Array<object>}
 		 */
 		effectiveRows() {
+			if (this.pageSize > 0) {
+				const page = Math.min(this.currentPage, this.pageCount)
+				return this.sourceRows.slice((page - 1) * this.pageSize, page * this.pageSize)
+			}
 			return this.limit > 0 ? this.sourceRows.slice(0, this.limit) : this.sourceRows
 		},
 
+		/**
+		 * The number of pages under `pageSize` (at least 1).
+		 *
+		 * @spec openspec/changes/object-table-pager/specs/object-table/spec.md#requirement-an-object-table-can-page-its-rows
+		 * @return {number}
+		 */
+		pageCount() {
+			return this.pageSize > 0 ? Math.max(1, Math.ceil(this.sourceRows.length / this.pageSize)) : 1
+		},
+
 		/**
 		 * Total row count before the `limit` cap (drives the count badge + the
 		 * "View all" footer condition).
@@ -1339,6 +1382,12 @@ export default {
 			},
 		},
 
+		pageCount(count) {
+			if (this.currentPage > count) {
+				this.currentPage = count
+			}
+		},
+
 		effectiveColumns: {
 			handler() {
 				this.loadAggregates()

package/src/components/CnDetailPage/CnDetailPage.md

@@ -426,6 +426,8 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `statusPill` | Object \| null | `null` | A second pill, same shape. |
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
 | `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |
+| `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
+| `tabsFrom` | String | `''` | A field path, read like a `visibleWhen` field, whose list of tab ids picks the tabs of the page's `tabs` widgets and their order for this record: `@context.caseType.tabs` reads the list a case type keeps (DqAanbesteding: Inschrijvingen, Publicaties, Bestanden, Historie). A tab's id is its `id`, else its `widgetId`, or the string entry. An empty or missing list keeps the declared tabs; edit mode shows them all. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## The record as a place