@conduction/nextcloud-vue 2.83.0 → 2.84.0

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -34,7 +34,31 @@
 <template>
 	<div class="cn-reports-page" :class="{ 'cn-reports-page--board': isBoard }">
 		<div class="cn-reports-page__header">
-			<h2 class="cn-reports-page__title">
+			<!-- The header buttons (`headerButtons`) beside the title, as the
+			     board's "Downloaden" and the buildiq square (board DcRapportages).
+			     Without them, and outside the board look, the title stands alone
+			     as before. -->
+			<div v-if="headerButtonsRow.length > 0" class="cn-reports-page__heading-row">
+				<h2 class="cn-reports-page__title">
+					{{ resolvedTitle }}
+				</h2>
+				<div class="cn-reports-page__header-buttons" data-testid="cn-reports-header-buttons">
+					<template v-for="button in headerButtonsRow" :key="button.key">
+						<CnBuildiqEditButton v-if="button.action === '__buildiq'" />
+						<NcButton
+							v-else
+							:variant="button.variant"
+							:data-testid="`cn-reports-header-button-${button.key}`"
+							@click="onHeaderButton(button)">
+							<template v-if="button.icon" #icon>
+								<CnIcon :name="button.icon" :size="20" />
+							</template>
+							{{ button.label }}
+						</NcButton>
+					</template>
+				</div>
+			</div>
+			<h2 v-else class="cn-reports-page__title">
 				{{ resolvedTitle }}
 			</h2>
 			<p v-if="resolvedDescription" class="cn-reports-page__description">
@@ -134,9 +158,12 @@
  * The Reports page: one surface listing an app's reports as cards.
  */
 import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
 import { defineAsyncComponent } from 'vue'
