@conduction/nextcloud-vue 2.83.0 → 2.85.0

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -28,21 +28,21 @@
 
 		<div class="grid-stack">
 			<div
-				v-for="(item, index) in layout"
+				v-for="item in itemsInRowOrder"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
 				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
-				:aria-label="resolveItemLabel(item, index)"
+				:aria-label="resolveItemLabel(item, layout.indexOf(item))"
 				:aria-describedby="itemDescribedBy"
 				:tabindex="itemTabindex"
 				:gs-id="item.id"
 				:gs-x="item.gridX"
-				:gs-y="item.gridY"
+				:gs-y="scaledRow(item.gridY)"
 				:gs-w="item.gridWidth"
-				:gs-h="item.gridHeight"
+				:gs-h="scaledRow(item.gridHeight)"
 				:gs-min-w="minWidth"
-				:gs-min-h="minHeight"
+				:gs-min-h="minRows(item)"
 				:gs-size-to-content="sizeToContentAttr(item)"
 				@keydown="onItemKeydown($event, item)">
 				<div class="grid-stack-item-content">
@@ -71,6 +71,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { GridStack } from 'gridstack'
+import { planGrowth } from '../../utils/gridStack.js'
 // `gridstack` is a peerDependency (see package.json), not bundled — this
 // component's JS and the consumer's GridStack stylesheet MUST come from the
 // exact same installed copy, because GridStack's JS writes layout state
@@ -99,6 +100,24 @@ let domIdCounter = 0
  */
 const MENU_ANCHOR_OFFSET = 8
 
+/**
+ * How many GridStack rows a layout row is drawn as on a grid with
+ * size-to-content cells (`wantsRowSplit`): 80px rows become 10px rows.
+ */
+const ROW_SPLIT = 8
+
+/**
+ * Whether a layout holds a size-to-content cell (`sizeToContent` true or a
+ * positive row maximum).
+ *
+ * @param {Array<object>} layout The layout items.
+ * @return {boolean} True when one does.
+ */
+function hasFitCell(layout) {
+	return Array.isArray(layout) && layout.some((item) => item
+		&& (item.sizeToContent === true || (Number.isFinite(item.sizeToContent) && item.sizeToContent > 0)))
+}
+
 /**
  * CnDashboardGrid — Low-level grid layout engine powered by GridStack.
  *
@@ -304,10 +323,62 @@ export default {
 			 * on that.
 			 */
 			reflowed: false,
