@conduction/nextcloud-vue 2.144.0 → 2.146.0

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

@@ -77,7 +77,7 @@
 	grid-column: 1 / -1;
 	grid-row: 2;
 	justify-self: start;
-	margin-block: 6px 3px;
+	margin-block: 6px 0;
 }
 
 .cn-look-board.cn-index-page--sidebar-open .cn-page-header .cn-header-trail,
@@ -90,6 +90,13 @@
 	grid-row: 4;
 }
 
+/* Without a breadcrumb trail the count line takes the trail's row, so no
+   empty row adds a second gap (DqZakenSorteren: 58px under the title). */
+.cn-look-board.cn-index-page--sidebar-open .cn-page-header:not(:has(.cn-header-trail)) .cn-page-header__text > .cn-page-header__description,
+.cn-look-board .cn-index-page--sidebar-open .cn-page-header:not(:has(.cn-header-trail)) .cn-page-header__text > .cn-page-header__description {
+	grid-row: 3;
+}
+
 /* The header buttons keep the board's button under a theme that styles every
    secondary or primary button with `!important` (the nldesign theme: a
    primary border, 8px 16px padding): Download and the Actions menu are 40px,
@@ -190,6 +197,15 @@
 	gap: 8px;
 }
 
+/* With the side panel open the boards keep Filter on row 1 after Save view
+   and wrap the view switch alone to row 2 (DqFilterBeheren, DqZakenSorteren):
+   the unit dissolves into the bar's flex row.
+   @spec openspec/changes/board-filter-row-one-beside-side-panel/specs/board-filter-row-one-beside-side-panel/spec.md */
+.cn-look-board.cn-index-page--sidebar-open .cn-actions-bar--board .cn-actions-bar__view-controls,
+.cn-look-board .cn-index-page--sidebar-open .cn-actions-bar--board .cn-actions-bar__view-controls {
+	display: contents;
+}
+
 /* `quickFilterPlacement: "toolbar"` (DqTeamwachtrij): the chips take the room
    the Filter button and the view switch leave on row 1, so the three stay on
    one row in the column beside a side panel; the chips that do not fit move
@@ -891,6 +907,16 @@
 	max-width: calc(100% - 26px);
 }
 
+/* A plain (unsortable) label wraps by word beside its funnel, as a sort
+   button does, instead of the funnel dropping onto a line of its own
+   ("Lopende / zaken", DqOrganisaties: head 64 -> 59, board 58.5).
+   @spec openspec/changes/board-head-label-beside-funnel/specs/data-table/spec.md#requirement-a-board-heads-plain-label-wraps-beside-its-filter */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th > span:first-child:has(~ .cn-table-header__filter) {
+	display: inline-block;
+	max-width: calc(100% - 26px);
+	vertical-align: middle;
+}
+
 /* 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;
@@ -909,16 +935,21 @@
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
    `content-box` here was ignored and the cell left 12px for the checkbox (the
    header's checkbox showed as a stray bracket). */
-/* The checkbox starts 20px in, as the boards draw a native checkbox (16px of
-   cell padding and its 4px margin; DqZoekresultaten), in the same 60px. */
+/* The cell pads 16px as the boards do and the checkbox starts 4px further in,
+   a native checkbox's margin (DqZoekresultaten, DqPostvak, DqContracten), in
+   the same 60px. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
 	width: 60px;
 	min-width: 60px;
-	padding-inline: 20px 12px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
+.cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox .checkbox-radio-switch {
+	margin-inline-start: 4px;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch {
 	--icon-size: 18px;
 }
@@ -968,6 +999,16 @@
 	width: 100%;
 }
 
+/* A wrapping title column (`cn-cell--wrap`, DqZoekresultaten) runs its
+   secondary line at a normal line height over its lines, 2px under the
+   title, as the board draws it; a single-line secondary keeps the table's
+   1.35.
+   @spec openspec/changes/board-wrapped-secondary-line-height/specs/board-wrapped-secondary-line-height/spec.md */
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title.cn-cell--wrap .cn-table-cell__secondary {
+	margin-top: 2px;
+	line-height: normal;
+}
+
 /* `rowTitle: "plain"` (PqTickets, OcPublicaties): the title is bold text in
    the main text colour without an underline, the secondary line 13px muted,
    2px under it. The row stays clickable through its stretched row link. */
