@conduction/nextcloud-vue 2.101.0 → 2.103.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -111,7 +111,7 @@
 						<Pencil v-if="!isEditing" :size="20" />
 						<Check v-else :size="20" />
 					</template>
-					{{ isEditing ? doneLabel : editLabel }}
+					{{ isEditing ? shownDoneLabel : shownEditLabel }}
 				</NcButton>
 				<!-- With `userLayout`, edit mode offers a way back to the
 				     manifest: the page's own grid and the chosen view return
@@ -1105,6 +1105,7 @@ const CHART_PROP_KEYS = [
 	'footnote',
 	'highlight',
 	'cellSource',
+	'emptyCellLabel',
 ]
 
 /**
@@ -1838,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: {
@@ -2215,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)
 		},
 
 		/**
@@ -2278,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))
@@ -2400,6 +2418,25 @@ export default {
 			return (this.pageFilters || []).filter((pf) => pf && pf.key && !inDescription.includes(pf))
 		},
 
+		/**
+		 * The edit button's label through the app's translate: a manifest's
+		 * `editLabel` ("Edit layout", DqDashboard) reads in the user's language.
+		 *
+		 * @return {string}
+		 */
+		shownEditLabel() {
+			return this.effectiveTranslate(this.editLabel)
+		},
+
+		/**
+		 * The done button's label through the app's translate.
+		 *
+		 * @return {string}
+		 */
+		shownDoneLabel() {
+			return this.effectiveTranslate(this.doneLabel)
+		},
+
 		/**
 		 * The preset list passed to the picker. Falls back to the
 		 * `DEFAULT_DATE_RANGE_PRESETS` constant when the consumer
@@ -3557,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)
@@ -3566,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/CnDetailPage/CnDetailPage.md

@@ -215,7 +215,7 @@ export default {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `userLayout` | Boolean | `false` | Let the user arrange each of the page's `views` for themselves. The header shows **Arrange view** next to the view switch; **Done** stores the arrangement per view and user (a user preference, mirrored in the browser), **Reset view** returns the chosen view to its manifest layout. The manifest `layout` is never changed. See [the guide](../../../docs/components/cn-detail-page.md#each-view-arranged-per-user-userlayout). |
+| `userLayout` | Boolean | `false` | **Deprecated** (layout belongs to Buildiq; removed after this release). Let the user arrange each of the page's `views` for themselves. The header shows **Arrange view** next to the view switch; **Done** stores the arrangement per view and user (a user preference, mirrored in the browser), **Reset view** returns the chosen view to its manifest layout. The manifest `layout` is never changed. See [the guide](../../../docs/components/cn-detail-page.md#each-view-arranged-per-user-userlayout). |
 
 ## Slots
 

package/src/components/CnFormDialog/CnFormDialog.md

@@ -100,7 +100,7 @@ export default {
 | `lockedFields` | `[]` | Field keys rendered read-only (disabled) and immutable — typically the parent reference seeded via `initialData` so the user can't repoint a child away from the record it was created under. |
 | `excludeFields` | `[]` | Array of field keys to exclude from the auto-generated form. |
 | `includeFields` | `null` | Array of field keys to include (whitelist mode). Null means all fields. |
-| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. |
+| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. A `widget` that names a registered component (v2 registry, then `customComponents`) mounts it as the field's control, with `value`/`modelValue`, `field`, `error` and `disabled`, writing back on `input` or `update:modelValue`. |
 | `nameField` | `'title'` | Which field is the "name" of the item (used in result messages). |
 | `size` | `'normal'` | NcDialog size — `'small'`, `'normal'`, or `'large'`. |
 | `dynamicLoadingLabel` | `'Loading the fields this choice adds.'` | Text shown while the fields a chosen value brings with it are being fetched. See *Fields the data decides* below. |

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -131,6 +131,22 @@
 							:error="errors[field.key]"
 							:updateField="updateField" />
 
+						<!-- A `widget` naming a registered component (v2 registry or
+						     customComponents) mounts that component as the control.
+						     It gets `value`/`modelValue`, `field`, `error` and
+						     `disabled`, and writes back with `input` or
+						     `update:modelValue`. -->
+						<component
+							:is="resolveFieldComponent(field)"
+							v-else-if="resolveFieldComponent(field)"
+							:value="formData[field.key]"
+							:modelValue="formData[field.key]"
+							:field="field"
+							:error="errors[field.key] || ''"
+							:disabled="!!field.readOnly"
+							@input="value => updateField(field.key, value)"
+							@update:modelValue="value => updateField(field.key, value)" />
+
 						<!-- referenceType (AD-18): render the integration's
 						     single-entity widget instead of a plain input. -->
 						<component
@@ -314,8 +330,26 @@
 								     plain select. NcSelectUsers wraps NcSelect and merges the
 								     rest of these bindings through, so the async load, search
 								     and select machinery is unchanged either way. -->
+								<!-- `look: "search"` (a `fieldOverrides` key): a search field
+								     with rows of icon or initials, name, a secondary line from
+								     `optionSecondary` and a check on the chosen one
+								     (DqOverdragen "Nieuw team"). -->
+								<CnSearchSelect
+									v-if="field.look === 'search' && !isUserField(field)"
+									:inputId="'cn-form-' + field.key"
+									:inputLabel="fieldLabelText(field)"
+									:labelOutside="isBoardLook"
+									:options="searchSelectOptions(field)"
+									:modelValue="getEffectiveSelectedOption(field)"
+									:clearable="!field.required"
+									:disabled="field.readOnly"
+									:loading="isFieldLoading(field)"
+									:filterable="!isAsyncEnum(field)"
+									@update:modelValue="onSearchSelectChange(field, $event)"
+									@search="isAsyncEnum(field) ? onAsyncSearch(field, $event) : undefined" />
 								<component
 									:is="isUserField(field) ? 'NcSelectUsers' : 'NcSelect'"
+									v-else
 									v-cn-select-aria="fieldAria(field)"
 									:inputId="'cn-form-' + field.key"
 									:inputLabel="fieldLabelText(field)"
@@ -799,6 +833,7 @@ import CnIconBrowser from '../CnIconBrowser/CnIconBrowser.vue'
 import CnJsonViewer from '../CnJsonViewer/CnJsonViewer.vue'
 import CnPropertySourceField from '../CnPropertySourceField/CnPropertySourceField.vue'
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
+import CnSearchSelect from '../CnSearchSelect/CnSearchSelect.vue'
 import CnSubObjectsField from '../CnSubObjectsField/CnSubObjectsField.vue'
 import { describeRowProblem, useChildRecords } from '../../composables/useChildRecords.js'
 import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, hasDraftChanges, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
@@ -821,6 +856,7 @@ import {
 	splitDynamicFormData,
 } from '../../utils/dynamicProperties.js'
 import { shouldShow } from '../../utils/fieldCondition.js'
+import { fillTemplate } from '../../utils/fillTemplate.js'
 import { computeAssignments } from '../../utils/formAssign.js'
 import { resolveNextcloudGroup, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
 import { durationSeconds } from '../../utils/isoDuration.js'
@@ -844,6 +880,36 @@ import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAuto
  */
 const WIDE_WIDGETS = ['textarea', 'json', 'code']
 