+			/**
+			 * How many GridStack rows one layout row is drawn as: 1, or
+			 * ROW_SPLIT while `wantsRowSplit` holds. Set before the first render,
+			 * since GridStack reads the items' places from their attributes,
+			 * and again when the grid is rebuilt.
+			 */
+			rowSplit: (!this.editable && !this.float && hasFitCell(this.layout)) ? ROW_SPLIT : 1,
 		}
 	},
 
 	computed: {
+		/**
+		 * The layout's items top to bottom, then left to right: the order the
+		 * items are in the page, so GridStack places them in that order.
+		 *
+		 * GridStack sizes a size-to-content cell while it adds the items, one
+		 * at a time, and an item it adds onto a cell that has already grown
+		 * moves itself below whatever it then collides with. In the layout's
+		 * own order a card declared after the lists (pipelinq's full-width
+		 * "client in focus" card) was added last, so when the banner above
+		 * it grew it skipped past the stat tiles AND the lists and landed at
+		 * the bottom. Added top to bottom, every card lands under the one
+		 * above it. It is also the order a screen reader and the Tab key
+		 * follow. An item without a row or column sorts after the items
+		 * that have one, in the layout's order.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {Array<object>} The items in row order.
+		 */
+		itemsInRowOrder() {
+			const items = Array.isArray(this.layout) ? [...this.layout] : []
+			const at = (value) => (Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER)
+			return items.sort((a, b) => (at(a.gridY) - at(b.gridY)) || (at(a.gridX) - at(b.gridX)))
+		},
+
+		/**
+		 * Whether the grid draws each layout row as ROW_SPLIT finer rows. A
+		 * size-to-content cell can only be a whole number of rows tall, so on
+		 * 80px rows it kept up to a row of empty space under its content and
+		 * a packing grid (`float: false`) could not close it (pipelinq and
+		 * dossiq Mijn werk, decidiq Mijn acties). Split into 10px rows the
+		 * cell ends within 10px of its content and the widgets below move up.
+		 *
+		 * Only in view mode, only on a packing grid with a size-to-content
+		 * cell: every other grid is built exactly as before. Item positions
+		 * and sizes scale with the rows, so every widget keeps its pixel
+		 * place and size until a cell shrinks; the layout itself, what edit
+		 * mode shows and what `layout-change` reports, stays in layout rows.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @return {boolean} True to split the rows.
+		 */
+		wantsRowSplit() {
+			return !this.editable && !this.float && hasFitCell(this.layout)
+		},
+
 		/**
 		 * @return {boolean} Whether the keyboard lane is live — items are
 		 *   focusable and the arrow keys reposition. Requires the opt-in prop,
@@ -374,6 +445,12 @@ export default {
 			this.syncInteractivity()
 		},
 
+		wantsRowSplit(wants) {
+			if (this.grid && (wants ? ROW_SPLIT : 1) !== this.rowSplit) {
+				this.rebuildGrid()
+			}
+		},
+
 		layout: {
 			deep: true,
 			handler(newLayout) {
@@ -433,11 +510,75 @@ export default {
 			}
 			// A number is GridStack's "size to content, but never taller than N rows" (a maximum).
 			if (Number.isFinite(v) && v > 0) {
-				return String(v)
+				return String(v * this.rowSplit)
 			}
 			return undefined
 		},
 
+		/**
+		 * A layout row coordinate or height in GridStack rows (`rowSplit`).
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @param {number|undefined} value The value in layout rows.
+		 * @return {number|undefined} The value in grid rows, or undefined when none is set.
+		 */
+		scaledRow(value) {
+			return Number.isFinite(value) ? value * this.rowSplit : undefined
+		},
+
+		/**
+		 * The smallest height an item may take, in grid rows: `minHeight`
+		 * layout rows, except for a size-to-content cell on split rows, which
+		 * may shrink to its content down to one grid row. The minimum is for
+		 * resizing by hand, and that only happens on whole rows in edit mode.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @param {object} item The layout item.
+		 * @return {number} The minimum height in grid rows.
+		 */
+		minRows(item) {
+			if (this.rowSplit !== 1 && this.sizeToContentAttr(item) !== undefined) {
+				return 1
+			}
+			return this.minHeight * this.rowSplit
+		},
+
+		/**
+		 * Build the grid again with the row split `wantsRowSplit` asks for, as
+		 * edit mode turns on or off: the items go back to their layout places in
+		 * the new rows, and the size-to-content cells are measured again.
+		 *
+		 * @spec openspec/changes/dashboard-fit-cells-close-up/specs/dashboard-grid/spec.md#requirement-a-size-to-content-cell-ends-at-its-content
+		 * @return {void}
+		 */
+		rebuildGrid() {
+			this.disconnectContentObserver()
+			this.grid.destroy(false)
+			this.grid = null
+			this.rowSplit = this.wantsRowSplit ? ROW_SPLIT : 1
+			this.$nextTick(() => {
+				if (!this.$refs.gridContainer) {
+					return
+				}
+				// GridStack wrote its own places onto the items; put the layout's back.
+				for (const item of this.layout) {
+					const el = this.$refs.gridContainer.querySelector(`[gs-id="${item.id}"]`)
+					if (!el) {
+						continue
+					}
+					for (const [name, value] of [['gs-y', this.scaledRow(item.gridY)], ['gs-h', this.scaledRow(item.gridHeight)], ['gs-min-h', this.minRows(item)], ['gs-size-to-content', this.sizeToContentAttr(item)]]) {
+						if (value === undefined) {
+							el.removeAttribute(name)
+						} else {
+							el.setAttribute(name, String(value))
+						}
+					}
+				}
+				this.initGrid()
+				this.observeContentSizes()
+			})
+		},
+
 		/**
 		 * Build the accessible name for a grid item. A custom `itemLabel` wins
 		 * outright; otherwise the first human-readable field on the item is used
@@ -492,6 +633,13 @@ export default {
 			)
 		},
 
+		/**
+		 * Build the GridStack grid on the rendered items, install the growth
+		 * wrapper (`keepOrderOnGrowth`) and listen for its changes.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {void}
+		 */
 		initGrid() {
 			if (this.cellHeightCssVar && typeof document !== 'undefined' && document.documentElement) {
 				document.documentElement.style.setProperty(this.cellHeightCssVar, `${this.cellHeight}px`)
@@ -499,7 +647,7 @@ export default {
 			const el = this.$refs.gridContainer.querySelector('.grid-stack')
 			this.grid = GridStack.init({
 				column: this.columns,
-				cellHeight: this.cellHeight,
+				cellHeight: this.cellHeight / this.rowSplit,
 				margin: this.margin,
 				float: this.float,
 				animate: true,
@@ -508,6 +656,7 @@ export default {
 				removable: false,
 				...(this.columnOpts ? { columnOpts: this.columnOpts } : {}),
 			}, el)
+			this.keepOrderOnGrowth()
 
 			this.grid.on('change', (_event, items) => {
 				this.handleGridChange(items)
@@ -519,6 +668,87 @@ export default {
 			this.syncInteractivity()
 		},
 
+		/**
+		 * Let a size-to-content cell that grows push the cards under it down in
+		 * their order. GridStack resolves that collision itself, but not in
+		 * order: when pipelinq's banner grew from two rows to three, the
+		 * full-width card under the stat tiles landed below the lists, also
+		 * with `float: false`. Every grow after the grid is built, whether
+		 * GridStack measures it on resize or this grid's content observer asks
+		 * for it, now first moves the cards the growth reaches down by the
+		 * growth (`planGrowth`), bottom-most first, and only then grows the
+		 * cell, so GridStack has no collision left to resolve. The wrapper is
+		 * installed after `GridStack.init` has already measured the cells on
+		 * load; the order on load comes from adding the items in row order
+		 * (`itemsInRowOrder`). A cell that shrinks is left to GridStack as
+		 * before.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @return {void}
+		 */
+		keepOrderOnGrowth() {
+			const grid = this.grid
+			if (!grid || typeof grid.resizeToContent !== 'function' || typeof grid.update !== 'function') {
+				return
+			}
+			const resize = grid.resizeToContent.bind(grid)
+			grid.resizeToContent = (el) => {
+				const node = el && el.gridstackNode
+				const nodes = grid.engine && Array.isArray(grid.engine.nodes) ? grid.engine.nodes : null
+				const rows = node && nodes ? this.contentRows(el, node) : null
+				const plan = rows ? planGrowth(nodes, node, rows) : []
+				if (plan.length === 0) {
+					resize(el)
+					return
+				}
+				// Inside a batch the moves are not packed until the cell has grown.
+				const batching = Boolean(grid.engine.batchMode)
+				if (!batching) {
+					grid.batchUpdate()
+				}
+				for (const step of plan) {
+					grid.update(step.node.el, { y: step.y })
+				}
+				resize(el)
+				if (!batching) {
+					grid.batchUpdate(false)
+				}
+			}
+		},
+
+		/**
+		 * The rows a size-to-content cell needs for its content, measured the
+		 * way GridStack's `resizeToContent` measures it (the content's first
+		 * child, plus the cell's own padding), within its size-to-content row
+		 * maximum and its minimum and maximum height.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @param {HTMLElement} el The cell.
+		 * @param {object} node Its GridStack node.
+		 * @return {number|null} The rows, or null when it cannot be measured.
+		 */
+		contentRows(el, node) {
+			const cell = this.grid.getCellHeight(true)
+			const item = el.querySelector('.grid-stack-item-content')
+			const child = item && item.firstElementChild
+			if (!el.clientHeight || !cell || !child || !Number.isFinite(node.h)) {
+				return null
+			}
+			const padding = el.clientHeight - item.clientHeight
+			const itemHeight = node.h * cell - padding
+			const wanted = child.getBoundingClientRect().height || itemHeight
+			let rows = Math.ceil((node.h * cell + wanted - itemHeight) / cell)
+			if (Number.isInteger(node.sizeToContent) && rows > node.sizeToContent) {
+				rows = node.sizeToContent
+			}
+			if (node.minH && rows < node.minH) {
+				rows = node.minH
+			} else if (node.maxH && rows > node.maxH) {
+				rows = node.maxH
+			}
+			return rows
+		},
+
 		/**
 		 * Keep both editing lanes in step with whether an edit could actually be
 		 * kept: the pointer's handles, and — through `reflowed` feeding
@@ -586,6 +816,12 @@ export default {
 			if (this.isReflowed()) {
 				return
 			}
+			// A grid on split rows is a view-mode grid: what changes in it is
+			// packing and size-to-content measuring, never a user's
+			// arrangement, and it is not reported as one.
+			if (this.rowSplit !== 1) {
+				return
+			}
 			if (!items || items.length === 0) {
 				return
 			}
@@ -986,7 +1222,7 @@ export default {
 						// grid's own position back, which matches and does
 						// nothing here.
 						const x = item.gridX ?? node.x
-						const y = item.gridY ?? node.y
+						const y = Number.isFinite(item.gridY) ? item.gridY * this.rowSplit : 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

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -395,6 +395,7 @@
 					<CnStatsBlockWidget
 						v-bind="getStatsBlockProps(item)"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:data-source="getWidgetDataSource(item)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -420,7 +421,7 @@
 						:is="registryRenderer(item)"
 						:widgetId="item.widgetId"
 						:content="registryWidgetBindings(item)"
-						v-bind="registryWidgetBindings(item)"
+						v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 						@header="onWidgetHeader(item, $event)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -433,6 +434,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="false"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -494,6 +496,7 @@
 				<CnWidgetWrapper
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)">
 					<!-- Compact on purpose: a two-row tile is about 150px, less
 					     a title row. NcEmptyContent's 64px icon, 20px name,
@@ -532,6 +535,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -613,6 +617,7 @@
 						:widgetId="item.widgetId"
 						:class="{ 'cn-dashboard-page__chart-fit': isChartFitted(item) }"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -691,6 +696,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -718,6 +724,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -757,6 +764,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -782,6 +790,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:showTitle="widgetShowTitle(item)"
 						:showActions="widgetShowActions(item)"
 						:showRefresh="getWidgetShowRefresh(item)"
@@ -873,7 +882,7 @@
 							:is="registryRenderer(item)"
 							:widgetId="item.widgetId"
 							:content="registryWidgetBindings(item)"
-							v-bind="registryWidgetBindings(item)"
+							v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 							@header="onWidgetHeader(item, $event)" />
 					</CnWidgetWrapper>
 				</template>
@@ -882,6 +891,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -2944,6 +2954,7 @@ export default {
 			return {
 				widgetId: item.widgetId,
 				title: this.getWidgetTitle(item),
+				eyebrow: this.getWidgetEyebrow(item),
 				showTitle: this.widgetShowTitle(item),
 				showActions: this.widgetShowActions(item),
 				showRefresh: this.getWidgetShowRefresh(item),
@@ -3630,6 +3641,35 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * What a container widget (registry `container`, such as `tabs`) needs
+		 * beside its content: the page's widget definitions, so its tabs find
+		 * the widgets they name, and the consumer registry for custom child
+		 * types. Empty for every other widget, so a leaf gets no extra
+		 * attributes on its root.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {object} The extra bindings.
+		 * @spec openspec/changes/dashboard-tabs-children/specs/dashboard-page/spec.md#requirement-a-tabs-widget-on-a-dashboard-renders-the-widgets-its-tabs-name
+		 */
+		containerBindings(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			if (!def || !def.type) {
+				return {}
+			}
+			const entry = getWidgetTypeEntry(def.type) || getWidgetTypeEntry(canonicalWidgetType(def.type))
+			if (!entry || entry.container !== true) {
+				return {}
+			}
+			const own = Array.isArray(this.widgets) ? this.widgets.filter(Boolean) : []
+			const fromView = this.activeView && Array.isArray(this.activeView.widgets) ? this.activeView.widgets.filter(Boolean) : []
+			return {
+				availableWidgets: [...own, ...fromView],
+				cnRegistry: this.cnRegistry || {},
+				surface: this.surface,
+			}
+		},
+
 		/**
 		 * A widget's content with the board's quiet collection footer: in the
 		 * board look a dashboard that drops the widget Actions menu
@@ -4002,6 +4042,21 @@ export default {
 			this.showWidgetConfig = false
 		},
 
+		/**
+		 * The line above a widget's title (`eyebrow` on the widget
+		 * definition: "Saldo per week" above "Prognose 13 weken"), through the
+		 * host translate, or '' for none.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {string}
+		 * @spec openspec/changes/widget-title-eyebrow/specs/dashboard-page/spec.md#requirement-a-widget-card-can-carry-a-line-above-its-title
+		 */
+		getWidgetEyebrow(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			const eyebrow = def && typeof def.eyebrow === 'string' ? def.eyebrow : ''
+			return eyebrow ? this.effectiveTranslate(eyebrow) : ''
+		},
+
 		/**
 		 * The widget's title as AUTHORED — the untranslated manifest source
 		 * string — resolved by widget id rather than by item, so a descendant
@@ -4587,6 +4642,11 @@ export default {
 			if (columns !== undefined) {
 				out.columns = Number(columns)
 			}
+			// `tiles: "box"`: each grid tile on a surface of its own.
+			const tiles = content.tiles !== undefined ? content.tiles : props.tiles
+			if (typeof tiles === 'string') {
+				out.tiles = tiles
+			}
 			const contentEntries = content.entries !== undefined ? content.entries : props.entries
 			if (contentEntries !== undefined) {
 				out.entries = contentEntries

package/src/components/CnDeltaWidget/CnDeltaWidget.vue

@@ -511,7 +511,7 @@ export default {
 		 * @return {string} The formatted string.
 		 */
 		formatNumber(value) {
-			return formatMetricValue(value, this.resolvedFormat, unwrapAppConfig(this.cnAppConfig))
+			return formatMetricValue(value, this.resolvedFormat, unwrapAppConfig(this.cnAppConfig), null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.md

@@ -446,6 +446,8 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 `headerCard` (default `false`) draws the header as a bordered card. `headerWidget` (default `''`) names a widget in `widgets` to render inside the header under the title, without a card of its own and out of the body grid: the stages bars of the board's case card.
 
+`visibilityContext` (default `{}`) names records the page reads beside the loaded one, `{ <name>: { field, register, schema } }`. A grid widget's `visibleWhen` is read against the record, and against those records as `@context.<name>.<path>`, so a case page can show a widget for some case types only (`{ "field": "@context.caseType.category", "op": "in", "value": ["Sociaal domein"] }`). A widget without `visibleWhen` shows as before; a conditional one stays out of the grid until the record and the named records have loaded.
+
 `showWidgetActions` (Boolean, default `true`): `false` (manifest `config.showWidgetActions: false`) drops the overflow Actions menu from the cards of the body grid and the side column, unless a widget definition sets `showActions: true`.
 
 ### Favourite and follow
@@ -458,4 +460,4 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 ### The board look
 
-`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). See `docs/components/cn-detail-page.md`.
+`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). `titleField` (String): the record field the header names the record by, such as an invoice number (manifest `config.titleField`); an empty value falls back to the display name. See `docs/components/cn-detail-page.md`.