@conduction/nextcloud-vue 2.139.0 → 2.141.0

package/src/css/look-board.css

@@ -2173,6 +2173,26 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A list in a side card draws a hairline over every row, the first too, so
+   a line separates the title from the list (DqZaaktype*, DqTenant,
+   DqSociaalDomein, DqTaak "Versies" and the like). Its row titles keep the
+   main ink without an underline: the plain side rule marks them as links,
+   and the board underlines on hover only. The footer note is 13px muted; the
+   theme sets paragraphs through its tokens with `!important`, so the note
+   hands it its size and ink through those tokens. */
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__item {
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__row:not(:hover):not(:focus-visible) .cn-record-list__title {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-record-list__footer-note:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+}
+
 /* An audit row is a board list row (DqHandhaving, DqTenant "Historie"): 10px
    above and below, a hairline over every row including the first, the head
    and the line under it at their normal line height, 2px apart: 56px, the
@@ -2412,6 +2432,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	gap: 2px;
 }
 
+/* A stacked list (`density: "stacked"`) keeps its rows unruled and unpadded
+   in the board look too, 10px apart (DqDagAfsluiten "Morgen eerst").
+   @spec openspec/changes/record-list-stacked-density/specs/record-list-stacked-density/spec.md#requirement-a-record-list-can-stack-its-rows */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked .cn-record-list__row {
+	min-height: 0;
+	padding-block: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--stacked.cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 0;
+}
+
+/* A dashboard card's task list and decision list rule above every row, the
+   first one under the title included, as the record lists with ruleAbove do
+   (DqMijnWerk "Mijn taken", "Mijn archiefbeoordelingen"); no rule under the
+   last row.
+   @spec openspec/changes/board-dashboard-lists-rule-above/specs/board-dashboard-lists-rule-above/spec.md#requirement-a-dashboard-task-or-decision-list-rules-above-every-row */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-tasks-widget__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-decision-list__row {
+	border-block-end: 0;
+	border-top: 1px solid var(--color-border);
+}
+
 /* Hover: the whole row takes the hover ground, 8px beyond the text so the
    text does not move. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
@@ -2680,6 +2723,17 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0;
 }
 
+/* A chart in a section of a sections widget (a framed section card, 14px
+   16px in) takes none of the dashboard card's inset either: its bars and plot
+   start 17px in, not 39 (DqDoorlooptijd "Naleving": Naleving per zaaktype,
+   Verdeling doorlooptijd, Maandelijkse SLA-trend, Doorstroom).
+   @spec openspec/changes/board-sections-chart-single-inset/specs/board-sections-chart-single-inset/spec.md#requirement-a-chart-inside-a-dashboard-sections-card-is-inset-once */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__html,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget__canvas,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget__section .cn-chart-widget > .cn-chart-widget__footnote {
+	padding: 0;
+}
+
 /* ---- A plain sections widget on a dashboard card ------------------------ */
 /* The card is flush, because a sections widget usually draws its own cards;
    the plain one draws none, so its body takes the card's side inset and 20px
@@ -2805,6 +2859,27 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* A toned cell takes the theme's status badge grounds, as the board's tones
+   are (DqHandhaving: #E7F3EA, #FFF4DE, #FCEDEC); the darkest tone has its
+   own token and otherwise deepens the error ground. Nextcloud's own mix of
+   the status colours read a shade off each.
+   @spec openspec/changes/board-matrix-tones/specs/board-matrix-tones/spec.md#requirement-a-board-matrix-cell-takes-the-themes-status-grounds */
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--success {
+	background: var(--nldesign-component-status-badge-success-background-color, var(--color-success-light, color-mix(in srgb, var(--color-success) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--warning {
+	background: var(--nldesign-component-status-badge-warning-background-color, var(--color-warning-light, color-mix(in srgb, var(--color-warning) 15%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--error {
+	background: var(--nldesign-component-status-badge-error-background-color, var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background))));
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell--danger {
+	background: var(--nldesign-component-status-badge-danger-background-color, color-mix(in srgb, var(--color-error) 10%, var(--nldesign-component-status-badge-error-background-color, var(--color-main-background))));
+}
+
 /* A cell without a tone ("geen") sits on the page ground in the muted ink,
    as the board draws it; toned and coloured cells keep their ground.
    @spec openspec/changes/board-matrix-plain-cells/specs/board-matrix-plain-cells/spec.md#requirement-a-board-matrix-cell-without-a-tone-sits-on-the-ground-in-the-muted-ink */
@@ -3002,10 +3077,27 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A bar list with the value at the bar's end (DqProcesanalyse "Doorlooptijd
+   per status") sets its rows in 13px, the label in the secondary text, the
+   value in the main ink at 600, rows 34px apart.
+   @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end */
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) {
+	gap: 16px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-line {
+	font-size: 13px;
+}
+
+.cn-look-board .cn-chart-widget__bar-list--value-at-end:not(.cn-look-nextcloud *) .cn-chart-widget__bar-label {
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
+	color: var(--cn-board-text-soft);
+}
+
 /* A dialog's options as the boards draw them (DqVolgendeStap, DqBesluit,
    DqDocumentGenereren, DqFilterBewerken): rounded at 10px, an idle option
-   edged in the dark border grey, and an 18px radio. The chosen and the
-   refused options keep their own edges. */
+   edged in the dark border grey, and an 18px radio. The chosen option keeps
+   its own edge. */
 .cn-look-board .cn-choice-cards .cn-choice-cards__row:not(.cn-look-nextcloud *),
 .cn-look-board .cn-choice-cards .cn-choice-cards__cell--with-details:not(.cn-look-nextcloud *) {
 	border-radius: 10px;
@@ -3015,6 +3107,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border-color: var(--color-border-maxcontrast);
 }
 
+/* A refused option keeps that edge and sits on the sunken ground
+   (DqVolgendeStap: Hervatten, Archiveren, Heropenen). */
+.cn-look-board .cn-choice-cards .cn-choice-cards__row--disabled:not(.cn-look-nextcloud *),
+.cn-look-board .cn-choice-cards .cn-choice-cards__row--disabled:hover:not(.cn-look-nextcloud *) {
+	border-color: var(--color-border-maxcontrast);
+	background: var(--cn-board-sunken-ground);
+}
+
 /* A chosen option stays white under its primary edge, as every Dq dialog board
    draws it (design-system #371); the Nextcloud look keeps the tint.
    @spec openspec/changes/board-choice-row-chosen-white/specs/board-choice-row-chosen-white/spec.md#requirement-a-chosen-board-option-is-white */

package/src/css/table.css

@@ -226,6 +226,18 @@
 	overflow-wrap: anywhere;
 }
 
+/* In a table fitted to its tile every column but the growing one asks for
+   as little width as its content allows (`width: 1%`). With
+   `overflow-wrap: anywhere` that is one character, so a wrapping head broke
+   letter by letter ("D o e l", DqDoorlooptijd "Prestaties per zaaktype",
+   240px tall). Here a wrapping column breaks between words and only breaks
+   a word that is longer than the column.
+   @spec openspec/changes/fit-table-wrap-by-word/specs/fit-table-wrap-by-word/spec.md#requirement-a-wrapping-column-in-a-fitted-table-breaks-between-words */
+.cn-data-table--fit th.cn-cell--wrap,
+.cn-data-table--fit td.cn-cell--wrap {
+	overflow-wrap: break-word;
+}
+
 /* Opt-in fixed layout (CnDataTable's `fixedLayout` prop).
 
    Under the default `table-layout: auto` a column's declared `width` is only a
@@ -289,6 +301,19 @@
 	white-space: nowrap;
 }
 
+/* A growing column that opts into wrapping (`cn-cell--wrap`, DqDoorlooptijd
+   "Zaken met risico" titles) wraps its text over lines instead of cutting
+   it, and keeps a readable width: with `max-width: 0` the wide one-line
+   cells beside it squeezed it to its padding (24px).
+   @spec openspec/changes/fit-table-wrap-column-keeps-width/specs/fit-table-wrap-column-keeps-width/spec.md#requirement-a-wrapping-growing-column-keeps-a-readable-width */
+.cn-data-table--fit th.cn-table-col--grow.cn-cell--wrap,
+.cn-data-table--fit td.cn-table-col--grow.cn-cell--wrap {
+	min-width: 8em;
+	max-width: none;
+	overflow-wrap: anywhere;
+	white-space: normal;
+}
+
 /* The secondary line of the growing column ("2026-0004" under a case title)
    is a line of its own with its own ellipsis. The cell does not wrap, so in
    the board look, where the secondary line is an inline block (the title

package/src/utils/builtInFormatters.js

@@ -470,6 +470,27 @@ export function formatMasked(value, _row, _property, options) {
 	return '*'.repeat(Math.min(text.length - visible, 5)) + (visible > 0 ? text.slice(-visible) : '')
 }
 
+/**
+ * A stored value through a display map (`valueMap` registry key): the label
+ * `options.map` gives the value, else the value as stored. "Besloten
+ * Vennootschap" reads "BV" on DqOrganisaties.
+ *
+ * @param {unknown} value The stored value.
+ * @param {object} [_row] The full row (unused).
+ * @param {object} [_property] The schema property (unused).
+ * @param {{map?: Object<string, string>}} [options] The column's `formatterOptions`.
+ * @return {string} The label, or the value.
+ * @spec openspec/changes/value-map-formatter/specs/index-page/spec.md#requirement-a-column-can-show-stored-values-through-a-display-map
+ */
+export function formatValueMap(value, _row, _property, options) {
+	if (value === null || value === undefined || value === '') {
+		return ''
+	}
+	const map = options && options.map && typeof options.map === 'object' ? options.map : {}
+	const label = Object.hasOwn(map, String(value)) ? map[String(value)] : undefined
+	return typeof label === 'string' && label !== '' ? label : String(value)
+}
+
 /**
  * Built-in formatter registry merged under any consumer-registered
  * `formatters` in `CnAppRoot`'s `cnFormatters` provide.
@@ -516,4 +537,5 @@ export const BUILT_IN_FORMATTERS = {
 	connectionSettingsLabel: formatConnectionSettingsLabel,
 	masked: formatMasked,
 	isoDuration: formatIsoDuration,
+	valueMap: formatValueMap,
 }

package/src/utils/fillTemplate.js

@@ -64,7 +64,7 @@ export function formatLongDate(value, now = new Date(), withYear = false) {
  * Format one token value.
  *
  * @param {unknown} value The raw value.
- * @param {string} format `date`, `datetime`, `weekday`, `longdate`, `time`, `user`, `currency`, `relative`, `relativetime`, `ago`, `week`, `days`, `lower` or '' (as is).
+ * @param {string} format `date`, `datetime`, `weekday`, `longdate`, `time`, `user`, `currency`, `relative`, `relativetime`, `ago`, `week`, `days`, `lower`, `mailbox` or '' (as is).
  * @param {Date} now The reference moment.
  * @param {string} [arg] The format's argument (`currency:EUR`, or a row path holding the code).
  * @param {object|null} [object] The row, for a currency read from a field.
@@ -125,6 +125,12 @@ function formatValue(value, format, now, arg = '', object = null, config = null,
 	if (format === 'ago') {
 		return formatAgo(value, now)
 	}
+	if (format === 'mailbox') {
+		// An address up to and with its @ ("gemeente@" from gemeente@zuiddrecht.nl).
+		const text = String(value)
+		const at = text.indexOf('@')
+		return at > 0 ? text.slice(0, at + 1) : text
+	}
 	if (format === 'lower') {
 		return String(value).toLocaleLowerCase()
 	}

package/src/utils/groupSublines.js

@@ -0,0 +1,125 @@
+/**
+ * The line under a team in a picker: how many members it has and what it is
+ * for ("6 leden · bezwaar, beroep en Woo-advies", board DqOverdragen).
+ *
+ * The count comes from Nextcloud's group details; that endpoint answers
+ * administrators and group admins only, so for anyone else the count is left
+ * out rather than guessed. Nextcloud keeps no description for a group, so the
+ * text comes from an app's own records when the app names them (`describe`:
+ * `{ register, schema, groupField?, textField? }`, by default the record's
+ * `ncGroupId` and `description`).
+ *
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * @module utils/groupSublines
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+
+import axios from '@nextcloud/axios'
+import { translatePlural as n } from '@nextcloud/l10n'
+import { generateOcsUrl } from '@nextcloud/router'
+import { fetchReferenceObjects } from './boardReferenceColumns.js'
+
+const descriptionCache = new Map()
+
+/**
+ * Member counts by group id for the groups a search finds. Fails soft to `{}`.
+ *
+ * @param {string} query The search term.
+ * @return {Promise<Record<string, number>>} Counts by group id.
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+async function memberCounts(query) {
+	try {
+		const response = await axios.get(generateOcsUrl('cloud/groups/details'), {
+			headers: { 'OCS-APIRequest': 'true', Accept: 'application/json' },
+			params: { search: query || '', limit: 50 },
+		})
+		const data = response && response.data && response.data.ocs ? response.data.ocs.data : (response && response.data)
+		const groups = data && Array.isArray(data.groups) ? data.groups : []
+		const out = {}
+		for (const group of groups) {
+			const count = Number(group && group.usercount)
+			if (group && group.id && Number.isFinite(count)) {
+				out[String(group.id)] = count
+			}
+		}
+		return out
+	} catch {
+		return {}
+	}
+}
+
+/**
+ * Descriptions by group id from the app's records. Read once per source.
+ *
+ * @param {{register?: string, schema?: string, groupField?: string, textField?: string}|null} describe The source.
+ * @return {Promise<Record<string, string>>} Descriptions by group id.
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+async function descriptions(describe) {
+	if (!describe || !describe.register || !describe.schema) {
+		return {}
+	}
+	const groupField = describe.groupField || 'ncGroupId'
+	const textField = describe.textField || 'description'
+	const key = [describe.register, describe.schema, groupField, textField].join('/')
+	if (!descriptionCache.has(key)) {
+		descriptionCache.set(key, fetchReferenceObjects({ register: describe.register, schema: describe.schema, limit: 500 })
+			.then((rows) => {
+				const out = {}
+				for (const row of rows) {
+					const gid = row && row[groupField]
+					const text = row && typeof row[textField] === 'string' ? row[textField].trim() : ''
+					if (gid && text && out[String(gid)] === undefined) {
+						out[String(gid)] = text
+					}
+				}
+				return out
+			})
+			.catch(() => {
+				descriptionCache.delete(key)
+				return {}
+			}))
+	}
+	return descriptionCache.get(key)
+}
+
+/**
+ * The line under each group: its member count and its description, joined by
+ * " · ", either left out when unknown.
+ *
+ * @param {string[]} ids The group ids to describe.
+ * @param {string} query The search the groups came from.
+ * @param {object|null} [describe] Where the app keeps a group's description.
+ * @return {Promise<Record<string, string>>} The line by group id ('' when nothing is known).
+ * @spec openspec/changes/assign-team-option-subline/specs/assign-dialog/spec.md
+ */
+export async function groupSublines(ids, query, describe = null) {
+	if (!Array.isArray(ids) || ids.length === 0) {
+		return {}
+	}
+	const [counts, texts] = await Promise.all([memberCounts(query), descriptions(describe)])
+	const out = {}
+	for (const id of ids) {
+		const parts = []
+		if (counts[id] !== undefined) {
+			parts.push(n('nextcloud-vue', '{count} member', '{count} members', counts[id], { count: counts[id] }))
+		}
+		if (texts[id]) {
+			parts.push(texts[id])
+		}
+		out[id] = parts.join(' · ')
+	}
+	return out
+}
+
+/**
+ * Forget the cached descriptions (tests, or after the source changed).
+ *
+ * @return {void}
+ */
+export function clearGroupSublineCache() {
+	descriptionCache.clear()
+}

package/src/utils/myTeam.js

@@ -30,12 +30,32 @@ let _source = null
 /** The read in flight, shared by every caller. */
 let _pending = null
 
+/**
+ * The team the app answered, as kept: one group id, a list of two or more,
+ * or `''` for none. Blank entries are dropped and a list of one reads as that
+ * one id.
+ *
+ * @spec openspec/changes/my-team-source-may-answer-several-teams/specs/schema-utilities/spec.md#requirement-myteam-may-resolve-to-several-teams
+ * @param {unknown} team What the app's loader answered.
+ * @return {string|string[]} The kept team.
+ */
+function normalizeTeam(team) {
+	if (Array.isArray(team)) {
+		const ids = team.filter((id) => typeof id === 'string').map((id) => id.trim()).filter((id) => id !== '')
+		if (ids.length === 0) {
+			return ''
+		}
+		return ids.length === 1 ? ids[0] : ids
+	}
+	return typeof team === 'string' ? team.trim() : ''
+}
+
 /**
  * Name where the current user's primary team is read: a function answering
  * the team's Nextcloud group id, or null/'' for a user in no team.
  *
  * @spec openspec/changes/saved-view-tokens-my-team/specs/schema-utilities/spec.md#requirement-myteam-resolves-to-the-current-users-primary-team
- * @param {(() => Promise<string|null>)|null} loader The app's loader, or null to unregister.
+ * @param {(() => Promise<string|string[]|null>)|null} loader The app's loader (a group id, or the ids of several teams), or null to unregister.
  * @return {void}
  */
 export function registerMyTeamSource(loader) {
@@ -49,7 +69,7 @@ export function registerMyTeamSource(loader) {
  * when no source is registered, or when the read fails.
  *
  * @spec openspec/changes/saved-view-tokens-my-team/specs/schema-utilities/spec.md#requirement-myteam-resolves-to-the-current-users-primary-team
- * @return {Promise<string>} The team's group id, or ''.
+ * @return {Promise<string|string[]>} The team's group id (or ids), or ''.
  */
 export function loadMyTeam() {
 	if (_state.team !== null) {
@@ -64,7 +84,7 @@ export function loadMyTeam() {
 	}
 	_pending = Promise.resolve()
 		.then(() => _source())
-		.then((team) => (typeof team === 'string' ? team.trim() : ''))
+		.then((team) => normalizeTeam(team))
 		.catch(() => '')
 		.then((team) => {
 			_state.team = team
@@ -79,7 +99,7 @@ export function loadMyTeam() {
  * it is being read (and starts the read on first use).
  *
  * @spec openspec/changes/saved-view-tokens-my-team/specs/schema-utilities/spec.md#requirement-myteam-resolves-to-the-current-users-primary-team
- * @return {string|null} The team, '' or null.
+ * @return {string|string[]|null} The team (or teams), '' or null.
  */
 export function peekMyTeam() {
 	if (_state.team === null) {

package/src/utils/resolveFilterTokens.js

@@ -89,15 +89,16 @@ export const MY_GROUPS_TOKEN = '@myGroups'
 export const MY_TEAM_TOKEN = '@myTeam'
 
 /**
- * Resolve `@myTeam`: the team's group id; `@myTeam` while it is being read (the
+ * Resolve `@myTeam`: the team's group id, or the ids of several teams when the
+ * app answers a list (an IN filter); `@myTeam` while it is being read (the
  * caller waits); `@myTeam?` for a user in no team (the caller drops the key).
  *
  * @spec openspec/changes/saved-view-tokens-my-team/specs/schema-utilities/spec.md#requirement-myteam-resolves-to-the-current-users-primary-team
- * @param {{myTeam?: string}} [ctx] Optional context; `ctx.myTeam` wins.
- * @return {string} The group id or the token.
+ * @param {{myTeam?: (string|string[])}} [ctx] Optional context; `ctx.myTeam` wins.
+ * @return {string|string[]} The group id(s) or the token.
  */
 function resolveMyTeam(ctx) {
-	const team = ctx && typeof ctx.myTeam === 'string' ? ctx.myTeam : peekMyTeam()
+	const team = ctx && (typeof ctx.myTeam === 'string' || Array.isArray(ctx.myTeam)) ? ctx.myTeam : peekMyTeam()
 	if (team === null) {
 		return MY_TEAM_TOKEN
 	}

package/src/utils/transitionInputs.js

@@ -223,6 +223,41 @@ function daysAfter(days, now) {
 	return date
 }
 
+/**
+ * Today plus that many days, as a date input's value.
+ *
+ * @param {unknown} days Whole days, 1 or more.
+ * @param {Date} [now] What counts as today.
+ * @return {string} `yyyy-mm-dd`, '' without a positive whole number.
+ * @spec openspec/changes/days-input-as-date/specs/transition-inputs/spec.md
+ */
+export function dayAfterIso(days, now = new Date()) {
+	const date = daysAfter(days, now)
+	if (date === null) {
+		return ''
+	}
+	const pad = (number) => String(number).padStart(2, '0')
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+/**
+ * The whole days from today to a date input's value, at least 1.
+ *
+ * @param {unknown} iso A `yyyy-mm-dd` date.
+ * @param {Date} [now] What counts as today.
+ * @return {string} The days, '' without a date.
+ * @spec openspec/changes/days-input-as-date/specs/transition-inputs/spec.md
+ */
+export function daysUntilIso(iso, now = new Date()) {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(iso ?? '').trim())
+	if (!match) {
+		return ''
+	}
+	const target = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+	const today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
+	return String(Math.max(1, Math.round((target - today) / 86400000)))
+}
+
 /**
  * A date as a reader sees it: day, short month and year.
  *
@@ -290,6 +325,9 @@ export function fillInputTemplate(template, values, now = new Date()) {
  *   in that other input.
  * - `preview: { label, template, note, testid }`: a line under the input,
  *   filled by `fillInputTemplate` and shown only once it resolves.
+ * - `dateField: { label, note, testid }`: on a days input, an editable date
+ *   under it, today plus the days; a chosen date sets the days to the whole
+ *   days from today, at least 1. `dateValue` carries the date.
  * - `default`: the starting value.
  * - Presentation: `labelOutside`, `id`, `note`, `wide`, `testid`, `rows`,
  *   `placeholder`.
@@ -302,7 +340,7 @@ export function fillInputTemplate(template, values, now = new Date()) {
  * @param {string} [options.register] Register the reference pickers fall back to.
  * @param {object} [options.context] What `optionsSource` reads.
  * @param {object} [options.values] The values so far.
- * @param {Date} [options.now] What counts as today, for previews.
+ * @param {Date} [options.now] What counts as today, for previews and `dateField`.
  * @return {Array<object>} The descriptors.
  */
 export function resolveInputFields(declared, { schema = null, register = '', context = {}, values = {}, now } = {}) {
@@ -345,6 +383,9 @@ export function resolveInputFields(declared, { schema = null, register = '', con
 		field.previewText = preview && typeof preview === 'object'
 			? fillInputTemplate(preview.template, values, now)
 			: ''
+		field.dateValue = field.input.dateField && typeof field.input.dateField === 'object'
+			? dayAfterIso(values[field.key], now)
+			: ''
 	}
 
 	return fields