@mmlogic/components 0.5.14 → 0.5.16

package/dist/cjs/mrd-merge-view.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-DVbdkYO3.js');
-var clientLayout = require('./client-layout-CqVuJumR.js');
-var cellRenderer = require('./cell-renderer-mjS630f1.js');
+var clientLayout = require('./client-layout-Eg2VwW-7.js');
+var cellRenderer = require('./cell-renderer-CLVKTVVQ.js');
 
 /**
  * Whether a layout item can appear in the merge diff at all. m-n relations
@@ -257,14 +257,14 @@ const MrdMergeView = class {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (index.h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (index.h(MergeSearchStep, { key: '88ddac4f8f60a736bc6bc898b553e24771023b82', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
         }
         else {
             const diff = diffFields(this.fields, this.currentRecord, this.candidate);
             const bLabel = candidateLabel(this.candidate);
             stepContent = this.step === 'compare' ? (index.h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (index.h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
         }
-        return (index.h(index.Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, index.h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
+        return (index.h(index.Host, { key: '3606faba4c86ae1d981b7c40e4f1cb9cde19cf50' }, index.h("div", { key: '9605009fec0a7c79a5cd32141d930ea04e5efaad', class: "mrd-merge-view" }, stepContent)));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -24,6 +24,9 @@
     "components/form/mrd-form/mrd-form.js",
     "components/invoice/mrd-invoice-view/mrd-invoice-view.js",
     "components/layout/mrd-layout-section/mrd-layout-section.js",
+    "components/memo/mrd-memo-container/mrd-memo-container.js",
+    "components/memo/mrd-memo-list/mrd-memo-list.js",
+    "components/memo/mrd-memo-view/mrd-memo-view.js",
     "components/merge/mrd-merge-view/mrd-merge-view.js",
     "components/table/mrd-table/mrd-table.js"
   ],

package/dist/collection/components/fields/mrd-textarea-field/mrd-textarea-field.js

@@ -10,12 +10,29 @@ export class MrdTextareaField {
         this.required = false;
         this.disabled = false;
         this.locale = navigator.language;
+        /** Focus the editor as soon as it's ready — opt-in, since auto-focusing every
+         *  textarea field on mount would be wrong for a regular multi-field form. */
+        this.autofocus = false;
         this.error = '';
         this.editorReady = false;
     }
     componentDidLoad() {
         this.initQuill();
     }
+    /** The host may reuse the same element for a different record (e.g. mrd-memo-
+     *  container's quick-create/edit dialog editing a second memo without the
+     *  dialog itself remounting) — Quill only reads `value` once at construction,
+     *  so re-apply it here when it changes to something the editor doesn't already
+     *  hold. Guarded against our own emitted mrdChange feeding back in as a no-op. */
+    valueChanged(newValue) {
+        if (!this.editorReady || !this.quill)
+            return;
+        if (newValue === this.getSanitizedHtml())
+            return;
+        this.quill.setText('');
+        if (newValue)
+            this.quill.clipboard.dangerouslyPasteHTML(newValue);
+    }
     async initQuill() {
         try {
             // Dynamically import Quill
@@ -37,6 +54,7 @@ export class MrdTextareaField {
                     ],
                 },
             });
+            this.quill = quill;
             if (this.value) {
                 quill.clipboard.dangerouslyPasteHTML(this.value);
             }
@@ -51,8 +69,9 @@ export class MrdTextareaField {
                     this.mrdBlur.emit({ name: this.name, value: html });
                 }
             });
-            void quill; // hold reference if needed later
             this.editorReady = true;
