@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -452,6 +452,7 @@
 			:layout="section.layout"
 			:editable="section.editable"
 			:columns="columns"
+			:columnOpts="gridColumnOpts"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
 			:float="gridFloat"
@@ -933,7 +934,8 @@ import { normalizeLook } from '../../composables/useLook.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
-import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
+import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
+import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
@@ -2082,6 +2084,22 @@ export default {
 			return this.compactDisplayLayout(visible)
 		},
 
+		/**
+		 * The responsive columns of the grid. Under the board look a phone gets
+		 * one column: below 640px the widgets stack in reading order (top to
+		 * bottom, then left to right) instead of squeezing six columns into
+		 * 150px. Without the board look the grid keeps its fixed columns.
+		 *
+		 * @return {object|null} GridStack `columnOpts`, or null.
+		 * @spec openspec/changes/screens-dashboard-phone/specs/dashboard-phone/spec.md#requirement-a-board-dashboard-stacks-on-a-phone
+		 */
+		gridColumnOpts() {
+			if (!this.isBoardLook) {
+				return null
+			}
+			return { columnMax: this.columns, breakpoints: [{ w: 640, c: 1 }], layout: 'list', breakpointForWindow: true }
+		},
+
 		/**
 		 * The layout this page renders: the user's arrangement when they have
 		 * one, the manifest otherwise.
@@ -2256,6 +2274,10 @@ export default {
 			const items = []
 			for (const id of ids) {
 				if (this.getWidgetDef(id) || this.hasWidgetSlot(id)) {
+					// A tile a page control hides surrenders its cell.
+					if (!this.gridEditable && this.isHiddenByWorkspace(id)) {
+						continue
+					}
 					items.push({ widgetId: id })
 				} else if (process.env.NODE_ENV !== 'production') {
 					// eslint-disable-next-line no-console
@@ -3401,7 +3423,8 @@ export default {
 			const layout = content.layout || props.layout || ''
 			const title = layout === 'attention' ? (content.title || props.title || '') : ''
 			return {
-				text: content.text || props.text || title || '',
+				// A banner with only a bold `lead` has words to show too.
+				text: content.text || props.text || content.lead || props.lead || title || '',
 				visibleWhen: (def && def.visibleWhen) || content.visibleWhen || props.visibleWhen || null,
 				layout,
 			}
@@ -3435,6 +3458,11 @@ export default {
 			if (!visibleWhen) {
 				return false
 			}
+			// A workspace condition (a page control's choice) is answered at
+			// once from the reactive bag; nothing is fetched for it.
+			if (isWorkspaceCondition(visibleWhen)) {
+				return !evaluateWorkspaceCondition(visibleWhen, this.workspaceContext)
+			}
 			const outcome = this.widgetConditionOutcome[item.widgetId]
 			if (outcome && outcome.failed === true && layout === 'attention' && this.isBannerDef(def)) {
 				return false
@@ -3442,6 +3470,23 @@ export default {
 			return !outcome || outcome.met !== true
 		},
 
+		/**
+		 * Whether a page control (a workspace condition on `visibleWhen`)
+		 * hides this widget right now. Other conditions are not looked at.
+		 *
+		 * @param {string} widgetId The widget id.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-widget-can-be-shown-by-a-workspace-value
+		 */
+		isHiddenByWorkspace(widgetId) {
+			const def = this.getWidgetDef(widgetId)
+			if (!def || !def.type) {
+				return false
+			}
+			const { visibleWhen } = this.widgetDisplayConfig(def)
+			return isWorkspaceCondition(visibleWhen) && !evaluateWorkspaceCondition(visibleWhen, this.workspaceContext)
+		},
+
 		/**
 		 * Evaluate every conditional widget's `visibleWhen` into
 		 * `widgetConditionOutcome` — the verdict AND the raw field value,
@@ -3464,7 +3509,8 @@ export default {
 		async evaluateWidgetConditions() {
 			const defs = [...(this.widgets || []), ...this.normalizedViews.flatMap((view) => view.widgets)]
 			const conditional = defs.filter((def) => def && def.id && def.type
-				&& this.widgetDisplayConfig(def).visibleWhen)
+				&& this.widgetDisplayConfig(def).visibleWhen
+				&& !isWorkspaceCondition(this.widgetDisplayConfig(def).visibleWhen))
 			// Skip when the CONDITIONAL SET is unchanged: the deep `widgets`
 			// watch fires on any def edit, but only an added/removed/edited
 			// predicate warrants refetching every conditional endpoint.
@@ -3484,8 +3530,13 @@ export default {
 				const cond = this.widgetDisplayConfig(def).visibleWhen
 				let outcome
 				try {
-					const value = await readVisibleWhenValue(cond)
+					// `sink` keeps the first row of a source query, for a banner that names it.
+					const sink = {}
+					const value = await readVisibleWhenValue(cond, undefined, sink)
 					outcome = { met: compareVisibleWhen(value, cond.op || 'eq', cond.value), value }
+					if (sink.row) {
+						outcome.row = sink.row
+					}
 				} catch (error) {
 					// Fail-safe: not met. But the failure is kept, and said
 					// out loud: a failed count and "nothing to report" look
@@ -3985,6 +4036,11 @@ export default {
 			const def = this.getWidgetDef(item.widgetId)
 			const value = item.showTitle !== undefined ? item.showTitle : def?.showTitle
 			if (value === undefined || value === null) {
+				// A banner that names no title draws no title row: it used to show
+				// its widget id ("attention-first") as the card title.
+				if (this.isBannerDef(def) && !item.customTitle && !def?.customTitle && !def?.title) {
+					return false
+				}
 				return !this.isCardWidget(item)
 			}
 			return value !== false
@@ -4093,7 +4149,12 @@ export default {
 				return item.headerLink
 			}
 			const def = this.getWidgetDef(item.widgetId)
-			return (def?.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null
+			if (def?.headerLink && typeof def.headerLink === 'object') {
+				return def.headerLink
+			}
+			// Last, what the widget's own content asks for (`headerLink`, or the
+			// `viewAllRoute` / `viewAllLabel` of the tasks widget).
+			return contentHeaderLink(item?.content) || contentHeaderLink(def?.content)
 		},
 
 		/**
@@ -4842,6 +4903,18 @@ export default {
 .cn-dashboard-page__content-item {
 	width: 100%;
 }
+/* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
+   are 44px: the widget Actions menu and the KPI tiles. */
+@media (max-width: 640px) {
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .action-item__menutoggle),
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .button-vue) {
+		min-height: 44px;
+	}
+
+	.cn-dashboard-page--board .cn-dashboard-page__kpi-cell {
+		min-height: 44px;
+	}
+}
 </style>
 
 <!-- Unscoped, anchored on the stable `data-testid` NcActions renders on both