@@ -1076,6 +1117,22 @@
 	line-height: 16px;
 }
 
+/* The grey person chip with a second line (DqContacten): 14px above and
+   under, the name 2px above a 14px address on its normal line, a 66px row.
+   @spec openspec/changes/board-person-chip-row-height/specs/data-table/spec.md#requirement-a-board-person-chip-row-is-66px */
+.cn-look-board .cn-table-container--board .cn-data-table td:has(.cn-cell-renderer__avatar-initials--neutral + .cn-cell-renderer__avatar-text .cn-cell-renderer__avatar-secondary) {
+	padding-block: 14px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral + .cn-cell-renderer__avatar-text:has(.cn-cell-renderer__avatar-secondary) {
+	gap: 2px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral + .cn-cell-renderer__avatar-text .cn-cell-renderer__avatar-secondary {
+	font-size: 14px;
+	line-height: normal;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600, 21px tall on a
    normal line (a 1.4 line made it 24.2). The colours stay the status colour
    map's.
@@ -1428,6 +1485,19 @@
 	padding-top: 0;
 }
 
+/* The selection box sits flush where the boards draw it: NcCheckbox pads its
+   content 7px on each side (DqAanMijToegewezen card head, DqTeamwachtrij rows,
+   whose box starts 18px in).
+   @spec openspec/changes/board-selection-box-flush/specs/board-selection-box-flush/spec.md#requirement-a-cards-and-a-rows-selection-box-sits-where-the-board-draws-it */
+.cn-look-board .cn-object-card__record-head > .cn-object-card__checkbox .checkbox-radio-switch__content,
+.cn-look-board .cn-object-row__checkbox .checkbox-radio-switch__content {
+	padding-inline: 0;
+}
+
+.cn-look-board .cn-object-row__checkbox {
+	margin-inline-start: 6px;
+}
+
 .cn-look-board .cn-object-card--board .cn-object-card__record-head > .cn-object-card__checkbox ~ .cn-object-card__record-pill {
 	margin-inline-start: auto;
 }
@@ -2292,3 +2362,45 @@
 .cn-look-board .cn-data-table th.cn-table-col--icon + th {
 	padding-inline-start: 12px;
 }
+
+/* ---- The table beside the open side panel (DqZakenSorteren, DqFilterBeheren) */
+/* The table takes its column's width: its configured column widths make way
+   for the content, titles and names wrap (a long word hyphenated, an
+   unbreakable token such as an id anywhere), a pill
+   wraps before the row scrolls, and each header keeps its label and icons on
+   one line. No sideways scroll.
+   @spec openspec/changes/board-table-fits-beside-side-panel/specs/board-table-fits-beside-side-panel/spec.md#requirement-the-table-fits-its-column-beside-the-open-side-panel */
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table {
+	table-layout: auto;
+	width: 100% !important;
+	min-width: 0 !important;
+}
+
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions) {
+	width: auto !important;
+	min-width: 0 !important;
+	max-width: none !important;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions) {
+	width: auto !important;
+	min-width: 0 !important;
+	max-width: none !important;
+	white-space: normal;
+	hyphens: auto;
+	overflow-wrap: anywhere;
+}
+
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table td :is(.cn-cell-renderer, .cn-cell-renderer__avatar-text, .cn-cell-renderer__avatar-name, .cn-table-row__link) {
+	min-width: 0;
+	white-space: normal;
+}
+
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table td .cn-status-badge {
+	white-space: normal;
+}
+
+.cn-look-board .cn-index-page--sidebar-open .cn-table-container--board .cn-data-table th .cn-table-header__sort {
+	min-width: max-content;
+}

package/src/css/look-board.css

@@ -664,12 +664,24 @@
 }
 
 /* Two buttons in a card's title row stand 8px apart (DqZaakContact "Live
-   gesprek", DqZaakEmail "Mail koppelen" / "Mail opstellen").
+   gesprek", DqZaakEmail "Mail koppelen" / "Mail opstellen"), also in an
+   integration card's CnDetailCard header (DqZaakTaken "Afspraken", "Kaarten").
    @spec openspec/changes/board-card-header-actions-gap/specs/board-card-header-actions-gap/spec.md#requirement-a-board-cards-title-row-buttons-stand-8px-apart */
 .cn-look-board .cn-widget-wrapper__actions:not(.cn-look-nextcloud *) {
 	gap: 8px;
 }
 