+            if (this.autofocus)
+                quill.focus();
         }
         catch (err) {
             console.error('Failed to load Quill editor:', err);
@@ -64,7 +83,7 @@ export class MrdTextareaField {
         return DOMPurify.sanitize(html);
     }
     render() {
-        return (h(Host, { key: 'e132531881f68f373e700617aac8033c8ebccb47' }, h("div", { key: 'fec0cf56cd7868d3fcd5a4e8a382b2dcdb6e5c50', class: "mrd-textarea-field" }, h(FieldLabel, { key: '333aa2ff57cce9e3178f0c4be4a1df1077884248', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: '40025207580eb5768981b85aaa0a8ff95fce7234', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '621987b3b2b1d8b4836bff065075ba527a82db81', class: "mrd-textarea-field__editor" })), h(FieldError, { key: 'ac2d8de22f008cd1c91842137ccd0cd36eb9ce19', base: "mrd-textarea-field", error: this.error }))));
+        return (h(Host, { key: '5dad54667601fce064107311e741e4e0dad94298' }, h("div", { key: 'bd7bd538155ec3172fa8cc1cf4cf66ad23d07a3b', class: "mrd-textarea-field" }, h(FieldLabel, { key: 'a3fe2c714340bbdcd3521e9782f87f3773c65e62', base: "mrd-textarea-field", label: this.label, required: this.required }), h("div", { key: 'a7a628f94bc628fd358c7fc876ee1bdd2c7ef520', class: controlClass('mrd-textarea-field', !!this.error, 'container') }, h("div", { key: '30ecd27d9e928094178f8f011524ff5633cb875e', class: "mrd-textarea-field__editor" })), h(FieldError, { key: '589d5cbf28c3ae1bdbe5f663aaf6cae840bdcffe', base: "mrd-textarea-field", error: this.error }))));
     }
     static get is() { return "mrd-textarea-field"; }
     static get encapsulation() { return "scoped"; }
@@ -219,6 +238,26 @@ export class MrdTextareaField {
                 "reflect": false,
                 "attribute": "locale",
                 "defaultValue": "navigator.language"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus the editor as soon as it's ready \u2014 opt-in, since auto-focusing every\ntextarea field on mount would be wrong for a regular multi-field form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
             }
         };
     }
@@ -262,4 +301,10 @@ export class MrdTextareaField {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }

package/dist/collection/components/form/mrd-field/mrd-field.css

@@ -102,4 +102,73 @@
 }
 .mrd-field__history-editor-add:hover {
   background-color: var(--mrd-color-primary-light);
+}
+.mrd-field__multi {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-field__multi__label {
+  display: block;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-label-font-size);
+  font-weight: var(--mrd-label-font-weight);
+  color: var(--mrd-label-color);
+}
+.mrd-field__multi__label--required::after {
+  content: " *";
+  color: var(--mrd-color-danger);
+}
+.mrd-field__multi__error {
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-error-font-size);
+  color: var(--mrd-error-color);
+}
+.mrd-field__multi-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mrd-space-2);
+}
+.mrd-field__multi-row-input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.mrd-field__multi-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: var(--mrd-input-height);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--mrd-border-radius-sm);
+  color: var(--mrd-color-neutral-400);
+  cursor: pointer;
+  transition: color var(--mrd-transition-fast), background-color var(--mrd-transition-fast);
+}
+.mrd-field__multi-remove:hover {
+  color: var(--mrd-color-danger);
+  background-color: var(--mrd-color-danger-light);
+}
+.mrd-field__multi-remove svg {
+  width: 1rem;
+  height: 1rem;
+}
+.mrd-field__multi-add {
+  align-self: flex-start;
+  padding: var(--mrd-space-1) var(--mrd-space-3);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-primary);
+  background: transparent;
+  border: var(--mrd-border-width) solid var(--mrd-color-primary);
+  border-radius: var(--mrd-border-radius-md);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition-fast), color var(--mrd-transition-fast);
+}
+.mrd-field__multi-add:hover {
+  background-color: var(--mrd-color-primary-light);
 }

package/dist/collection/components/form/mrd-field/mrd-field.js

@@ -1,11 +1,19 @@
 import { Host, h } from "@stencil/core";
 import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutItemRelationDisplayType, } from "../../../types";
 import { t } from "../../../utils/i18n";
