@conduction/nextcloud-vue 2.70.0 → 2.71.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35617052 bytes
-sha256: 8d17da3a5f3f43dba63932341520f63af085b4d61c1b614631488abb6ecd41d8
+size: 35657637 bytes
+sha256: b7b966a528988db88e213ce0afc88832aae9c6b60341877ba5226dc3d833f211

package/dist/nextcloud-vue.css

@@ -2841,6 +2841,50 @@ a.cn-kpi-card--stacked:focus-visible {
 .cn-requires-app.cn-requires-app .empty-content__action {
 	margin-top: var(--default-grid-baseline, 4px);
 }
+
+/* NcEmptyContent forces its icon's svg to 64px with !important while the
+ * rule above lets the icon box shrink, so the svg spilled out of its box and
+ * over the name. Hold the svg to the size the caller asked for. */
+.cn-requires-app.cn-requires-app .empty-content__icon svg {
+	width: 32px !important;
+	height: 32px !important;
+	max-width: 32px !important;
+	max-height: 32px !important;
+}
+
+/* The dashboard's compact "Install <app>" placeholder: two lines of text and
+ * the button, nothing else, so it fits a two-row tile even under a title row.
+ * `safe center` keeps the top in view when a tile is smaller still, and the
+ * body scrolls rather than clipping the button. */
+.cn-requires-app--compact {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: safe center;
+	gap: calc(2 * var(--default-grid-baseline, 4px));
+	box-sizing: border-box;
+	height: 100%;
+	min-height: 0;
+	overflow: auto;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+	text-align: center;
+}
+
+.cn-requires-app--compact .cn-requires-app__description {
+	display: -webkit-box;
+	margin: 0;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	line-height: 1.4;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+}
+
+.cn-requires-app--compact .button-vue {
+	flex-shrink: 0;
+}
 /* ========================================
    @conduction/nextcloud-vue — CnDetailPage Styles
    ======================================== */
@@ -15645,6 +15689,15 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 }
 
 
+/* A select option breaks between words only, never inside one. */
+.cn-form-dialog__option[data-v-c3eeb0a2] {
+	display: block;
+	min-width: 0;
+	white-space: normal;
+	overflow-wrap: normal;
+	word-break: normal;
+	hyphens: manual;
+}
 .cn-form-dialog__draft-actions[data-v-c3eeb0a2] {
 	display: flex;
 	gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.70.0",
+  "version": "2.71.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/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/CnDashboardPage/CnDashboardPage.vue

@@ -330,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 -->

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -250,6 +250,17 @@
 									<!-- @binding {object} option The option being rendered (`{ id, label }`). -->
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<!-- NcSelect's own option splits a label in two spans
+								     (NcEllipsisedOption, keeping its last characters
+								     visible), and in a narrow dropdown the halves broke
+								     onto two lines mid-word: "Agricu lture". A plain
+								     label wraps at spaces only. NcSelectUsers keeps its
+								     avatar rendering. -->
+								<template
+									v-else-if="!isUserField(field)"
+									#option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
@@ -284,11 +295,17 @@
 									#option="optionProps">
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
 									<slot :name="'field-' + field.key + '-selected-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #selected-option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 							</NcSelect>
 							<CnFieldHelper
 								:text="field.description"
@@ -318,11 +335,17 @@
 									#option="optionProps">
 									<slot :name="'field-' + field.key + '-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 								<template
 									v-if="$slots['field-' + field.key + '-selected-option']"
 									#selected-option="optionProps">
 									<slot :name="'field-' + field.key + '-selected-option'" v-bind="optionProps" />
 								</template>
+								<template v-else #selected-option="optionProps">
+									<span class="cn-form-dialog__option">{{ optionText(optionProps) }}</span>
+								</template>
 							</NcSelect>
 							<CnFieldHelper
 								:text="field.description"
@@ -2452,6 +2475,26 @@ export default {
 		 * @param {object} field The field definition
 		 * @return {boolean}
 		 */
+		/**
+		 * The text a select option shows: its label, else a display name, a
+		 * name or the id. A plain string option (a tag) is its own text.
+		 *
+		 * @spec openspec/changes/audit-round-lib-fixes/specs/schema-utilities/spec.md
+		 * @param {object|string} option The option (slot props).
+		 * @return {string} The text.
+		 */
+		optionText(option) {
+			if (option === null || option === undefined) {
+				return ''
+			}
+			if (typeof option !== 'object') {
+				return String(option)
+			}
+			const text = [option.label, option.displayName, option.name, option.id]
+				.find((v) => v !== undefined && v !== null && v !== '')
+			return text === undefined ? '' : String(text)
+		},
+
 		isUserField(field) {
 			return !!(field && field.userPicker && !field.userPicker.multiple)
 		},
@@ -3519,8 +3562,15 @@ export default {
 			if (this.isIdPickerField(field)) {
 				// Reference / user fields store the chosen id (UUID / UID),
 				// not the full option. Cache its label so the selection displays.
+				// A user option can carry only `displayName` (NcSelectUsers' own
+				// shape), and without that fallback the chip showed the uid.
 				if (option && option.id) {
-					this.referenceLabels = { ...this.referenceLabels, [option.id]: option.label || String(option.id) }
+					const name = option.label || option.displayName || this.referenceLabels[option.id]
+					if (name) {
+						this.referenceLabels = { ...this.referenceLabels, [option.id]: name }
+					} else if (this.isUserField(field)) {
+						this.resolveUserLabel(option.id)
+					}
 				}
 				this.updateField(field.key, option ? option.id : null)
 				// Reference options are label-only ({id,label}) — pass the id so
@@ -3587,7 +3637,7 @@ export default {
 				const labels = {}
 				for (const o of list) {
 					if (o && o.id) {
-						labels[o.id] = o.label || String(o.id)
+						labels[o.id] = o.label || o.displayName || this.referenceLabels[o.id] || String(o.id)
 					}
 				}
 				if (Object.keys(labels).length > 0) {
@@ -3861,6 +3911,16 @@ export default {
 </script>
 
 <style scoped>
+/* A select option breaks between words only, never inside one. */
+.cn-form-dialog__option {
+	display: block;
+	min-width: 0;
+	white-space: normal;
+	overflow-wrap: normal;
+	word-break: normal;
+	hyphens: manual;
+}
+
 .cn-form-dialog__draft-actions {
 	display: flex;
 	gap: 8px;

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -488,7 +488,7 @@
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
-					:filterable="headerFilters && !!effectiveSchema"
+					:filterable="tableHeaderFilters"
 					:activeFilters="effectiveActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
 					@columnFilter="onColumnFilterEvent"
@@ -3873,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

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/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)
 		},
 	},
 }