@conduction/nextcloud-vue 2.92.0 → 2.94.0

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -54,11 +54,14 @@
 					class="cn-widget-wrapper__icon" />
 				<!-- An eyebrow (`eyebrow`) is a muted line above the title:
 				     "Saldo per week" above "Prognose 13 weken". -->
-				<div v-if="resolvedEyebrow" class="cn-widget-wrapper__title-stack">
-					<span class="cn-widget-wrapper__eyebrow" data-testid="cn-widget-wrapper-eyebrow">{{ resolvedEyebrow }}</span>
+				<!-- A subtitle (`subtitle`) is a muted line under the title:
+				     "Dit kwartaal, beslist binnen de termijn". -->
+				<div v-if="resolvedEyebrow || resolvedSubtitle" class="cn-widget-wrapper__title-stack">
+					<span v-if="resolvedEyebrow" class="cn-widget-wrapper__eyebrow" data-testid="cn-widget-wrapper-eyebrow">{{ resolvedEyebrow }}</span>
 					<h3 :id="titleId" class="cn-widget-wrapper__title">
 						{{ resolvedTitle }}
 					</h3>
+					<span v-if="resolvedSubtitle" class="cn-widget-wrapper__subtitle" data-testid="cn-widget-wrapper-subtitle">{{ resolvedSubtitle }}</span>
 				</div>
 				<h3 v-else :id="titleId" class="cn-widget-wrapper__title">
 					{{ resolvedTitle }}
@@ -225,6 +228,18 @@ export default {
 		CnActionsMenu,
 	},
 
