@conduction/nextcloud-vue 2.65.0 → 2.66.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35252015 bytes
-sha256: fc6a53315288d3796fbfb1aabafee9aa7c5145a0eadbfa2e240269fa544b9764
+size: 35355767 bytes
+sha256: e048d3627c1eba03f90228c9f300e9341baf3086530119fe40b4af2106f5b7b2

package/dist/nextcloud-vue.css

@@ -3279,6 +3279,11 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -30567,6 +30572,19 @@ to {
 .cn-dashboard-page__empty[data-v-824052fe] {
 	padding: 60px 20px;
 }
+
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch[data-v-824052fe] {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty[data-v-824052fe] {
+	padding: 40px 20px;
+}
 .cn-dashboard-page__page-filters[data-v-824052fe] {
 	display: flex;
 	flex-wrap: wrap;

package/l10n/en.json

@@ -49,6 +49,7 @@
     "This integration is not available.": "This integration is not available.",
     "Integrations": "Integrations",
     "View": "View",
+    "Views": "Views",
     "current step": "current step",
     "{app} not available": "{app} not available",
     "{app} not configured": "{app} not configured",
@@ -408,6 +409,7 @@
     "Any": "Any",
     "To": "To",
     "Equals": "Equals",
+    "Contains": "Contains",
     "Clear": "Clear",
     "Apply": "Apply",
     "This column cannot list its objects.": "This column cannot list its objects.",
@@ -1088,6 +1090,7 @@
     "The actions of an attention card are declared in the manifest.": "The actions of an attention card are declared in the manifest.",
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
+    "This view has no widgets yet.": "This view has no widgets yet.",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",

package/l10n/nl.json

@@ -49,6 +49,7 @@
     "This integration is not available.": "Deze integratie is niet beschikbaar.",
     "Integrations": "Integraties",
     "View": "Weergave",
+    "Views": "Weergaven",
     "current step": "huidige stap",
     "{app} not available": "{app} niet beschikbaar",
     "{app} not configured": "{app} niet geconfigureerd",
@@ -408,6 +409,7 @@
     "Any": "Alle",
     "To": "Tot",
     "Equals": "Is gelijk aan",
+    "Contains": "Bevat",
     "Clear": "Wissen",
     "Apply": "Toepassen",
     "This column cannot list its objects.": "Deze kolom kan zijn objecten niet tonen.",
@@ -1132,6 +1134,7 @@
     "The actions of an attention card are declared in the manifest.": "De acties van een aandachtskaart staan in het manifest.",
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
+    "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",

package/package.json

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

@@ -32,6 +32,18 @@
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region below the grid. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-dashboard-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- Declarative header actions (#91 Wave 3): a manifest
 				     `headerActions[]` renders as buttons (open-form / api-call /
 				     toggle / navigate / refresh) with visibleWhen gating,
@@ -218,7 +230,7 @@
 		     sections (before-grid / after-grid / end): a page can legitimately
 		     have no grid widgets yet still show bodyWidget content, so
 		     "No widgets configured" would be a false negative. -->
-		<div v-else-if="!hasWidgets && !hasBodyWidgets" class="cn-dashboard-page__empty">
+		<div v-else-if="!hasWidgets && !hasBodyWidgets && !hasViews" class="cn-dashboard-page__empty">
 			<!-- @slot empty Replaces the default empty state shown when the dashboard has no widgets. Defaults to an `NcEmptyContent` block. -->
 			<slot name="empty">
 				<NcEmptyContent :description="emptyLabel">
@@ -253,15 +265,34 @@
 		     to the layout/widgets arrays — in-place pushes (Add widget) keep
 		     the same array identity and can't re-render it. One remount per
 		     edit flip re-subscribes against the now-reactive graph. -->
+		<!-- The view switch for a page without a header row, when no greeting
+		     header widget draws it. -->
+		<div
+			v-if="gridSectionsShown && !showHeader && showsPageViewSwitch"
+			class="cn-dashboard-page__view-switch">
+			<CnSegmentedControl
+				class="cn-page-view-switch"
+				:options="viewSwitchOptions"
+				:modelValue="activeViewId"
+				:ariaLabel="viewSwitchLabel"
+				:controls="viewRegionId"
+				data-testid="cn-dashboard-page-view-switch"
+				@update:modelValue="selectView" />
+		</div>
+		<!-- One grid per section: the page's own layout, then the chosen
+		     view (`views`) in a region the view switch controls. Both are the
+		     same grid with the same widget rendering below. A view grid is
+		     keyed on its view, so switching mounts the other view's grid. -->
 		<CnDashboardGrid
-			v-else
-			:key="`cn-dashboard-grid-${gridEditable ? 'editing' : 'live'}`"
-			:layout="displayLayout"
-			:editable="gridEditable"
+			v-for="section in gridSections"
+			:key="`cn-dashboard-grid-${section.key}-${gridEditable ? 'editing' : 'live'}`"
+			v-bind="section.attrs"
+			:layout="section.layout"
+			:editable="section.editable"
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
-			@layoutChange="onLayoutChange">
+			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
 				     configure cog opens the per-widget style/config editor,
@@ -655,6 +686,22 @@
 			</template>
 		</CnDashboardGrid>
 
+		<!-- The chosen view has nothing to draw: say so in the region, never
+		     leave a blank area under the switch. -->
+		<div
+			v-if="gridSectionsShown && viewIsEmpty"
+			:id="viewRegionId"
+			role="region"
+			:aria-label="activeView ? activeView.label : null"
+			class="cn-page-view-region cn-page-view-region--empty"
+			data-testid="cn-dashboard-page-view-empty">
+			<NcEmptyContent :description="viewEmptyText">
+				<template #icon>
+					<ViewDashboardOutline :size="48" />
+				</template>
+			</NcEmptyContent>
+		</div>
+
 		<!-- Declarative in-body sections, `placement: "after-grid"` — host-app
 		     section components rendered BELOW the widget grid. -->
 		<CnBodySections
@@ -714,6 +761,7 @@ import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnChartWidget from '../CnChartWidget/CnChartWidget.vue'
 import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow } from '../CnDateRangePicker/CnDateRangePicker.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
@@ -721,6 +769,7 @@ import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { dashboardLayoutKey, mergeUserLayout } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
@@ -875,8 +924,11 @@ export default {
 		CnBuildiqEditButton,
 		CnWidgetStyleEditorModal,
 		CnLeafMountHost,
+		CnSegmentedControl,
 	},
 
+	mixins: [pageViews],
+
 	inject: {
 		/**
 		 * Buildiq in-app edit state (ADR-041), provided by CnAppRoot as a ref.
@@ -1879,6 +1931,89 @@ export default {
 			return this.layout.length > 0 || this.widgetRefItems.length > 0
 		},
 
+		/**
+		 * Whether the grid sections render at all: not while loading, not
+		 * while the widget predicates settle, not on the empty page and not
+		 * on a widget-ref content page.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		gridSectionsShown() {
+			if (this.loading || (!this.widgetConditionsSettled && !this.gridEditable)) {
+				return false
+			}
+			if (!this.hasWidgets && !this.hasBodyWidgets && !this.hasViews) {
+				return false
+			}
+			return this.widgetRefItems.length === 0
+		},
+
+		/**
+		 * The chosen view's layout as the grid draws it: in live mode the
+		 * widgets that would draw nothing leave and the rest close up, as
+		 * for the page's own layout.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewDisplayLayout() {
+			const items = this.activeView ? this.activeView.layout : []
+			if (this.gridEditable) {
+				return items
+			}
+			const visible = items.filter((item) => !this.isCollapsedWidget(item))
+			return visible.length === items.length ? items : this.compactDisplayLayout(visible)
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids this page draws. Without views: the page's own layout,
+		 * as it always was. With views: the page's own layout when it has
+		 * items, then the chosen view's layout in the region the switch
+		 * controls (left out when the view is empty; the empty state takes
+		 * the region then).
+		 *
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, editable: boolean, attrs: object}>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		gridSections() {
+			if (!this.gridSectionsShown) {
+				return []
+			}
+			const page = { key: 'page', view: false, layout: this.displayLayout, editable: this.gridEditable, attrs: {} }
+			if (!this.hasViews) {
+				return [page]
+			}
+			const sections = this.displayLayout.length > 0 ? [page] : []
+			if (!this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					// A user arrangement covers the page's own layout only.
+					editable: this.gridEditable && !this.userLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						class: 'cn-page-view-region',
+						'data-testid': 'cn-dashboard-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * The widget settings object handed to CnWidgetStyleEditorModal,
 		 * built from the widget definition currently being configured
@@ -2009,6 +2144,14 @@ export default {
 				this.evaluateWidgetConditions()
 			},
 		},
+
+		/** A view's widgets carry predicates too. */
+		views: {
+			deep: true,
+			handler() {
+				this.evaluateWidgetConditions()
+			},
+		},
 	},
 
 	created() {
@@ -2873,7 +3016,8 @@ export default {
 		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateWidgetConditions() {
-			const conditional = (this.widgets || []).filter((def) => def && def.id && def.type
+			const defs = [...(this.widgets || []), ...this.normalizedViews.flatMap((view) => view.widgets)]
+			const conditional = defs.filter((def) => def && def.id && def.type
 				&& this.widgetDisplayConfig(def).visibleWhen)
 			// Skip when the CONDITIONAL SET is unchanged: the deep `widgets`
 			// watch fires on any def edit, but only an added/removed/edited
@@ -3007,7 +3151,7 @@ export default {
 		 */
 		getWidgetDef(widgetId) {
 			const list = Array.isArray(this.widgets) ? this.widgets : []
-			return list.find((w) => w && w.id === widgetId) || null
+			return list.find((w) => w && w.id === widgetId) || this.findViewWidget(widgetId)
 		},
 
 		/**
@@ -4021,6 +4165,19 @@ export default {
 	padding: 60px 20px;
 }
 
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty {
+	padding: 40px 20px;
+}
+
 .cn-dashboard-page__page-filters {
 	display: flex;
 	flex-wrap: wrap;

package/src/components/CnDataTable/CnColumnFilterPopover.vue

@@ -91,9 +91,9 @@
 				</label>
 			</div>
 
-			<!-- string: equals -->
+			<!-- string: contains (OpenRegister `[like]`, case-insensitive) -->
 			<label v-else class="cn-column-filter__field">
-				<span class="cn-column-filter__label">{{ equalsLabel }}</span>
+				<span class="cn-column-filter__label">{{ containsLabel }}</span>
 				<input
 					v-model="draft.value"
 					class="cn-column-filter__input"
@@ -131,7 +131,7 @@ let popoverSeq = 0
  *
  * Renders the control that fits the column: a checkbox list for an enum, yes,
  * no or any for a boolean, from and to for a number or a date, a searchable
- * list of referenced objects for a reference, and an equals box for text.
+ * list of referenced objects for a reference, and a contains box for text.
  * Real inputs throughout, so every control works from the keyboard. Escape
  * closes it and the host returns focus to the filter button.
  *
@@ -265,8 +265,14 @@ export default {
 			return t('nextcloud-vue', 'To')
 		},
 
-		equalsLabel() {
-			return t('nextcloud-vue', 'Equals')
+		/**
+		 * Label of the text box: the text filter matches on contains.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/header-filter-contains/specs/cn-data-table/spec.md#requirement-a-text-header-filter-matches-on-contains
+		 */
+		containsLabel() {
+			return t('nextcloud-vue', 'Contains')
 		},
 
 		clearLabel() {

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -145,6 +145,18 @@
 				</div>
 			</slot>
 			<div class="cn-detail-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region in the body. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-detail-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- Next and previous inside the list this record was opened
 				     from. Rendered only when the address names that list: a
 				     record reached by a bare link offers neither, rather than
@@ -609,15 +621,19 @@
 			     subscribed to the layout/widgets arrays — in-place pushes
 			     (Add widget) keep the same array identity and can't re-render
 			     it. One remount per edit flip re-subscribes it. -->
+			<!-- One grid per section: the body grid, then the chosen view
+			     (`views`) in a region the view switch controls. A view grid is
+			     keyed on its view, so switching mounts the other view's grid. -->
 			<CnDashboardGrid
-				v-if="hasBodyGrid"
-				:key="`cn-detail-grid-${editingBody ? 'editing' : 'live'}`"
-				:layout="bodyGridLayout"
+				v-for="section in bodyGridSections"
+				:key="`cn-detail-grid-${section.key}-${editingBody ? 'editing' : 'live'}`"
+				v-bind="section.attrs"
+				:layout="section.layout"
 				:editable="editingBody"
 				:columns="12"
 				:columnOpts="columnOpts"
 				class="cn-detail-page__grid"
-				@layoutChange="onBodyLayoutChange">
+				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
 					<div
 						class="cn-detail-page__grid-item"
@@ -727,6 +743,22 @@
 				</template>
 			</CnDashboardGrid>
 
+			<!-- The chosen view has nothing to draw: say so in the region,
+			     never leave a blank area under the switch. -->
+			<div
+				v-if="viewIsEmpty"
+				:id="viewRegionId"
+				role="region"
+				:aria-label="activeView ? activeView.label : null"
+				class="cn-page-view-region cn-page-view-region--empty"
+				data-testid="cn-detail-page-view-empty">
+				<NcEmptyContent :description="viewEmptyText">
+					<template #icon>
+						<ViewDashboardOutline :size="48" />
+					</template>
+				</NcEmptyContent>
+			</div>
+
 			<!-- Statistics table -->
 			<div v-if="hasStats" class="cn-detail-page__stats">
 				<!--
@@ -1036,6 +1068,7 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnRelationLinkModal from '../../dialogs/CnRelationLinkModal.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
 import CnActionsMenu from '../CnActionsMenu/CnActionsMenu.vue'
@@ -1048,6 +1081,7 @@ import CnLifecycleActions from '../CnLifecycleActions/CnLifecycleActions.vue'
 import CnLockedBanner from '../CnLockedBanner/CnLockedBanner.vue'
 import CnNextStepCard from '../CnNextStepCard/CnNextStepCard.vue'
 import CnRelatedCollections from '../CnRelatedCollections/CnRelatedCollections.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnSummaryAggregates from '../CnSummaryAggregates/CnSummaryAggregates.vue'
 import CnTranslatedBadge from '../CnTranslatedBadge/CnTranslatedBadge.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
@@ -1055,6 +1089,7 @@ import { useObjectLock } from '../../composables/useObjectLock.js'
 import { useObjectPresence } from '../../composables/useObjectPresence.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
@@ -1227,6 +1262,8 @@ export default {
 		CnDetailWidgetHost,
 		CnFormDialog,
 		CnDashboardGrid,
+		CnSegmentedControl,
+		ViewDashboardOutline,
 		CnLifecycleActions,
 		CnActionButtons,
 		CnBreadcrumbs,
@@ -1242,7 +1279,7 @@ export default {
 		Pencil,
 	},
 
-	mixins: [gridLayout],
+	mixins: [gridLayout, pageViews],
 
 	inject: {
 		/**
@@ -3462,6 +3499,7 @@ export default {
 				&& this.currentObject
 				&& !this.hasDefaultSlotContent
 				&& !this.hasGridLayout
+				&& !this.hasViews
 		},
 
 		/**
@@ -3541,6 +3579,55 @@ export default {
 			return this.bodyGridLayout.length > 0
 		},
 
+		/**
+		 * The chosen view's layout as the grid draws it: items that draw
+		 * nothing leave and their rows close, as for the body grid.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewDisplayLayout() {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- reading the flag IS the effect, as in bodyGridLayout
+			this.editingBody
+			return this.activeView ? this.closeDroppedRows(this.activeView.layout) : []
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids the body draws: the body grid when it has items, then the
+		 * chosen view's grid in the region the view switch controls (left out
+		 * when the view is empty; the empty state takes the region then).
+		 *
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, attrs: object}>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		bodyGridSections() {
+			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, attrs: {} }] : []
+			if (this.hasViews && !this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						'data-testid': 'cn-detail-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * Whether the sidebar is rendered externally (via objectSidebarState inject)
 		 * rather than inline. When external, CnDetailPage only manages state —
@@ -4762,6 +4849,8 @@ export default {
 		 */
 		findWidget(item) {
 			return this.bodyGridWidgets.find((w) => w.id === item.widgetId)
+				|| this.findViewWidget(item.widgetId)
+				|| undefined
 		},
 
 		/**

package/src/components/CnFkResolveCell/CnFkResolveCell.vue

@@ -135,7 +135,9 @@ export default {
 			if (!store) {
 				return
 			}
-			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema })
+			// `schema` is a slug the manifest author wrote, not a `$ref` title:
+			// use it exactly as given (a camelCase slug must not be kebab-cased).
+			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema }, { exactSchema: true })
 			await Promise.all(this.ids.map(async (id) => {
 				if (this.labels[id]) {
 					return