@conduction/nextcloud-vue 2.69.0 → 2.71.0

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -513,8 +513,10 @@
 					:manifest="manifest"
 					:seenVersion="walkthroughSeenVersion"
 					:resume="walkthroughResume"
+					:autoStart="!walkthroughPaused"
 					:translate="translate"
 					@complete="onWalkthroughComplete"
+					@pause="onWalkthroughPause"
 					@progress="onWalkthroughProgress" />
 			</slot>
 			<!--
@@ -934,8 +936,11 @@ export default {
 			 * Restart entry for the product walkthrough (ADR-043). Descendants
 			 * (a menu/settings "Replay walkthrough" entry, or a manifest menu
 			 * `action: "replay-walkthrough"`) call this to re-run a tour. With no
-			 * `tourId` the first declared tour is used.
+			 * `tourId` the first declared tour is used. An unfinished tour
+			 * continues where the user was (a paused tour, else the saved
+			 * step); "Start over" in the user settings goes back to step 1.
 			 *
+			 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
 			 * @param {string} [tourId] The tour to restart.
 			 * @return {void}
 			 */
@@ -945,9 +950,18 @@ export default {
 				}
 				const wt = useWalkthrough(this.appId, this.manifest)
 				const id = tourId || (this.manifest.walkthrough.tours[0] && this.manifest.walkthrough.tours[0].id)
-				if (id) {
-					wt.restart(id)
+				if (!id) {
+					return
+				}
+				const progress = this.walkthroughProgressValue
+				this.unpauseWalkthroughProgress()
+				if (wt.paused.value && wt.activeTour.value && wt.activeTour.value.id === id && wt.resumePaused()) {
+					return
+				}
+				if (progress && progress.tourId === id && wt.resumeAt(id, progress.stepId)) {
+					return
 				}
+				wt.restart(id)
 			},
 
 			/**
@@ -1528,7 +1542,7 @@ export default {
 		},
 	},
 
-	emits: ['setup-complete', 'walkthrough-complete'],
+	emits: ['setup-complete', 'setup-wizard-dismissed', 'walkthrough-complete'],
 
 	/**
 	 * Component-instance state for the capabilities guard.
@@ -2599,9 +2613,21 @@ export default {
 			} catch {
 				// No URL token; fall through to the remembered progress.
 			}
-			// An unfinished tour continues at the step the user reached.
+			// An unfinished tour continues at the step the user reached,
+			// unless the user paused it: then it waits for "Continue".
 			const progress = this.walkthroughProgressValue
-			return progress ? { tourId: progress.tourId, stepId: progress.stepId } : null
+			return progress && !progress.paused ? { tourId: progress.tourId, stepId: progress.stepId } : null
+		},
+
+		/**
+		 * Whether the user paused the tour (X, ESC or the dim). A paused tour
+		 * stays hidden across page loads until the user picks "Continue".
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
+		 * @return {boolean} True while the saved progress is paused.
+		 */
+		walkthroughPaused() {
+			return !!(this.walkthroughProgressValue && this.walkthroughProgressValue.paused)
 		},
 
 		phase() {
@@ -3281,7 +3307,7 @@ export default {
 			// the server keeps reporting it unmet — so without this the wizard
 			// auto-opens again on every visit. Cancel must not be the only way to
 			// get peace.
-			this.persistSetupWizardDismissal()
+			this.persistSetupWizardDismissal(true)
 			if (this.setupState && typeof this.setupState.refresh === 'function') {
 				this.setupState.refresh()
 			}
@@ -3302,7 +3328,7 @@ export default {
 		 * @return {void}
 		 */
 		dismissSetupWizard() {
-			this.persistSetupWizardDismissal()
+			this.persistSetupWizardDismissal(false)
 			this.setupWizardOpen = false
 		},
 
@@ -3325,7 +3351,7 @@ export default {
 		 * @return {boolean}
 		 */
 		isSetupWizardDismissed() {
-			if (this.setupWizardDismissed) {
+			if (this.setupWizardDismissed || this.isSetupWizardDismissedOnServer()) {
 				return true
 			}
 			try {
@@ -3336,18 +3362,87 @@ export default {
 		},
 
 		/**
-		 * Record the non-gating setup wizard as dismissed for this manifest
-		 * `setup.version` so it doesn't auto-open again.
+		 * Whether the app's setup status says the wizard was closed, so it
+		 * stays closed in every browser and on every device. The status
+		 * (`GET /api/setup/status`) may carry `dismissed: true`, or the
+		 * `setup.version` it was closed at (`dismissed: 2`), which re-opens the
+		 * wizard after a version bump. An app whose status carries neither
+		 * keeps today's per-browser behaviour. An app may also answer the
+		 * outstanding steps itself when it records the close (OpenRegister's
+		 * `dismiss-setup`), which needs nothing here.
+		 *
+		 * @spec openspec/changes/setup-wizard-close-on-server/specs/cn-setup-wizard/spec.md
+		 * @return {boolean} True when the server recorded the close for this version.
+		 */
+		isSetupWizardDismissedOnServer() {
+			const s = this.setupState
+			const status = s && s.status && s.status.value
+			const dismissed = status && typeof status === 'object' ? status.dismissed : undefined
+			if (dismissed === true) {
+				return true
+			}
+			if (typeof dismissed === 'number' && Number.isFinite(dismissed)) {
+				const version = (this.manifest && this.manifest.setup && this.manifest.setup.version) || 0
+				return dismissed >= version
+			}
+			return false
+		},
+
+		/**
+		 * The setup action that records a closed wizard on the server, from
+		 * `manifest.setup.dismissAction`, or '' when the app declares none.
+		 *
+		 * @spec openspec/changes/setup-wizard-close-on-server/specs/cn-setup-wizard/spec.md
+		 * @return {string} The action id.
+		 */
+		setupDismissAction() {
+			const action = this.manifest && this.manifest.setup && this.manifest.setup.dismissAction
+			return typeof action === 'string' && /^[a-z0-9][a-z0-9-]*$/.test(action) ? action : ''
+		},
+
+		/**
+		 * Record the setup wizard as closed for this manifest `setup.version`
+		 * so it doesn't auto-open again: in this browser (localStorage) and,
+		 * when the manifest declares `setup.dismissAction`, on the server
+		 * through the app's own setup action endpoint
+		 * (`POST /apps/{appId}/api/setup/action/{dismissAction}`, admin-only
+		 * like every setup endpoint, so the record is per instance). Then
+		 * emits `setup-wizard-dismissed`. Once per page load: finishing
+		 * records it, and the result screen's Close that follows does not
+		 * post again.
 		 *
+		 * @spec openspec/changes/setup-wizard-close-on-server/specs/cn-setup-wizard/spec.md
+		 * @param {boolean} [finished] True when the user finished the wizard, false when they closed it.
 		 * @return {void}
 		 */
-		persistSetupWizardDismissal() {
+		persistSetupWizardDismissal(finished = false) {
 			try {
 				window.localStorage.setItem(this.setupWizardDismissKey(), '1')
 			} catch {
 				// Best-effort persistence (private mode / no storage).
 			}
+			if (this.setupWizardDismissed) {
+				return
+			}
 			this.setupWizardDismissed = true
+			const action = this.setupDismissAction()
+			if (action) {
+				try {
+					Promise.resolve(axios.post(generateUrl(`/apps/${this.appId}/api/setup/action/${action}`), { finished: finished === true }))
+						.catch(() => { /* the local record still holds in this browser */ })
+				} catch {
+					// Never let a failed record break the close.
+				}
+			}
+			/**
+			 * @event setup-wizard-dismissed Emitted once when the user closes or finishes the setup wizard.
+			 * @type {{ appId: string, version: number, finished: boolean }}
+			 */
+			this.$emit('setup-wizard-dismissed', {
+				appId: this.appId,
+				version: (this.manifest && this.manifest.setup && this.manifest.setup.version) || 0,
+				finished: finished === true,
+			})
 		},
 
 		/**
@@ -3434,6 +3529,49 @@ export default {
 			persistWalkthroughProgress(this.appId, this.walkthroughConfigKey, value)
 		},
 
+		/**
+		 * Remember that the user paused the tour, at the step they were on,
+		 * so the next page load keeps it hidden until they pick "Continue".
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
+		 * @param {object} [where] `{ tourId, stepId, index }` from CnWalkthrough.
+		 * @return {void}
+		 */
+		onWalkthroughPause(where) {
+			const current = this.walkthroughProgressValue || {}
+			const tourId = (where && where.tourId) || current.tourId
+			if (!tourId) {
+				return
+			}
+			const value = {
+				tourId,
+				stepId: (where && where.tourId) ? (where.stepId || '') : (current.stepId || ''),
+				index: (where && where.tourId && Number.isInteger(where.index)) ? where.index : (current.index || 0),
+				version: String((this.manifest && this.manifest.version) || ''),
+				paused: true,
+			}
+			this.walkthroughProgressValue = value
+			persistWalkthroughProgress(this.appId, this.walkthroughConfigKey, value)
+		},
+
+		/**
+		 * Clear the paused mark when the user continues the tour. The step
+		 * stays; the next step change writes fresh progress anyway.
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/cn-walkthrough/spec.md
+		 * @return {void}
+		 */
+		unpauseWalkthroughProgress() {
+			const progress = this.walkthroughProgressValue
+			if (!progress || !progress.paused) {
+				return
+			}
+			const value = { ...progress }
+			delete value.paused
+			this.walkthroughProgressValue = value
+			persistWalkthroughProgress(this.appId, this.walkthroughConfigKey, value)
+		},
+
 		/**
 		 * Continue an unfinished tour from the user-settings dialog: show a
 		 * paused tour again, or start the remembered tour at its step.
@@ -3448,10 +3586,11 @@ export default {
 			}
 			setTimeout(() => {
 				const wt = useWalkthrough(this.appId, this.manifest)
+				const progress = this.walkthroughProgressValue
+				this.unpauseWalkthroughProgress()
 				if (wt.resumePaused()) {
 					return
 				}
-				const progress = this.walkthroughProgressValue
 				if (progress) {
 					wt.resumeAt(progress.tourId, progress.stepId)
 				}
@@ -3478,6 +3617,7 @@ export default {
 			setTimeout(() => {
 				const id = this.manifest.walkthrough.tours[0] && this.manifest.walkthrough.tours[0].id
 				if (id) {
+					this.unpauseWalkthroughProgress()
 					useWalkthrough(this.appId, this.manifest).restart(id)
 				}
 			}, 50)

package/src/components/CnBreadcrumbs/CnBreadcrumbs.vue

@@ -19,6 +19,8 @@
 		v-if="crumbs.length > 0"
 		:aria-label="ariaLabel"
 		:rootIcon="rootText ? '' : undefined"
+		:class="{ 'cn-breadcrumbs--text-separator': separator !== '' }"
+		:style="separatorStyle"
 		data-testid="cn-breadcrumbs">
 		<!-- `name` falls back to '' because NcBreadcrumb declares it a REQUIRED
 		     String and warns per render on the label-less icon-only crumb. The
@@ -111,6 +113,34 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Draw this text between the crumbs (for example `/`) instead of
+		 * NcBreadcrumbs' chevron. Empty (the default) keeps the chevron. The
+		 * separator is decoration: it is not read out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 */
+		separator: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		/**
+		 * The separator handed to the stylesheet as a CSS string, or nothing
+		 * without a `separator`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {object|undefined}
+		 */
+		separatorStyle() {
+			if (this.separator === '') {
+				return undefined
+			}
+			return { '--cn-breadcrumbs-separator': JSON.stringify(this.separator) }
+		},
 	},
 
 	methods: {
@@ -127,3 +157,18 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+/* `separator`: a text separator in place of the chevron. The chevron's own
+   element stays (it carries NcBreadcrumbs' spacing and its "no separator after
+   the last crumb" rule); only its icon gives way to the text. */
+.cn-breadcrumbs--text-separator :deep(.vue-crumb__separator svg) {
+	display: none;
+}
+
+.cn-breadcrumbs--text-separator :deep(.vue-crumb__separator)::before {
+	content: var(--cn-breadcrumbs-separator);
+	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnCalendarWidget/CnCalendarWidget.vue

@@ -5,9 +5,13 @@
 
 <template>
 	<div class="cn-calendar-widget">
-		<header class="cn-calendar-widget__header">
-			<span class="cn-calendar-widget__title">{{ t('nextcloud-vue', 'Calendar') }}</span>
-			<div class="cn-calendar-widget__modes">
+		<!-- `content.showTitle: false` and `content.showViewModes: false` drop
+		     the sub-heading and the Month / Week / Agenda buttons, for an agenda
+		     placement whose card already names it; without both the header
+		     row goes. -->
+		<header v-if="showsTitle || showsViewModes" class="cn-calendar-widget__header">
+			<span v-if="showsTitle" class="cn-calendar-widget__title">{{ t('nextcloud-vue', 'Calendar') }}</span>
+			<div v-if="showsViewModes" class="cn-calendar-widget__modes">
 				<button
 					v-for="mode in viewModes"
 					:key="mode"
@@ -160,7 +164,10 @@ export default {
 
 	props: {
 		/**
-		 * Persisted widget content `{viewMode, daysAhead, colorByCalendar}`.
+		 * Persisted widget content `{viewMode, daysAhead, colorByCalendar,
+		 * showTitle, showViewModes}`. `showTitle: false` drops the "Calendar"
+		 * sub-heading and `showViewModes: false` the Month / Week / Agenda
+		 * buttons (both shown by default).
 		 *
 		 * @type {object}
 		 */
@@ -197,6 +204,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the "Calendar" sub-heading renders (`content.showTitle`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-agenda-placement-can-drop-the-calendar-chrome
+		 * @return {boolean}
+		 */
+		showsTitle() {
+			return !(this.content && this.content.showTitle === false)
+		},
+
+		/**
+		 * Whether the Month / Week / Agenda buttons render
+		 * (`content.showViewModes`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-agenda-placement-can-drop-the-calendar-chrome
+		 * @return {boolean}
+		 */
+		showsViewModes() {
+			return !(this.content && this.content.showViewModes === false)
+		},
+
 		/**
 		 * The available view modes.
 		 *

package/src/components/CnCapabilityTable/CnCapabilityTable.vue

@@ -187,6 +187,7 @@ import {
 	hasProviders,
 	RATINGS,
 	resolveProvider,
+	warnCapabilityComparisonDeprecated,
 } from '../../utils/capabilityComparison.js'
 
 /**
@@ -212,6 +213,13 @@ export default {
 		 * document without them renders the table this component's consumers
 		 * already had.
 		 *
+		 * Deprecated, with the whole component: publish the comparison on the
+		 * app's docs site and link to it (as dossiq #3312 and pipelinq #2195
+		 * did). Still rendered; removal waits for a major version. A
+		 * development build warns once when a comparison is given.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object}
 		 */
 		comparison: {
@@ -437,6 +445,12 @@ export default {
 		}
 	},
 
+	mounted() {
+		if (this.comparison) {
+			warnCapabilityComparisonDeprecated('CnCapabilityTable')
+		}
+	},
+
 	methods: {
 		/**
 		 * Debounce the reader's typing into `query`.

package/src/components/CnDashboardGrid/CnDashboardGrid.md

@@ -158,3 +158,5 @@ explicit event when you are writing new code:
   @item-activate="({ item, clientX, clientY }) => openMenu(item, clientX, clientY)"
   @layout-change="onLayoutChange" />
 ```
+
+`float` (Boolean, default `true`): GridStack's `float`. `false` packs items upward, so a size-to-content cell that shrinks, or a widget that is not shown, closes its gap.

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -31,6 +31,7 @@
 				v-for="(item, index) in layout"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
+				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
 				:aria-label="resolveItemLabel(item, index)"
 				:aria-describedby="itemDescribedBy"
@@ -255,6 +256,19 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * GridStack's `float`. True (the default) keeps every item on the row
+		 * it was placed on, with empty rows above it if need be. False packs
+		 * items upward, so a size-to-content cell that shrinks, or a widget
+		 * that is not shown, closes its gap instead of leaving a band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		float: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	emits: [
@@ -278,6 +292,8 @@ export default {
 		return {
 			grid: null,
 			contentObserver: null,
+			/** True while the grid moves an item to where the layout put it. */
+			applyingLayout: false,
 			domId: `cn-dashboard-grid-${++domIdCounter}`,
 			/** Text currently held in the polite live region. */
 			announcement: '',
@@ -485,7 +501,7 @@ export default {
 				column: this.columns,
 				cellHeight: this.cellHeight,
 				margin: this.margin,
-				float: true,
+				float: this.float,
 				animate: true,
 				disableDrag: !this.editable,
 				disableResize: !this.editable,
@@ -558,6 +574,10 @@ export default {
 			// switched off as the grid narrows, and back on as it widens.
 			this.syncInteractivity()
 
+			if (this.applyingLayout) {
+				return
+			}
+
 			// GridStack fires `change` for its own responsive rescale too, and at a
 			// 12 → 1 breakpoint every item reads `gridX: 0, gridWidth: 1`. Emitting
 			// that has the host persist the reflow AS the authored layout, which
@@ -957,7 +977,29 @@ export default {
 					const node = this.grid.engine.nodes.find((n) => String(n.id) === String(item.id))
 					if (!node) {
 						this.grid.makeWidget(el)
-					} else if (node.el !== el) {
+					} else if (node.el === el) {
+						// The layout MOVED an item the grid already tracks: the
+						// page re-compacts its display layout when a widget's
+						// condition hides it, and the item below was given a new
+						// gridY that never reached GridStack, so a band stayed
+						// where the hidden widget had been. A drag reports the
+						// grid's own position back, which matches and does
+						// nothing here.
+						const x = item.gridX ?? node.x
+						const y = item.gridY ?? node.y
+						if (x !== node.x || y !== node.y) {
+							// The layout said where it goes; GridStack's `change`
+							// for it is not a user's arrangement and is not
+							// reported back (it would write the display-only
+							// compaction into the authored layout).
+							this.applyingLayout = true
+							try {
+								this.grid.update(el, { x, y })
+							} finally {
+								this.applyingLayout = false
+							}
+						}
+					} else {
 						// Drop the stale node without touching its detached DOM,
 						// then adopt the new element so GridStack sizes/places it.
 						this.grid.removeWidget(node.el, false, false)
@@ -1016,6 +1058,16 @@ export default {
 	border-radius: var(--border-radius-container-large, 16px);
 }
 
+/* A size-to-content cell (`sizeToContent`) is measured by GridStack from the
+   content's first child, and a widget wrapper there filled the cell
+   (`height: 100%`), so the measure returned the cell's own height and the
+   cell never shrank: "Waiting for me" stayed a tall card around one row. In
+   such a cell the child takes its own height. A cell without the key keeps
+   the filling child. */
+.cn-dashboard-grid__item--fit > :deep(.grid-stack-item-content > *) {
+	height: auto;
+}
+
 :deep(.grid-stack-item-content) {
 	background: var(--color-main-background);
 	border: none;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -305,6 +305,7 @@
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
+			:float="gridFloat"
 			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
@@ -329,24 +330,26 @@
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
 					:showTitle="widgetShowTitle(item)">
-					<NcEmptyContent
-						:name="installAppLabel(missingRequiredApp(item))"
-						:description="t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.')"
-						class="cn-dashboard-page__requires-app cn-requires-app">
-						<template #icon>
-							<Download :size="24" />
-						</template>
-						<template #action>
-							<NcButton
-								variant="primary"
-								:href="appInstallUrl(missingRequiredApp(item))">
-								<template #icon>
-									<Download :size="18" />
-								</template>
-								{{ installAppLabel(missingRequiredApp(item)) }}
-							</NcButton>
-						</template>
-					</NcEmptyContent>
+					<!-- Compact on purpose: a two-row tile is about 150px, less
+					     a title row. NcEmptyContent's 64px icon, 20px name,
+					     description and button did not fit, so the icon ran out
+					     at the top and the button at the bottom. The button
+					     already says "Install {app}", so there is no separate
+					     name, and the text keeps to two lines. -->
+					<div class="cn-dashboard-page__requires-app cn-requires-app cn-requires-app--compact"
+						data-testid="cn-requires-app">
+						<p class="cn-requires-app__description">
+							{{ t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.') }}
+						</p>
+						<NcButton
+							variant="primary"
+							:href="appInstallUrl(missingRequiredApp(item))">
+							<template #icon>
+								<Download :size="18" />
+							</template>
+							{{ installAppLabel(missingRequiredApp(item)) }}
+						</NcButton>
+					</div>
 				</CnWidgetWrapper>
 
 				<!-- Tile widget -->
@@ -1030,6 +1033,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * GridStack's `float` for this dashboard (manifest
+		 * `config.gridFloat`). True (the default) keeps every widget on its
+		 * row. False packs widgets upward, so a size-to-content widget that
+		 * shrinks closes the gap under it instead of leaving an empty band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		gridFloat: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -3602,6 +3618,12 @@ export default {
 
 		getWidgetButtons(item) {
 			const def = this.getWidgetDef(item.widgetId)
+			// `showButtons: false` on the placement or the definition drops
+			// the footer links ("More events"), for a placement whose card
+			// says enough without them (zuiddrecht-pixel-gaps-3).
+			if (item?.showButtons === false || def?.showButtons === false) {
+				return []
+			}
 			return def?.buttons || []
 		},
 
@@ -3905,11 +3927,16 @@ export default {
 			// library's own defaults, so a manifest need not set them — but a
 			// manifest that DOES set them must reach the component, or the
 			// declaration is a silent no-op that reads like configuration.
-			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format']) {
+			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format', 'layout']) {
 				if (props[key] !== undefined) {
 					out[key] = props[key]
 				}
 			}
+			// `content.layout: "stacked"`, the key a stat tile takes, works on
+			// a stats block too (zuiddrecht-pixel-gaps-3).
+			if (out.layout === undefined && typeof content.layout === 'string') {
+				out.layout = content.layout
+			}
 			// `countLabel` is the unit beside the number ("0 cases", "0 tasks").
 			// It is manifest-authored prose and was being forwarded raw, so a
 			// Dutch account read "0 cases" beside a translated widget title.

package/src/components/CnDataTable/CnDataTable.vue

@@ -361,6 +361,40 @@ import { CnLockIndicator } from '../CnLockIndicator/index.js'
 // consuming app does not pull in the library's global css/index.css.
 import '../../css/table.css'
 
+/**
+ * Fill a `secondary` template such as `"{identifier} · {requester}"`.
+ *
+ * A field without a value takes its separator with it: the text between two
+ * fields belongs to the field after it, so an empty requester leaves
+ * "2026-0002", not "2026-0002 ·", and an empty first field does not leave a
+ * leading separator either. Text before the first field and after the last
+ * one is kept as written. A template whose fields all have values fills
+ * exactly as before.
+ *
+ * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-empty-field-takes-its-separator-with-it
+ * @param {string} template The template, with `{field}` placeholders.
+ * @param {(key: string) => string} valueOf The text of a field ('' when empty).
+ * @return {string} The filled template.
+ */
+function fillSecondaryTemplate(template, valueOf) {
+	// split() with a capture group alternates literal, field, literal, …
+	const parts = template.split(/\{([^}]+)\}/)
+	const lead = parts[0]
+	const tail = parts[parts.length - 1]
+	let body = ''
+	for (let i = 1; i < parts.length; i += 2) {
+		const value = valueOf(parts[i].trim())
+		if (value === '') {
+			continue
+		}
+		// The literal before this field: the separator, unless nothing has
+		// been written yet (then there is nothing to separate from).
+		const separator = i === 1 ? '' : parts[i - 1]
+		body += (body === '' ? '' : separator) + value
+	}
+	return lead + body + tail
+}
+
 /**
  * CnDataTable — Generic sortable data table for list views.
  *
@@ -1451,7 +1485,7 @@ export default {
 			}
 			const asText = (v) => (v === null || v === undefined ? '' : String(v))
 			if (spec.includes('{')) {
-				const filled = spec.replace(/\{([^}]+)\}/g, (_, key) => asText(this.getCellValue(row, key.trim())))
+				const filled = fillSecondaryTemplate(spec, (key) => asText(this.getCellValue(row, key)))
 				// A template whose every field is empty leaves only separators:
 				// nothing worth a line.
 				return /[\p{L}\p{N}]/u.test(filled) ? filled.trim() : ''