+	provide() {
+		return {
+			/**
+			 * Whether this card draws a title row, so a widget inside it can
+			 * leave out a heading of its own (nc-widget-header).
+			 *
+			 * @return {boolean}
+			 */
+			cnWidgetTitled: () => this.titleVisible && Boolean(this.displayTitle),
+		}
+	},
+
 	inject: {
 		/**
 		 * Host translate function provided by CnAppRoot as
@@ -252,6 +267,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A muted line under the title, such as the period a chart covers.
+		 * Run through the host translate function. Empty draws none.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-widget-card-can-carry-a-line-under-its-title
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+
 		/** Whether to show the header with title */
 		showTitle: {
 			type: Boolean,
@@ -721,6 +747,15 @@ export default {
 			return this.eyebrow ? this.effectiveTranslate(this.eyebrow) : ''
 		},
 
+		/**
+		 * The subtitle run through the host translate function.
+		 *
+		 * @return {string}
+		 */
+		resolvedSubtitle() {
+			return this.subtitle ? this.effectiveTranslate(this.subtitle) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -1163,6 +1198,12 @@ export default {
 	min-width: 0;
 }
 
+.cn-widget-wrapper__subtitle {
+	font-size: 13px;
+	line-height: 1.3;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-widget-wrapper__eyebrow {
 	font-size: 13px;
 	line-height: 1.3;

package/src/composables/indexSources.js

@@ -267,6 +267,15 @@ function tasksSource() {
 		 */
 		loading: () => !!store.loading,
 
+		/**
+		 * Count the inbox for a config without touching the rows on screen,
+		 * for a quick-filter tab with `showCount`.
+		 *
+		 * @param {object} config The merged config, as for `load`.
+		 * @return {Promise<number>} The datastore total.
+		 */
+		count: async (config) => (await store.fetchFor({ ...(config || {}), limit: 1 })).total,
+
 		columns: [
 			{ key: 'title', label: t('nextcloud-vue', 'Task') },
 			{ key: 'subjectLabel', label: t('nextcloud-vue', 'Subject') },

package/src/css/dialog.css

@@ -203,3 +203,64 @@
 .cn-dialog__confirm-pending {
 	opacity: 0.45;
 }
+
+/* On a phone the board dialog is a bottom sheet (board PqMobiel): full width,
+   anchored to the bottom, as tall as its content up to the screen less the
+   header, a 16px top radius and a grab bar. The footer buttons share the row. */
+@media (max-width: 600px) {
+	.modal-mask.cn-dialog-board .modal-wrapper .modal-container,
+	.modal-mask.cn-dialog-board .modal-wrapper--normal > .modal-container {
+		position: absolute;
+		inset: auto 0 0;
+		width: 100%;
+		max-width: 100%;
+		height: auto;
+		max-height: calc(100% - var(--header-height, 50px));
+		border-radius: 16px 16px 0 0;
+	}
+
+	.modal-mask.cn-dialog-board .modal-container::before {
+		content: '';
+		display: block;
+		flex: none;
+		width: 40px;
+		height: 4px;
+		margin: 8px auto 0;
+		border-radius: 2px;
+		background: var(--color-border-dark);
+	}
+
+	.modal-mask.cn-dialog-board .modal-container {
+		flex-direction: column;
+	}
+
+	.cn-dialog-board .dialog {
+		height: auto;
+		min-height: 0;
+	}
+
+	.cn-dialog-board .dialog__content {
+		flex: 0 1 auto;
+		overflow-y: auto;
+	}
+
+	.cn-dialog-board .dialog__actions > .button-vue,
+	.cn-dialog-board .dialog__actions > * {
+		flex: 1 1 0;
+		min-height: 44px;
+	}
+}
+
+/* Above a phone the boards top-align a dialog (DqNieuweZaak, DqUwWachtrij,
+   DqVolgendeStap: the top edge sits about 90px down at 1440 wide) instead of
+   centring it. `--cn-dialog-top` moves it. */
+@media (min-width: 601px) {
+	.modal-mask.cn-dialog-board .modal-wrapper {
+		align-items: flex-start;
+	}
+
+	.modal-mask.cn-dialog-board .modal-wrapper .modal-container {
+		margin-top: var(--cn-dialog-top, 88px);
+		max-height: calc(100% - var(--cn-dialog-top, 88px) - 24px);
+	}
+}

package/src/css/look-board-detail.css

@@ -660,3 +660,11 @@
 .cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
 	display: none;
 }
+
+/* Below 768px the header is a column (detail-page.css), where the 320px basis
+   above would be a 320px HEIGHT: the title sat in a band of white on a phone. */
+@media (max-width: 768px) {
+	.cn-look-board .cn-detail-page__header--board > :first-child {
+		flex: none;
+	}
+}

package/src/css/look-board-index.css

@@ -481,10 +481,11 @@
 	border-radius: 0;
 }
 
+/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
 	padding: 12px 16px;
 	border-bottom: 0;
-	background: var(--color-background-hover);
+	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	color: var(--color-text-maxcontrast);
 	font-weight: 600;
 }
@@ -542,6 +543,15 @@
 	max-width: calc(100% - 26px);
 }
 
+/* The board's funnel: a 22px button 4px after the sort chevron. */
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__filter {
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	min-height: 22px;
+	margin-inline-start: 4px;
+}
+
 /* The selection column: 18px checkboxes, 28px of content after 16px of padding.
    The box model is set with `!important` and the widths include the padding:
    Nextcloud's server.css sets `box-sizing: border-box` on everything under
@@ -747,6 +757,14 @@
 	padding: 0 12px;
 }
 
+/* The inert Next of a single page: a faint outline, muted text. */
+.cn-look-board .cn-pagination--board .cn-pagination__board-link--disabled {
+	display: inline-flex;
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
 .cn-look-board .cn-pagination--board .cn-pagination__board-link--current {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element);
@@ -1028,3 +1046,11 @@
 	padding: 0 12px;
 	border-radius: 8px;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) sits over the content's top-right corner, which
+   on an index page is the primary header button: a stray dark square on
+   "New contact". The board draws none; the Filter button opens the sidebar. */
+.cn-look-board:has(.cn-index-page) > .app-sidebar__toggle {
+	display: none;
+}

package/src/css/look-board.css

@@ -591,6 +591,66 @@
 	max-width: none;
 }
 
+/* A Nextcloud text field or text area in a board settings card has its label
+   above the control (14px/600), as the boards draw it (PqBeheer Leadbeheer,
+   PqBeheerKassa Btw), instead of floating inside the border. The label stays
+   the field's own `<label for>`; it moves out of the control and the field
+   makes room for it. With the label outside, the placeholder shows at rest.
+   @spec openspec/changes/settings-section-board-fields/specs/settings-board-look/spec.md#requirement-a-settings-card-labels-its-text-fields-above-the-control */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label),
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field__input + .input-field__label,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input + .textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input:not(:focus):not(.textarea__input--label-outside)::placeholder {
+	opacity: 1 !important;
+}
+
+/* The support card at the end of an admin page (`supportPosition: "end"`,
+   board PqBeheer): one row, the title then the lines, wrapping in a narrow
+   window, with less padding than a settings card.
+   @spec openspec/changes/admin-shell-support-end/specs/settings-board-look/spec.md#requirement-support-can-be-its-own-card-at-the-end */
+.cn-look-board .settings-section.cn-admin-settings-shell__support:not(.cn-look-nextcloud *) {
+	flex-direction: row !important;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px 24px;
+	padding: 16px 24px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .settings-section__name {
+	font-size: 16px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .cn-settings-section__content {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px 24px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .cn-admin-settings-shell__support-line {
+	margin: 0;
+	font-size: 14px;
+}
+
 /* The section footer is the save row: the hairline replaces its own rule. */
 .cn-look-board .settings-section .cn-settings-section__footer {
 	margin: 0;

package/src/css/page-header.css

@@ -61,3 +61,19 @@
 	white-space: nowrap;
 	border: 0;
 }
+
+/* The breadcrumb and meta line under the title (CnHeaderTrail). In the board
+   look it takes the detail header row's styles; here it only lays the crumbs,
+   the dot and the note out on one line. */
+.cn-header-trail {
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--default-grid-baseline);
+	margin-bottom: var(--default-grid-baseline);
+}
+
+.cn-header-trail .cn-detail-page__breadcrumbs {
+	margin-bottom: 0;
+}

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.108.0",
+	"version": "2.115.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -533,6 +533,21 @@
 		}
 	},
 	"$defs": {
+		"breadcrumbCrumb": {
+			"type": "object",
+			"additionalProperties": false,
+			"required": ["label"],
+			"description": "One breadcrumb crumb (config.breadcrumb).",
+			"properties": {
+				"label": { "type": "string", "minLength": 1 },
+				"route": { "type": "string" },
+				"params": { "type": "object", "additionalProperties": true },
+				"href": { "type": "string" },
+				"icon": { "type": "string", "minLength": 1, "description": "Optional MDI icon name (e.g. `Home`) drawn as the first crumb instead of the label, which then becomes its accessible name (zuiddrecht-pixel-gaps-2). Without it the label shows as text." },
+				"currentField": { "type": "string", "minLength": 1, "description": "A field of the record (dotted path, e.g. `identifier`) whose value is the current crumb instead of the display name; an empty value falls back to the display name (zuiddrecht-pixel-gaps-3)." },
+				"separator": { "type": "string", "minLength": 1, "maxLength": 3, "description": "Text drawn between the crumbs (e.g. `/`) instead of the chevron (zuiddrecht-pixel-gaps-3)." }
+			}
+		},
 		"rowIndicator": {
 			"type": "object",
 			"additionalProperties": false,
@@ -4259,7 +4274,7 @@
 						"headerMeta": {
 							"type": "string",
 							"minLength": 1,
-							"description": "type='detail', board look: the meta line on row 2 of the header, after the breadcrumb and a middle dot (screens-detail-page-parity). A field template such as `\"via {channel}\"`: every `{path}` is read from the record, and a line with an empty value is dropped. Maps to CnDetailPage `headerMeta`."
+							"description": "type='detail', board look: the meta line on row 2 of the header, after the breadcrumb and a middle dot (screens-detail-page-parity). A field template such as `\"via {channel}\"`: every `{path}` is read from the record, and a line with an empty value is dropped. Maps to CnDetailPage `headerMeta`. type='index' | 'dashboard' | 'settings' (page-header-breadcrumb): the note after the breadcrumb and a middle dot under the title; on an index page `{total}` and `{shown}` are the list's counts."
 						},
 						"tabsLabel": {
 							"type": "string",
@@ -4285,10 +4300,16 @@
 						"greeting": {
 							"oneOf": [
 								{ "type": "boolean" },
-								{ "type": "string", "enum": ["first", "full"] }
+								{ "type": "string", "enum": ["first", "full", "date"] },
+								{
+									"type": "object",
+									"required": ["label"],
+									"additionalProperties": false,
+									"properties": { "label": { "type": "string", "minLength": 1, "description": "i18n key drawn where the greeting would be." } }
+								}
 							],
 							"default": false,
-							"description": "type='dashboard': greet the reader in the header subtitle. `true` or \"first\" writes \"Good afternoon, Pieter · Monday 5 October 2026\", \"full\" uses the whole display name; the page `description` follows after another middle dot (screens-dashboard-greeting-header). Maps to CnDashboardPage `greeting`."
+							"description": "type='dashboard': greet the reader in the header subtitle. `true` or \"first\" writes \"Good afternoon, Pieter · Monday 5 October 2026\", \"full\" uses the whole display name; the page `description` follows after another middle dot (screens-dashboard-greeting-header). Since 2.111.0 \"date\" leads with the date alone (\"Tuesday 7 October 2026 · ...\") and `{ \"label\": \"Customer contact\" }` puts the translated label where the greeting would be (dashboard-greeting-label). Maps to CnDashboardPage `greeting`."
 						},
 						"viewLinks": {
 							"type": "array",
@@ -4493,19 +4514,11 @@
 							"description": "type='detail': `false` drops the type eyebrow (the type label above the record name) once the record resolves, for a header that says the type in a pill instead (zuiddrecht-pixel-gaps). Maps to CnDetailPage `showTypeEyebrow`."
 						},
 						"breadcrumb": {
-							"type": "object",
-							"additionalProperties": false,
-							"required": ["label"],
-							"description": "type='detail': a breadcrumb line above the header (zuiddrecht-pixel-gaps): this crumb names the list the record belongs to (`route` + optional `params`, or `href`), the record's display name follows as the current crumb. Maps to CnDetailPage `breadcrumb`.",
-							"properties": {
-								"label": { "type": "string", "minLength": 1 },
-								"route": { "type": "string" },
-								"params": { "type": "object", "additionalProperties": true },
-								"href": { "type": "string" },
-								"icon": { "type": "string", "minLength": 1, "description": "Optional MDI icon name (e.g. `Home`) drawn as the first crumb instead of the label, which then becomes its accessible name (zuiddrecht-pixel-gaps-2). Without it the label shows as text." },
-								"currentField": { "type": "string", "minLength": 1, "description": "A field of the record (dotted path, e.g. `identifier`) whose value is the current crumb instead of the display name; an empty value falls back to the display name (zuiddrecht-pixel-gaps-3)." },
-								"separator": { "type": "string", "minLength": 1, "maxLength": 3, "description": "Text drawn between the crumbs (e.g. `/`) instead of the chevron (zuiddrecht-pixel-gaps-3)." }
-							}
+							"description": "A breadcrumb line. type='detail' (zuiddrecht-pixel-gaps): one crumb naming the list the record belongs to (`route` + optional `params`, or `href`); the record's display name follows as the current crumb. Maps to CnDetailPage `breadcrumb`. type='index' | 'dashboard' | 'settings' (page-header-breadcrumb): one crumb or a list, drawn under the title in the same row style; the page title follows as the current crumb. Maps to the page's `breadcrumb`.",
+							"anyOf": [
+								{ "$ref": "#/$defs/breadcrumbCrumb" },
+								{ "type": "array", "minItems": 1, "items": { "$ref": "#/$defs/breadcrumbCrumb" } }
+							]
 						},
 						"headerCard": {
 							"type": "boolean",

package/src/utils/dueText.js

@@ -6,7 +6,8 @@
  *
  * "3 dagen te laat" in the danger colour, "Vandaag", the short date for a
  * day still to come ("morgen", "20 okt"), and a configured text when the
- * field is empty ("Geen deadline"). One formatter for record-list rows and
+ * field is empty ("Geen deadline"). A day to come can read as a count instead
+ * ("nog 4 dagen", "nog 8 weken"). One formatter for record-list rows and
  * table cells, built on the relative date (`formatRelativeDate`).
  *
  * @module utils/dueText
@@ -23,8 +24,12 @@ import { parseDateValue } from './dateVariant.js'
  * Config (all optional): `todayLabel` (default "Due today"), `overdueLabel`
  * `{ one, other }` with `{count}` (default "{count} day overdue" / "{count} days
  * overdue"), `emptyText` (shown when the field is empty; without it an empty
- * field reads as nothing). Texts go through `translate` before `{count}` is
- * filled. Tones: `danger` (overdue), `today`, `upcoming`, `empty`.
+ * field reads as nothing), `upcomingLabel` `{ one, other }` with `{count}`
+ * (a day to come reads as the days left instead of the date), and
+ * `upcomingWeeksLabel` `{ one, other }` (from `upcomingWeeksFrom` days left,
+ * default 35, it reads the weeks left, rounded). Texts go through `translate`
+ * before `{count}` is filled. Tones: `danger` (overdue), `today`, `upcoming`,
+ * `empty`.
  *
  * @param {unknown} value A Date, a timestamp or an ISO string.
  * @param {object} [config] The `due` config.
@@ -41,10 +46,9 @@ export function resolveDue(value, config, translate = (text) => text, now = new
 	}
 	const days = ageInDays(date, now)
 	if (days > 0) {
-		const labels = cfg.overdueLabel && typeof cfg.overdueLabel === 'object' ? cfg.overdueLabel : null
-		if (labels && (labels.one || labels.other)) {
-			const template = translate((days === 1 ? labels.one : labels.other) || labels.other || labels.one)
-			return { text: template.replace(/\{count\}/g, String(days)), tone: 'danger' }
+		const overdue = pluralLabel(cfg.overdueLabel, days, translate)
+		if (overdue !== null) {
+			return { text: overdue, tone: 'danger' }
 		}
 		return { text: n('nextcloud-vue', '{count} day overdue', '{count} days overdue', days, { count: days }), tone: 'danger' }
 	}
@@ -52,5 +56,42 @@ export function resolveDue(value, config, translate = (text) => text, now = new
 		const label = typeof cfg.todayLabel === 'string' && cfg.todayLabel !== '' ? translate(cfg.todayLabel) : t('nextcloud-vue', 'Due today')
 		return { text: label, tone: 'today' }
 	}
-	return { text: formatRelativeDate(date, { now }), tone: 'upcoming' }
+	return { text: upcomingText(-days, cfg, translate) ?? formatRelativeDate(date, { now }), tone: 'upcoming' }
+}
+
+/**
+ * The days or weeks left before a date to come, or null without `upcomingLabel`.
+ *
+ * @param {number} left Whole days left, at least 1.
+ * @param {object} cfg The `due` config.
+ * @param {(text: string) => string} translate The host's translate.
+ * @return {string|null} The text, or null.
+ * @spec openspec/changes/due-text-upcoming-count/specs/due-text-upcoming-count/spec.md#requirement-a-due-date-to-come-can-read-as-the-time-left
+ */
+function upcomingText(left, cfg, translate) {
+	const from = Number(cfg.upcomingWeeksFrom)
+	const weeksFrom = Number.isFinite(from) && from > 0 ? from : 35
+	if (left >= weeksFrom) {
+		const weeks = pluralLabel(cfg.upcomingWeeksLabel, Math.round(left / 7), translate)
+		if (weeks !== null) {
+			return weeks
+		}
+	}
+	return pluralLabel(cfg.upcomingLabel, left, translate)
+}
+
+/**
+ * A `{ one, other }` label with `{count}` filled, or null when none is configured.
+ *
+ * @param {unknown} labels The configured label pair.
+ * @param {number} count The count.
+ * @param {(text: string) => string} translate The host's translate.
+ * @return {string|null} The text, or null.
+ */
+function pluralLabel(labels, count, translate) {
+	if (!labels || typeof labels !== 'object' || !(labels.one || labels.other)) {
+		return null
+	}
+	const template = translate((count === 1 ? labels.one : labels.other) || labels.other || labels.one)
+	return template.replace(/\{count\}/g, String(count))
 }

package/src/utils/featureCatalog.js

@@ -0,0 +1,132 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * featureCatalog: the feature list of the Features and roadmap page, read the
+ * way the board look draws it. A feature carries a status (available, beta,
+ * in progress or planned), an optional category and optional per-language
+ * titles (`title_nl`, `summary_nl`) next to the English ones.
+ *
+ * @module utils/featureCatalog
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md
+ */
+
+/** The statuses, in the order the filter and the captions list them. */
+export const FEATURE_STATUSES = Object.freeze(['available', 'beta', 'in_progress', 'planned'])
+
+/** The badge variant of each status. */
+export const FEATURE_STATUS_VARIANTS = Object.freeze({
+	available: 'success',
+	beta: 'warning',
+	in_progress: 'primary',
+	planned: 'purple',
+})
+
+const STATUS_ALIASES = Object.freeze({
+	available: 'available',
+	stable: 'available',
+	done: 'available',
+	released: 'available',
+	shipped: 'available',
+	beta: 'beta',
+	preview: 'beta',
+	in_progress: 'in_progress',
+	'in-progress': 'in_progress',
+	inprogress: 'in_progress',
+	building: 'in_progress',
+	development: 'in_progress',
+	planned: 'planned',
+	roadmap: 'planned',
+	proposed: 'planned',
+	soon: 'planned',
+})
+
+/**
+ * The status key of a feature. A feature without a status is one the app
+ * ships, as every entry of the list was before statuses existed.
+ *
+ * @param {unknown} raw The feature's `status`.
+ * @return {string} One of FEATURE_STATUSES.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-a-feature-has-one-of-four-statuses
+ */
+export function featureStatus(raw) {
+	if (typeof raw !== 'string' || raw.trim() === '') {
+		return 'available'
+	}
+	return STATUS_ALIASES[raw.trim().toLowerCase()] || 'available'
+}
+
+/**
+ * A text field of a feature in the reader's language: `title_nl` for a Dutch
+ * reader when the feature has one, else `title`.
+ *
+ * @param {object} feature The feature.
+ * @param {string} field `title` or `summary`.
+ * @param {string} [language] The reader's language tag (`nl`, `nl_NL`, `de-DE`).
+ * @return {string} The text, or ''.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-a-feature-reads-in-the-readers-language
+ */
+export function featureText(feature, field, language = '') {
+	if (!feature || typeof feature !== 'object') {
+		return ''
+	}
+	const base = String(language || '').split(/[-_]/)[0].toLowerCase()
+	const own = base ? feature[`${field}_${base}`] : undefined
+	if (typeof own === 'string' && own.trim() !== '') {
+		return own
+	}
+	return typeof feature[field] === 'string' ? feature[field] : ''
+}
+
+/**
+ * How many features carry each status.
+ *
+ * @param {Array<{status: string}>} features Features with a normalised status.
+ * @return {{all: number, available: number, beta: number, in_progress: number, planned: number}} The counts.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-status-filter-shows-a-count-per-status
+ */
+export function countByStatus(features) {
+	const counts = { all: features.length, available: 0, beta: 0, in_progress: 0, planned: 0 }
+	for (const feature of features) {
+		counts[feature.status] += 1
+	}
+	return counts
+}
+
+/**
+ * The features in the reader's language, grouped by category. Groups follow
+ * the order of `categories`; features without a known category come first,
+ * under no caption. Inside a group the features keep their given order.
+ *
+ * @param {Array<object>} features The raw features.
+ * @param {object} [categories] Category key to caption.
+ * @param {string} [language] The reader's language tag.
+ * @return {Array<{key: string, label: string, features: Array<object>}>} The groups; a group without features is left out.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-features-are-grouped-by-category
+ */
+export function groupFeatures(features, categories = {}, language = '') {
+	const captions = categories && typeof categories === 'object' && !Array.isArray(categories) ? categories : {}
+	const groups = [{ key: '', label: '', features: [] }]
+	const byKey = { '': groups[0] }
+	for (const [key, label] of Object.entries(captions)) {
+		const group = { key, label: String(label), features: [] }
+		groups.push(group)
+		byKey[key] = group
+	}
+	for (const raw of Array.isArray(features) ? features : []) {
+		if (!raw || typeof raw !== 'object') {
+			continue
+		}
+		const feature = {
+			slug: String(raw.slug || raw.id || ''),
+			title: featureText(raw, 'title', language) || String(raw.slug || ''),
+			summary: featureText(raw, 'summary', language),
+			status: featureStatus(raw.status),
+			expected: typeof raw.expected === 'string' ? raw.expected : '',
+			docsUrl: typeof raw.docsUrl === 'string' ? raw.docsUrl : '',
+		}
+		const group = byKey[typeof raw.category === 'string' ? raw.category : ''] || byKey['']
+		group.features.push(feature)
+	}
+	return groups.filter((group) => group.features.length > 0)
+}