+import { FieldLabel, FieldError, requiredError } from "../../fields/field-helpers";
 export class MrdField {
     constructor() {
         this.locale = navigator.language;
         this.historyEntries = [];
         this.currentValue = undefined;
+        this.multiValues = [];
+        this.multiError = '';
+        this.handleMultiRowBlur = () => {
+            var _a;
+            this.multiError = requiredError(this.multiValues, (_a = this.item.required) !== null && _a !== void 0 ? _a : false, this.locale);
+            this.mrdBlur.emit({ name: this.item.name, value: this.multiValues });
+        };
         this.handleChange = (e) => {
             var _a, _b, _c, _d;
             e.stopPropagation();
@@ -50,9 +58,11 @@ export class MrdField {
     }
     componentWillLoad() {
         this.initHistoryState();
+        this.initMultiState();
     }
     valueChanged() {
         this.initHistoryState();
+        this.initMultiState();
     }
     initHistoryState() {
         var _a, _b, _c, _d, _e;
@@ -63,6 +73,43 @@ export class MrdField {
         this.currentValue = (_e = raw === null || raw === void 0 ? void 0 : raw.current) !== null && _e !== void 0 ? _e : raw;
         this.historyEntries = Array.isArray(raw === null || raw === void 0 ? void 0 : raw.history) ? [...raw.history] : [];
     }
+    /** LIST/FILE/IMAGE already own their multiple-value UI end to end; every
+     *  other scalar dataType routes through the generic repeater below instead
+     *  of each leaf field re-implementing add/remove itself (FINDING-0149). */
+    isMultiScalar() {
+        var _a, _b;
+        if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) !== ClientLayoutItemType.FIELD || !((_b = this.item) === null || _b === void 0 ? void 0 : _b.multiple))
+            return false;
+        const dt = this.item.dataType;
+        return dt !== ClientLayoutItemFieldDataType.LIST
+            && dt !== ClientLayoutItemFieldDataType.FILE
+            && dt !== ClientLayoutItemFieldDataType.IMAGE;
+    }
+    initMultiState() {
+        if (!this.isMultiScalar())
+            return;
+        const v = this.value;
+        this.multiValues = Array.isArray(v) ? [...v] : (v != null && v !== '' ? [v] : []);
+    }
+    emptyRowValue() {
+        var _a;
+        switch (this.item.dataType) {
+            case ClientLayoutItemFieldDataType.INTEGER:
+            case ClientLayoutItemFieldDataType.DECIMAL:
+            case ClientLayoutItemFieldDataType.PERCENTAGE:
+                return null;
+            case ClientLayoutItemFieldDataType.CURRENCY:
+                return { amount: null, currency: (_a = this.item.currencyCode) !== null && _a !== void 0 ? _a : 'EUR' };
+            case ClientLayoutItemFieldDataType.BOOLEAN:
+                return false;
+            default:
+                return '';
+        }
+    }
+    emitMultiChange(values) {
+        this.multiValues = values;
+        this.mrdChange.emit({ name: this.item.name, value: values });
+    }
     getDisplayValue() {
         var _a, _b, _c, _d;
         const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
@@ -91,6 +138,9 @@ export class MrdField {
             value: { current: this.currentValue, history: entries },
         });
     }
+    renderRemoveIcon() {
+        return (h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })));
+    }
     renderHistoryEditor() {
         var _a, _b, _c, _d;
         const hist = (_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.historyEnabled) !== null && _b !== void 0 ? _b : (_d = (_c = this.item) === null || _c === void 0 ? void 0 : _c.field) === null || _d === void 0 ? void 0 : _d.historyEnabled;
@@ -108,62 +158,80 @@ export class MrdField {
         const addEntry = () => {
             this.emitHistoryChange([...this.historyEntries, { value: '', until: '' }]);
         };
-        return (h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (h("div", { key: String(i), class: "mrd-field__history-editor-row" }, h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, h("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z", "clip-rule": "evenodd" })))))), h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
+        return (h("div", { class: "mrd-field__history-editor" }, this.historyEntries.length > 0 && (h("span", { class: "mrd-field__history-editor-label" }, t('history_badge_tooltip', locale))), this.historyEntries.map((entry, i) => (h("div", { key: String(i), class: "mrd-field__history-editor-row" }, h("input", { class: "mrd-field__history-editor-value", type: valueType, value: entry.value, onInput: (e) => updateEntry(i, 'value', e.target.value) }), h("span", { class: "mrd-field__history-editor-sep" }, t('history_until', locale)), h("input", { class: "mrd-field__history-editor-until", type: "date", value: entry.until, onInput: (e) => updateEntry(i, 'until', e.target.value) }), h("button", { type: "button", class: "mrd-field__history-editor-remove", onClick: () => removeEntry(i), "aria-label": t('remove', locale) }, this.renderRemoveIcon())))), h("button", { type: "button", class: "mrd-field__history-editor-add", onClick: addEntry }, "+ ", t('add', locale))));
     }