+import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import { useLook } from '../../composables/useLook.js'
+import { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
 export default {
@@ -146,10 +173,18 @@ export default {
 		// Loaded only for a page that declares widgets: a cards-only reports
 		// page does not pull the dashboard in.
 		CnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),
+		CnBuildiqEditButton,
 		CnIcon,
+		NcButton,
 	},
 
 	inject: {
+		/**
+		 * The v2 registry and the legacy customComponents map, provided by
+		 * CnAppRoot: a header action's named handler resolves against them.
+		 */
+		cnRegistry: { default: () => ({}) },
+		cnCustomComponents: { default: () => ({}) },
 		/**
 		 * The consuming app's translate function, provided by CnAppRoot.
 		 * Defaults to identity so the page still renders outside one.
@@ -268,6 +303,38 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Buttons beside the title (`config.headerButtons`), as the board's
+		 * "Downloaden". Each is `{ label, action, variant?, icon?, id? }`:
+		 * `action` is the id of a `headerActions` entry, which says what the
+		 * click does. Under the board look the buildiq square sits between the
+		 * secondary buttons and the primary one. Empty (the default) changes
+		 * nothing.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<{label: string, action: string, variant?: ('primary'|'secondary'), icon?: string, id?: string}>|null}
+		 */
+		headerButtons: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * The page's header actions (`config.headerActions`), in the shape of
+		 * an index page's: a header button names one by id. `handler` is a
+		 * function, `navigate` (with `route`, and `params`), `emit`, `none`,
+		 * or a registry name; `type: "navigate"` with a `target` URL opens
+		 * that URL in a new tab. Every click also emits `header-action`
+		 * `{ action, id }`, except for `handler: "none"`.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<object>|null}
+		 */
+		headerActions: {
+			type: Array,
+			default: null,
+		},
+
 		/**
 		 * The look to draw in: `board` or `nextcloud`. Absent: the look
 		 * CnAppRoot provides (`cnLook`), else `nextcloud`.
@@ -290,6 +357,8 @@ export default {
 		},
 	},
 
+	emits: ['header-action'],
+
 	setup(props) {
 		const { isBoard } = useLook(props)
 		return { isBoard }
@@ -339,6 +408,8 @@ export default {
 				'emptyLabel',
 				'widgets',
 				'layout',
+				'headerButtons',
+				'headerActions',
 			]) {
 				if (this[key] !== null && this[key] !== undefined) {
 					fromProps[key] = this[key]
@@ -378,6 +449,51 @@ export default {
 			})
 		},
 
+		/**
+		 * The declared header buttons that have a label and an action,
+		 * translated, each with a stable key and a variant.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []
+			return declared
+				.filter((button) => button && typeof button === 'object'
+					&& typeof button.action === 'string' && button.action !== ''
+					&& typeof button.label === 'string' && button.label !== '')
+				.map((button) => ({
+					key: String(button.id || button.action),
+					label: this.tr(button.label),
+					action: button.action,
+					variant: button.variant === 'primary' ? 'primary' : 'secondary',
+					icon: typeof button.icon === 'string' ? button.icon : '',
+				}))
+		},
+
+		/**
+		 * The header row in the order it renders. Without the board look:
+		 * the declared buttons in the declared order. Under the board look:
+		 * the secondary buttons, the buildiq square, then the primary ones,
+		 * as the board draws "Downloaden" and the square. No declared button
+		 * leaves the header as it was, without the square.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<object>} The buttons; the square is `{ key: '__buildiq', action: '__buildiq' }`.
+		 */
+		headerButtonsRow() {
+			const buttons = this.resolvedHeaderButtons
+			if (buttons.length === 0 || !this.isBoard) {
+				return buttons
+			}
+			const square = { key: '__buildiq', action: '__buildiq', variant: 'secondary', label: '', icon: '' }
+			return [
+				...buttons.filter((button) => button.variant !== 'primary'),
+				square,
+				...buttons.filter((button) => button.variant === 'primary'),
+			]
+		},
+
 		/**
 		 * The heading.
 		 *
@@ -567,6 +683,47 @@ export default {
 			}
 		},
 
+		/**
+		 * A header button was clicked: run the `headerActions` entry it names
+		 * and emit `header-action`, as an index page's header button does.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @param {{action: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			const id = button.action
+			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
+			const entry = actions.find((action) => action && action.id === id) || null
+			const handler = entry ? entry.handler : undefined
+			if (handler === 'none') {
+				return
+			}
+			if (typeof handler === 'function') {
+				handler({ actionId: id })
+			} else if (handler === 'navigate' && entry.route) {
+				const params = (entry.params && typeof entry.params === 'object') ? entry.params : null
+				if (this.$router && typeof this.$router.push === 'function') {
+					this.$router.push(params ? { name: entry.route, params } : { name: entry.route })
+				}
+			} else if (entry && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '') {
+				window.open(entry.target, '_blank', 'noopener,noreferrer')
+			} else if (typeof handler === 'string' && handler !== 'emit') {
+				const resolved = resolveRegisteredHandler(handler, this.cnRegistry, this.cnCustomComponents)
+				if (typeof resolved === 'function') {
+					resolved({ actionId: id })
+				}
+			}
+			/**
+			 * A header button was clicked (`headerButtons`), after its
+			 * `headerActions` entry ran; not for `handler: "none"`.
+			 *
+			 * @event header-action
+			 * @property {{action: string, id: string}} payload The id of the `headerActions` entry the button names, as `action` and `id`.
+			 */
+			this.$emit('header-action', { action: id, id })
+		},
+
 		/**
 		 * Navigate by route NAME on a plain click; a modified or middle click
 		 * is left to the browser so it can open the card's href elsewhere.
@@ -598,6 +755,27 @@ export default {
 	margin: 0 0 4px;
 }
 
+.cn-reports-page__heading-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px 24px;
+}
+
+.cn-reports-page__heading-row .cn-reports-page__title {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+
+.cn-reports-page__header-buttons {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+
 .cn-reports-page__description {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -59,8 +59,15 @@
 						class="cn-stages-widget__bar-label"
 						:title="stage.hint || stage.label"
 						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
 						:data-testid="`cn-stages-widget-stage-${stage.id}`"
 						@click="onBarClick(stage)">
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}<span v-if="stage.state === 'current'" class="cn-stages-widget__sr-only"> ({{ tr('current step') }})</span>
 					</component>
 					<span v-if="stage.date" class="cn-stages-widget__bar-date">{{ stage.date }}</span>
@@ -83,7 +90,19 @@
 				@stageClick="onStageClick"
 				@stageBlocked="onStageBlocked">
 				<template #label="{ stage }">
-					<span class="cn-timeline-stages__label" :data-testid="`cn-stages-widget-stage-${stage.id}`">
+					<span
+						class="cn-timeline-stages__label"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`">
+						<!-- The move in flight. A transition can take seconds, and
+						     a strip that shows nothing until it returns reads as
+						     one that never moved. -->
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}
 					</span>
 					<span v-if="stage.subtitle" class="cn-timeline-stages__subtitle">
@@ -156,8 +175,11 @@
 			v-if="pendingAction"
 			:transition="pendingAction"
 			:schema="schema"
+			:error="inputError"
+			:fieldErrors="inputFieldErrors"
+			:busy="busy"
 			@confirm="onInputConfirm"
-			@close="pendingAction = null" />
+			@close="closeInputDialog" />
 	</div>
 </template>
 
@@ -177,6 +199,7 @@ import {
 	performTransition,
 	readAvailableActions,
 	transitionError,
+	transitionFieldErrors,
 } from '../../composables/useLifecycleTransitions.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
@@ -534,6 +557,17 @@ export default {
 			pendingAction: null,
 			/** @type {boolean} Whether a move is running. */
 			busy: false,
