@conduction/nextcloud-vue 2.69.0 → 2.71.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -19,8 +19,28 @@
 			<CnPageHeader
 				:title="title"
 				:description="headerDescription"
-				:icon="resolvedIcon"
-				:visuallyHidden="!showTitle" />
+				:icon="showTitleIcon ? resolvedIcon : ''"
+				:visuallyHidden="!showTitle">
+				<!-- The board's header buttons (`headerButtons`), beside the
+				     title. Declaring them takes the Views and Actions menus
+				     (and the Add / Export controls a button takes over) out of
+				     the actions bar. -->
+				<template v-if="headerButtonsShown" #extra>
+					<div class="cn-index-page__header-buttons" data-testid="cn-index-header-buttons">
+						<NcButton
+							v-for="button in resolvedHeaderButtons"
+							:key="button.key"
+							:variant="button.variant"
+							:data-testid="`cn-index-header-button-${button.key}`"
+							@click="onHeaderButton(button)">
+							<template v-if="button.icon" #icon>
+								<CnIcon :name="button.icon" :size="20" />
+							</template>
+							{{ button.label }}
+						</NcButton>
+					</div>
+				</template>
+			</CnPageHeader>
 		</slot>
 
 		<!-- Optional content below header, above actions bar -->
@@ -64,7 +84,9 @@
 			:refreshDisabled="refreshDisabled"
 			:addDisabled="addDisabled"
 			:addTo="addLinkTo"
-			:showAdd="effectiveShowAdd"
+			:showAdd="effectiveShowAdd && !headerButtonTakes('add')"
+			:showCount="showCount"
+			:showActionsMenu="!headerButtonsShown"
 			:showSidebarToggle="hasSidebar"
 			:sidebarOpen="sidebarOpen"
 			:headerActions="mergedHeaderActions"
@@ -111,12 +133,12 @@
 			     views, export, page config — grouped together and kept apart from
 			     the app-specific buttons in `#actions`, with Add sitting between
 			     the two groups rather than before both (dossiq Cases/Queue). -->
-			<template v-if="isEditMode || showExportMenu || allowSavedViews" #actions-end>
+			<template v-if="isEditMode || barShowsExportMenu || barShowsSavedViews" #actions-end>
 				<!-- Saved views (opt-in via `allowSavedViews`): lists the user's
 				     OpenRegister saved-search views; applying one writes its stored
 				     filters/search/sort into the route query. -->
 				<CnSavedViewsControl
-					v-if="allowSavedViews"
+					v-if="barShowsSavedViews"
 					:views="viewsForControl"
 					:loading="savedViewsLoading"
 					:currentUserId="currentSavedViewsUserId"
@@ -128,7 +150,7 @@
 				     CSV/Excel entries navigate to OR's export-leaf URL, passing the
 				     current route's query params through as filters. -->
 				<NcActions
-					v-if="showExportMenu"
+					v-if="barShowsExportMenu"
 					:forceName="true"
 					:menuName="t('nextcloud-vue', 'Export')"
 					data-testid="cn-index-export-menu"
@@ -466,7 +488,7 @@
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
-					:filterable="headerFilters && !!effectiveSchema"
+					:filterable="tableHeaderFilters"
 					:activeFilters="effectiveActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
 					@columnFilter="onColumnFilterEvent"