-    renderLeafField(displayValue) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+    renderLeafField(displayValue, onChange = this.handleChange, onBlur = this.handleBlur, overrides = {}) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const { item, locale } = this;
         const commonProps = {
             name: item.name,
-            label: item.label,
-            required: item.required,
-            disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false,
+            label: (_a = overrides.label) !== null && _a !== void 0 ? _a : item.label,
+            required: (_b = overrides.required) !== null && _b !== void 0 ? _b : item.required,
+            disabled: (_c = item.disabled) !== null && _c !== void 0 ? _c : false,
             locale,
-            onMrdChange: this.handleChange,
-            onMrdBlur: this.handleBlur,
+            onMrdChange: onChange,
+            onMrdBlur: onBlur,
         };
         switch (item.dataType) {
             case ClientLayoutItemFieldDataType.TEXT:
-                return (h("mrd-text-field", Object.assign({}, commonProps, { value: (_b = displayValue) !== null && _b !== void 0 ? _b : '', placeholder: (_c = item.placeholder) !== null && _c !== void 0 ? _c : '' })));
+                return (h("mrd-text-field", Object.assign({}, commonProps, { value: (_d = displayValue) !== null && _d !== void 0 ? _d : '', placeholder: (_e = item.placeholder) !== null && _e !== void 0 ? _e : '' })));
             case ClientLayoutItemFieldDataType.TEXTBLOCK:
-                return (h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_d = displayValue) !== null && _d !== void 0 ? _d : '', placeholder: (_e = item.placeholder) !== null && _e !== void 0 ? _e : '' })));
+                return (h("mrd-textarea-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : '', placeholder: (_g = item.placeholder) !== null && _g !== void 0 ? _g : '' })));
             case ClientLayoutItemFieldDataType.INTEGER:
             case ClientLayoutItemFieldDataType.DECIMAL:
             case ClientLayoutItemFieldDataType.PERCENTAGE:
-                return (h("mrd-number-field", Object.assign({}, commonProps, { value: (_f = displayValue) !== null && _f !== void 0 ? _f : null, dataType: item.dataType, decimalPrecision: (_g = item.decimalPrecision) !== null && _g !== void 0 ? _g : 2, placeholder: (_h = item.placeholder) !== null && _h !== void 0 ? _h : '' })));
+                return (h("mrd-number-field", Object.assign({}, commonProps, { value: (_h = displayValue) !== null && _h !== void 0 ? _h : null, dataType: item.dataType, decimalPrecision: (_j = item.decimalPrecision) !== null && _j !== void 0 ? _j : 2, placeholder: (_k = item.placeholder) !== null && _k !== void 0 ? _k : '' })));
             case ClientLayoutItemFieldDataType.CURRENCY:
                 return (h("mrd-currency-field", Object.assign({}, commonProps, {
                     // Input-only fallback: it preselects the layout's currencyCode in the dropdown
                     // before an amount exists. The field never emits this shape back — an empty
                     // amount emits null (FINDING-0141).
-                    value: (_j = displayValue) !== null && _j !== void 0 ? _j : { amount: null, currency: (_k = item.currencyCode) !== null && _k !== void 0 ? _k : 'EUR' }
+                    value: (_l = displayValue) !== null && _l !== void 0 ? _l : { amount: null, currency: (_m = item.currencyCode) !== null && _m !== void 0 ? _m : 'EUR' }
                 })));
             case ClientLayoutItemFieldDataType.BOOLEAN:
-                return (h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_l = displayValue) !== null && _l !== void 0 ? _l : false })));
+                return (h("mrd-boolean-field", Object.assign({}, commonProps, { value: (_o = displayValue) !== null && _o !== void 0 ? _o : false })));
             case ClientLayoutItemFieldDataType.DATE:
-                return (h("mrd-date-field", Object.assign({}, commonProps, { value: (_m = displayValue) !== null && _m !== void 0 ? _m : '' })));
+                return (h("mrd-date-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '' })));
             case ClientLayoutItemFieldDataType.DATETIME:
-                return (h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_o = displayValue) !== null && _o !== void 0 ? _o : '' })));
+                return (h("mrd-datetime-field", Object.assign({}, commonProps, { value: (_q = displayValue) !== null && _q !== void 0 ? _q : '' })));
             case ClientLayoutItemFieldDataType.TIME:
-                return (h("mrd-time-field", Object.assign({}, commonProps, { value: (_p = displayValue) !== null && _p !== void 0 ? _p : '' })));
+                return (h("mrd-time-field", Object.assign({}, commonProps, { value: (_r = displayValue) !== null && _r !== void 0 ? _r : '' })));
             case ClientLayoutItemFieldDataType.EMAIL:
-                return (h("mrd-email-field", Object.assign({}, commonProps, { value: (_q = displayValue) !== null && _q !== void 0 ? _q : '', placeholder: (_r = item.placeholder) !== null && _r !== void 0 ? _r : '' })));
+                return (h("mrd-email-field", Object.assign({}, commonProps, { value: (_s = displayValue) !== null && _s !== void 0 ? _s : '', placeholder: (_t = item.placeholder) !== null && _t !== void 0 ? _t : '' })));
             case ClientLayoutItemFieldDataType.HYPERLINK:
-                return (h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_s = displayValue) !== null && _s !== void 0 ? _s : '', placeholder: (_t = item.placeholder) !== null && _t !== void 0 ? _t : '' })));
+                return (h("mrd-hyperlink-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', placeholder: (_v = item.placeholder) !== null && _v !== void 0 ? _v : '' })));
             case ClientLayoutItemFieldDataType.LIST:
-                return (h("mrd-list-field", Object.assign({}, commonProps, { value: (_u = displayValue) !== null && _u !== void 0 ? _u : '', multiple: (_v = item.multiple) !== null && _v !== void 0 ? _v : false, listItems: (_w = item.listItems) !== null && _w !== void 0 ? _w : [] })));
+                return (h("mrd-list-field", Object.assign({}, commonProps, { value: (_w = displayValue) !== null && _w !== void 0 ? _w : '', multiple: (_x = item.multiple) !== null && _x !== void 0 ? _x : false, listItems: (_y = item.listItems) !== null && _y !== void 0 ? _y : [] })));
             case ClientLayoutItemFieldDataType.FILE:
-                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_x = item.accept) !== null && _x !== void 0 ? _x : '', maxSize: (_y = item.maxSize) !== null && _y !== void 0 ? _y : 0, multiple: (_z = item.multiple) !== null && _z !== void 0 ? _z : false, onMrdUpload: this.handleUpload })));
+                return (h("mrd-file-field", Object.assign({}, commonProps, { value: displayValue, accept: (_z = item.accept) !== null && _z !== void 0 ? _z : '', maxSize: (_0 = item.maxSize) !== null && _0 !== void 0 ? _0 : 0, multiple: (_1 = item.multiple) !== null && _1 !== void 0 ? _1 : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.IMAGE:
-                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_0 = item.accept) !== null && _0 !== void 0 ? _0 : 'image/*', maxSize: (_1 = item.maxSize) !== null && _1 !== void 0 ? _1 : 0, multiple: (_2 = item.multiple) !== null && _2 !== void 0 ? _2 : false, onMrdUpload: this.handleUpload })));
+                return (h("mrd-image-field", Object.assign({}, commonProps, { value: displayValue, accept: (_2 = item.accept) !== null && _2 !== void 0 ? _2 : 'image/*', maxSize: (_3 = item.maxSize) !== null && _3 !== void 0 ? _3 : 0, multiple: (_4 = item.multiple) !== null && _4 !== void 0 ? _4 : false, onMrdUpload: this.handleUpload })));
             case ClientLayoutItemFieldDataType.LONGTEXT:
-                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_3 = displayValue) !== null && _3 !== void 0 ? _3 : '', placeholder: (_4 = item.placeholder) !== null && _4 !== void 0 ? _4 : '' })));
+                return (h("mrd-longtext-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
             case ClientLayoutItemFieldDataType.SECRET:
-                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_5 = displayValue) !== null && _5 !== void 0 ? _5 : '', placeholder: (_6 = item.placeholder) !== null && _6 !== void 0 ? _6 : '' })));
+                return (h("mrd-secret-field", Object.assign({}, commonProps, { value: (_7 = displayValue) !== null && _7 !== void 0 ? _7 : '', placeholder: (_8 = item.placeholder) !== null && _8 !== void 0 ? _8 : '' })));
             default:
                 return null;
         }
     }
+    /** Repeatable-row UI for a scalar dataType with multiple: true — mirrors the
+     *  add/remove pattern already established by renderHistoryEditor(), reusing
+     *  the single-row renderLeafField() per entry instead of duplicating repeat
+     *  UI into every leaf field component (FINDING-0149). */
+    renderMultiScalarField() {
+        var _a, _b;
+        const { item, locale } = this;
+        const updateRow = (i, val) => {
+            this.emitMultiChange(this.multiValues.map((v, idx) => (idx === i ? val : v)));
+        };
+        const removeRow = (i) => {
+            this.emitMultiChange(this.multiValues.filter((_, idx) => idx !== i));
+        };
+        const addRow = () => {
+            this.emitMultiChange([...this.multiValues, this.emptyRowValue()]);
+        };
+        return (h("div", { class: "mrd-field__multi" }, h(FieldLabel, { base: "mrd-field__multi", label: (_a = item.label) !== null && _a !== void 0 ? _a : '', required: (_b = item.required) !== null && _b !== void 0 ? _b : false }), this.multiValues.map((v, i) => (h("div", { key: String(i), class: "mrd-field__multi-row" }, h("div", { class: "mrd-field__multi-row-input" }, this.renderLeafField(v, (e) => { e.stopPropagation(); updateRow(i, e.detail.value); }, (e) => { e.stopPropagation(); this.handleMultiRowBlur(); }, { label: '', required: false })), h("button", { type: "button", class: "mrd-field__multi-remove", onClick: () => removeRow(i), "aria-label": t('remove', locale) }, this.renderRemoveIcon())))), h("button", { type: "button", class: "mrd-field__multi-add", onClick: addRow }, "+ ", t('add', locale)), h(FieldError, { base: "mrd-field__multi", error: this.multiError })));
+    }
     render() {
         var _a, _b, _c, _d, _e, _f;
         const { item, locale, value } = this;
@@ -174,7 +242,7 @@ export class MrdField {
             return h(Host, null);
         }
         const displayValue = this.getDisplayValue();
-        return (h(Host, null, h("div", { class: "mrd-field__inner" }, this.renderLeafField(displayValue), this.renderHistoryEditor())));
+        return (h(Host, null, h("div", { class: "mrd-field__inner" }, this.isMultiScalar() ? this.renderMultiScalarField() : this.renderLeafField(displayValue), this.renderHistoryEditor())));
     }
     static get is() { return "mrd-field"; }
     static get encapsulation() { return "scoped"; }