+			/**
+			 * @type {string} The stage a running move leads to, or ''. Drives
+			 * the loading indicator on that one stage.
+			 */
+			movingTo: '',
+			/** @type {string} A refusal shown inside the open input dialog. */
+			inputError: '',
+			/** @type {string[]} The input keys that refusal named. */
+			inputFieldErrors: [],
+			/** @type {string[]} The input keys the last refused move named. */
+			lastFieldErrors: [],
 			/** @type {string} Why the last move failed, or ''. */
 			moveError: '',
 			/**
@@ -766,6 +800,20 @@ export default {
 			return this.interactive && !this.busy
 		},
 
+		/**
+		 * What the stage a move is running to says while it runs: the
+		 * loading indicator's name and the live region's sentence.
+		 *
+		 * @return {string} The sentence, or '' when nothing is moving.
+		 */
+		movingMessage() {
+			if (!this.movingTo) {
+				return ''
+			}
+			const stage = this.stages.find((s) => s.id === this.movingTo)
+			return this.tr('Moving to {stage}', { stage: stage ? stage.label : this.movingTo })
+		},
+
 		/**
 		 * The allowed moves by the stage they lead to, or null while they are
 		 * unknown.
@@ -1225,13 +1273,44 @@ export default {
 		 * @param {object} data The collected input values.
 		 * @return {void}
 		 */
