@conduction/nextcloud-vue 2.127.0 → 2.128.0

package/package.json

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

@@ -1078,6 +1078,7 @@ import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
+import { pageFilters } from '../../mixins/pageFilters.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { headerActionAsLink } from '../../utils/actionLink.js'
@@ -1085,8 +1086,6 @@ import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { pickDeclaredProps } from '../../utils/declaredProps.js'
-import { isOptionsFrom, loadOptionsFrom } from '../../utils/optionsFrom.js'
-import { generatedPageFilterOptions } from '../../utils/periodOptions.js'
 import { isOptionalUnresolved, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
 import { userLocale } from '../../utils/userLocale.js'
 import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
@@ -1317,7 +1316,7 @@ export default {
 		CnWidgetIcon,
 	},
 
-	mixins: [pageViews],
+	mixins: [pageFilters, pageViews],
 
 	inject: {
 		/**
@@ -2117,10 +2116,6 @@ export default {
 
 	data() {
 		return {
-			/** Options read through a page filter's `optionsFrom`, by filter key. */
-			pageFilterFetched: {},
-			/** Whether a page filter's `optionsFrom` read is in flight, by filter key. */
-			pageFilterLoading: {},
 			isEditing: false,
 			/**
 			 * This user's arranged layout, when `userLayout` is on.
@@ -3086,112 +3081,6 @@ export default {
 	},
 
 	methods: {
-		/**
-		 * Seed the reactive workspace context with each page filter's default
-		 * (its `default`, else the first option's value) so endpoint-bound
-		 * widgets have a value to interpolate on first render. Only writes keys
-		 * that aren't already present, so a value another widget set survives.
-		 *
-		 * @return {void}
-		 */
-		initPageFilters() {
-			for (const pf of this.pageFilters || []) {
-				if (!pf || !pf.key) {
-					continue
-				}
-				if (this.workspaceContext[pf.key] !== undefined) {
-					continue
-				}
-				const listed = Array.isArray(pf.options) ? pf.options : generatedPageFilterOptions(pf)
-				const fallback = (listed && listed.length && pf.clearable !== true) ? listed[0].value : undefined
-				const value = pf.default !== undefined ? pf.default : fallback
-				if (value !== undefined) {
-					this.workspaceContext[pf.key] = value
-				}
-			}
-		},
-
-		/**
-		 * The currently-selected option object for a page filter's NcSelect
-		 * (matched by `value` against the workspace context), or null.
-		 *
-		 * @param {object} pf The page-filter descriptor.
-		 * @return {object|null}
-		 */
-		selectedPageFilterOption(pf) {
-			if (!pf || !pf.key) {
-				return null
-			}
-			const current = this.workspaceContext[pf.key]
-			return this.pageFilterSegments(pf).find((o) => o.value === current) || null
-		},
-
-		/**
-		 * 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.
-		 * @return {Array<{value: (string|number), label: string}>}
-		 */
-		pageFilterSegments(pf) {
-			const options = Array.isArray(pf.options) ? pf.options : (generatedPageFilterOptions(pf) || this.pageFilterFetched[pf.key] || [])
-			return options.map((o) => ({ value: o.value, label: o.label ? this.effectiveTranslate(o.label) : String(o.value) }))
-		},
-
-		/**
-		 * Read the options of every page filter with `optionsFrom`, then seed
-		 * a filter that is not clearable with its first option when it has no
-		 * value yet.
-		 *
-		 * @spec openspec/changes/page-filter-options-from/specs/dashboard-page/spec.md#requirement-a-page-filter-can-read-its-options
-		 * @return {Promise<void>}
-		 */
-		async loadPageFilterOptions() {
-			const ctx = { workspace: this.workspaceContext || {} }
-			await Promise.all((this.pageFilters || [])
-				.filter((pf) => pf && pf.key && !Array.isArray(pf.options) && pf.optionsFrom && typeof pf.optionsFrom === 'object')
-				.map(async (pf) => {
-					const from = pf.optionsFrom
-					if (!isOptionsFrom(from)) {
-						return
-					}
-					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: true }
-					let options
-					try {
-						options = (await loadOptionsFrom(from, ctx)).map((o) => ({ value: o.id, label: o.label }))
-					} catch {
-						options = []
-					}
-					this.pageFilterFetched = { ...this.pageFilterFetched, [pf.key]: options }
-					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: false }
-					if (pf.clearable !== true && pf.default === undefined && this.workspaceContext[pf.key] === undefined && options.length > 0) {
-						this.workspaceContext[pf.key] = options[0].value
-					}
-				}))
-		},
-
-		/**
-		 * Write a page filter's new selection into the reactive workspace
-		 * context so every `@page.<key>` / `@workspace.<key>` token re-resolves.
-		 *
-		 * @param {object} pf The page-filter descriptor.
-		 * @param {object|null} option The chosen NcSelect option (`{ value, label }`).
-		 * @return {void}
-		 */
-		onPageFilterChange(pf, option) {
-			if (!pf || !pf.key) {
-				return
-			}
-			const value = option && typeof option === 'object' ? option.value : (option ?? null)
-			this.workspaceContext[pf.key] = value
-			/**
-			 * @event page-filter-change Emitted when a page-level filter selection changes.
-			 * @type {{ key: string, value: (string|number|null) }}
-			 */
-			this.$emit('page-filter-change', { key: pf.key, value })
-		},
-
 		/**
 		 * Re-emit the page-level CnActionsMenu `@refresh` to the host,
 		 * passing the synthetic event through so a host listener can
@@ -4999,6 +4888,7 @@ export default {
 				// by the modal) must still fall through to content.title, which the
 				// form validates as required and so is always populated.
 				title: def.title || c.title,
+				subtitle: c.subtitle ?? def.subtitle,
 				icon: c.icon ?? def.icon,
 				iconType: c.iconType ?? def.iconType,
 				backgroundColor: c.backgroundColor ?? def.backgroundColor,

package/src/components/CnDataTable/CnDataTable.vue

@@ -313,6 +313,12 @@
 									<span class="hidden-visually">{{ translateLabel(indicator.text) }}</span>
 								</span>
 							</span>
+							<!-- A muted line above the value, from `col.overline` or
+							     `col.overlineText` ("Zaken van" over the organisation). -->
+							<span
+								v-if="overlineValue(row, col)"
+								class="cn-table-cell__overline"
+								data-testid="cn-cell-overline">{{ overlineValue(row, col) }}</span>
 							<!-- @slot Per-column cell override (`#column-<key>`), scoped with { row, value }. Wins over CnCellRenderer. -->
 							<slot :name="'column-' + col.key" :row="row" :value="cellValue(row, col)">
 								<!-- Every column renders through CnCellRenderer: it resolves
@@ -1925,7 +1931,40 @@ export default {
 		 * @return {string} The secondary text, or ''.
 		 */
 		secondaryValue(row, col) {
-			const spec = col?.secondary
+			return this.cellLineValue(row, col?.secondary)
+		},
+
+		/**
+		 * The muted line above a cell's value, from `col.overline` (read like
+		 * `secondary`) or else `col.overlineText`, a fixed text in the host's
+		 * translation (PtToegangsverzoeken "Zaken van"). Returns '' when there
+		 * is nothing to draw.
+		 *
+		 * @spec openspec/changes/table-cell-overline/specs/data-table/spec.md#requirement-a-table-column-can-carry-a-muted-line-above-its-value
+		 * @param {object} row The row.
+		 * @param {object} col The column definition.
+		 * @return {string} The overline text, or ''.
+		 */
+		overlineValue(row, col) {
+			const fromRow = this.cellLineValue(row, col?.overline)
+			if (fromRow !== '') {
+				return fromRow
+			}
+			return typeof col?.overlineText === 'string' && col.overlineText !== '' ? this.translateLabel(col.overlineText) : ''
+		},
+
+		/**
+		 * One extra line of a cell from its spec: a function is called with the
+		 * row; a string with `{field}` placeholders is a template filled from
+		 * the row; any other string is a field key. Shared by `secondary` and
+		 * `overline`.
+		 *
+		 * @spec openspec/changes/table-cell-overline/specs/data-table/spec.md#requirement-a-table-column-can-carry-a-muted-line-above-its-value
+		 * @param {object} row The row.
+		 * @param {Function|string|undefined} spec The line's spec.
+		 * @return {string} The text, or ''.
+		 */
+		cellLineValue(row, spec) {
 			if (typeof spec === 'function') {
 				const out = spec(row)
 				return out === null || out === undefined ? '' : String(out)

package/src/components/CnDetailPage/CnDetailPage.md

@@ -182,6 +182,8 @@ export default {
 | `icon` | String | `''` | Optional MDI icon name rendered in the header via `CnIcon` |
 | `iconSize` | Number | `28` | Icon size in pixels |
 | `loadingLabel` | String | `'Loading...'` | Message shown below the spinner during loading |
+| `band` | Array | `[]` | A row of widgets across the whole page, above the body and the side column (manifest `config.band`). Each entry is a widget id from `widgets`, a widget definition, or `{ widgetId, span, chrome }`: `span` is the entry's share of the row in twelfths (default 12), and `chrome` is `card` or `bare` (a banner defaults to bare). Each entry follows its `visibleWhen`. |
+| `pageFilters` | Array | `[]` | Page-level filters (manifest `config.pageFilters`), as on a dashboard: each writes its choice into the page's workspace context, which the widgets read through `@page.<key>` / `@workspace.<key>`. Drawn in the band, above its widgets (PtPortal "Periode"). |
 | `sidebarOpen` | Boolean | `true` | Whether the sidebar starts expanded |
 | `objectType` | String | `''` | Registered object type slug for the sidebar |
 | `objectId` | String\|Number | `''` | Object ID to display in the sidebar |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -647,6 +647,90 @@
 			</template>
 		</CnNextStepCard>
 
+		<!-- The band (manifest `config.band`): a row of widgets across the whole
+		     page, above the body and the side column (PtPortal: the traffic
+		     figures and the start-page notice). Each entry takes `span`
+		     twelfths of the row and the row wraps. -->
+		<div
+			v-if="showsBand"
+			class="cn-detail-page__band"
+			data-testid="cn-detail-page-band">
+			<!-- The page filters (`config.pageFilters`), right-aligned above the
+			     band's widgets; each writes the page's workspace context. -->
+			<div
+				v-if="detailPageFilters.length > 0"
+				class="cn-detail-page__page-filters"
+				data-testid="cn-detail-page-page-filters">
+				<template v-for="pf in detailPageFilters" :key="pf.key">
+					<div v-if="pf.control === 'segmented'" class="cn-detail-page__page-filter">
+						<span v-if="pf.label" class="cn-detail-page__page-filter-label">{{ effectiveTranslate(pf.label) }}</span>
+						<CnSegmentedControl
+							size="compact"
+							mode="toggle"
+							:options="pageFilterSegments(pf)"
+							:modelValue="workspaceContext[pf.key]"
+							:ariaLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
+							:data-testid="'cn-page-filter-' + pf.key"
+							@update:modelValue="onPageFilterChange(pf, $event)" />
+					</div>
+					<label v-else class="cn-detail-page__page-filter">
+						<span v-if="pf.label" class="cn-detail-page__page-filter-label">{{ effectiveTranslate(pf.label) }}</span>
+						<NcSelect
+							:modelValue="selectedPageFilterOption(pf)"
+							:options="pageFilterSegments(pf)"
+							:clearable="pf.clearable === true"
+							:placeholder="pf.placeholder ? effectiveTranslate(pf.placeholder) : undefined"
+							:loading="pageFilterLoading[pf.key] === true"
+							:inputLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
+							label="label"
+							:data-testid="'cn-page-filter-' + pf.key"
+							@update:modelValue="onPageFilterChange(pf, $event)" />
+					</label>
+				</template>
+			</div>
+			<div
+				v-for="entry in bandWidgets"
+				:key="`band-${entry.widget.id}`"
+				class="cn-detail-page__band-item"
+				:class="{ 'cn-detail-page__band-item--full': entry.span === 12 }"
+				:style="{ '--cn-band-span': entry.span }"
+				:data-testid="`cn-detail-page-band-${entry.widget.id}`">
+				<!--
+					@slot `widget-${widget.id}`
+					@description The same per-widget slot the body grid and the side
+					column offer, for a widget placed in the band.
+				-->
+				<slot
+					:name="`widget-${entry.widget.id}`"
+					:item="{ id: entry.widget.id, widgetId: entry.widget.id }"
+					:widget="entry.widget"
+					:objectId="objectId"
+					:object="resolvedObject"
+					:objectData="resolvedObject"
+					:objectType="resolvedObjectType"
+					:register="register"
+					:schema="schema">
+					<CnDetailWidgetHost
+						:widget="entry.widget"
+						:chrome="entry.chrome"
+						:showCardTitle="true"
+						:showActions="effectiveShowWidgetActions"
+						:objectId="objectId"
+						:object="currentObject"
+						:objectType="resolvedObjectType"
+						:schemaObject="currentSchema"
+						:register="register"
+						:schema="schema"
+						:store="effectiveObjectStore"
+						:surface="surface"
+						:integrationContext="effectiveIntegrationContext"
+						:hideEmpty="hideEmpty"
+						:cnRegistry="cnRegistry"
+						:availableWidgets="widgets" />
+				</slot>
+			</div>
+		</div>
+
 		<!-- Not-found state: the record behind the address does not exist. -->
 		<div v-if="objectNotFound" class="cn-detail-page__not-found" data-testid="cn-detail-page-not-found">
 			<!--
@@ -1275,7 +1359,7 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCaption, NcActionLink, NcActionSeparator, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCaption, NcActionLink, NcActionSeparator, NcButton, NcEmptyContent, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import { computed, markRaw, provide, ref, watch } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
@@ -1319,9 +1403,10 @@ import { useObjectPresence } from '../../composables/useObjectPresence.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
 import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
+import { pageFilters } from '../../mixins/pageFilters.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
-import { headerActionAsLink } from '../../utils/actionLink.js'
+import { headerActionAsLink, resolveManifestHref, routeHref } from '../../utils/actionLink.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js'
@@ -1345,6 +1430,8 @@ import { firstFilled } from '../../utils/fillTemplate.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
 import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { prefixUrl } from '../../utils/headers.js'
+import { interpolateUrlTokens } from '../../utils/interpolateUrlTokens.js'
+import { followLinkClick } from '../../utils/linkNavigation.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { setReadState } from '../../utils/recordInteractions.js'
 import { saveEdited } from '../../utils/saveEdited.js'
@@ -1562,6 +1649,7 @@ export default {
 		CnFormDialog,
 		CnDashboardGrid,
 		CnSegmentedControl,
+		NcSelect,
 		ViewDashboardOutline,
 		CnLifecycleActions,
 		CnActionButtons,
@@ -1584,7 +1672,7 @@ export default {
 		Restore,
 	},
 
-	mixins: [gridLayout, pageViews],
+	mixins: [gridLayout, pageFilters, pageViews],
 
 	inject: {
 		/**
@@ -2777,6 +2865,39 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * A row of widgets across the whole page, above the body and the side
+		 * column (manifest `config.band`). Each entry is the id of a widget
+		 * declared in `widgets`, a widget definition, or `{ widgetId, span,
+		 * chrome }`; `span` is the entry's share of the row in twelfths
+		 * (default 12) and the row wraps; `chrome` is `card` or `bare` (a
+		 * banner defaults to bare, anything else to card, so a widget that
+		 * draws its own card, such as a KPI, asks for bare). Each entry
+		 * follows its `visibleWhen`. Empty (the default) draws no band.
+		 *
+		 * @type {Array<string|object>}
+		 * @spec openspec/changes/detail-band/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-a-band-across-the-page-above-the-body-and-the-side-column
+		 */
+		band: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Page-level filters (manifest `config.pageFilters`), the same a
+		 * dashboard takes: each writes its choice into the page's workspace
+		 * context, which every widget on the page reads through
+		 * `@page.<key>` / `@workspace.<key>`. Drawn in the band, above its
+		 * widgets (PtPortal "Periode").
+		 *
+		 * @type {Array<{key: string, label?: string, type?: string, control?: ('select'|'segmented'), options?: Array<{value: (string|number), label: string}>, optionsFrom?: object, clearable?: boolean, placeholder?: string, default?: (string|number)}>}
+		 * @spec openspec/changes/detail-page-filters/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-page-filters-that-its-widgets-read
+		 */
+		pageFilters: {
+			type: Array,
+			default: () => [],
+		},
+
 		/**
 		 * A field path whose value picks the side column and its order for
 		 * this record (manifest `config.sideColumnFrom`), read like a
@@ -3109,10 +3230,16 @@ export default {
 			// which no register answers.
 			{ schemaSlug: () => props.schema || sidebarSchema() },
 		)
+		// The page's workspace context, as a dashboard provides it: page
+		// filters write their choice here and a widget reads it through
+		// `@page.<key>` / `@workspace.<key>`.
+		const workspaceContext = ref({})
+		provide('cnWorkspaceContext', workspaceContext)
 		return {
 			...registryExposed,
 			subscriptionStatus: subscription.status,
 			lockState: lock,
+			workspaceContext,
 		}
 	},
 
@@ -3545,7 +3672,46 @@ export default {
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
 		 */
 		primaryActionHref() {
-			return this.stagePrimaryEntry?.href || ''
+			if (this.stagePrimaryEntry) {
+				return this.stagePrimaryEntry.href || ''
+			}
+			return this.primaryActionLink?.href || ''
+		},
+
+		/**
+		 * The page's `primaryAction` as a link, when no stage action stands in
+		 * for it: `href` (its record tokens resolved) opens in a new tab, as the
+		 * schema says; `route` (with `query`) is an in-app link a plain click
+		 * routes to (PtPortal "Nieuwe pagina" opens the page create flow).
+		 *
+		 * @return {{href: string, to: object|null, target: string}|null} The link, or null.
+		 * @spec openspec/changes/detail-band/specs/detail-page/spec.md#requirement-a-detail-pages-own-primary-action-is-a-link
+		 */
+		primaryActionLink() {
+			const action = this.primaryAction
+			if (!action || typeof action !== 'object') {
+				return null
+			}
+			if (typeof action.href === 'string' && action.href !== '') {
+				const href = resolveManifestHref(interpolateUrlTokens(action.href, this.headerLinkTokenCtx))
+				return href ? { href, to: null, target: '_blank' } : null
+			}
+			if (typeof action.route === 'string' && action.route !== '') {
+				const to = { name: action.route, ...(action.query && typeof action.query === 'object' ? { query: action.query } : {}) }
+				const href = routeHref(to, this.$router)
+				return href ? { href, to, target: '_self' } : null
+			}
+			return null
+		},
+
+		/**
+		 * The token context a header link resolves its URL against: this record.
+		 *
+		 * @return {{objectId: (string|number), object: object}} The context.
+		 * @spec openspec/changes/detail-band/specs/detail-page/spec.md#requirement-a-detail-header-link-builds-its-url-from-the-record
+		 */
+		headerLinkTokenCtx() {
+			return { objectId: this.objectId, object: this.resolvedObject || {} }
 		},
 
 		/**
@@ -3555,7 +3721,10 @@ export default {
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
 		 */
 		primaryActionTarget() {
-			return this.stagePrimaryEntry?.linkTarget || undefined
+			if (this.stagePrimaryEntry) {
+				return this.stagePrimaryEntry.linkTarget || undefined
+			}
+			return this.primaryActionLink?.target || undefined
 		},
 
 		/**
@@ -3951,6 +4120,57 @@ export default {
 		 * @return {boolean} True when it has widgets and the body is showing.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-side-column
 		 */
+		/**
+		 * The band's widgets, resolved and visible, each with its span.
+		 *
+		 * @return {Array<{widget: object, span: number, chrome: string}>}
+		 * @spec openspec/changes/detail-band/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-a-band-across-the-page-above-the-body-and-the-side-column
+		 */
+		bandWidgets() {
+			const declared = Array.isArray(this.widgets) ? this.widgets : []
+			return (Array.isArray(this.band) ? this.band : [])
+				.map((entry, index) => {
+					let widget = null
+					let span = 12
+					if (typeof entry === 'string') {
+						widget = declared.find((candidate) => candidate && candidate.id === entry) || null
+					} else if (entry && typeof entry === 'object' && !Array.isArray(entry)) {
+						span = Number.isInteger(entry.span) ? Math.min(12, Math.max(1, entry.span)) : 12
+						if (typeof entry.widgetId === 'string') {
+							widget = declared.find((candidate) => candidate && candidate.id === entry.widgetId) || null
+						} else if (typeof entry.type === 'string') {
+							widget = entry.id ? entry : { ...entry, id: `cn-band-${index}` }
+						}
+					}
+					if (!widget) {
+						return null
+					}
+					const chrome = ['card', 'bare'].includes(entry?.chrome) ? entry.chrome : (widget.type === 'banner' ? 'bare' : 'card')
+					return { widget, span, chrome }
+				})
+				.filter((entry) => entry && this.sideWidgetVisible(entry.widget))
+		},
+
+		/**
+		 * Whether the band renders: it has a visible widget and the record shows.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-band/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-a-band-across-the-page-above-the-body-and-the-side-column
+		 */
+		showsBand() {
+			return (this.bandWidgets.length > 0 || this.detailPageFilters.length > 0) && this.showsBody
+		},
+
+		/**
+		 * The declared page filters that carry a key.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/detail-page-filters/specs/detail-page/spec.md#requirement-a-detail-page-can-draw-page-filters-that-its-widgets-read
+		 */
+		detailPageFilters() {
+			return (Array.isArray(this.pageFilters) ? this.pageFilters : []).filter((pf) => pf && pf.key)
+		},
+
 		showsSideColumn() {
 			return this.sideColumnWidgets.length > 0 && this.showsBody
 		},
@@ -4316,7 +4536,7 @@ export default {
 				.map((pinned) => pinned.inline)
 			const combined = inline.length > 0 ? [...authored, ...inline] : authored
 			// An entry (or child) with `href` becomes a link CnActionButtons renders as an anchor.
-			const linked = combined.map(headerActionAsLink)
+			const linked = combined.map((action) => headerActionAsLink(action, this.headerLinkTokenCtx))
 			const declared = linked.some((action, index) => action !== combined[index]) ? linked : combined
 			if (!(this.foldsEditIntoActions && this.canEditRecord)) {
 				return declared
@@ -5416,6 +5636,10 @@ export default {
 
 	created() {
 		this.pushAiContext()
+		// Seeded before the first render, so a widget's first request already
+		// carries the page filter's value.
+		this.initPageFilters()
+		this.loadPageFilterOptions()
 	},
 
 	mounted() {
@@ -5658,16 +5882,21 @@ export default {
 		 * the `run()` CnActionButtons bound for it, and announced to the host
 		 * with its declaration. A link action is left to the browser and
 		 * announces nothing. Without a stage action this is the page's
-		 * `primaryAction`, announced as before.
+		 * `primaryAction`, announced as before, and when it is an in-app link
+		 * a plain click routes there.
 		 *
+		 * @param {MouseEvent} [event] The click.
 		 * @return {void}
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
 		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 */
-		onPrimaryActionClick() {
+		onPrimaryActionClick(event) {
 			const entry = this.stagePrimaryEntry
 			if (!entry) {
 				this.$emit('primary-action', this.primaryAction)
+				if (this.primaryActionLink?.to) {
+					followLinkClick(event, this.primaryActionLink.to, this.$router)
+				}
 				return
 			}
 			if (entry.href) {

package/src/components/CnTileWidget/CnTileWidget.vue

@@ -42,8 +42,13 @@
 				<img v-else-if="tile.iconType === 'url'" :src="tile.icon" alt="">
 				<span v-else-if="tile.iconType === 'emoji'" class="cn-tile-widget__emoji">{{ tile.icon }}</span>
 			</div>
-			<div class="cn-tile-widget__title" :style="{ color: resolvedTextColor }">
-				{{ resolvedTitle }}
+			<div class="cn-tile-widget__text">
+				<div class="cn-tile-widget__title" :style="{ color: resolvedTextColor }">
+					{{ resolvedTitle }}
+				</div>
+				<div v-if="resolvedSubtitle" class="cn-tile-widget__subtitle" :style="{ color: resolvedTextColor }">
+					{{ resolvedSubtitle }}
+				</div>
 			</div>
 		</a>
 	</div>
@@ -108,6 +113,17 @@ export default {
 			return this.tile.title ? fn(this.tile.title) : this.tile.title
 		},
 
+		/**
+		 * The optional line under the title (`tile.subtitle`), translated like
+		 * the title. Empty when the tile names none.
+		 *
+		 * @return {string}
+		 */
+		resolvedSubtitle() {
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+			return this.tile.subtitle ? fn(this.tile.subtitle) : ''
+		},
+
 		/**
 		 * The anchor href. `route` tiles resolve through the host router so
 		 * middle-click / ctrl-click open the correct full URL (including the
@@ -278,6 +294,18 @@ export default {
 	font-size: 48px;
 }
 
+/* The text block takes no box of its own outside the board look, so the
+   title stays a direct flex item of the link. */
+.cn-tile-widget__text {
+	display: contents;
+}
+
+.cn-tile-widget__subtitle {
+	font-size: 13px;
+	text-align: center;
+	opacity: 0.85;
+}
+
 .cn-tile-widget__title {
 	font-size: 16px;
 	font-weight: 700;