+/* A card's own header items (a count note, a status pill) stand before the
+   manifest's title-row buttons, as the boards draw them (DqZaakTaken "Wat
+   hierna komt": "2 gepland", then "+ Toevoegen"). */
+.cn-look-board .cn-widget-wrapper__actions > .cn-detail-widget-header-items:not(.cn-look-nextcloud *) {
+	order: -1;
+}
+
+.cn-look-board .cn-detail-card__header-right:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
 /* A detail page marked `cardButtons: "regular"` draws them at the 40px
    control height: the case page's tab cards (DqZaakContact "Live gesprek",
    DqZaakHistorie, DqZaakBetrokkenen), where setting and case-type pages keep 34.
@@ -1467,6 +1479,103 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	text-decoration: underline;
 }
 
+/* A plain table an app draws in a settings card (dossiq's ZGW mapping, StUF
+   endpoints and audit log, AWB terms) reads as the board's settings tables:
+   14px, a near-white head with muted 600 labels, 10px 12px cells, soft rules.
+   The theme paints every th through its table header tokens, so the head
+   hands those tokens the board's values too.
+   @spec openspec/changes/board-settings-plain-tables/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) thead th {
+	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-font-weight: 600;
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--color-border);
+	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-size: 14px;
+	font-weight: 600;
+	line-height: 1.2;
+	text-align: start;
+}
+
+/* The working calendar's month reads as the board draws it: the month name
+   first, at the content edge, with the previous and next month buttons after
+   it, and the buttons add no height to the line, so the month sits 20px under
+   the card title (DqInstellingenAlgemeen "Werkdagen en feestdagen": the
+   arrow put the month 30px in and 28px down).
+   @spec openspec/changes/working-calendar-board-head/specs/settings-board-look/spec.md */
+.cn-look-board .cn-working-calendar__title:not(.cn-look-nextcloud *) {
+	order: -1;
+	min-width: 0;
+	margin-inline-end: 4px;
+	line-height: 1.2;
+	text-align: start;
+}
+
+/* Body rows are 42px as on the boards (10px, a 21px line, 10px, the rule).
+   A row header (dossiq's prerequisites) reads as a strong cell, not as a
+   head: the theme paints every th, so its tokens are handed the cell's. */
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) td,
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) tbody th {
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 14px;
+	line-height: 1.5;
+	vertical-align: middle;
+}
+
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) tbody th {
+	--nldesign-component-table-header-background-color: transparent;
+	--nldesign-component-table-header-color: var(--color-main-text);
+	--nldesign-component-table-header-font-weight: 600;
+	background: transparent;
+	font-weight: 600;
+	text-align: start;
+}
+
+/* A strong cell's name in a settings card reads 15px bold over its muted
+   second line, as the boards draw a connection's name (DqInstellingen
+   "Koppelingen": <strong> 15px), not the index tables' 14px 500.
+   @spec openspec/changes/board-settings-strong-cell-name/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section .cn-data-table td.cn-cell--strong:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
+.cn-look-board .settings-section .cn-data-table td.cn-cell--strong:not(.cn-look-nextcloud *) > .cn-cell-renderer {
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-working-calendar__head:not(.cn-look-nextcloud *) > .button-vue:not(.cn-working-calendar__add) {
+	margin-block: -8px;
+}
+
+/* In a one-column settings card a single-line field is at most 560px wide,
+   its hint under it, as the boards draw a field on its own row
+   (DqBeheerGeavanceerd "Financiële integratie", "Storeregister"); a text
+   area, a note or a switch still spans the card.
+   @spec openspec/changes/board-settings-single-field-width/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--text,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--password,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--secret,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--number,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--email,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--url,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--select,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--date,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--datetime-local {
+	max-width: 560px;
+}
+
 /* Section actions sit at the end of the title row. The row is a grid, so a
    long title wraps beside the buttons instead of running under them. A
    half-width card keeps them there (DqVthInstellingen "Inspectiechecklists",
@@ -1523,6 +1632,24 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	align-self: center;
 }
 
+/* A switch or radio in a board settings card starts at the card's content
+   edge, its label 12px (switch) or 10px (radio) after the control, as the
+   boards draw them (DqBeheerinstellingen "AI-ondersteunde verwerking").
+   NcCheckboxRadioSwitch pads its content 9px on each side, which set the
+   control 9px in from the fields above and below it.
+   @spec openspec/changes/board-settings-switch-radio-flush/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content {
+	padding-inline: 0;
+}
+
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content-switch {
+	gap: 12px;
+}
+
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content-radio {
+	gap: 10px;
+}
+
 /* The "Uitleg tonen" toggle is a text link flush with the card's right edge
    (DqBeheerinstellingen Zaak-e-mail), not a padded tertiary button.
    @spec openspec/changes/board-settings-title-centred-and-link-flush/specs/settings-board-look/spec.md */