+// The widget names the form draws itself; a registered component cannot take one over.
+const BUILT_IN_WIDGETS = new Set([
+	'text',
+	'email',
+	'url',
+	'number',
+	'textarea',
+	'switch',
+	'select',
+	'user',
+	'group',
+	'multiselect',
+	'user-multiselect',
+	'group-multiselect',
+	'tags',
+	'checkbox',
+	'date',
+	'datetime',
+	'json',
+	'code',
+	'file',
+	'duration',
+	'child-records',
+	'sub-objects',
+	'property-source',
+	'icon',
+	'language',
+	'timezone',
+])
+
 /** Largest file carried inline in the saved payload; bigger ones upload after save. */
 const INLINE_FILE_CAP = 1024 * 1024
 
@@ -1033,6 +1099,7 @@ export default {
 		CnFileField,
 		CnDurationField,
 		CnPropertySourceField,
+		CnSearchSelect,
 		CnReplaceValuesDialog,
 		CnSubObjectsField,
 		CnChildRecordsField,
@@ -2029,6 +2096,28 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Resolve the registered component a field's `widget` names: the v2
+		 * registry (any entry with a `component`) first, then the legacy
+		 * customComponents map. Built-in widget names never resolve here.
+		 *
+		 * @param {object} field A resolved field descriptor.
+		 * @return {object|null} Vue component, or null.
+		 */
+		resolveFieldComponent(field) {
+			const name = field && field.widget
+			if (typeof name !== 'string' || name === '' || BUILT_IN_WIDGETS.has(name)) {
+				return null
+			}
+			const entry = this.cnRegistry && this.cnRegistry[name]
+			if (entry && entry.component) {
+				return entry.component
+			}
+			const legacy = this.cnCustomComponents && this.cnCustomComponents[name]
+			// A bare function in the legacy map is a handler, not a component.
+			return legacy && typeof legacy === 'object' ? legacy : null
+		},
+
 		/**
 		 * Resolve a field's reference integration widget, if any.
 		 * Returns the integration's single-entity widget component
@@ -4337,6 +4426,44 @@ export default {
 		 * @param {object} field The field definition
 		 * @return {Array}
 		 */
+		/**
+		 * The options of a `look: "search"` field as CnSearchSelect rows: each
+		 * option's own `secondary` / `icon` / `avatar`, else the field's
+		 * `optionSecondary` template (filled from the option), `optionIcon` and
+		 * `optionAvatar`.
+		 *
+		 * @spec openspec/changes/search-select-look/specs/search-select/spec.md#requirement-a-single-picker-can-take-the-search-look
+		 * @param {object} field The field definition.
+		 * @return {Array<object>}
+		 */
+		searchSelectOptions(field) {
+			const template = typeof field.optionSecondary === 'string' ? field.optionSecondary : ''
+			return this.getEffectiveOptions(field).map((option) => ({
+				...option,
+				secondary: option.secondary || (template ? fillTemplate(template, option).trim() : ''),
+				icon: option.icon || field.optionIcon || '',
+				avatar: option.avatar ?? (field.optionAvatar === true),
+			}))
+		},
+
+		/**
+		 * Pick the option a CnSearchSelect field emitted by its id, and hand
+		 * it to the select change handler.
+		 *
+		 * @spec openspec/changes/search-select-look/specs/search-select/spec.md#requirement-a-single-picker-can-take-the-search-look
+		 * @param {object} field The field definition.
+		 * @param {string|number|null} id The chosen option's id.
+		 */
+		onSearchSelectChange(field, id) {
+			if (id === null || id === undefined) {
+				this.onEffectiveSelectChange(field, null)
+				return
+			}
+			const option = this.searchSelectOptions(field).find((o) => String(o.id ?? o.value) === String(id)) || { id, label: String(id) }
+			const { secondary, icon, avatar, ...plain } = option
+			this.onEffectiveSelectChange(field, plain)
+		},
+
 		getEffectiveOptions(field) {
 			if (this.isAsyncEnum(field)) {
 				// TODO: restore to `this.asyncState[field.key]?.options || []` once on Vue 3 (buble doesn't support optional chaining)

package/src/components/CnIndexPage/CnIndexPage.md

@@ -362,7 +362,7 @@ export default {
 | `lensReasonTexts` | Object \| null | `null` | App wording for an unavailable lens, keyed `<lens>.<reason>` or `<reason>`. |
 | `loadingText` | String | `'Loading…'` | Accessible label for the loading spinner (NcLoadingIcon aria-label) |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every table row — a static MDI name or `(row) => iconName`. Forwarded to CnDataTable; fed from the manifest as `pages[].config.rowIcon`. Unset = no icon column. |
-| `rowClass` | Function | `null` | Callback returning CSS class(es) for a row |
+| `rowClass` | Function \| Array | `null` | Callback returning CSS class(es) for a row, or (manifest `config.rowClass`) rules `[{ when: { field, op?, value }, class }]` compiled into one: each adds its class to a row whose field compares to the value (`visibleWhen` operators; two dates compare as moments, `@today` included). |
 | `rowIcon` | String \| Function | `null` | Optional leading row icon forwarded to CnDataTable — a static MDI icon name or `(row) => iconName`. Fed from the manifest as `pages[].config.rowIcon`; unset = no icon column |
 | `inlineActionCount` | Number | `2` | How many row actions to show inline (rest go in overflow menu) |
 | `showMassImport` | Boolean | `true` | Whether to show the mass Import action |
@@ -414,6 +414,7 @@ export default {
 | `quickFilterMode` | String | `'chips'` | How the quick filters render: `'chips'` (pill strip) or `'dropdown'` (a single `NcSelect`). Fed from `pages[].config.quickFilterMode`. |
 | `quickFilterMultiple` | Boolean | `false` | Allow several quick filters active at once; selected tabs' filters are OR-ed into the fetch (same field → `field[]=` array). Fed from `pages[].config.quickFilterMultiple`. |
 | `quickFilterMaxVisible` | Number | `0` | Chips mode only — how many quick-filter pills render inline before the rest move behind one more chip — a `⋯` pill that opens a panel of the hidden lenses. `0` renders every tab, which wraps the actions bar onto a second line once a page declares more than a handful. The visible set is the first *n* entries of `quickFilters`. Fed from `pages[].config.quickFilterMaxVisible`. |
+| `quickFilterPlacement` | String | `''` | Where the quick-filter chips sit. `'toolbar'` keeps them on one row with the Filter button and the view switch, in whatever width that row has beside a side panel (DqTeamwachtrij): the chips take the room the buttons leave, and those that do not fit move behind the overflow chip. Fed from `pages[].config.quickFilterPlacement`. |
 | `cardComponent` | String | `''` | Optional name of a consumer-provided card component (registered in the v2 `registry` — any kind carrying a `component` — or in the legacy `customComponents` map on `CnAppRoot`) to render in place of the default `CnObjectCard` when the page is in card-grid view mode. Resolution priority: `#card` scoped slot → `cardComponent` registry entry → default `CnObjectCard`. Unknown names log `console.warn` once and fall back to the default. |
 | `customComponents` | Object | `null` | Optional explicit `customComponents` registry. Overrides the registry injected from `CnAppRoot` via `cnCustomComponents`. Mostly used by unit tests; production consumers register components on `CnAppRoot` instead. |
 | `subscribe` | Boolean | `true` | Self-fetch mode only. When `register` + `schema` are set (and no `objects` prop), the page subscribes to the collection's `or-collection-{register}-{schema}` live-update scope on mount and refetches on an update event; released on unmount. Set `false` (manifest: `config.subscribe: false`) for static / read-once views. No-op in consumer-managed mode or on stores without live-updates support. |
@@ -1093,6 +1094,16 @@ Sources: `register` (fetch the folder list from an OpenRegister `register`/`sche
 }
 ```
 
+`pane: false` draws no pane. The folder still comes from the deep-link filter (`/cases?caseType=<uuid>`) and its scope look (title, count line, columns, quick filters, `afterList` from the folder or its row's `x-index`) still applies, so a list narrowed to one case type looks like that case type's list without a folder column (boards DqWooVerzoeken, DqKlachten):
+
+```json
+"folderSidebar": {
+  "source": "register", "register": "dossiq", "schema": "caseType",
+  "idField": "@self.uuid", "nameField": "title",
+  "filterField": "caseType", "pane": false
+}
+```
+
 ### A column set per folder
 
 A folder is also a scope. Give it `columns`, `defaultSort` or `searchFields`
@@ -1136,3 +1147,6 @@ columns are right.
 ## Board look
 
 With `look: "board"` (the page's `look` prop, `config.look`, or the app's) the index page takes the DqZaken setup: a header with the count line from `countText` (`{shown}`, `{total}`), the buttons Download, Actions, the buildiq square and the primary one in that order, a two-row toolbar (saved-view chips, Filter with a count and the view switch; then search and active filter chips), a bulk band between toolbar and table (`bulkHint`), the table as a white card with one menu button per row, and a footer inside the card (`footerNote`). `cardFields` names the facts of each card in the cards view. Without the look nothing changes.
+
+`bulkBandAlways` (`config.bulkBandAlways`) draws the board bulk band before a selection too, its buttons
+disabled until rows are selected (DqZaken, DqWerkbord).

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="cn-index-page"
-		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel }]"
+		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel, 'cn-index-page--quick-filters-toolbar': quickFilterPlacement === 'toolbar' }]"
 		data-testid="cn-index-page"
 		@keydown="onListKeydown">
 		<!-- Header — overridable via #header slot. CnPageHeader ALWAYS renders:
@@ -163,6 +163,7 @@
 			:showBuildiqButton="!buildiqInHeader"
 			:bulkNoun="boardBulkNoun"
 			:bulkHint="bulkHint ? cnTranslate(bulkHint) : bulkHint"
+			:bulkBandAlways="bulkBandAlways"
 			:pagination="effectivePagination"
 			:objectCount="effectiveObjects.length"
 			:selectable="selectable"
@@ -369,6 +370,7 @@
 					:tabs="tabStripEntries"
 					:mode="quickFilterMode"
 					:maxVisible="quickFilterMaxVisible"
+					:fit="quickFilterPlacement === 'toolbar'"
 					:multiple="quickFilterMultiple"
 					:activeIndex="activeQuickFilterIndex"
 					:selectedIndices="selectedQuickFilterIndices"
@@ -658,11 +660,12 @@
 		</slot>
 
 		<!-- Body -->
-		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': folderSidebar }">
+		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': showsFolderPane }">
 			<!-- Optional folder navigation pane (opt-in via the `folderSidebar`
 			     config). Selecting a folder filters the list by the config's
-			     `filterField`; "All" clears it. -->
-			<div v-if="folderSidebar" class="cn-index-page__folder-pane">
+			     `filterField`; "All" clears it. `pane: false` keeps the scope
+			     from the deep link and draws no pane. -->
+			<div v-if="showsFolderPane" class="cn-index-page__folder-pane">
 				<CnFolderSidebar
 					:source="folderSidebarSource"
 					:folders="folderSidebarFolders"
@@ -755,7 +758,7 @@
 					:excludeColumns="excludeColumns"
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
-					:rowClass="rowClass"
+					:rowClass="compiledRowClass"
 					:rowTitle="rowTitle"
 					:showUnread="showUnreadRows"
 					:filterable="tableHeaderFilters"
@@ -1292,6 +1295,7 @@ import { resolveFilterMap } from '../../utils/routeFilters.js'
 import { availableRowActions, DEFAULT_ROW_ACTION_FIELD, refusalReasonFor, undeclaredRowActions, withoutViewWhenRowOpensDetail } from '../../utils/rowActionAvailability.js'
 import { isRowActionVisible, rowActionPayload } from '../../utils/rowActionItem.js'
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
+import { compileRowClass } from '../../utils/rowClassRules.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
@@ -1938,6 +1942,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: draw the bulk band before anything is selected too, its
+		 * buttons disabled until there is a selection (DqZaken, DqWerkbord).
+		 * Manifest key `config.bulkBandAlways`. Only when the band has an
+		 * action to offer.
+		 */
+		bulkBandAlways: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Board look: the 13px hint after the bulk band's buttons ("See what
 		 * changes first, then run it"). Manifest key `config.bulkHint`.
@@ -2119,6 +2134,21 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Where the quick-filter chips sit (manifest `config.quickFilterPlacement`).
+		 * `''` (the default) as before. `'toolbar'` keeps them on one row with
+		 * the Filter button and the view switch, in whatever width that row has
+		 * beside a side panel (DqTeamwachtrij): the chips take the room the
+		 * buttons leave, and those that do not fit move into the overflow chip.
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		quickFilterPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/**
 		 * How the quick filters render: `'chips'` (pill strip, default) or
 		 * `'dropdown'` (a single `NcSelect`). Sourced from the manifest as
@@ -2695,9 +2725,18 @@ export default {
 			default: 'Loading…',
 		},
 
-		/** Function returning CSS class(es) for a row */
+		/**
+		 * CSS class(es) for a row: a function `(row) => string`, or (manifest
+		 * `config.rowClass`) rules `[{ when: { field, op?, value }, class }]`,
+		 * each adding its class to a row whose field compares to the value
+		 * (the `visibleWhen` operators, `@today` included). DqTaken marks an
+		 * overdue task: `{ when: { field: "dueAt", op: "lt", value: "@today" },
+		 * class: "cn-row--overdue" }`.
+		 *
+		 * @type {((row: object) => string)|Array<{when: {field: string, op?: string, value: unknown}, class: string}>|null}
+		 */
 		rowClass: {
-			type: Function,
+			type: [Function, Array],
 			default: null,
 		},
 
@@ -3162,6 +3201,9 @@ export default {
 		 *   defaults to `field`).
 		 * - `folders` — explicit folder list for `source:'custom'`.
 		 * - `allLabel` / `title` / `allowCreate` — passed to CnFolderSidebar.
+		 * - `pane` — `false` draws no pane: the scope still comes from the
+		 *   deep-link filter (`?caseType=<id>`) and still applies its look, as
+		 *   a list narrowed to one case type does without a folder column.
 		 *
 		 * A folder entry is also a SCOPE: it may carry `columns`, `defaultSort`
 		 * and `searchFields`, and while it is selected the list is shown that
@@ -3779,6 +3821,10 @@ export default {
 		//
 		// Seeded from the route query so a shared link lands filtered, the
 		// same way `_order` and a deep-link filter already do for self-fetch.
+		// The page a paging named source shows: page 1 at the source config's
+		// `limit` (20 by default), moved by the pager.
+		const namedPageSize = Number(props.sourceConfig && props.sourceConfig.limit) > 0 ? Number(props.sourceConfig.limit) : 20
+		const namedPaging = ref({ page: 1, limit: namedPageSize })
 		const namedActiveFilters = ref(namedFiltersFromRoute(getCurrentInstance(), props))
 
 		const {
@@ -3787,7 +3833,7 @@ export default {
 			namedRows,
 			namedLoading,
 			namedQuickFilters,
-		} = useNamedSource(props, { activeQuickFilterIndex, activeFilters: namedActiveFilters })
+		} = useNamedSource(props, { activeQuickFilterIndex, activeFilters: namedActiveFilters, paging: namedPaging })
 
 		return {
 			isBoard: isBoardLook,
@@ -3799,6 +3845,7 @@ export default {
 			namedLoading,
 			namedQuickFilters,
 			namedActiveFilters,
+			namedPaging,
 			contextMenuOpen,
 			contextMenuRow,
 			openContextMenu,
@@ -4761,6 +4808,9 @@ export default {
 				const loaded = this.effectivePagination || {}
 				return Number(loaded.page || 1) < Number(loaded.pages || 1)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				return Number(this.effectivePagination?.pages || 1) > 1
+			}
 			return Number(this.pagination?.pages || 1) > 1
 		},
 
@@ -4787,6 +4837,17 @@ export default {
 			return { shown, total: Math.max(shown, Number(this.effectivePagination?.total || 0)) }
 		},
 
+		/**
+		 * Whether the folder pane is drawn: a `folderSidebar` without
+		 * `pane: false`.
+		 *
+		 * @spec openspec/changes/folder-sidebar-pane-off/specs/index-page/spec.md#requirement-a-folder-scope-without-a-pane
+		 * @return {boolean}
+		 */
+		showsFolderPane() {
+			return Boolean(this.folderSidebar) && this.folderSidebar.pane !== false
+		},
+
 		/**
 		 * The CnFolderSidebar source. A `register` source is fetched by this
 		 * component and handed to CnFolderSidebar as a `custom` folder list.
@@ -5800,7 +5861,13 @@ export default {
 			// A named source that reports its own total (the search source)
 			// gives the count line its number.
 			if (this.isNamedSource && this.namedSource && typeof this.namedSource.total === 'function') {
-				return { ...(this.pagination || {}), total: this.namedSource.total() }
+				const total = this.namedSource.total()
+				// A source with `pages: true` gets the pager the self-fetched lists draw.
+				if (this.namedSource.pages === true) {
+					const { page, limit } = this.namedPaging
+					return { page, limit, total, pages: Math.max(1, Math.ceil(total / limit)) }
+				}
+				return { ...(this.pagination || {}), total }
 			}
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
@@ -6053,6 +6120,16 @@ export default {
 			return (this.effectiveSchema && this.effectiveSchema.slug) || ''
 		},
 
+		/**
+		 * The row-class function the table takes: a function as given, or the
+		 * manifest's rules compiled.
+		 *
+		 * @return {?(row: object) => string}
+		 */
+		compiledRowClass() {
+			return compileRowClass(this.rowClass)
+		},
+
 		/** @return {number} How many leading columns the person pinned (0 while a saved view's columns are applied). */
 		pinnedColumnCount() {
 			if (!this.personalColumns || Array.isArray(this.appliedViewColumns) || !this.personalLayout) {
@@ -8777,6 +8854,9 @@ export default {
 			if (this.isSelfFetchMode && typeof this.list.onPageChange === 'function') {
 				this.list.onPageChange(page)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				this.namedPaging = { ...this.namedPaging, page }
+			}
 			this.$emit('page-changed', page)
 		},
 
@@ -8792,6 +8872,9 @@ export default {
 			if (this.isSelfFetchMode && typeof this.list.onPageSizeChange === 'function') {
 				this.list.onPageSizeChange(size)
 			}
+			if (this.isNamedSource && this.namedSource && this.namedSource.pages === true) {
+				this.namedPaging = { page: 1, limit: size }
+			}
 			this.$emit('page-size-changed', size)
 		},
 

package/src/components/CnIndexPage/useNamedSource.js

@@ -105,6 +105,9 @@ export function useNamedSource(props, options = {}) {
 	const tabs = manifestTabs || sourceTabs
 	const activeIndex = options.activeQuickFilterIndex || null
 	const activeFilters = options.activeFilters || null
+	// A source that pages (`pages: true`) gets the page as `limit` and
+	// `offset`, from the pager the page draws for it.
+	const paging = source.pages === true ? (options.paging || null) : null
 
 	// Seed the default tab before the watcher below registers: the mount load
 	// already carries this tab's filter, so the seed must not fire a second
@@ -165,6 +168,7 @@ export function useNamedSource(props, options = {}) {
 					activeFilters ? activeFilters.value : null,
 					props.entitySource,
 				),
+				...(paging ? { limit: paging.value.limit, offset: (paging.value.page - 1) * paging.value.limit } : {}),
 			},
 			tokenCtx(),
 		)
@@ -182,15 +186,35 @@ export function useNamedSource(props, options = {}) {
 
 	// Registered AFTER the seed above, so only a person switching tabs
 	// reloads. Without tabs there is nothing to watch.
+	/**
+	 * Reload for a new query: on a paging source back to page 1, which
+	 * reloads through the paging watcher below.
+	 *
+	 * @return {void}
+	 */
+	function reloadFromFirstPage() {
+		if (paging && paging.value.page !== 1) {
+			paging.value = { ...paging.value, page: 1 }
+			return
+		}
+		loadActive()
+	}
+
 	if (tabs && activeIndex) {
-		watch(activeIndex, loadActive)
+		watch(activeIndex, reloadFromFirstPage)
 	}
 
 	// A sidebar choice is a new QUERY, not a new view of the page already
 	// fetched, so it reloads. `deep` because the map is rewritten key by key
 	// and a shallow watch misses a second value added to the same field.
 	if (activeFilters) {
-		watch(activeFilters, loadActive, { deep: true })
+		watch(activeFilters, reloadFromFirstPage, { deep: true })
+	}
+
+	// A new page, or a new page size, is a new request. A new tab or filter
+	// first returns to page 1, which reloads through here.
+	if (paging) {
+		watch(paging, loadActive, { deep: true })
 	}
 
 	// No manual invalidation tick here on purpose. The adapters read from a