@@ -1225,6 +1247,51 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Whether the page header draws its icon before the title. `false`
+		 * (manifest `config.showTitleIcon: false`) drops it, for a title that
+		 * stands alone as the board draws it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showTitleIcon: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Whether the actions bar shows its "Showing 20 of 258" line.
+		 * `false` (manifest `config.showCount: false`) drops it, for a page
+		 * whose title line already gives the total (`countSubtitle`). True by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showCount: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Buttons beside the page title, as the board's "Export" and "New
+		 * case" (manifest `config.headerButtons`). Each is `{ label?, action,
+		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
+		 * its label defaults to the Add label), `export` (the export leaf in
+		 * `format`, `csv` by default, else the export dialog), `import`,
+		 * `refresh`, or the id of a `headerActions` entry; `variant` is
+		 * `primary` or `secondary` (the default). Shown only with
+		 * `showTitle`. When they show, the actions bar drops its Views and
+		 * Actions menus, and the Add button and Export menu when a button
+		 * takes their action. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string}>}
+		 */
+		headerButtons: {
+			type: Array,
+			default: () => [],
+		},
+
 		/** Optional MDI icon name. Defaults to schema.icon when a schema is provided. */
 		icon: {
 			type: String,
@@ -3806,6 +3873,28 @@ export default {
 		},
 
 		/** Resolved schema OBJECT (for column generation / icons / labels). */
+		/**
+		 * Whether the table shows its header filters. A self-fetching page
+		 * applies them itself, with or without a resolved schema (the columns
+		 * then say how each one filters, else a text filter on contains). A
+		 * host-fed table shows them when a schema came along, as before, or
+		 * when the host listens for `filter-change`; a filter nobody applies
+		 * would be a control that does nothing.
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-data-table/spec.md
+		 * @return {boolean} True when header filters show.
+		 */
+		tableHeaderFilters() {
+			if (!this.headerFilters) {
+				return false
+			}
+			if (this.effectiveSchema || this.isSelfFetchMode) {
+				return true
+			}
+			const vnodeProps = (this.$ && this.$.vnode && this.$.vnode.props) || {}
+			return typeof vnodeProps.onFilterChange === 'function' || Array.isArray(vnodeProps.onFilterChange)
+		},
+
 		effectiveSchema() {
 			if (this.isSelfFetchMode) {
 				return this.list.schema.value
@@ -4284,6 +4373,67 @@ export default {
 			return resolveDeepTokens(seed, {})
 		},
 
+		/**
+		 * The declared header buttons with a label, translated, each with a
+		 * stable key and a variant.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.headerButtons) ? this.headerButtons : []
+			return declared
+				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
+				.map((button, index) => {
+					let label = typeof button.label === 'string' && button.label !== '' ? this.cnTranslate(button.label) : ''
+					if (label === '' && button.action === 'add') {
+						label = this.resolvedAddLabel
+					}
+					return {
+						key: String(button.id || button.action || index),
+						label,
+						action: button.action,
+						variant: button.variant === 'primary' ? 'primary' : 'secondary',
+						icon: typeof button.icon === 'string' ? button.icon : '',
+						format: button.format === 'excel' ? 'excel' : 'csv',
+					}
+				})
+				.filter((button) => button.label !== '')
+		},
+
+		/**
+		 * Whether the header buttons render: there are some, the title shows
+		 * (they sit beside it) and no `#header` slot replaces the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		headerButtonsShown() {
+			return this.showTitle && !this.$slots.header && this.resolvedHeaderButtons.length > 0
+		},
+
+		/**
+		 * Whether the actions bar shows the saved-views control: opted in
+		 * with `allowSavedViews` and not given up for header buttons.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsSavedViews() {
+			return Boolean(this.allowSavedViews) && !this.headerButtonsShown
+		},
+
+		/**
+		 * Whether the actions bar shows the Export menu: `showExportMenu`,
+		 * unless a header button took the export over.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsExportMenu() {
+			return this.showExportMenu && !this.headerButtonTakes('export')
+		},
+
 		/**
 		 * The header's description line: `countSubtitle` with the total
 		 * filled in when one is known, else `description`.
@@ -5086,6 +5236,43 @@ export default {
 			this.$emit('open-modal', { target, props: { selectedIds, count, ...own } })
 		},
 
+		/**
+		 * Whether a shown header button takes `action` over from the bar.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {string} action The action, e.g. `add`.
+		 * @return {boolean}
+		 */
+		headerButtonTakes(action) {
+			return this.headerButtonsShown && this.resolvedHeaderButtons.some((button) => button.action === action)
+		},
+
+		/**
+		 * A header button was clicked: run its built-in action, or dispatch
+		 * it as the `headerActions` entry with that id.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {{action: string, format: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			if (button.action === 'add') {
+				this.onAddClick()
+			} else if (button.action === 'export') {
+				if (this.register && this.exportSchemaSlug) {
+					this.onExportClick(button.format)
+				} else {
+					this.showExportDialog = true
+				}
+			} else if (button.action === 'import') {
+				this.showImportDialog = true
+			} else if (button.action === 'refresh') {
+				this.onRefreshEvent()
+			} else {
+				this.onHeaderAction({ action: button.action, id: button.action })
+			}
+		},
+
 		/**
 		 * Click dispatch from CnActionsBar's `@header-action`. Looks
 		 * up the resolved entry by id, invokes its handler if any,

package/src/components/CnNextStepCard/CnNextStepCard.vue

@@ -241,6 +241,17 @@ export default {
 	text-transform: uppercase;
 }
 
+/* The title is a small kicker, not a section heading, but it is an <h3> (or
+   whatever `titleTag` says) for the outline, and a theme that sizes every
+   heading with !important (thematiq's nldesign sheet: `h3 { font-size:
+   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to
+   an 18px uppercase heading. Only !important beats !important; the doubled
+   class makes this the more specific rule. Without such a theme the size is
+   the 0.85em above, unchanged. */
+.cn-next-step-card__title.cn-next-step-card__title {
+	font-size: 0.85em !important;
+}
+
 .cn-next-step-card__list {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline));

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -614,7 +614,10 @@ export default {
 					return { key: c, label: headingFor(c) }
 				}
 				const out = { key: c.key, label: c.label || headingFor(c.key) }
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable']) {
+				// `secondary` (a second, muted line under the cell) rides
+				// along too: the table draws it, and dropping it here took the
+				// list rows' second line away (zuiddrecht-pixel-gaps-3).
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}

package/src/components/CnObjectSidebar/CnNotesTab.vue

@@ -279,7 +279,7 @@ export default {
 		 * @param {(suggestions: Array<object>) => void} callback Receives the suggestion array.
 		 */
 		async fetchMentionSuggestions(search, callback) {
-			const users = await searchNextcloudUsers(search)
+			const users = await searchNextcloudUsers(search, { includeCurrentUser: false })
 			callback(users.map((user) => ({
 				id: user.id,
 				label: user.label,

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -123,6 +123,13 @@
 
 				<!-- config-fields -->
 				<template v-else-if="step.type === 'config-fields'">
+					<!-- The step's intro, drawn like choice and run-action steps.
+					     It was left out here, so pipelinq's organisation step
+					     ("Your organisation details…") showed fields with no
+					     word about what they were for. -->
+					<NcNoteCard v-if="step.body" type="info" data-testid="cn-setup-step-intro">
+						{{ stepBody(step) }}
+					</NcNoteCard>
 					<div
 						v-for="field in fieldsFor(step)"
 						:key="field.key"

package/src/components/CnStackedBarWidget/CnStackedBarWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-stacked-bar" data-testid="cn-stacked-bar">
+	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset }" data-testid="cn-stacked-bar">
 		<div v-if="loading" class="cn-stacked-bar__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span>{{ loadingLabel }}</span>
@@ -11,9 +11,14 @@
 		<p v-else-if="error" class="cn-stacked-bar__state" role="status">
 			{{ errorLabel }}
 		</p>
-		<p v-else-if="total === 0" class="cn-stacked-bar__state" data-testid="cn-stacked-bar-empty">
-			{{ emptyLabel }}
-		</p>
+		<!-- The designed empty state the list widgets use, compact: a bare
+		     line of text read as a broken widget in an empty card. -->
+		<CnWidgetEmptyState
+			v-else-if="total === 0"
+			:name="emptyLabel"
+			compact
+			class="cn-stacked-bar__empty"
+			data-testid="cn-stacked-bar-empty" />
 		<template v-else>
 			<!-- The bar is a picture of the legend below it. The legend holds
 			     every label and number, so the bar itself is hidden from
@@ -50,6 +55,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
+import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
 
 /** The lightest step keeps this share of the primary colour, so it still stands out from the page. */
@@ -114,7 +120,7 @@ export function rampColor(index, count) {
 export default {
 	name: 'CnStackedBarWidget',
 
-	components: { NcLoadingIcon },
+	components: { CnWidgetEmptyState, NcLoadingIcon },
 
 	inject: {
 		/**
@@ -133,9 +139,11 @@ export default {
 		 * group keys in the order they render; groups it does not list follow
 		 * in the order they arrive, and a listed key without records renders
 		 * with a count of 0. `labels` maps a group key to its label.
-		 * `emptyText` is shown when there is nothing to count.
+		 * `emptyText` is shown when there is nothing to count. `inset: true`
+		 * draws the bar and legend inside the board's inset (16px above, 24px
+		 * at the sides, 22px below) instead of from card edge to card edge.
 		 *
-		 * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
+		 * @type {{inset?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
 		 */
 		content: {
 			type: Object,
@@ -163,6 +171,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the widget draws the board's inset (`content.inset`). Off
+		 * by default, which keeps it edge to edge as before.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-strip-and-a-stacked-bar-can-take-the-board-inset
+		 * @return {boolean}
+		 */
+		inset() {
+			return Boolean(this.content && this.content.inset === true)
+		},
+
 		/**
 		 * The translate function in use.
 		 *
@@ -353,6 +372,14 @@ export default {
 	width: 100%;
 }
 
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-stacked-bar--inset {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
+
 .cn-stacked-bar__state {
 	display: flex;
 	align-items: center;

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -1502,6 +1502,25 @@ button.cn-stages-widget__bar-label {
 	cursor: pointer;
 }
 
+/* The same label under a theme that restyles every button with !important
+   (thematiq's nldesign sheet: `button:not(.action-button)` gets 8px 16px
+   padding, `min-width: max-content` and `overflow: visible`), and under core's
+   `margin: 3px 3px 3px 0`, which outranks the scoped base rule. Together they
+   put each clickable label about 10px below the current step's <span> and let
+   a long label run over its neighbours, so eight Woo steps overlapped instead
+   of ending in an ellipsis. Only !important beats !important; this selector is
+   the more specific of the two. Without such a theme nothing changes: these
+   are the values the base rule already sets. */
+button.cn-stages-widget__bar-label.cn-stages-widget__bar-label {
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	border-width: 0 !important;
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
+}
+
 button.cn-stages-widget__bar-label[aria-disabled="true"] {
 	cursor: not-allowed;
 }

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -111,6 +111,15 @@
 				data-testid="cn-stat-widget-caption">
 				{{ resolvedCaption }}
 			</span>
+			<!-- A second caption line (`content.note`), as LpStart's "3
+			     deadlines this week" under the count. Static text for now. -->
+			<span
+				v-if="!displayLoading && !displayError && resolvedNote"
+				class="cn-kpi-card__label cn-stat-widget__note cn-kpi-card__caption-line"
+				:class="noteVariantClass"
+				data-testid="cn-stat-widget-note">
+				{{ resolvedNote }}
+			</span>
 		</div>
 	</component>
 </template>
@@ -663,6 +672,33 @@ export default {
 			return rules.find((r) => r && this.matchesRule(current, r)) || null
 		},
 
+		/**
+		 * The second caption line: `content.note` through the host translate
+		 * function, or '' without it.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		resolvedNote() {
+			const note = this.content && this.content.note
+			return typeof note === 'string' && note !== '' ? this.effectiveTranslate(note) : ''
+		},
+
+		/**
+		 * The colour class of the second caption line (`content.noteVariant`,
+		 * the same names as `captionVariant`), or '' for the muted default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		noteVariantClass() {
+			const variant = this.content && this.content.noteVariant
+			if (!variant || variant === 'default' || !Object.hasOwn(VARIANT_COLORS, variant)) {
+				return ''
+			}
+			return `cn-kpi-card__label--${variant === 'danger' ? 'error' : variant}`
+		},
+
 		/**
 		 * The caption's colour class: the matching override's
 		 * `captionVariant`, else `content.captionVariant`, as

package/src/components/CnStatsBlock/CnStatsBlock.md

@@ -151,3 +151,5 @@ export default {
 | Slot | Scope | Description |
 |---|---|---|
 | `value` | `{ count, formatted }` | Override the prominently-displayed value — render a pre-formatted string (currency, percent, a "—" placeholder, …). `count` is the raw `count` prop; `formatted` is the locale-formatted string the default slot renders. Useful for currency / unit prefixes (e.g. `€{{ formatted }}`). |
+
+`layout` (String, default empty): `stacked` is the board's tile, as CnStatWidget `content.layout: "stacked"`: no icon circle, a 14px muted title, the number at 34px/700 and the unit on a muted line under it.

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -19,7 +19,7 @@
 		v-bind="componentAttrs"
 		@click="onClick">
 		<!-- Icon -->
-		<div v-if="hasIcon" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
+		<div v-if="hasIcon && !isStacked" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
 			<slot name="icon">
 				<component :is="icon" v-if="icon" :size="iconSize" />
 			</slot>
@@ -249,6 +249,18 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` is the board's tile, as CnStatWidget `content.layout:
+		 * "stacked"`: no icon circle, a 14px muted title, the number at
+		 * 34px/700 in the text colour. Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Lay the icon left of the content. No longer needed — this is the
 		 * canonical card's own layout — and kept so existing callers that pass
@@ -366,13 +378,24 @@ export default {
 			return {}
 		},
 
+		/**
+		 * Whether the block takes the stacked board look (`layout`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.layout === 'stacked'
+		},
+
 		rootClasses() {
 			return {
 				// Canonical + legacy, in pairs: the canonical class carries the
 				// look, the legacy one keeps existing app CSS matching.
 				// The canonical card is already horizontal, so the legacy pair
 				// is emitted for app CSS but carries no look of its own.
-				'cn-kpi-card--horizontal': this.horizontal || !this.vertical,
+				'cn-kpi-card--horizontal': !this.isStacked && (this.horizontal || !this.vertical),
+				'cn-kpi-card--stacked': this.isStacked,
 				'cn-stats-block--horizontal': this.horizontal || !this.vertical,
 				'cn-kpi-card--vertical': this.vertical,
 				'cn-stats-block--vertical': this.vertical,

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -32,6 +32,7 @@
 				:showZeroCount="showZeroCount"
 				:horizontal="horizontal"
 				:vertical="vertical"
+				:layout="layout"
 				:filled="filled"
 				:clickable="!!view.route"
 				:route="view.route || null">
@@ -54,6 +55,7 @@
 			:showZeroCount="showZeroCount"
 			:horizontal="horizontal"
 			:vertical="vertical"
+			:layout="layout"
 			:filled="filled"
 			:clickable="!!route"
 			:route="route">
@@ -260,6 +262,17 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` gives every block the board look (see CnStatsBlock
+		 * `layout`). Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Draw each tile's own grey box. Off by default — the widget is
 		 * rendered inside a CnWidgetWrapper that already draws a card.

package/src/components/CnWalkthrough/CnWalkthrough.vue

@@ -172,6 +172,12 @@ export default {
 		tourId: { type: String, default: '' },
 		/** Optional resume token `{ tourId, stepId }` (refresh / cross-app hand-off). */
 		resume: { type: Object, default: null },
+		/**
+		 * Whether a first-visit tour may start on its own. The host turns it
+		 * off while the user's tour is paused, so a paused tour stays hidden
+		 * across page loads until the user picks "Continue".
+		 */
+		autoStart: { type: Boolean, default: true },
 		/** Stacking order of the overlay. */
 		zIndex: { type: Number, default: 10000 },
 		/** Next button label. */
@@ -571,6 +577,9 @@ export default {
 				this.wt.start(this.tourId)
 				return
 			}
+			if (!this.autoStart) {
+				return
+			}
 			const auto = this.wt.autoStartTour.value
 			if (!auto) {
 				return
@@ -1171,31 +1180,43 @@ export default {
 		},
 
 		/**
-		 * End the tour for good from the corner close button: mark it complete so
-		 * the seen-version is persisted and it does not auto-show again.
+		 * The corner close button PAUSES the tour, like ESC and the dim. It
+		 * used to complete it, and the host then wiped the saved step, so a
+		 * restart began at step 1 again. Only Finish on the last step (and a
+		 * host-supplied Skip) completes the tour; "Start over" in the user
+		 * settings stays the way back to step 1.
 		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
 		 * @return {void}
 		 */
 		close() {
-			this.wt.complete()
-			this.$emit('complete')
+			this.onBackdrop()
 		},
 
 		/**
-		 * Pause the tour from a backdrop click or ESC. The tour hides and
-		 * keeps its step; only Skip (the close button) and Finish end it.
+		 * Pause the tour from the corner X, a backdrop click or ESC. The tour
+		 * hides and keeps its step; only Finish (or a host Skip) ends it.
 		 * Pressing ESC used to dismiss it, and the host recorded that as
-		 * "seen", so the tour never came back.
+		 * "seen", so the tour never came back. The `pause` event carries
+		 * where the user was, so the host can keep a paused tour hidden on
+		 * the next page load.
 		 *
 		 * @spec openspec/changes/walkthrough-advance-pause-resume/specs/cn-walkthrough/spec.md
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
 		 * @return {void}
 		 */
 		onBackdrop() {
+			const where = {
+				tourId: (this.wt.activeTour.value && this.wt.activeTour.value.id) || '',
+				stepId: (this.step && this.step.id) || '',
+				index: this.index,
+			}
 			this.wt.pause()
 			/**
-			 * @event pause Emitted when the user hides the tour (backdrop / ESC). The tour can continue later.
+			 * @event pause Emitted when the user hides the tour (X, backdrop, ESC). The tour can continue later.
+			 * @type {{ tourId: string, stepId: string, index: number }}
 			 */
-			this.$emit('pause')
+			this.$emit('pause', where)
 		},
 	},
 }