@@ -1596,8 +1723,12 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	max-width: none;
 }
 
-.cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *) .settings-section__name,
-.cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *) .settings-section__desc {
+/* A board card's title and subtitle run the card's width, wide or not
+   (DqBeheerGeavanceerd "Eerste keer", "StUF-ZKN-endpoints": the subtitle
+   wrapped at NcSettingsSection's 900px measure, the board's does not).
+   @spec openspec/changes/board-settings-desc-full-width/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__desc {
 	max-width: none;
 }
 
@@ -2156,7 +2287,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
    12px follows it: the boards' card is title, 6px, rule, row (DqMijnTeam
    "Vastgelopen zaken", DqMijnWerk "Zaken die u volgt").
    @spec openspec/changes/board-card-title-above-ruled-list/specs/board-card-title-above-ruled-list/spec.md#requirement-a-ruled-list-starts-6px-under-the-card-title */
-.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless):has(> .cn-widget-wrapper__content .cn-record-list--rule-above, > .cn-widget-wrapper__content .cn-tasks-widget__list, > .cn-widget-wrapper__content .cn-decision-list__rows) .cn-widget-wrapper__header {
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless):has(> .cn-widget-wrapper__content .cn-record-list--rule-above, > .cn-widget-wrapper__content .cn-tasks-widget__list, > .cn-widget-wrapper__content .cn-decision-list__rows, > .cn-widget-wrapper__content .cn-nc-widget-widget__body--vertical) .cn-widget-wrapper__header {
 	padding-bottom: 6px;
 }
 
@@ -2692,13 +2823,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 
 /* A vertical NC widget is the board's activity list (DqMijnWerk "Recente
    activiteit"): hairline rows 12px above and below the text, a 10px dot in
-   the icon's place, the title 14px in the main ink and wrapping, the first
-   hairline 12px under the title. Thematiq underlines links with a heavier
-   selector, hence the !important.
+   the icon's place, the title 14px in the main ink and wrapping. Thematiq underlines links with a heavier
+   selector, hence the !important. The first hairline stands 6px under the
+   title, as on every Dq list card (design-system #432).
    @spec openspec/changes/board-nc-widget-activity-rows/specs/board-nc-widget-activity-rows/spec.md#requirement-a-board-dashboard-nc-widget-draws-its-items-as-activity-rows */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-nc-widget-widget__body--vertical {
 	gap: 0;
-	padding: 2px var(--cn-board-dashboard-card-inset) 10px;
+	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-nc-widget-widget__body--vertical a.cn-nc-widget-widget__item--vertical {
@@ -3132,6 +3263,25 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A bar list in a framed section of a sections card is the board's small
+   list: 13px rows 8px apart, a 150px label column, a 10px bar and a 48px
+   value column (DqDoorlooptijd "Naleving per zaaktype").
+   @spec openspec/changes/board-section-bar-list-compact/specs/board-section-bar-list-compact/spec.md#requirement-a-bar-list-in-a-sections-card-section-is-compact */
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) .cn-chart-widget__bar-line {
+	grid-template-columns: 150px minmax(0, 1fr) 48px;
+	gap: 10px;
+	font-size: 13px;
+}
+
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) .cn-chart-widget__bar-track {
+	height: 10px;
+	border-radius: 5px;
+}
+
 /* 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.
@@ -3310,3 +3460,13 @@ html :where(.cn-look-board) :is(h2, h3, h5, h6):where(.cn-inner-heading) {
 .cn-look-board .cn-timeline-manage__draft-label:first-child:not(.cn-look-nextcloud *) {
 	margin-block-start: 0;
 }
+
+/* ---- The share dialog's audience rows ----------------------------------- */
+/* A person or group the view is shared with sits on the page's own ground at
+   radius 8, as DqFilterDelen draws it; Nextcloud's look keeps its hover grey
+   and large radius.
+   @spec openspec/changes/board-share-rows-ground/specs/board-share-rows-ground/spec.md */
+.cn-look-board .cn-saved-view-share__mode:not(.cn-look-nextcloud *) {
+	border-radius: 8px;
+	background: var(--cn-board-sunken-ground);
+}