-		onInputConfirm(data) {
+		async onInputConfirm(data) {
 			const pending = this.pendingAction
-			this.pendingAction = null
 			if (!pending || !pending.__request) {
+				this.closeInputDialog()
+				return
+			}
+			this.inputError = ''
+			this.inputFieldErrors = []
+			// THE DIALOG STAYS OPEN WHILE THE MOVE RUNS, with its confirm
+			// button busy. Closing it first left the person looking at an
+			// unchanged strip for as long as the transition took, which on a
+			// live case was long enough to reload the page thinking it had
+			// not been sent.
+			const moved = await this.performMove(pending.__request, data)
+			if (this.pendingAction !== pending) {
+				// Closed while the move ran; nothing left to update.
 				return
 			}
-			this.performMove(pending.__request, data)
+			if (moved) {
+				this.closeInputDialog()
+				return
+			}
+			// Refused. The sentence goes into the dialog the person is looking
+			// at, with what they typed still in it.
+			this.inputError = this.moveError
+			this.inputFieldErrors = this.lastFieldErrors
+			this.moveError = ''
+		},
+
+		/**
+		 * Close the input dialog and forget the refusal it was showing.
+		 *
+		 * @return {void}
+		 */
+		closeInputDialog() {
+			this.pendingAction = null
+			this.inputError = ''
+			this.inputFieldErrors = []
 		},
 
 		/**
@@ -1239,11 +1318,17 @@ export default {
 		 *
 		 * @param {{stage: {id: string, label: string}, action: string}} request The move.
 		 * @param {object} [data] The collected transition inputs, when any.
-		 * @return {Promise<void>}
+		 * @return {Promise<boolean>} Whether the move was made.
 		 */
 		async performMove(request, data) {
 			this.busy = true
+			this.movingTo = request.stage.id
 			this.moveError = ''
+			this.lastFieldErrors = []
+			// Said as the move starts, not only when it lands: a screen reader
+			// user otherwise hears nothing for as long as the server takes.
+			this.statusMessage = this.movingMessage
+			let moved = false
 			try {
 				if (this.lifecycleMode) {
 					await performTransition(this.recordId, request.action, data)
@@ -1270,11 +1355,16 @@ export default {
 				if (this.lifecycleMode) {
 					await this.loadActions()
 				}
+				moved = true
 			} catch (error) {
 				this.moveError = transitionError(error, this.tr('The move could not be made'))
+				this.lastFieldErrors = transitionFieldErrors(error)
+				this.statusMessage = this.moveError
 			} finally {
 				this.busy = false
+				this.movingTo = ''
 			}
+			return moved
 		},
 
 		/**
@@ -1501,6 +1591,13 @@ export default {
 	padding: 8px 0;
 }
 
+/* The stage a running move leads to: a small spinner before its label. */
+.cn-stages-widget__moving {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 4px;
+}
+
 .cn-stages-widget__notice {
 	margin: 0;
 	color: var(--color-text-maxcontrast);

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -1460,7 +1460,7 @@ export default {
 		 * @return {string}
 		 */
 		formattedValue() {
-			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null)
+			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,7 +17,7 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid }]">
+		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid, 'cn-stats-block-widget--tiles-box': isGrid && tiles === 'box' }]">
 		<!-- Grid layout: the `stats` (each a stat tile's content, so every
 		     source kind a stat takes: ratio, elapsed, computed...) in `columns`
 		     columns, inside this one card (the board's "Je week tot nu toe"
@@ -288,6 +288,21 @@ export default {
 			default: 2,
 		},
 
+		/**
+		 * How the grid layout draws its tiles: `'box'` gives each tile a
+		 * surface of its own (a grey ground, 10px radius, 14px 16px padding),
+		 * as board DcRapportages draws its efficiency figures. Empty (the
+		 * default) keeps the tiles as parts of the one card, without a box
+		 * (board PqMijnWerk "Je week tot nu toe").
+		 *
+		 * @type {'box'|null}
+		 * @spec openspec/changes/screens-stats-block-tile-box/specs/stats-block-grid/spec.md#requirement-a-stats-block-grid-can-box-its-tiles
+		 */
+		tiles: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * How the single-source value is shown: a style name (`'currency'`,
 		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
@@ -566,7 +581,7 @@ export default {
 			if (!fmt || this.loading) {
 				return null
 			}
-			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject)
+			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject, this.tl)
 		},
 
 		/**
@@ -598,7 +613,7 @@ export default {
 					return {
 						// The value as the entry's `format` says, money in the
 						// currency the entry names; null keeps the plain count.
-						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject) : null,
+						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject, this.tl) : null,
 						entry: entry || {},
 						key: `${(entry && entry.register) || ''}/${(entry && entry.schema) || ''}/${i}`,
 						count: resolved ? raw : 0,
@@ -961,7 +976,10 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* `width: 100%` plus this padding overflowed the card by 48px: the last
+   column ran past the card's right edge (visible once the tiles have a box). */
 .cn-stats-block-widget--grid {
+	box-sizing: border-box;
 	padding: 4px 24px 20px;
 }
 
@@ -977,6 +995,19 @@ export default {
 	min-width: 0;
 }
 
+/* `tiles: "box"`: each tile on a grey ground of its own (board DcRapportages,
+   "Vergaderingen en efficiëntie"), 12px apart. */
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid {
+	gap: 12px;
+}
+
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid-stat {
+	box-sizing: border-box;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--color-background-hover);
+}
+
 .cn-stats-block-widget__rows {
 	display: flex;
 	flex-direction: column;

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -311,6 +311,12 @@ export default {
 		cnLook: { default: 'nextcloud' },
 		/** The tab list's name under the board look, provided by CnDetailPage (`config.tabsLabel`). */
 		cnDetailTabsLabel: { default: null },
+		/**
+		 * The records the detail page's `visibilityContext` names, keyed
+		 * by name (a case's case type), provided by CnDetailPage. A tab's
+		 * `visibleWhen` reads them as `@context.<name>`. Null on any other page.
+		 */
+		cnDetailVisibilityRows: { default: null },
 		/**
 		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
 		 * label written in the manifest reads in the user's language.
@@ -475,6 +481,29 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * What a tab's `visibleWhen` reads: the record, with the records the
+		 * detail page's `visibilityContext` names under `@context.<name>`. Null while
+		 * the record, or one of those records, is not there yet.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		conditionData() {
+			if (!this.objectData) {
+				return null
+			}
+			const holder = this.cnDetailVisibilityRows
+			if (!holder) {
+				return this.objectData
+			}
+			const rows = holder.value
+			if (!rows) {
+				return null
+			}
+			return { ...this.objectData, '@context': rows }
+		},
+
 		/**
 		 * The open panel's own menu items, or an empty list.
 		 *
@@ -859,10 +888,11 @@ export default {
 				return 'visible'
 			}
 			if (isLocallyDecidableVisibleWhen(cond)) {
-				if (!this.objectData) {
+				const data = this.conditionData
+				if (!data) {
 					return 'pending'
 				}
-				return evaluateVisibleWhenLocal(cond, this.objectData) ? 'visible' : 'hidden'
+				return evaluateVisibleWhenLocal(cond, data) ? 'visible' : 'hidden'
 			}
 			const answer = this.sourceVisibility[index]
 			if (answer === undefined) {
@@ -883,7 +913,7 @@ export default {
 		async refreshSourceVisibility() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
 			const seq = ++this.visibilitySeq
-			const ctx = { objectId: this.objectId, object: this.objectData || undefined }
+			const ctx = { objectId: this.objectId, object: this.conditionData || this.objectData || undefined }
 			await Promise.all(tabs.map(async (tab, index) => {
 				const cond = tab && typeof tab === 'object' ? tab.visibleWhen : null
 				if (!cond || isLocallyDecidableVisibleWhen(cond)) {

package/src/components/CnWalkthrough/CnWalkthrough.vue

@@ -683,11 +683,27 @@ export default {
 		 * deferred tour) go through here — so a centered step cannot be
 		 * swallowed by either.
 		 *
+		 * A tour that declares `startOn` opens only on one of those route
+		 * names, whatever its first step looks like.
+		 *
 		 * @param {object} tour The tour definition.
 		 * @param {string} [routeName] The current route name.
 		 * @return {boolean} True when the tour may open on this route.
+		 * @spec openspec/changes/a-tour-starts-on-the-pages-it-names/specs/walkthrough/spec.md
 		 */
 		routeMatchesTour(tour, routeName) {
+			// A tour that names where it starts (`startOn`) opens only there.
+			// It wins over the centered-step rule below: a welcome card floats
+			// in the middle of the screen, but a user who opens a case from a
+			// mail link lands on that case, and the card then blocks the page
+			// they came for. Measured 13 October on dossiq: a staff user's first
+			// visit was a deep link to a Woo request, and "Welcome to Dossiq"
+			// opened over it. The tour waits in `_pendingAutoTour` and opens when
+			// the user reaches a named route.
+			const startOn = Array.isArray(tour && tour.startOn) ? tour.startOn.map(String) : []
+			if (startOn.length > 0) {
+				return !!routeName && startOn.includes(String(routeName))
+			}
 			const page = this.firstStepPage(tour)
 			if (!page) {
 				return true

package/src/css/form-field.css

@@ -183,3 +183,17 @@
 .cn-look-board .cn-form-page__footer .cn-form-page__primary {
 	margin-inline-start: auto;
 }
+
+/* A Nextcloud text area or text field with its label inside the field hides
+   its placeholder until the field takes focus, so the label and the
+   placeholder are never drawn over each other. A theme that forces every
+   placeholder visible (thematiq's nldesign system sets
+   `::placeholder { opacity: 1 !important }`) drew both: the dossiq DqTaak
+   notes field read "Een notitie toevoegen" over "Wat heb je gevonden, wie heb
+   je gebeld?". Under the board look the placeholder stays hidden at rest, as
+   Nextcloud intends; a field with its label outside keeps its placeholder.
+   @spec openspec/changes/board-field-label-over-placeholder/specs/form-field-board-look/spec.md#requirement-a-field-label-and-its-placeholder-are-never-drawn-over-each-other */
+.cn-look-board .textarea__input:not(:focus, .textarea__input--label-outside)::placeholder,
+.cn-look-board .input-field:not(.input-field--label-outside) .input-field__input:not(:focus)::placeholder {
+	opacity: 0 !important;
+}

package/src/css/form-widget.css

@@ -37,6 +37,7 @@
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -58,3 +59,13 @@
 	color: var(--color-error);
 	margin: 0;
 }
+
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}