@@ -256,7 +324,9 @@ export class MrdField {
     static get states() {
         return {
             "historyEntries": {},
-            "currentValue": {}
+            "currentValue": {},
+            "multiValues": {},
+            "multiError": {}
         };
     }
     static get events() {

package/dist/collection/components/form/mrd-form/mrd-form.css

@@ -126,4 +126,33 @@
 }
 .mrd-form__cancel:active {
   background-color: var(--mrd-color-neutral-200);
+}
+.mrd-form__delete {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--mrd-input-height);
+  padding: 0 var(--mrd-space-6);
+  margin-right: auto;
+  background-color: transparent;
+  color: var(--mrd-color-danger);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-medium);
+  border: var(--mrd-border-width) solid var(--mrd-color-danger);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  transition: background-color var(--mrd-transition), color var(--mrd-transition);
+}
+.mrd-form__delete:hover {
+  background-color: var(--mrd-color-danger-light);
+  color: var(--mrd-color-danger-dark);
+}
+.mrd-form__delete:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--mrd-color-danger-light);
+}
+.mrd-form__delete:active {
+  background-color: var(--mrd-color-danger-light);
+  border-color: var(--mrd-color-danger-dark);
 }

package/dist/collection/components/form/mrd-form/mrd-form.js

@@ -27,6 +27,11 @@ export class MrdForm {
         this.referenceClass = '';
         /** When true, a cancel button is shown next to the submit button. */
         this.showCancel = false;
+        /** When true, a delete button is shown next to the submit button (edit mode only —
+         *  the host decides when a delete affordance makes sense, e.g. only for an existing
+         *  record). Deletion itself (confirmation, the actual API call) is entirely the
+         *  host's responsibility; mrd-form only emits the request via mrdDelete. */
+        this.showDelete = false;
         /**
          * The currently logged-in user, resolved by the host via /accounts/me.
          * Used to pre-fill RELATION fields whose defaultValue is "@me".
@@ -314,15 +319,11 @@ export class MrdForm {
     normalizeRelationValue(value) {
         if (value == null || value === '')
             return null;
-        if (typeof value === 'string')
-            return value || null;
         if (Array.isArray(value)) {
-            return value.map(v => typeof v === 'object' && v !== null && 'id' in v ? v.id : String(v));
-        }
-        if (typeof value === 'object' && 'id' in value) {
-            return value.id || null;
+            const hrefs = value.map(v => this.getHref(v)).filter(v => v !== '');
+            return hrefs.length ? hrefs : null;
         }
-        return null;
+        return this.getHref(value) || null;
     }
     deepEqual(a, b) {
         if (a === b)
@@ -395,7 +396,7 @@ export class MrdForm {
             return h(Host, null);
         }
         const dir = this.locale.startsWith('ar') ? 'rtl' : 'ltr';
-        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
+        return (h(Host, null, h("form", { class: "mrd-form", dir: dir, onSubmit: this.handleSubmit, noValidate: true }, this.layout.title && h("h2", { class: "mrd-form__title" }, this.layout.title), h("div", { class: "mrd-form__body" }, this.renderItems(this.layout.items)), h("div", { class: "mrd-form__footer" }, this.showDelete && (h("button", { type: "button", class: "mrd-form__delete", onClick: () => this.mrdDelete.emit() }, t('delete', this.locale))), h("button", { type: "submit", class: "mrd-form__submit" }, t('submit', this.locale)), this.showCancel && (h("button", { type: "button", class: "mrd-form__cancel", onClick: () => this.mrdCancel.emit() }, t('cancel', this.locale)))))));
     }
     static get is() { return "mrd-form"; }
     static get encapsulation() { return "scoped"; }
@@ -538,6 +539,26 @@ export class MrdForm {
                 "attribute": "show-cancel",
                 "defaultValue": "false"
             },
+            "showDelete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, a delete button is shown next to the submit button (edit mode only \u2014\nthe host decides when a delete affordance makes sense, e.g. only for an existing\nrecord). Deletion itself (confirmation, the actual API call) is entirely the\nhost's responsibility; mrd-form only emits the request via mrdDelete."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-delete",
+                "defaultValue": "false"
+            },
             "me": {
                 "type": "unknown",
                 "mutable": false,
@@ -608,6 +629,21 @@ export class MrdForm {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "mrdDelete",
+                "name": "mrdDelete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "mrdSearch",
                 "name": "mrdSearch",

package/dist/collection/components/layout/mrd-layout-section/field-value.js

@@ -94,7 +94,7 @@ function renderHistoryBadge(ctx, item, raw) {
             ctx.on.toggleHistory(isOpen ? null : item.name);
         } }, h("svg", { class: "mrd-layout-section__history-icon", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .207.085.394.22.53l2.5 2.5a.75.75 0 101.06-1.06L10.75 9.69V5z", "clip-rule": "evenodd" }))), isOpen && (h("div", { class: "mrd-layout-section__history-popover", role: "listbox" }, sorted.map((entry, i) => (h("div", { key: String(i), class: "mrd-layout-section__history-entry" }, entry.value, " (", t('history_until', ctx.locale), " ", formatDate(entry.until, ctx.locale), ")")))))));
 }
-export function renderField(ctx, item) {
+function fieldRenderState(ctx, item) {
     var _a, _b;
     if (!item.name)
         return null;
@@ -104,10 +104,27 @@ export function renderField(ctx, item) {
         ? raw.current
         : raw;
     const renderedValue = renderFieldValue(ctx, item, rawValue);
+    return { raw, rawValue, renderedValue, isEmpty: renderedValue == null };
+}
+/** Whether a FIELD item would render anything at all (value, or a showEmpty
+ *  placeholder). A `header` field always renders. Used by mrd-layout-section
+ *  to decide whether a preceding HEADER item's block is entirely empty. */
+export function isFieldVisible(ctx, item) {
+    if (item.header)
+        return true;
+    const state = fieldRenderState(ctx, item);
+    if (!state)
+        return false;
+    return !state.isEmpty || showsEmpty(item);
+}
+export function renderField(ctx, item) {
+    const state = fieldRenderState(ctx, item);
+    if (!state)
+        return null;
+    const { raw, rawValue, renderedValue, isEmpty } = state;
     if (item.header) {
         return (h("h1", { class: "mrd-layout-section__field-header", key: item.name }, typeof renderedValue === 'string' ? renderedValue : rawValue != null ? String(rawValue) : item.label));
     }
-    const isEmpty = renderedValue == null;
     if (isEmpty && !showsEmpty(item))
         return null;
     const isBlock = item.dataType === ClientLayoutItemFieldDataType.TEXTBLOCK

package/dist/collection/components/layout/mrd-layout-section/layout-helpers.js

@@ -12,6 +12,16 @@ export function showsEmpty(item) {
     var _a, _b, _c, _d, _e;
     return (_e = (_c = (_a = item.showEmpty) !== null && _a !== void 0 ? _a : (_b = item.field) === null || _b === void 0 ? void 0 : _b.showEmpty) !== null && _c !== void 0 ? _c : (_d = item.relation) === null || _d === void 0 ? void 0 : _d.showEmpty) !== null && _e !== void 0 ? _e : false;
 }
+/** Whether a RELATION item has a resolvable link value (`_links[item.name]`
+ *  carries either a multi-value `values[]` or a single `name`). */
+export function hasRelationValue(item, data) {
+    var _a, _b;
+    if (!item.name)
+        return false;
+    const links = ((_a = data === null || data === void 0 ? void 0 : data._links) !== null && _a !== void 0 ? _a : {});
+    const link = links[item.name];
+    return !!(((_b = link === null || link === void 0 ? void 0 : link.values) === null || _b === void 0 ? void 0 : _b.length) || (link === null || link === void 0 ? void 0 : link.name));
+}
 /** Depth-first flatten of the SECTION/GROUP tree. */
 export function flattenItems(items) {
     const result = [];

package/dist/collection/components/layout/mrd-layout-section/mrd-layout-section.css

@@ -101,10 +101,11 @@
   padding: 0;
 }
 .mrd-layout-section__header {
-  font-size: var(--mrd-font-size-xl);
+  font-size: var(--mrd-font-size-sm);
   font-weight: var(--mrd-font-weight-semibold);
-  color: var(--mrd-color-neutral-800);
-  margin: var(--mrd-space-4) 0 var(--mrd-space-2) 0;
+  color: var(--mrd-color-neutral-500);
+  letter-spacing: 0.01em;
+  margin: var(--mrd-space-5) 0 var(--mrd-space-2) 0;
   padding: 0;
 }
 .mrd-layout-section__text {