package/src/css/table.css

@@ -310,7 +310,7 @@
 .cn-data-table--fit td.cn-table-col--grow.cn-cell--wrap {
 	min-width: 8em;
 	max-width: none;
-	overflow-wrap: anywhere;
+	overflow-wrap: break-word;
 	white-space: normal;
 }
 
@@ -359,6 +359,13 @@
 	font-weight: 500;
 }
 
+/* A lead cell's value reads 15px, a person's name over their function
+   (DqAfdelingen). */
+.cn-data-table td.cn-cell--lead > .cn-cell-renderer,
+.cn-data-table td.cn-cell--lead .cn-table-row__link > .cn-cell-renderer {
+	font-size: 15px;
+}
+
 .cn-data-table td.cn-cell--muted {
 	color: var(--color-text-maxcontrast);
 }
@@ -609,6 +616,15 @@
 	cursor: grab;
 }
 
+/* The handle before a reorderable row's name: a muted 16px grip 10px before it. */
+.cn-table-row__handle {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 10px;
+	color: var(--color-text-maxcontrast);
+	cursor: grab;
+}
+
 .cn-table-row--drop-target {
 	box-shadow: inset 0 2px 0 var(--color-primary-element);
 }

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.155.0",
+	"version": "2.156.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -5533,7 +5533,7 @@
 						"gridFloat": {
 							"type": "boolean",
 							"default": true,
-							"description": "type='dashboard': `false` packs widgets upward (GridStack `float: false`), so a size-to-content widget that shrinks closes the gap under it instead of leaving an empty band (zuiddrecht-pixel-gaps-3). Maps to CnDashboardPage `gridFloat`."
+							"description": "type='dashboard' and type='detail': `false` packs widgets upward (GridStack `float: false`), so a size-to-content widget that shrinks closes the gap under it instead of leaving an empty band (zuiddrecht-pixel-gaps-3). Maps to CnDashboardPage and CnDetailPage `gridFloat`."
 						},
 						"showTitle": {
 							"type": "boolean",

package/src/utils/builtInFormatters.js

@@ -2,6 +2,7 @@ import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { formatRelativeDate } from './boardDate.js'
 import { formatMoney } from './formatMetric.js'
 import { parseDuration } from './isoDuration.js'
+import { userDisplayName } from './userDisplayName.js'
 
 /**
  * @file Built-in formatters merged into the `cnFormatters` registry
@@ -523,6 +524,21 @@ export function formatIsoDuration(value) {
 	return words[period.unit] ? words[period.unit]() : String(value)
 }
 
+/**
+ * A Nextcloud user id as its display name (`userName` registry key): the id
+ * while the name is looked up, and for a user nobody answers for.
+ *
+ * @spec openspec/changes/user-name-formatter/specs/user-name-formatter/spec.md#requirement-a-user-id-can-read-as-its-display-name
+ * @param {unknown} value The user id.
+ * @return {string} The display name, the id, or ''.
+ */
+export function formatUserName(value) {
+	if (value === null || value === undefined || value === '' || typeof value === 'object') {
+		return ''
+	}
+	return userDisplayName(value) || String(value)
+}
+
 export const BUILT_IN_FORMATTERS = {
 	date: formatDate,
 	datetime: formatDateTime,
@@ -538,4 +554,5 @@ export const BUILT_IN_FORMATTERS = {
 	masked: formatMasked,
 	isoDuration: formatIsoDuration,
 	valueMap: formatValueMap,
+	userName: formatUserName,
 }

package/src/utils/detailObjectContext.js

@@ -47,8 +47,10 @@ function unwrap(v) {
  *
  * @param {object|null} objectCtx The `cnObjectContext` inject (ref or plain object).
  * @param {object|null} detailCtx The `cnDetailObjectContext` inject (`{ value }` holder).
- * @return {{objectId: (string|number|null), object: (object|null), register: string, schema: (string|object)}|null}
- *   The merged context, or null when neither inject resolves.
+ * @return {{objectId: (string|number|null), object: (object|null), register: string, schema: (string|object), context?: object}|null}
+ *   The merged context, or null when neither inject resolves. `context` is the
+ *   records the page's conditions name (`@context.<name>`), when the primary
+ *   inject carries them.
  */
 export function resolveObjectTokenContext(objectCtx, detailCtx) {
 	const primary = unwrap(objectCtx)
@@ -81,6 +83,9 @@ export function resolveObjectTokenContext(objectCtx, detailCtx) {
 		if (primary.schema) {
 			out.schema = primary.schema
 		}
+		if (primary.context && typeof primary.context === 'object') {
+			out.context = primary.context
+		}
 	}
 	return out
 }

package/src/utils/localHeaderRows.js

@@ -0,0 +1,91 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Header sort and filter applied to rows the table already holds (an
+ * `endpointSource` table): the same `{ field, dir }` sort and
+ * `{ paramKey: values[] }` filter map a self-fetching table sends to the
+ * server, read here in the browser.
+ *
+ * @module utils/localHeaderRows
+ */
+
+import { CONTAINS_OPERATOR } from './columnFilters.js'
+
+/**
+ * A row value as one comparable scalar: an array counts as its joined items.
+ *
+ * @param {unknown} value The raw value.
+ * @return {string|number|null} The value to compare.
+ */
+function scalar(value) {
+	if (value === null || value === undefined) {
+		return null
+	}
+	if (Array.isArray(value)) {
+		return value.map((item) => (item && typeof item === 'object' ? (item.title || item.name || '') : String(item))).join(', ')
+	}
+	if (typeof value === 'number' || typeof value === 'boolean') {
+		return typeof value === 'boolean' ? String(value) : value
+	}
+	return typeof value === 'object' ? (value.title || value.name || '') : String(value)
+}
+
+/**
+ * Whether a row holds a value the filter entry asks for.
+ *
+ * @param {object} row The row.
+ * @param {string} param The filter key (`field`, `field[like]`, `field[gte]`, `field[lte]`).
+ * @param {Array<string>} values The chosen values.
+ * @return {boolean} True when the row passes.
+ */
+function passes(row, param, values) {
+	const match = /^(.+)\[(\w+)\]$/.exec(param)
+	const field = match ? match[1] : param
+	const op = match ? match[2] : ''
+	const value = scalar(row[field])
+	if (op === CONTAINS_OPERATOR) {
+		const term = String(values[0]).toLowerCase()
+		return value !== null && String(value).toLowerCase().includes(term)
+	}
+	if (op === 'gte' || op === 'lte') {
+		if (value === null) {
+			return false
+		}
+		const left = typeof value === 'number' ? value : String(value)
+		const right = typeof value === 'number' ? Number(values[0]) : String(values[0])
+		return op === 'gte' ? left >= right : left <= right
+	}
+	return value !== null && values.map(String).includes(String(value))
+}
+
+/**
+ * The rows that pass every active header filter, in the header sort's order.
+ *
+ * @param {Array<object>} rows The rows.
+ * @param {{field: string, dir: string}|null} sort The header sort.
+ * @param {object} filters The header filters, `{ paramKey: values[] }`.
+ * @return {Array<object>} The rows to show (the same array when nothing applies).
+ */
+export function localHeaderRows(rows, sort, filters) {
+	if (!Array.isArray(rows)) {
+		return []
+	}
+	const active = Object.entries(filters || {}).filter(([, values]) => Array.isArray(values) && values.length > 0)
+	let out = active.length > 0 ? rows.filter((row) => row && active.every(([param, values]) => passes(row, param, values))) : rows
+	if (sort && sort.field) {
+		const sign = sort.dir === 'desc' ? -1 : 1
+		out = [...out].sort((a, b) => {
+			const left = scalar(a && a[sort.field])
+			const right = scalar(b && b[sort.field])
+			if (left === null || right === null) {
+				return left === right ? 0 : (left === null ? 1 : -1)
+			}
+			if (typeof left === 'number' && typeof right === 'number') {
+				return sign * (left - right)
+			}
+			return sign * String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: 'base' })
+		})
+	}
+	return out
+}