@conduction/nextcloud-vue 2.56.0-beta.35 → 2.56.0-beta.36

package/dist/esm/nextcloud-vue.css

@@ -781,6 +781,25 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
 }
+
+/* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
+/* The days wrap inside the card instead of scrolling sideways: a row holds
+   as many days of at least 120px as the card fits, and the rest go to the
+   next row (dossiq at 1100 wide held 680px of days in a 494px card and
+   scrolled; now three days and two). 120px keeps a case title's words whole;
+   five 88px days fitted one row but broke "Bezwaar" mid-word. A card wide
+   enough for the week draws it as before, one row of equal columns. The
+   day's head wraps its "today" badge under the label when the day is
+   narrow.
+   @spec openspec/changes/board-week-strip-fits/specs/week-strip-board-look/spec.md#requirement-a-board-week-strip-fits-its-card */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__days {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
+	min-width: 0;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
+	flex-wrap: wrap;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -3949,6 +3968,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;
@@ -22309,6 +22341,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;
@@ -23136,7 +23181,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-object-data-widget__image[data-v-76edf75d] {
+.cn-object-data-widget__image[data-v-324e1a00] {
 	max-width: 100%;
 	max-height: 160px;
 	border-radius: 8px;
@@ -23144,33 +23189,33 @@ a.cn-kpi-card--board * {
 }
 
 /* Shimmering placeholder while a relation's display name resolves. */
-.cn-object-data-widget__skeleton[data-v-76edf75d] {
+.cn-object-data-widget__skeleton[data-v-324e1a00] {
 	display: inline-block;
 	width: 90px;
 	height: 1em;
 	border-radius: 4px;
 	background: linear-gradient(90deg, var(--color-background-dark) 25%, var(--color-background-hover) 50%, var(--color-background-dark) 75%);
 	background-size: 200% 100%;
-	animation: cn-odw-shimmer-76edf75d 1.2s ease-in-out infinite;
+	animation: cn-odw-shimmer-324e1a00 1.2s ease-in-out infinite;
 }
-@keyframes cn-odw-shimmer-76edf75d {
+@keyframes cn-odw-shimmer-324e1a00 {
 from { background-position: 200% 0;
 }
 to { background-position: -200% 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.cn-object-data-widget__skeleton[data-v-76edf75d] { animation: none;
+.cn-object-data-widget__skeleton[data-v-324e1a00] { animation: none;
 }
 }
-.cn-object-data-widget__grid[data-v-76edf75d] {
+.cn-object-data-widget__grid[data-v-324e1a00] {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline, 4px)) calc(4 * var(--default-grid-baseline, 4px));
 }
-.cn-object-data-widget__toggle[data-v-76edf75d] {
+.cn-object-data-widget__toggle[data-v-324e1a00] {
 	margin-top: 4px;
 }
-.cn-object-data-widget__cell[data-v-76edf75d] {
+.cn-object-data-widget__cell[data-v-324e1a00] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -23178,12 +23223,12 @@ to { background-position: -200% 0;
 	border-bottom: 1px solid var(--color-border-dark);
 	min-width: 0;
 }
-.cn-object-data-widget__label[data-v-76edf75d] {
+.cn-object-data-widget__label[data-v-324e1a00] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__value[data-v-76edf75d] {
+.cn-object-data-widget__value[data-v-324e1a00] {
 	font-size: 1em;
 	color: var(--color-main-text);
 	overflow-wrap: anywhere;
@@ -23197,24 +23242,24 @@ to { background-position: -200% 0;
    which drew a horizontal scrollbar under every data widget in a tab (dossiq's
    case page, Data tab). The end padding drops by the same 4px so the text and
    the edit icon sit where they sat. */
-.cn-object-data-widget__value--editable[data-v-76edf75d] {
+.cn-object-data-widget__value--editable[data-v-324e1a00] {
 	cursor: pointer;
 	border-radius: var(--border-radius);
 	padding: 4px 20px 4px 4px;
 	margin: -4px 0 -4px -4px;
 }
-.cn-object-data-widget__value--editable[data-v-76edf75d]:hover {
+.cn-object-data-widget__value--editable[data-v-324e1a00]:hover {
 	background: var(--color-background-dark);
 }
-.cn-object-data-widget__value--editable[data-v-76edf75d]:focus-visible {
+.cn-object-data-widget__value--editable[data-v-324e1a00]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-object-data-widget__value--empty[data-v-76edf75d] {
+.cn-object-data-widget__value--empty[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
-.cn-object-data-widget__edit-icon[data-v-76edf75d] {
+.cn-object-data-widget__edit-icon[data-v-324e1a00] {
 	position: absolute;
 	right: 4px;
 	top: 50%;
@@ -23223,21 +23268,21 @@ to { background-position: -200% 0;
 	opacity: 0;
 	transition: opacity 0.15s ease;
 }
-.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-76edf75d],
-.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-76edf75d] {
+.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-324e1a00],
+.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-324e1a00] {
 	opacity: 1;
 }
-.cn-object-data-widget__editor[data-v-76edf75d] {
+.cn-object-data-widget__editor[data-v-324e1a00] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-object-data-widget__editor-actions[data-v-76edf75d] {
+.cn-object-data-widget__editor-actions[data-v-324e1a00] {
 	display: flex;
 	gap: 2px;
 	justify-content: flex-end;
 }
-.cn-object-data-widget__textarea[data-v-76edf75d] {
+.cn-object-data-widget__textarea[data-v-324e1a00] {
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -23249,11 +23294,11 @@ to { background-position: -200% 0;
 	font-size: inherit;
 	resize: vertical;
 }
-.cn-object-data-widget__textarea[data-v-76edf75d]:focus {
+.cn-object-data-widget__textarea[data-v-324e1a00]:focus {
 	border-color: var(--color-primary-element);
 	outline: none;
 }
-.cn-object-data-widget__empty[data-v-76edf75d] {
+.cn-object-data-widget__empty[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 	padding: calc(2 * var(--default-grid-baseline, 4px));
@@ -23261,16 +23306,16 @@ to { background-position: -200% 0;
 
 /* Compact inline table for array-of-objects values. Dense + unstyled-simple;
    fits the card and participates in the whole-row overflow handling. */
-.cn-object-data-widget__mini-table-wrap[data-v-76edf75d] {
+.cn-object-data-widget__mini-table-wrap[data-v-324e1a00] {
 	max-width: 100%;
 }
-.cn-object-data-widget__mini-table[data-v-76edf75d] {
+.cn-object-data-widget__mini-table[data-v-324e1a00] {
 	width: 100%;
 	border-collapse: collapse;
 	font-size: 0.9em;
 }
-.cn-object-data-widget__mini-table th[data-v-76edf75d],
-.cn-object-data-widget__mini-table td[data-v-76edf75d] {
+.cn-object-data-widget__mini-table th[data-v-324e1a00],
+.cn-object-data-widget__mini-table td[data-v-324e1a00] {
 	text-align: start;
 	padding: 2px 8px 2px 0;
 	border-bottom: 1px solid var(--color-border);
@@ -23281,23 +23326,23 @@ to { background-position: -200% 0;
 	   cell, and the card 8px wider than its cell (pipelinq's ticket page). */
 	white-space: normal;
 }
-.cn-object-data-widget__mini-table th[data-v-76edf75d] {
+.cn-object-data-widget__mini-table th[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__more[data-v-76edf75d] {
+.cn-object-data-widget__more[data-v-324e1a00] {
 	margin-top: 2px;
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
 
 /* Comma-less chip row for array-of-scalars values. */
-.cn-object-data-widget__chips[data-v-76edf75d] {
+.cn-object-data-widget__chips[data-v-324e1a00] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 }
-.cn-object-data-widget__chip[data-v-76edf75d] {
+.cn-object-data-widget__chip[data-v-324e1a00] {
 	padding: 1px 8px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -23305,27 +23350,37 @@ to { background-position: -200% 0;
 }
 
 /* Key: value definition list for a single plain-object value. */
-.cn-object-data-widget__deflist[data-v-76edf75d] {
+.cn-object-data-widget__deflist[data-v-324e1a00] {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	gap: 2px 8px;
 	margin: 0;
 }
-.cn-object-data-widget__deflist dt[data-v-76edf75d] {
+.cn-object-data-widget__deflist dt[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-object-data-widget__deflist dd[data-v-76edf75d] {
+.cn-object-data-widget__deflist dd[data-v-324e1a00] {
 	margin: 0;
 	overflow-wrap: anywhere;
 }
 
+/* A long description keeps its own paragraphs. Set on an inline span with no
+   surrounding template whitespace, so only the value's own line breaks show. */
+.cn-object-data-widget__deflist-text[data-v-324e1a00] {
+	white-space: pre-wrap;
+}
+.cn-object-data-widget__deflist--nested[data-v-324e1a00] {
+	padding-inline-start: 8px;
+	border-inline-start: 2px solid var(--color-border);
+}
+
 /* Responsive: collapse to single column on narrow widths */
 @media (max-width: 600px) {
-.cn-object-data-widget__grid[data-v-76edf75d] {
+.cn-object-data-widget__grid[data-v-324e1a00] {
 		grid-template-columns: 1fr !important;
 }
-.cn-object-data-widget__cell[data-v-76edf75d] {
+.cn-object-data-widget__cell[data-v-324e1a00] {
 		grid-column: span 1 !important;
 		grid-row: span 1 !important;
 }
@@ -25216,18 +25271,18 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-week-strip[data-v-b6c5e274] {
+.cn-week-strip[data-v-27a717bd] {
 	width: 100%;
 }
 
 /* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
    gaps-3). A dashboard renders its widgets flush, so without it the strip ran
    from card edge to card edge. Theme hook: --cn-widget-board-inset. */
-.cn-week-strip--inset[data-v-b6c5e274] {
+.cn-week-strip--inset[data-v-27a717bd] {
 	box-sizing: border-box;
 	padding: var(--cn-widget-board-inset, 16px 24px 22px);
 }
-.cn-week-strip__state[data-v-b6c5e274] {
+.cn-week-strip__state[data-v-27a717bd] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -25235,15 +25290,15 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 12px 4px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-week-strip__scroll[data-v-b6c5e274] {
+.cn-week-strip__scroll[data-v-27a717bd] {
 	overflow-x: auto;
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-week-strip__scroll[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__scroll[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-week-strip__days[data-v-b6c5e274] {
+.cn-week-strip__days[data-v-27a717bd] {
 	display: grid;
 	grid-template-columns: repeat(var(--cn-week-strip-columns, 5), minmax(128px, 1fr));
 	gap: 10px;
@@ -25253,7 +25308,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0;
 	list-style: none;
 }
-.cn-week-strip__day[data-v-b6c5e274] {
+.cn-week-strip__day[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -25263,11 +25318,11 @@ button.cn-stepper__step[data-v-776581d4] {
 	border-radius: var(--border-radius-large, 8px);
 	background: var(--color-background-hover);
 }
-.cn-week-strip__day--today[data-v-b6c5e274] {
+.cn-week-strip__day--today[data-v-27a717bd] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
-.cn-week-strip__head[data-v-b6c5e274] {
+.cn-week-strip__head[data-v-27a717bd] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -25276,7 +25331,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-week-strip__today[data-v-b6c5e274] {
+.cn-week-strip__today[data-v-27a717bd] {
 	padding: 1px 8px;
 	border-radius: var(--border-radius-pill, 10px);
 	background: var(--color-primary-element);
@@ -25284,7 +25339,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 0.85em;
 	font-weight: 700;
 }
-.cn-week-strip__items[data-v-b6c5e274] {
+.cn-week-strip__items[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -25292,7 +25347,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0;
 	list-style: none;
 }
-.cn-week-strip__item[data-v-b6c5e274] {
+.cn-week-strip__item[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -25303,41 +25358,41 @@ button.cn-stepper__step[data-v-776581d4] {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
-.cn-week-strip__item--link[data-v-b6c5e274]:hover {
+.cn-week-strip__item--link[data-v-27a717bd]:hover {
 	border-color: var(--color-primary-element);
 }
-.cn-week-strip__item--link[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__item--link[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
 
 /* The edge is drawn inside the box, so a late item is as wide as the others. */
-.cn-week-strip__item--late[data-v-b6c5e274] {
+.cn-week-strip__item--late[data-v-27a717bd] {
 	border-color: var(--color-element-error, var(--color-error));
 	box-shadow: inset 3px 0 0 0 var(--color-element-error, var(--color-error));
 }
-.cn-week-strip__title[data-v-b6c5e274] {
+.cn-week-strip__title[data-v-27a717bd] {
 	font-size: 0.95em;
 	line-height: 1.3;
 	overflow-wrap: anywhere;
 }
-.cn-week-strip__meta[data-v-b6c5e274] {
+.cn-week-strip__meta[data-v-27a717bd] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	overflow-wrap: anywhere;
 }
-.cn-week-strip__late[data-v-b6c5e274] {
+.cn-week-strip__late[data-v-27a717bd] {
 	font-size: 0.8em;
 	font-weight: 600;
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-week-strip__empty[data-v-b6c5e274] {
+.cn-week-strip__empty[data-v-27a717bd] {
 	font-size: 0.9em;
 	color: var(--color-text-maxcontrast);
 }
 
 /* "+N more" under a capped day: a quiet text control, 24px high to click. */
-.cn-week-strip__more[data-v-b6c5e274] {
+.cn-week-strip__more[data-v-27a717bd] {
 	align-self: flex-start;
 	min-height: 24px;
 	margin: 0;
@@ -25352,10 +25407,10 @@ button.cn-stepper__step[data-v-776581d4] {
 	text-decoration: none;
 	cursor: pointer;
 }
-.cn-week-strip__more[data-v-b6c5e274]:hover {
+.cn-week-strip__more[data-v-27a717bd]:hover {
 	text-decoration: underline;
 }
-.cn-week-strip__more[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__more[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -37533,17 +37588,17 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-dashboard-grid[data-v-ca2ae49c] {
+.cn-dashboard-grid[data-v-a91998fc] {
 	width: 100%;
 	min-height: 200px;
 }
-.grid-stack[data-v-ca2ae49c] {
+.grid-stack[data-v-a91998fc] {
 	background: transparent;
 }
 
 /* Screen-reader-only text: the keyboard key map and the live region. Kept in
    the layout (not `display: none`) so assistive tech still reads it. */
-.cn-dashboard-grid__sr-only[data-v-ca2ae49c] {
+.cn-dashboard-grid__sr-only[data-v-a91998fc] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -37558,7 +37613,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* Grid items become tab stops in edit mode — give them a visible focus ring
    that satisfies WCAG 2.1 SC 2.4.7 without relying on the widget's own
    styling. `outline-offset` keeps the ring outside the rounded card. */
-.grid-stack-item[data-v-ca2ae49c]:focus-visible {
+.grid-stack-item[data-v-a91998fc]:focus-visible {
 	outline: 2px solid var(--color-primary-element, #0082c9);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
@@ -37570,19 +37625,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    cell never shrank: "Waiting for me" stayed a tall card around one row. In
    such a cell the child takes its own height. A cell without the key keeps
    the filling child. */
-.cn-dashboard-grid__item--fit[data-v-ca2ae49c] >  .grid-stack-item-content > * {
+.cn-dashboard-grid__item--fit[data-v-a91998fc] >  .grid-stack-item-content > * {
 	height: auto;
 }
-[data-v-ca2ae49c] .grid-stack-item-content {
+[data-v-a91998fc] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;
 	box-shadow: none;
 	overflow: hidden;
 }
-[data-v-ca2ae49c] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
+[data-v-a91998fc] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
 	background: transparent;
 }
-[data-v-ca2ae49c] .grid-stack-placeholder > .placeholder-content {
+[data-v-a91998fc] .grid-stack-placeholder > .placeholder-content {
 	background: var(--color-primary-element-light);
 	border: 2px dashed var(--color-primary-element);
 	border-radius: var(--border-radius-large);

package/dist/esm/utils/gridStack.js

@@ -55,5 +55,44 @@ function readGridGeometry(items) {
 	return map
 }
 
-export { initGridStack, readGridGeometry };
+/**
+ * Where the items under a growing cell go so they keep their order: every item
+ * the growth would overlap moves down by the growth, and so does every item
+ * that move would overlap in turn. Items beside the cell stay put.
+ *
+ * GridStack resolves the same collision itself, but not in order: when
+ * pipelinq's size-to-content banner grew from two rows to three, the
+ * full-width card under the stat tiles landed below the lists.
+ *
+ * @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 {Array<{x: number, y: number, w: number, h: number}>} nodes The grid's items (the growing one among them).
+ * @param {{x: number, y: number, w: number, h: number}} node The growing item.
+ * @param {number} h Its new height, in grid rows.
+ * @return {Array<{node: object, y: number}>} The items to move and their new row, bottom-most first.
+ */
+function planGrowth(nodes, node, h) {
+	const delta = h - node.h;
+	if (!(delta > 0)) {
+		return []
+	}
+	const moved = new Map();
+	const overlaps = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+	const queue = [{ x: node.x, y: node.y, w: node.w, h }];
+	while (queue.length > 0) {
+		const rect = queue.shift();
+		for (const other of nodes) {
+			if (other === node || moved.has(other) || !overlaps(rect, other)) {
+				continue
+			}
+			const next = { x: other.x, y: other.y + delta, w: other.w, h: other.h };
+			moved.set(other, next.y);
+			queue.push(next);
+		}
+	}
+	return [...moved.entries()]
+		.map(([item, y]) => ({ node: item, y }))
+		.sort((a, b) => b.y - a.y)
+}
+
+export { initGridStack, planGrowth, readGridGeometry };
 //# sourceMappingURL=gridStack.js.map

package/dist/esm/utils/gridStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"gridStack.js","sources":["../../../src/utils/gridStack.js"],"sourcesContent":["/**\n * Thin GridStack bootstrap shared by the drag/resize grids (CnDashboardGrid and\n * CnWidgetGrid's editable body slot). Keeps the GridStack option shape in one\n * place so the two engines stay consistent.\n *\n * @module utils/gridStack\n */\n\nimport { GridStack } from 'gridstack'\n// `gridstack` is a peerDependency, not bundled — see the matching comment in\n// CnDashboardGrid.vue. The consumer must install `gridstack` themselves and\n// import its stylesheet (`gridstack/dist/gridstack.min.css`) from that same\n// copy; nc-vue ships no GridStack CSS of its own so the JS driving the grid\n// and the CSS sizing it can never come from two different versions.\n\n/**\n * Initialise a GridStack instance on a `.grid-stack` element.\n *\n * @param {HTMLElement} el The `.grid-stack` container element.\n * @param {object} opts Options.\n * @param {number} opts.columns Column count.\n * @param {boolean} opts.editable Whether drag + resize are enabled.\n * @param {number} [opts.cellHeight] Cell height in px (default 80).\n * @param {number} [opts.margin] Grid margin in px (default 12).\n * @return {import('gridstack').GridStack} The GridStack instance.\n */\nexport function initGridStack(el, opts) {\n\tconst { columns, editable, cellHeight = 80, margin = 12 } = opts\n\treturn GridStack.init({\n\t\tcolumn: columns,\n\t\tcellHeight,\n\t\tmargin,\n\t\tfloat: true,\n\t\tanimate: true,\n\t\tdisableDrag: !editable,\n\t\tdisableResize: !editable,\n\t\tremovable: false,\n\t}, el)\n}\n\n/**\n * Read the geometry GridStack reports for a changed set of items into a plain\n * map keyed by node id.\n *\n * @param {Array<{id: (string|number), x: number, y: number, w: number, h: number}>} items\n *   The items GridStack passes to its `change` handler.\n * @return {Map<string, {gridX: number, gridY: number, gridWidth: number, gridHeight: number}>}\n */\nexport function readGridGeometry(items) {\n\tconst map = new Map()\n\tfor (const it of items || []) {\n\t\tmap.set(String(it.id), { gridX: it.x, gridY: it.y, gridWidth: it.w, gridHeight: it.h })\n\t}\n\treturn map\n}\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,aAAa,CAAC,EAAE,EAAE,IAAI,EAAE;AACxC,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,KAAI;AACjE,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;AACvB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,KAAK,EAAE,IAAI;AACb,EAAE,OAAO,EAAE,IAAI;AACf,EAAE,WAAW,EAAE,CAAC,QAAQ;AACxB,EAAE,aAAa,EAAE,CAAC,QAAQ;AAC1B,EAAE,SAAS,EAAE,KAAK;AAClB,EAAE,EAAE,EAAE,CAAC;AACP,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,gBAAgB,CAAC,KAAK,EAAE;AACxC,CAAC,MAAM,GAAG,GAAG,IAAI,GAAG,GAAE;AACtB,CAAC,KAAK,MAAM,EAAE,IAAI,KAAK,IAAI,EAAE,EAAE;AAC/B,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,EAAC;AACzF,EAAE;AACF,CAAC,OAAO,GAAG;AACX;;;;"}
+{"version":3,"file":"gridStack.js","sources":["../../../src/utils/gridStack.js"],"sourcesContent":["/**\n * Thin GridStack bootstrap shared by the drag/resize grids (CnDashboardGrid and\n * CnWidgetGrid's editable body slot). Keeps the GridStack option shape in one\n * place so the two engines stay consistent.\n *\n * @module utils/gridStack\n */\n\nimport { GridStack } from 'gridstack'\n// `gridstack` is a peerDependency, not bundled — see the matching comment in\n// CnDashboardGrid.vue. The consumer must install `gridstack` themselves and\n// import its stylesheet (`gridstack/dist/gridstack.min.css`) from that same\n// copy; nc-vue ships no GridStack CSS of its own so the JS driving the grid\n// and the CSS sizing it can never come from two different versions.\n\n/**\n * Initialise a GridStack instance on a `.grid-stack` element.\n *\n * @param {HTMLElement} el The `.grid-stack` container element.\n * @param {object} opts Options.\n * @param {number} opts.columns Column count.\n * @param {boolean} opts.editable Whether drag + resize are enabled.\n * @param {number} [opts.cellHeight] Cell height in px (default 80).\n * @param {number} [opts.margin] Grid margin in px (default 12).\n * @return {import('gridstack').GridStack} The GridStack instance.\n */\nexport function initGridStack(el, opts) {\n\tconst { columns, editable, cellHeight = 80, margin = 12 } = opts\n\treturn GridStack.init({\n\t\tcolumn: columns,\n\t\tcellHeight,\n\t\tmargin,\n\t\tfloat: true,\n\t\tanimate: true,\n\t\tdisableDrag: !editable,\n\t\tdisableResize: !editable,\n\t\tremovable: false,\n\t}, el)\n}\n\n/**\n * Read the geometry GridStack reports for a changed set of items into a plain\n * map keyed by node id.\n *\n * @param {Array<{id: (string|number), x: number, y: number, w: number, h: number}>} items\n *   The items GridStack passes to its `change` handler.\n * @return {Map<string, {gridX: number, gridY: number, gridWidth: number, gridHeight: number}>}\n */\nexport function readGridGeometry(items) {\n\tconst map = new Map()\n\tfor (const it of items || []) {\n\t\tmap.set(String(it.id), { gridX: it.x, gridY: it.y, gridWidth: it.w, gridHeight: it.h })\n\t}\n\treturn map\n}\n\n/**\n * Where the items under a growing cell go so they keep their order: every item\n * the growth would overlap moves down by the growth, and so does every item\n * that move would overlap in turn. Items beside the cell stay put.\n *\n * GridStack resolves the same collision itself, but not in order: when\n * pipelinq's size-to-content banner grew from two rows to three, the\n * full-width card under the stat tiles landed below the lists.\n *\n * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it\n * @param {Array<{x: number, y: number, w: number, h: number}>} nodes The grid's items (the growing one among them).\n * @param {{x: number, y: number, w: number, h: number}} node The growing item.\n * @param {number} h Its new height, in grid rows.\n * @return {Array<{node: object, y: number}>} The items to move and their new row, bottom-most first.\n */\nexport function planGrowth(nodes, node, h) {\n\tconst delta = h - node.h\n\tif (!(delta > 0)) {\n\t\treturn []\n\t}\n\tconst moved = new Map()\n\tconst overlaps = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h\n\tconst queue = [{ x: node.x, y: node.y, w: node.w, h }]\n\twhile (queue.length > 0) {\n\t\tconst rect = queue.shift()\n\t\tfor (const other of nodes) {\n\t\t\tif (other === node || moved.has(other) || !overlaps(rect, other)) {\n\t\t\t\tcontinue\n\t\t\t}\n\t\t\tconst next = { x: other.x, y: other.y + delta, w: other.w, h: other.h }\n\t\t\tmoved.set(other, next.y)\n\t\t\tqueue.push(next)\n\t\t}\n\t}\n\treturn [...moved.entries()]\n\t\t.map(([item, y]) => ({ node: item, y }))\n\t\t.sort((a, b) => b.y - a.y)\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/utils/humaniseKey.js

@@ -0,0 +1,41 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * Make an identifier-shaped key readable for a person. Pure: no Vue.
+ */
+
+/**
+ * Split camelCase, snake_case and kebab-case into words, keep acronyms, and
+ * capitalise only the first word.
+ *
+ * `caseAssigned` → "Case assigned", `object_created` → "Object created",
+ * `newBRPRecord` → "New BRP record".
+ *
+ * @param {string} key The key.
+ * @return {string} A readable sentence-case label, or the key when it has no words.
+ * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-nested-object-reads-as-a-list-per-key
+ */
+function humaniseKey(key) {
+	const words = String(key || '')
+		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+		.split(/[\s_\-.]+/)
+		.filter(Boolean);
+	if (words.length === 0) {
+		return String(key || '')
+	}
+	return words
+		.map((word, index) => {
+			const isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word);
+			if (isAcronym) {
+				return word
+			}
+			const lower = word.toLowerCase();
+			return index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower
+		})
+		.join(' ')
+}
+
+export { humaniseKey };
+//# sourceMappingURL=humaniseKey.js.map

package/dist/esm/utils/humaniseKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"humaniseKey.js","sources":["../../../src/utils/humaniseKey.js"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>\n * SPDX-License-Identifier: EUPL-1.2\n *\n * Make an identifier-shaped key readable for a person. Pure: no Vue.\n */\n\n/**\n * Split camelCase, snake_case and kebab-case into words, keep acronyms, and\n * capitalise only the first word.\n *\n * `caseAssigned` → \"Case assigned\", `object_created` → \"Object created\",\n * `newBRPRecord` → \"New BRP record\".\n *\n * @param {string} key The key.\n * @return {string} A readable sentence-case label, or the key when it has no words.\n * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-nested-object-reads-as-a-list-per-key\n */\nexport function humaniseKey(key) {\n\tconst words = String(key || '')\n\t\t.replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n\t\t.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')\n\t\t.split(/[\\s_\\-.]+/)\n\t\t.filter(Boolean)\n\tif (words.length === 0) {\n\t\treturn String(key || '')\n\t}\n\treturn words\n\t\t.map((word, index) => {\n\t\t\tconst isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word)\n\t\t\tif (isAcronym) {\n\t\t\t\treturn word\n\t\t\t}\n\t\t\tconst lower = word.toLowerCase()\n\t\t\treturn index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower\n\t\t})\n\t\t.join(' ')\n}\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS,WAAW,CAAC,GAAG,EAAE;AACjC,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;AAChC,GAAG,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;AACzC,GAAG,OAAO,CAAC,uBAAuB,EAAE,OAAO,CAAC;AAC5C,GAAG,KAAK,CAAC,WAAW,CAAC;AACrB,GAAG,MAAM,CAAC,OAAO,EAAC;AAClB,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AACzB,EAAE,OAAO,MAAM,CAAC,GAAG,IAAI,EAAE,CAAC;AAC1B,EAAE;AACF,CAAC,OAAO,KAAK;AACb,GAAG,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK;AACxB,GAAG,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,EAAC;AACzF,GAAG,IAAI,SAAS,EAAE;AAClB,IAAI,OAAO,IAAI;AACf,IAAI;AACJ,GAAG,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,GAAE;AACnC,GAAG,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK;AAC9E,GAAG,CAAC;AACJ,GAAG,IAAI,CAAC,GAAG,CAAC;AACZ;;;;"}

package/dist/esm/utils/notificationRuleLabel.js

@@ -1,3 +1,5 @@
+import { humaniseKey } from './humaniseKey.js';
+
 /**
  * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
  * SPDX-License-Identifier: EUPL-1.2
@@ -28,6 +30,7 @@
  * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md
  */
 
+
 /**
  * Pick the string for the current language out of a string or per-locale map.
  *
@@ -54,34 +57,14 @@ function resolveLocalised(value, language = 'en') {
 }
 
 /**
- * Make a rule key readable: split camelCase, snake_case and kebab-case into
- * words, keep acronyms, and capitalise only the first word.
- *
- * `caseAssigned` → "Case assigned", `object_created` → "Object created",
- * `newBRPRecord` → "New BRP record".
+ * Make a rule key readable (`caseAssigned` → "Case assigned"); see `humaniseKey`.
  *
  * @param {string} key The rule key.
  * @return {string} A readable sentence-case label, or the key when it has no words.
+ * @spec openspec/changes/notification-rule-labels-and-runtime-version/specs/notification-preferences/spec.md#requirement-a-notification-rule-reads-as-a-label
  */
 function humaniseRuleKey(key) {
-	const words = String(key || '')
-		.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
-		.split(/[\s_\-.]+/)
-		.filter(Boolean);
-	if (words.length === 0) {
-		return String(key || '')
-	}
-	return words
-		.map((word, index) => {
-			const isAcronym = word.length > 1 && word === word.toUpperCase() && /[A-Z]/.test(word);
-			if (isAcronym) {
-				return word
-			}
-			const lower = word.toLowerCase();
-			return index === 0 ? lower.charAt(0).toUpperCase() + lower.slice(1) : lower
-		})
-		.join(' ')
+	return humaniseKey(key)
 }
 
 /**