package/src/components/CnDataTable/CnDataTable.vue

@@ -321,6 +321,7 @@
 									:formatterOptions="col.formatterOptions || null"
 									:widget="col.widget || null"
 									:widgetProps="col.widgetProps || undefined"
+									:secondary="col.widget === 'avatar' ? secondaryValue(row, col) : ''"
 									:format="columnFormat(col)"
 									:row="row"
 									:rowKey="rowKey" />
@@ -330,7 +331,7 @@
 							     of the row. Lets one column read "title" over "number ·
 							     requester" without a custom cell. -->
 							<span
-								v-if="secondaryValue(row, col)"
+								v-if="col.widget !== 'avatar' && secondaryValue(row, col)"
 								class="cn-table-cell__secondary"
 								data-testid="cn-cell-secondary">{{ secondaryValue(row, col) }}</span>
 							<!-- A row that entered a file-content search through an attached
@@ -1765,17 +1766,6 @@ export default {
 			return (col && typeof col.format === 'object') ? col.format : null
 		},
 
-		/**
-		 * Value to render in a cell. For a column that declares `aggregate`
-		 * (a count of related objects), returns the cached count once
-		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
-		 * if it failed / there's nothing to count). Otherwise the row's
-		 * property value via `getCellValue`.
-		 *
-		 * @param {object} row The row data.
-		 * @param {object} col The column definition.
-		 * @return {unknown} The value handed to the slot / CnCellRenderer.
-		 */
 		/**
 		 * The secondary line of a cell, from `col.secondary`: a function is
 		 * called with the row; a string with `{field}` placeholders is a
@@ -1806,6 +1796,21 @@ export default {
 			return asText(this.getCellValue(row, spec))
 		},
 
+		/**
+		 * Value to render in a cell. For a column that declares `aggregate`
+		 * (a count of related objects), returns the cached count once
+		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
+		 * if it failed / there's nothing to count). A count of zero reads as
+		 * `aggregate.zeroLabel` when the column sets one ("None", which the
+		 * app's `cnTranslate` turns into "Geen" as the boards draw it); without
+		 * it the cell shows `0` as before. Otherwise the row's property value
+		 * via `getCellValue`.
+		 *
+		 * @spec openspec/changes/aggregate-zero-label/specs/aggregate-zero-label/spec.md#requirement-a-count-column-can-name-zero
+		 * @param {object} row The row data.
+		 * @param {object} col The column definition.
+		 * @return {unknown} The value handed to the slot / CnCellRenderer.
+		 */
 		cellValue(row, col) {
 			if (col && col.aggregate) {
 				const cached = this.aggregateValues[String(row[this.rowKey])]
@@ -1813,6 +1818,10 @@ export default {
 				if (v === undefined) {
 					return this.aggregateLoading ? '…' : '—'
 				}
+				const zeroLabel = col.aggregate.zeroLabel
+				if ((v === 0 || v === '0') && typeof zeroLabel === 'string' && zeroLabel !== '') {
+					return typeof this.cnTranslate === 'function' ? this.cnTranslate(zeroLabel) : zeroLabel
+				}
 				return v
 			}
 			return this.getCellValue(row, col.key)

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -379,7 +379,7 @@
 					:showDocumentation="showDocumentation && menuShowsHelpLinks"
 					:actionsMenuLabel="boardMenuLabel"
 					:variant="isBoard ? 'secondary' : undefined"
-					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread"
+					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread || showOpenSidebar"
 					:documentationUrl="documentationUrl"
 					:docsAnchor="resolvedPageId"
 					:documentationLabel="documentationLabel || undefined"
@@ -390,7 +390,7 @@
 					testidBase="cn-detail-page"
 					@refresh="onHeaderRefresh"
 					@requestFeature="onHeaderRequestFeature">
-					<template v-if="headerMenuGroups.length || showMarkUnread" #primary-items>
+					<template v-if="headerMenuGroups.length || showMarkUnread || showOpenSidebar" #primary-items>
 						<!-- One block per group. A page that groups nothing has
 						     a single captionless group, and renders exactly the
 						     flat list it always did. -->
@@ -449,6 +449,20 @@
 							</template>
 							{{ markUnreadLabel }}
 						</NcActionButton>
+						<!-- Board look: the sidebar's own open toggle is hidden (it sat
+						     over the header's last button, where the board draws none), so
+						     the menu opens it. -->
+						<NcActionButton
+							v-if="showOpenSidebar"
+							key="open-sidebar"
+							data-testid="cn-detail-page-open-sidebar"
+							:closeAfterClick="true"
+							@click="openSidebar">
+							<template #icon>
+								<DockRight :size="20" />
+							</template>
+							{{ openSidebarLabel }}
+						</NcActionButton>
 						<!-- Divides the page's own actions from the help links
 						     below. With the help links switched off there is
 						     nothing below to divide from. -->
@@ -745,7 +759,7 @@
 				:layout="section.layout"
 				:editable="section.editable"
 				:columns="12"
-				:columnOpts="columnOpts"
+				:columnOpts="bodyColumnOpts"
 				class="cn-detail-page__grid"
 				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
@@ -1191,6 +1205,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
+import DockRight from 'vue-material-design-icons/DockRight.vue'
 import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import FileQuestionOutline from 'vue-material-design-icons/FileQuestionOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
@@ -1295,6 +1310,35 @@ const DEFAULT_DETAIL_COLUMN_OPTS = Object.freeze({
 	breakpointForWindow: false,
 })
 
+/**
+ * Where the default table stacks when a side column sits beside the body grid.
+ *
+ * The side column takes about 320px, so the grid it leaves is far narrower than
+ * the page: 790px at a 1100px window. Stacking that at 1000px made a row of
+ * small tiles (a KPI row of 5 or 6 stat tiles) impossible beside a side column.
+ * 1000px exists to keep a `gridWidth: 3` side PANEL inside the grid readable; a
+ * page with a real side column has no such panel, and 12 columns at 600px is
+ * still 50px a column, enough for a tile. Below 600px it stacks as before.
+ */
+const SIDE_COLUMN_STACK_WIDTH = 600
+
+/**
+ * Whether `opts` is the untouched default table, so a page that passed its own
+ * `columnOpts` keeps exactly what it asked for.
+ *
+ * @param {object|null} opts The `columnOpts` value.
+ * @return {boolean}
+ */
+function isDefaultColumnOpts(opts) {
+	const breakpoints = opts && opts.breakpoints
+	return !!opts
+		&& opts.columnMax === DEFAULT_DETAIL_COLUMN_OPTS.columnMax
+		&& Array.isArray(breakpoints)
+		&& breakpoints.length === 1
+		&& breakpoints[0].w === DEFAULT_DETAIL_COLUMN_OPTS.breakpoints[0].w
+		&& breakpoints[0].c === 1
+}
+
 /**
  * Event-bus channel a page-level refresh is announced on. The page's own
  * Actions menu emits it, the manifest `refresh` / `api-call` actions bump it,
@@ -1411,6 +1455,7 @@ export default {
 		CnSummaryAggregates,
 		CnDetailHeaderChips,
 		CnFollowToggle,
+		DockRight,
 		EyeOffOutline,
 		CnRelatedCollections,
 		CnBodySections,
@@ -3335,6 +3380,20 @@ export default {
 				.map(({ widget }) => widget)
 		},
 
+		/**
+		 * The `columnOpts` the body grid gets: the default table stacks at 1000px
+		 * of grid width, or at 600px when a side column narrows the grid. An
+		 * explicit `columnOpts` prop is passed through untouched.
+		 *
+		 * @return {object|null} The column options.
+		 */
+		bodyColumnOpts() {
+			if (!this.showsSideColumn || !isDefaultColumnOpts(this.columnOpts)) {
+				return this.columnOpts
+			}
+			return { ...this.columnOpts, breakpoints: [{ w: SIDE_COLUMN_STACK_WIDTH, c: 1 }] }
+		},
+
 		/**
 		 * Whether the side column renders.
 		 *
@@ -3866,6 +3925,22 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * Whether the header menu offers "Open sidebar": the board look, where the
+		 * sidebar's own toggle is hidden, on a page whose sidebar is active and
+		 * closed.
+		 *
+		 * @return {boolean}
+		 */
+		showOpenSidebar() {
+			return this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
+		},
+
+		/** @return {string} Label of the Open sidebar entry. */
+		openSidebarLabel() {
+			return t('nextcloud-vue', 'Open sidebar')
+		},
+
 		/** @return {string} Label of the Mark as unread entry. */
 		markUnreadLabel() {
 			return t('nextcloud-vue', 'Mark as unread')
@@ -4576,6 +4651,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Open the object sidebar through the shared channel.
+		 *
+		 * @return {void}
+		 */
+		openSidebar() {
+			if (this.objectSidebarState) {
+				this.objectSidebarState.open = true
+			}
+		},
+
 		/**
 		 * Start or finish arranging the chosen view. Finishing stores the
 		 * arrangement of every view the user moved, once.

package/src/components/CnDocumentReviewList/CnDocumentReviewWidget.vue

@@ -31,7 +31,7 @@ import { readPath } from '../../utils/readPath.js'
  * Renders CnDocumentReviewList from a list on the bound record:
  * `content: { field, title?, statusField?, statuses?, rowAction?: { label, route } }`.
  * A row action with a `route` opens that route with the row's key as `id`.
- * Resolved by its registry key, not exported.
+ * Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnDocumentReviewWidget',

package/src/components/CnFacetSidebar/CnFacetSidebar.vue

@@ -62,7 +62,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { filtersFromSchema } from '../../utils/schema.js'
 
 /**
@@ -175,12 +175,12 @@ export default {
 
 		getFilterOptions(filter) {
 			// Use facet data if available (live values with counts)
-			const facet = this.facetData[filter.key]
-			if (facet?.values?.length > 0) {
-				return facet.values.map((v) => ({
-					id: v.value,
-					label: facetOptionLabel(v),
-				}))
+			const live = facetOptions(
+				this.facetData[filter.key],
+				(count) => t('nextcloud-vue', 'No value ({count})', { count }),
+			)
+			if (live !== null) {
+				return live
 			}
 			// Fall back to static enum options from schema
 			return filter.options || []

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -140,6 +140,7 @@ import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { resolveEndpointRequest } from '../../composables/useEndpointSource.js'
+import { useRefLabels } from '../../composables/useRefLabels.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
@@ -150,6 +151,35 @@ import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveF
 /** Kinds of entry a `fields[]` item can be. A labelled item without `as` is a row. */
 const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text'])
 
+/**
+ * The label resolver every facts widget on the page shares, made on first use
+ * (the object store needs an active pinia). One batched request per register and
+ * schema for the ids it has not seen; a label it has read stays until the page
+ * reloads, and an object the store already holds is not fetched at all.
+ *
+ * @type {{resolve: Function}|null}
+ */
+let refLabels = null
+
+/** The page-wide reference label resolver. */
+function sharedRefLabels() {
+	if (!refLabels) {
+		refLabels = useRefLabels()
+	}
+	return refLabels
+}
+
+/**
+ * Key of a resolved reference in the widget's `labels` data.
+ *
+ * @param {{register: string, schema: string, labelField?: string}} resolve The entry's `resolve` config.
+ * @param {string} id The referenced object's id.
+ * @return {string} The key.
+ */
+function refKey(resolve, id) {
+	return `${resolve.register}/${resolve.schema}/${resolve.labelField || ''}/${id}`
+}
+
 /** Event-bus channel a reveal of a masked value is announced on, so an app can log it. */
 export const FACTS_REVEAL_CHANNEL = 'cn:facts:reveal'
 
@@ -213,6 +243,7 @@ export default {
 		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`) or `pill`.
 		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
+		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year) or `list` (an array joined by ", ", each item read at `itemPath`).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
@@ -255,6 +286,8 @@ export default {
 			revealed: {},
 			/** Key of the row whose value was just copied. */
 			copied: '',
+			/** Labels of the referenced objects read so far, by `refKey`. */
+			labels: {},
 		}
 	},
 
@@ -430,6 +463,13 @@ export default {
 			},
 		},
 
+		record: {
+			immediate: true,
+			handler() {
+				this.loadLabels()
+			},
+		},
+
 		headerAction: {
 			immediate: true,
 			handler() {
@@ -668,6 +708,94 @@ export default {
 			})
 		},
 
+		/**
+		 * The text of a reference: the labels of the objects its id(s) name, joined
+		 * by ", ". An id whose label is not known yet (or cannot be read) adds nothing.
+		 *
+		 * @param {unknown} raw The id, or a list of ids (or of `{ id }` objects).
+		 * @param {object} spec `{ resolve: { register, schema, labelField? }, itemPath? }`.
+		 * @return {string}
+		 */
+		refText(raw, spec) {
+			return this.refIds(raw, spec)
+				.map((id) => this.labels[refKey(spec.resolve, id)])
+				.filter((label) => typeof label === 'string' && label !== '')
+				.join(', ')
+		},
+
+		/**
+		 * The ids a reference value holds.
+		 *
+		 * @param {unknown} raw The value.
+		 * @param {object} spec `{ itemPath? }`.
+		 * @return {string[]}
+		 */
+		refIds(raw, spec) {
+			return (Array.isArray(raw) ? raw : [raw])
+				.map((item) => (item && typeof item === 'object' ? (spec.itemPath ? readPath(item, spec.itemPath) : (item.id ?? item.uuid)) : item))
+				.filter((id) => id !== null && id !== undefined && id !== '' && typeof id !== 'object')
+				.map(String)
+		},
+
+		/**
+		 * Every entry or part that carries `resolve`, with the record's value at its path.
+		 *
+		 * @param {object} record The object.
+		 * @return {Array<{spec: object, raw: unknown}>}
+		 */
+		refSpecs(record) {
+			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const specs = []
+			const visit = (spec) => {
+				if (!spec || typeof spec !== 'object') {
+					return
+				}
+				if (spec.resolve && typeof spec.resolve === 'object' && spec.path) {
+					specs.push({ spec, raw: readPath(record, spec.path) })
+				}
+				const nested = [...(Array.isArray(spec.parts) ? spec.parts : []), ...(Array.isArray(spec.title) ? spec.title : [spec.title]), ...(Array.isArray(spec.subtitle) ? spec.subtitle : [spec.subtitle])]
+				nested.forEach(visit)
+			}
+			fields.forEach(visit)
+			return specs
+		},
+
+		/**
+		 * Read the labels of the referenced objects, one batched request per
+		 * register and schema, and keep them in `labels`.
+		 *
+		 * @param {object|null} record The object shown (defaults to the current record).
+		 * @return {Promise<void>}
+		 */
+		async loadLabels(record = this.record) {
+			if (!record) {
+				return
+			}
+			const groups = new Map()
+			for (const { spec, raw } of this.refSpecs(record)) {
+				const { register, schema, labelField } = spec.resolve
+				if (!register || !schema) {
+					continue
+				}
+				const groupKey = `${register}/${schema}/${labelField || ''}`
+				const group = groups.get(groupKey) || { resolve: spec.resolve, ids: new Set() }
+				this.refIds(raw, spec).forEach((id) => group.ids.add(id))
+				groups.set(groupKey, group)
+			}
+			if (groups.size === 0) {
+				return
+			}
+			const resolver = sharedRefLabels()
+			const next = { ...this.labels }
+			await Promise.all([...groups.values()].map(async ({ resolve, ids }) => {
+				const found = await resolver.resolve(resolve.register, resolve.schema, [...ids], resolve.labelField)
+				Object.entries(found).forEach(([id, label]) => {
+					next[refKey(resolve, id)] = label
+				})
+			}))
+			this.labels = next
+		},
+
 		/**
 		 * Read the source object.
 		 *
@@ -774,6 +902,9 @@ export default {
 			if (raw === null || raw === undefined || raw === '') {
 				return ''
 			}
+			if (spec.resolve && typeof spec.resolve === 'object') {
+				return this.refText(raw, spec)
+			}
 			const format = spec.format || 'text'
 			if (format === 'list' || Array.isArray(raw)) {
 				const items = (Array.isArray(raw) ? raw : [raw])
@@ -887,12 +1018,21 @@ export default {
 	display: contents;
 }
 
-.cn-facts-widget__label {
+/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding), which
+   pushed the label to the right of its column and added 12px around both. The
+   class is doubled so these resets outrank that rule, and a dossiq-style
+   `:deep()` override in an app is not needed. */
+.cn-facts-widget__label.cn-facts-widget__label {
+	margin: 0;
+	padding: 0;
+	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
 
-.cn-facts-widget__value {
+.cn-facts-widget__value.cn-facts-widget__value {
 	margin: 0;
+	padding: 0;
+	text-align: start;
 	font-weight: 500;
 	min-width: 0;
 	overflow-wrap: anywhere;