@conduction/nextcloud-vue 2.59.0 → 2.61.0

package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js

@@ -1,6 +1,7 @@
+import { getCurrentUser } from '@nextcloud/auth';
 import { subscribe, unsubscribe } from '@nextcloud/event-bus';
 import { translate } from '@nextcloud/l10n';
-import { NcActionButton, NcActionLink, NcActionSeparator, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue';
+import { NcActionButton, NcActionCaption, NcActionLink, NcActionSeparator, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue';
 import { ref, provide, watch } from 'vue';
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue';
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue';
@@ -12,19 +13,20 @@ 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 __sfc_main$e from '../../dialogs/CnRelationLinkModal.vue.js';
-import __sfc_main$d from '../../dialogs/CnWidgetStyleEditorModal.vue.js';
+import __sfc_main$g from '../../dialogs/CnRelationLinkModal.vue.js';
+import __sfc_main$f from '../../dialogs/CnWidgetStyleEditorModal.vue.js';
 import __sfc_main$1 from '../CnActionsMenu/CnActionsMenu.vue.js';
-import __sfc_main$b from '../CnBodySections/CnBodySections.vue.js';
+import __sfc_main$d from '../CnBodySections/CnBodySections.vue.js';
 import __sfc_main$2 from '../CnBuildiqEditButton/CnBuildiqEditButton.vue.js';
-import __sfc_main$6 from '../CnDashboardGrid/CnDashboardGrid.vue.js';
-import __sfc_main$4 from '../CnDetailWidgetHost/CnDetailWidgetHost.vue.js';
-import __sfc_main$5 from '../CnFormDialog/CnFormDialog.vue.js';
-import __sfc_main$7 from '../CnLifecycleActions/CnLifecycleActions.vue.js';
+import __sfc_main$7 from '../CnDashboardGrid/CnDashboardGrid.vue.js';
+import __sfc_main$5 from '../CnDetailWidgetHost/CnDetailWidgetHost.vue.js';
+import __sfc_main$6 from '../CnFormDialog/CnFormDialog.vue.js';
+import __sfc_main$8 from '../CnLifecycleActions/CnLifecycleActions.vue.js';
 import __sfc_main$3 from '../CnLockedBanner/CnLockedBanner.vue.js';
-import __sfc_main$a from '../CnRelatedCollections/CnRelatedCollections.vue.js';
-import __sfc_main$9 from '../CnSummaryAggregates/CnSummaryAggregates.vue.js';
-import __sfc_main$c from '../CnTranslatedBadge/CnTranslatedBadge.vue.js';
+import __sfc_main$4 from '../CnNextStepCard/CnNextStepCard.vue.js';
+import __sfc_main$c from '../CnRelatedCollections/CnRelatedCollections.vue.js';
+import __sfc_main$b from '../CnSummaryAggregates/CnSummaryAggregates.vue.js';
+import __sfc_main$e from '../CnTranslatedBadge/CnTranslatedBadge.vue.js';
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js';
 import { useObjectLock } from '../../composables/useObjectLock.js';
 import { useObjectPresence } from '../../composables/useObjectPresence.js';
@@ -33,11 +35,13 @@ import { gridLayout } from '../../mixins/gridLayout.js';
 import { isAppInstalled } from '../../utils/appInstalled.js';
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js';
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js';
+import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMenuEntries, resolveNextStep, resolvePill } from '../../utils/detailActionModel.js';
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js';
 import { slotRenders } from '../../utils/slotContent.js';
 import { isDataWidgetDef, isRelatedWidgetDef, isGeoWidgetDef, isContentOnlyWidgetDef, isCardWidgetDef, widgetContentOf, resolveRegistryRenderer, widgetTitleOf } from '../../utils/widgetDispatch.js';
-import __sfc_main$8 from '../CnActionButtons/CnActionButtons.vue.js';
+import __sfc_main$9 from '../CnActionButtons/CnActionButtons.vue.js';
 import __sfc_main from '../CnIcon/CnIcon.vue.js';
+import __sfc_main$a from '../CnStatusBadge/CnStatusBadge.vue.js';
 import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js';
 import '../CnWidgetGrid/registerDashboardWidgets.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
@@ -162,6 +166,7 @@ var script = {
 		ChevronLeft,
 		ChevronRight,
 		NcActionButton,
+		NcActionCaption,
 		NcActionLink,
 		NcActionSeparator,
 		NcButton,
@@ -176,17 +181,19 @@ var script = {
 		CnActionsMenu: __sfc_main$1,
 		CnBuildiqEditButton: __sfc_main$2,
 		CnLockedBanner: __sfc_main$3,
-		CnDetailWidgetHost: __sfc_main$4,
-		CnFormDialog: __sfc_main$5,
-		CnDashboardGrid: __sfc_main$6,
-		CnLifecycleActions: __sfc_main$7,
-		CnActionButtons: __sfc_main$8,
-		CnSummaryAggregates: __sfc_main$9,
-		CnRelatedCollections: __sfc_main$a,
-		CnBodySections: __sfc_main$b,
-		CnTranslatedBadge: __sfc_main$c,
-		CnWidgetStyleEditorModal: __sfc_main$d,
-		CnRelationLinkModal: __sfc_main$e,
+		CnNextStepCard: __sfc_main$4,
+		CnDetailWidgetHost: __sfc_main$5,
+		CnFormDialog: __sfc_main$6,
+		CnDashboardGrid: __sfc_main$7,
+		CnLifecycleActions: __sfc_main$8,
+		CnActionButtons: __sfc_main$9,
+		CnStatusBadge: __sfc_main$a,
+		CnSummaryAggregates: __sfc_main$b,
+		CnRelatedCollections: __sfc_main$c,
+		CnBodySections: __sfc_main$d,
+		CnTranslatedBadge: __sfc_main$e,
+		CnWidgetStyleEditorModal: __sfc_main$f,
+		CnRelationLinkModal: __sfc_main$g,
 		Cog,
 		Plus,
 		Pencil,
@@ -989,6 +996,130 @@ var script = {
 			type: Boolean,
 			default: false,
 		},
+
+		// ── The action model (detail-action-model-and-case-surfaces) ────
+
+		/**
+		 * The primary action per stage (manifest `config.primaryActionByStage`):
+		 * a map from a stage value to an action. When the record's stage has
+		 * an entry, that action is the page's primary button, so the button
+		 * names the next step: "Take on" on a new case, "Publish" on a
+		 * decided one. An entry is an action object in the `headerActions`
+		 * shape, or the id of a declared header action. A stage without an
+		 * entry falls back to `primaryAction`.
+		 *
+		 * @type {Record<string, string|object>|null}
+		 */
+		primaryActionByStage: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * Dot-path to the field that holds the record's stage. Read by
+		 * `primaryActionByStage` and `nextStep`.
+		 *
+		 * @type {string}
+		 */
+		stageField: {
+			type: String,
+			default: 'status',
+		},
+
+		/**
+		 * Always visible buttons in the header (manifest `config.quickActions`)
+		 * for the few actions a handler uses on every record. At most three
+		 * render; later entries are dropped. An entry is an action object in
+		 * the `headerActions` shape, or the id of a declared header action,
+		 * which then leaves the Actions menu.
+		 *
+		 * @type {Array<string|object>}
+		 */
+		quickActions: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * What the Actions menu itself shows (manifest `config.actionsMenu`):
+		 * `{ showRefresh?, showHelpLinks?, label? }`. `showRefresh: false`
+		 * removes Refresh. `showHelpLinks: false` removes Request a feature,
+		 * Report a bug and Documentation, for an app that offers them in its
+		 * own help menu. `label` names the menu, for example "More". `null`
+		 * (the default) changes nothing.
+		 *
+		 * @type {{showRefresh?: boolean, showHelpLinks?: boolean, label?: string}|null}
+		 */
+		actionsMenu: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * The "what now" card (manifest `config.nextStep`):
+		 * `{ field?, stages: { <stage>: { title?, checklist, after? } } }`.
+		 * Each checklist item is `{ label, doneField?, doneWhen?, hint? }`.
+		 * Rendered above the body for a stage that declares a checklist, with
+		 * the primary button inside it. See `CnNextStepCard`.
+		 *
+		 * @type {object|null}
+		 */
+		nextStep: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * A pill above the title saying what kind of record this is
+		 * (manifest `config.typePill`): `{ field, colorMap?, labels?, variant? }`.
+		 * Rendered through `CnStatusBadge`; `colorMap` is keyed on the field's
+		 * raw value, `labels` maps a raw value to the text to show.
+		 *
+		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 */
+		typePill: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * A pill above the title saying where the record stands (manifest
+		 * `config.statusPill`). Same shape as `typePill`.
+		 *
+		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 */
+		statusPill: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * A column of cards beside the body (manifest `config.sideColumn`),
+		 * for the record's facts: deadline, requester, handler, links. Each
+		 * entry is a widget definition (`{ id?, type, title?, content? }`) or
+		 * the id of a widget declared in `widgets`. The column stacks under
+		 * the body on a narrow page. Empty (the default) leaves the layout as
+		 * it is.
+		 *
+		 * @type {Array<string|object>}
+		 */
+		sideColumn: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Whether the current user administers this instance. Shows the
+		 * `adminOnly` header actions. `null` (the default) reads it from
+		 * `getCurrentUser()`. Visibility only, never an authorization
+		 * decision: the endpoint behind an action decides who may call it.
+		 *
+		 * @type {boolean|null}
+		 */
+		isAdmin: {
+			type: Boolean,
+			default: null,
+		},
 	},
 
 	emits: [
@@ -1256,7 +1387,7 @@ var script = {
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
 		 */
 		primaryActionAnchorId() {
-			const scope = this.primaryAction?.id || this.pageId || this.objectId || 'record';
+			const scope = this.stagePrimaryEntry?.id || this.primaryAction?.id || this.pageId || this.objectId || 'record';
 			return `cn-primary-action-${String(scope).replace(/[^A-Za-z0-9_-]/g, '-')}`
 		},
 
@@ -1271,7 +1402,291 @@ var script = {
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
 		 */
 		skipLinkLabel() {
-			return `${this.effectiveTranslate('Skip to')} ${this.primaryActionLabel}`
+			return `${this.effectiveTranslate('Skip to')} ${this.effectivePrimaryLabel}`
+		},
+
+		// ── The action model (detail-action-model-and-case-surfaces) ────
+
+		/**
+		 * The record's stage, as `primaryActionByStage` and `nextStep` key it.
+		 *
+		 * @return {string} The stage, or '' while the record has none.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		recordStage() {
+			return stageOf(this.currentObject, this.stageField)
+		},
+
+		/**
+		 * The stage's primary action as an id, plus its definition when the
+		 * map carries one inline.
+		 *
+		 * @return {{id: string, inline: object|null}|null} The pinned action, or null when this stage declares none.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		stagePrimary() {
+			return normalisePinnedAction(stageEntry(this.primaryActionByStage, this.recordStage), 'cn-stage-primary')
+		},
+
+		/**
+		 * The quick actions as ids, plus definitions for the inline ones.
+		 * Capped at three, and never the action that is already the primary
+		 * button.
+		 *
+		 * @return {Array<{id: string, inline: object|null}>} The pinned actions.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-quick-actions
+		 */
+		pinnedQuickActions() {
+			const primaryId = this.stagePrimary?.id;
+			return (Array.isArray(this.quickActions) ? this.quickActions : [])
+				.map((entry, index) => normalisePinnedAction(entry, `cn-quick-${index}`))
+				.filter((pinned) => pinned && pinned.id !== primaryId)
+				.slice(0, MAX_QUICK_ACTIONS)
+		},
+
+		/**
+		 * The stage's primary action in dispatchable form: the menu entry
+		 * CnActionButtons built for it, with its `run()`. Null while the
+		 * action is hidden by its own `visibleWhen`, in which case the page
+		 * falls back to `primaryAction`.
+		 *
+		 * @return {object|null} The entry, or null.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		stagePrimaryEntry() {
+			const id = this.stagePrimary?.id;
+			return (id && this.menuHeaderActions.find((entry) => entry.id === id)) || null
+		},
+
+		/**
+		 * The quick actions in dispatchable form, in declaration order.
+		 *
+		 * @return {Array<object>} The entries that are visible.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-quick-actions
+		 */
+		quickActionEntries() {
+			return this.pinnedQuickActions
+				.map((pinned) => this.menuHeaderActions.find((entry) => entry.id === pinned.id))
+				.filter(Boolean)
+		},
+
+		/**
+		 * What the primary button says: the stage's action when the stage
+		 * declares one, the page's `primaryAction` otherwise. Empty gates
+		 * both the button and the skip link.
+		 *
+		 * @return {string} The label, or an empty string.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		effectivePrimaryLabel() {
+			return this.stagePrimaryEntry ? this.stagePrimaryEntry.label : this.primaryActionLabel
+		},
+
+		/**
+		 * The URL the primary button links to, when its action is a link.
+		 *
+		 * @return {string} The href, or '' for an action that is dispatched.
+		 * @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 || ''
+		},
+
+		/**
+		 * The link target that goes with `primaryActionHref`.
+		 *
+		 * @return {string|undefined} The target, or undefined.
+		 * @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
+		},
+
+		/**
+		 * Whether the primary button waits for its own request.
+		 *
+		 * @return {boolean} True while the stage's action is in flight.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		primaryActionDisabled() {
+			return Boolean(this.stagePrimaryEntry?.disabled)
+		},
+
+		/**
+		 * Whether the viewer administers this instance, for `adminOnly`
+		 * actions. The prop wins; otherwise Nextcloud says.
+		 *
+		 * @return {boolean} True for an instance admin.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-grouped-and-admin-only-menu-actions
+		 */
+		viewerIsAdmin() {
+			if (this.isAdmin !== null) {
+				return this.isAdmin
+			}
+			try {
+				return getCurrentUser()?.isAdmin === true
+			} catch {
+				return false
+			}
+		},
+
+		/**
+		 * The declared actions by id, for the `group` and `adminOnly` a menu
+		 * entry does not carry itself.
+		 *
+		 * @return {Record<string, object>} The lookup.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-grouped-and-admin-only-menu-actions
+		 */
+		headerActionsById() {
+			return Object.fromEntries(this.effectiveHeaderActions
+				.filter((action) => action && action.id)
+				.map((action) => [action.id, action]))
+		},
+
+		/**
+		 * The menu entries in the groups the menu draws: ungrouped first,
+		 * named groups in first appearance order, admin actions last and for
+		 * admins only. A page that groups nothing gets one captionless group.
+		 *
+		 * @return {Array<{key: string, label: string, entries: Array<object>}>} The groups.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-grouped-and-admin-only-menu-actions
+		 */
+		headerMenuGroups() {
+			const groups = groupMenuEntries(this.headerMenuEntries, this.headerActionsById, {
+				isAdmin: this.viewerIsAdmin,
+				adminLabel: translate('nextcloud-vue', 'Administration'),
+			});
+			return groups.map((group) => ({ ...group, label: group.label ? this.effectiveTranslate(group.label) : '' }))
+		},
+
+		/**
+		 * Whether Refresh renders in the Actions menu.
+		 *
+		 * @return {boolean} The existing rule, unless `actionsMenu.showRefresh` is false.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-actions-menu-built-ins-are-optional
+		 */
+		menuShowsRefresh() {
+			return this.actionsMenu?.showRefresh === false ? false : this.effectiveHeaderShowRefresh
+		},
+
+		/**
+		 * Whether the help links render in the Actions menu.
+		 *
+		 * @return {boolean} True unless `actionsMenu.showHelpLinks` is false.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-actions-menu-built-ins-are-optional
+		 */
+		menuShowsHelpLinks() {
+			return this.actionsMenu?.showHelpLinks !== false
+		},
+
+		/**
+		 * The Actions menu's name.
+		 *
+		 * @return {string|undefined} `actionsMenu.label` translated, or undefined for the default "Actions".
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-actions-menu-built-ins-are-optional
+		 */
+		actionsMenuName() {
+			const label = this.actionsMenu?.label;
+			return typeof label === 'string' && label !== '' ? this.effectiveTranslate(label) : undefined
+		},
+
+		/**
+		 * Whether the page is showing its body: not the not-found, loading,
+		 * error or empty state. The "what now" card and the side column are
+		 * siblings of the body and follow it.
+		 *
+		 * @return {boolean} True when the body renders.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		showsBody() {
+			return !this.objectNotFound && !this.showLoadingState && !this.error && !this.empty
+		},
+
+		/**
+		 * The "what now" card for the record's stage, labels translated.
+		 *
+		 * @return {{stage: string, title: string, items: Array<object>, after: string}|null} The card, or null when the stage declares no checklist.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		nextStepCard() {
+			const card = resolveNextStep(this.nextStep, this.currentObject, this.stageField);
+			if (!card) {
+				return null
+			}
+			const tr = (text) => (text ? this.effectiveTranslate(text) : '');
+			return {
+				...card,
+				title: tr(card.title),
+				after: tr(card.after),
+				items: card.items.map((item) => ({ ...item, label: tr(item.label), hint: tr(item.hint) })),
+			}
+		},
+
+		/**
+		 * Whether the "what now" card renders.
+		 *
+		 * @return {boolean} True when the stage has a checklist and the body is showing.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
+		 */
+		showsNextStepCard() {
+			return Boolean(this.nextStepCard) && this.showsBody
+		},
+
+		/**
+		 * The pills above the title: type first, then status.
+		 *
+		 * @return {Array<{key: string, label: string, colorKey: string, colorMap: object|null, variant: string}>} The pills whose field has a value.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-header-pills
+		 */
+		headerPills() {
+			return [['type', this.typePill], ['status', this.statusPill]]
+				.map(([key, config]) => {
+					const pill = resolvePill(config, this.resolvedObject);
+					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * The side column's widget definitions. A string names a widget
+		 * declared in `widgets`; an object is a definition of its own.
+		 *
+		 * @return {Array<object>} The definitions that resolve, each with an `id`.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-side-column
+		 */
+		sideColumnWidgets() {
+			const declared = Array.isArray(this.widgets) ? this.widgets : [];
+			return (Array.isArray(this.sideColumn) ? this.sideColumn : [])
+				.map((entry, index) => {
+					if (typeof entry === 'string') {
+						return declared.find((widget) => widget && widget.id === entry) || null
+					}
+					if (!entry || typeof entry !== 'object' || Array.isArray(entry)) {
+						return null
+					}
+					return entry.id ? entry : { ...entry, id: `cn-side-${index}` }
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * Whether the side column renders.
+		 *
+		 * @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
+		 */
+		showsSideColumn() {
+			return this.sideColumnWidgets.length > 0 && this.showsBody
+		},
+
+		/**
+		 * Accessible name of the side column.
+		 *
+		 * @return {string} The label.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-side-column
+		 */
+		sideColumnLabel() {
+			return translate('nextcloud-vue', 'Details')
 		},
 
 		/**
@@ -1475,7 +1890,16 @@ var script = {
 		 */
 		headerMenuEntries() {
 			const lifecycle = this.showsLifecycleActions ? this.lifecycleMenuEntries : [];
-			return [...lifecycle, ...this.menuHeaderActions]
+			// An action drawn as a button, the stage's primary one or a quick
+			// action, is not listed a second time in the menu.
+			const pinned = new Set([
+				...(this.stagePrimaryEntry ? [this.stagePrimaryEntry.id] : []),
+				...this.quickActionEntries.map((entry) => entry.id),
+			]);
+			const inMenu = pinned.size > 0
+				? this.menuHeaderActions.filter((entry) => !pinned.has(entry.id))
+				: this.menuHeaderActions;
+			return [...lifecycle, ...inMenu]
 		},
 
 		/**
@@ -1497,7 +1921,17 @@ var script = {
 		 * @return {Array<object>} The action descriptors.
 		 */
 		effectiveHeaderActions() {
-			const declared = Array.isArray(this.headerActions) ? this.headerActions : [];
+			const authored = Array.isArray(this.headerActions) ? this.headerActions : [];
+			// Inline pinned actions (a stage's primary action, a quick action
+			// written out in place) join the list CnActionButtons dispatches,
+			// so they get the same dialogs, toasts and `visibleWhen` gating as
+			// any header action. An id that is already declared is not added
+			// twice. With nothing pinned inline this is `headerActions` itself.
+			const known = new Set(authored.map((action) => action && action.id));
+			const inline = [this.stagePrimary, ...this.pinnedQuickActions]
+				.filter((pinned) => pinned && pinned.inline && !known.has(pinned.id))
+				.map((pinned) => pinned.inline);
+			const declared = inline.length > 0 ? [...authored, ...inline] : authored;
 			if (!(this.foldsEditIntoActions && this.canEditRecord)) {
 				return declared
 			}
@@ -2310,7 +2744,11 @@ var script = {
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
 		 */
 		onSkipToPrimaryAction(event) {
-			const target = this.$refs.primaryActionButton?.$el ?? this.$refs.primaryActionButton;
+			// The ref covers the header button; the id also finds the button
+			// when it sits inside the "what now" card.
+			const target = this.$refs.primaryActionButton?.$el
+				?? this.$refs.primaryActionButton
+				?? this.$el?.querySelector?.(`[id="${this.primaryActionAnchorId}"]`);
 			const focusable = target?.matches?.('button, a') ? target : target?.querySelector?.('button, a');
 			if (focusable?.focus) {
 				event.preventDefault();
@@ -2318,6 +2756,43 @@ var script = {
 			}
 		},
 
+		/**
+		 * The primary button was pressed.
+		 *
+		 * A stage's action is dispatched the way a header action is, through
+		 * the `run()` CnActionButtons bound for it, and announced to the host
+		 * with its declaration. A link action is left to the browser. Without
+		 * a stage action this is the page's `primaryAction`, announced as
+		 * before.
+		 *
+		 * @return {void}
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 */
+		onPrimaryActionClick() {
+			const entry = this.stagePrimaryEntry;
+			if (!entry) {
+				this.$emit('primary-action', this.primaryAction);
+				return
+			}
+			this.$emit('primary-action', this.headerActionsById[entry.id] || { id: entry.id, label: entry.label });
+			this.onPinnedActionClick(entry);
+		},
+
+		/**
+		 * A pinned action's button was pressed: run it, unless it is a link
+		 * the browser is already following.
+		 *
+		 * @param {object} entry The action's menu entry.
+		 * @return {void}
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-quick-actions
+		 */
+		onPinnedActionClick(entry) {
+			if (!entry || entry.href || typeof entry.run !== 'function') {
+				return
+			}
+			entry.run();
+		},
+
 		/**
 		 * The active tab changed: tell the host, and put it in the address
 		 * when the page declares that its tab is part of its address.