@mmlogic/components 0.5.1 → 0.5.3

package/dist/collection/components/invoice/mrd-invoice-view/mrd-invoice-view.css

@@ -0,0 +1,145 @@
+:host {
+  display: block;
+}
+
+.mrd-invoice-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-6);
+}
+.mrd-invoice-view__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-3);
+  flex-wrap: wrap;
+}
+.mrd-invoice-view__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-invoice-view__badge {
+  display: inline-block;
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  padding: 2px var(--mrd-space-3);
+  border-radius: var(--mrd-border-radius-full);
+}
+.mrd-invoice-view__badge--plain {
+  color: var(--mrd-color-neutral-600);
+  background: var(--mrd-color-neutral-100);
+}
+.mrd-invoice-view__dates {
+  display: flex;
+  gap: var(--mrd-space-4);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-400);
+  font-variant-numeric: tabular-nums;
+  margin-top: var(--mrd-space-1);
+}
+.mrd-invoice-view__container-link {
+  display: inline-block;
+  margin-top: var(--mrd-space-3);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+  text-align: left;
+}
+.mrd-invoice-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-invoice-view__parties {
+  display: flex;
+  gap: var(--mrd-space-8);
+  flex-wrap: wrap;
+}
+.mrd-invoice-view__party {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+.mrd-invoice-view__party-label {
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-400);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.mrd-invoice-view__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+  text-align: left;
+}
+.mrd-invoice-view__link:hover {
+  text-decoration: underline;
+}
+.mrd-invoice-view__lines {
+  border-top: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  border-bottom: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  padding: var(--mrd-space-4) 0;
+}
+.mrd-invoice-view__amounts {
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+  min-width: 16rem;
+}
+.mrd-invoice-view__amount-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--mrd-space-6);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-700);
+}
+.mrd-invoice-view__amount-row--total {
+  padding-top: var(--mrd-space-2);
+  border-top: var(--mrd-border-width) solid var(--mrd-color-neutral-200);
+  font-size: var(--mrd-font-size-base);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-invoice-view__attachments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+.mrd-invoice-view__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  align-self: flex-start;
+  height: 2rem;
+  padding: 0 var(--mrd-space-3);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-300);
+  border-radius: var(--mrd-border-radius);
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-700);
+  cursor: pointer;
+}
+.mrd-invoice-view__attachment:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-900);
+}
+.mrd-invoice-view__attachment-icon {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  flex-shrink: 0;
+}

package/dist/collection/components/invoice/mrd-invoice-view/mrd-invoice-view.js

@@ -0,0 +1,281 @@
+import { Host, h } from "@stencil/core";
+import { t } from "../../../utils/i18n";
+import { formatCurrency, formatDate } from "../../../utils/format";
+import { attachmentsFromRecord, attachmentsKey } from "../../../utils/document-attachments";
+/**
+ * Archetype-driven single-invoice view. Given a `commons.invoice` binding and a data
+ * record, renders a clear, recognisable invoice summary — number, status, dates,
+ * customer/supplier, totals and attachments — instead of a generic field form.
+ *
+ * The line items (`lines` slot, the `commons.invoiceLine` sub-archetype) are NOT
+ * rendered here: this component only reserves a `slot="lines"` at the right spot in
+ * the layout. The host (`mrd-layout-section`) still owns all the actual RELATED_VIEW
+ * table data-loading/event wiring — via its existing `renderRelatedView()` — and
+ * projects the resulting `<mrd-table>` into that slot, so line editing keeps using
+ * the same generic create/edit-navigation mechanism every other relation already has.
+ *
+ * Like `mrd-document-view`, this component never resolves file hrefs itself — it only
+ * exposes the attachment references via `mrdAttachments` (now possibly more than one)
+ * and a plain download button; the host decides how/whether to render them.
+ */
+export class MrdInvoiceView {
+    constructor() {
+        /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
+        this.data = {};
+        this.locale = navigator.language;
+        /** listItems of the FIELD bound to the `status` slot, resolved by mrd-layout-section
+         *  from its own items array (archetype metadata does not publish listItems), so the
+         *  status badge can get a real label/color instead of the raw stored key. */
+        this.statusListItems = null;
+        /** Tracks the key attachments were last emitted for, so componentDidLoad and the
+         *  data watcher don't emit duplicate events for the same set of files. */
+        this.lastAttachmentKey = null;
+    }
+    componentDidLoad() {
+        this.emitAttachmentsIfNeeded();
+    }
+    dataChanged() {
+        this.emitAttachmentsIfNeeded();
+    }
+    emitAttachmentsIfNeeded() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        const key = attachmentsKey(attachments);
+        if (key === this.lastAttachmentKey)
+            return;
+        this.lastAttachmentKey = key;
+        this.mrdAttachments.emit({ attachments });
+    }
+    /** Value of a value-slot: reads data[field] via the slot→field map. */
+    slotValue(slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return this.data[field];
+    }
+    /** Relation link for a relation-slot: reads data._links[field]. */
+    slotLink(slot) {
+        var _a, _b, _c, _d;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links) !== null && _d !== void 0 ? _d : {});
+        return links[field];
+    }
+    renderPartyLink(slot, label) {
+        const link = this.slotLink(slot);
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__party" }, h("span", { class: "mrd-invoice-view__party-label" }, label), h("button", { type: "button", class: "mrd-invoice-view__link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name)));
+    }
+    renderContainer() {
+        const link = this.slotLink('container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-invoice-view__container-link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name));
+    }
+    renderStatus() {
+        var _a, _b;
+        const statusRaw = this.slotValue('status');
+        if (statusRaw == null || statusRaw === '')
+            return null;
+        const listItem = ((_a = this.statusListItems) !== null && _a !== void 0 ? _a : []).find(li => li.key === String(statusRaw));
+        const label = (_b = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _b !== void 0 ? _b : String(statusRaw);
+        if ((listItem === null || listItem === void 0 ? void 0 : listItem.color) && (listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor)) {
+            return (h("span", { class: "mrd-invoice-view__badge", style: { color: listItem.color, backgroundColor: listItem.backgroundColor } }, label));
+        }
+        return h("span", { class: "mrd-invoice-view__badge mrd-invoice-view__badge--plain" }, label);
+    }
+    renderAmounts() {
+        const net = this.slotValue('netAmount');
+        const tax = this.slotValue('taxAmount');
+        const total = this.slotValue('amount');
+        if ((net === null || net === void 0 ? void 0 : net.amount) == null && (tax === null || tax === void 0 ? void 0 : tax.amount) == null && (total === null || total === void 0 ? void 0 : total.amount) == null)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__amounts" }, (net === null || net === void 0 ? void 0 : net.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row" }, h("span", null, t('invoice_subtotal', this.locale)), h("span", null, formatCurrency(net.amount, net.currency, this.locale)))), (tax === null || tax === void 0 ? void 0 : tax.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row" }, h("span", null, t('invoice_tax', this.locale)), h("span", null, formatCurrency(tax.amount, tax.currency, this.locale)))), (total === null || total === void 0 ? void 0 : total.amount) != null && (h("div", { class: "mrd-invoice-view__amount-row mrd-invoice-view__amount-row--total" }, h("span", null, t('invoice_total', this.locale)), h("span", null, formatCurrency(total.amount, total.currency, this.locale))))));
+    }
+    renderAttachments() {
+        const attachments = attachmentsFromRecord(this.archetype, this.data, 'attachments');
+        if (!attachments.length)
+            return null;
+        return (h("div", { class: "mrd-invoice-view__attachments" }, attachments.map(a => (h("button", { type: "button", key: a.href, class: "mrd-invoice-view__attachment", onClick: () => this.mrdDownload.emit({ href: a.href, fileName: a.fileName }) }, h("svg", { class: "mrd-invoice-view__attachment-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M21.44 11.05l-9.19 9.19a5 5 0 01-7.07-7.07l9.19-9.19a3 3 0 014.24 4.24l-9.2 9.19a1 1 0 01-1.41-1.41l8.49-8.48" })), a.fileName)))));
+    }
+    render() {
+        var _a, _b;
+        const invoiceNumberRaw = this.slotValue('invoiceNumber');
+        const invoiceNumber = invoiceNumberRaw != null && invoiceNumberRaw !== '' ? String(invoiceNumberRaw) : null;
+        const invoiceDateRaw = this.slotValue('invoiceDate');
+        const dueDateRaw = this.slotValue('dueDate');
+        const hasLines = !!((_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b['lines']);
+        return (h(Host, { key: 'a97c51e53e39ace913c902ad2ba6813eb85e4561' }, h("div", { key: '6938267848bceed5b28b56c3cdd6d6693e57cdbf', class: "mrd-invoice-view" }, h("div", { key: '7a0b3346232abfc1e35805e4e92c19d35698f881', class: "mrd-invoice-view__header" }, h("div", { key: '5c0471dd8ebd94dd9b374897268c7c03bec66ec7', class: "mrd-invoice-view__title-row" }, invoiceNumber && h("h1", { key: '86b4c0ebd0a5b83ae03b731b7e41394645aae954', class: "mrd-invoice-view__title" }, t('invoice_title', this.locale), " ", invoiceNumber), this.renderStatus()), h("div", { key: 'd209bc34d989146b5f510f2bcdc4c484d723378c', class: "mrd-invoice-view__dates" }, invoiceDateRaw != null && invoiceDateRaw !== '' && (h("span", { key: '8fffcd1ab10e511c9d939c351ea93e4d8a902688' }, t('invoice_date', this.locale), ": ", formatDate(invoiceDateRaw, this.locale))), dueDateRaw != null && dueDateRaw !== '' && (h("span", { key: '8d13c6660798108cc2f54137c8415173326d5bf2' }, t('invoice_due_date', this.locale), ": ", formatDate(dueDateRaw, this.locale)))), this.renderContainer()), h("div", { key: 'cb08c6fd7e6b46a46a69f11aafa960ab5cb35544', class: "mrd-invoice-view__parties" }, this.renderPartyLink('customer', t('invoice_customer', this.locale)), this.renderPartyLink('supplier', t('invoice_supplier', this.locale))), hasLines && (h("div", { key: '8321e74171fe933a4e10fc202b66cd3720ba959e', class: "mrd-invoice-view__lines" }, h("slot", { key: 'eb31d97080173413e74e5b0024984a4b06aa5bdd', name: "lines" }))), this.renderAmounts(), this.renderAttachments())));
+    }
+    static get is() { return "mrd-invoice-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-invoice-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-invoice-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.invoice` binding: slot name \u2192 concrete field/relation name."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data record from the /data endpoint. Fields keyed by name; relations under `_links`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "statusListItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientListValue[] | null",
+                    "resolved": "ClientListValue[] | null",
+                    "references": {
+                        "ClientListValue": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientListValue",
+                            "referenceLocation": "ClientListValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "listItems of the FIELD bound to the `status` slot, resolved by mrd-layout-section\nfrom its own items array (archetype metadata does not publish listItems), so the\nstatus badge can get a real label/color instead of the raw stored key."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigate to the customer/supplier/container. Host resolves the href and routes."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdDownload",
+                "name": "mrdDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Download an attachment. Host resolves the href to a signed URL."
+                },
+                "complexType": {
+                    "original": "{ href: string; fileName: string }",
+                    "resolved": "{ href: string; fileName: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "mrdAttachments",
+                "name": "mrdAttachments",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file(s) belonging to this invoice, fired once on load and again whenever the\nattachments slot's value changes. The host resolves the href(s) itself."
+                },
+                "complexType": {
+                    "original": "{ attachments: DocumentAttachment[] }",
+                    "resolved": "{ attachments: DocumentAttachment[]; }",
+                    "references": {
+                        "DocumentAttachment": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::DocumentAttachment",
+                            "referenceLocation": "DocumentAttachment"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "dataChanged"
+            }];
+    }
+}

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

@@ -27,7 +27,7 @@ function renderSingleFieldValue(ctx, item, value) {
             const v = value;
             const fileName = (_e = v === null || v === void 0 ? void 0 : v.fileName) !== null && _e !== void 0 ? _e : String(value);
             const href = (_f = v === null || v === void 0 ? void 0 : v.href) !== null && _f !== void 0 ? _f : '';
-            return downloadLink(ctx, href, fileName, t('download', ctx.locale));
+            return downloadLink(ctx, href, fileName, fileName || t('download', ctx.locale));
         }
         case ClientLayoutItemFieldDataType.IMAGE: {
             const v = value;
@@ -66,6 +66,10 @@ export function renderFieldValue(ctx, item, rawValue) {
     if (rawValue == null || rawValue === '')
         return null;
     if (item.multiple && Array.isArray(rawValue)) {
+        const isFileType = item.dataType === ClientLayoutItemFieldDataType.FILE || item.dataType === ClientLayoutItemFieldDataType.IMAGE;
+        if (isFileType) {
+            return (h("div", { class: "mrd-layout-section__file-list" }, rawValue.map((v, i) => (h("div", { class: "mrd-layout-section__file-list-item", key: String(i) }, renderSingleFieldValue(ctx, item, v))))));
+        }
         const rendered = rawValue.map(v => renderSingleFieldValue(ctx, item, v));
         if (rendered.every(r => typeof r === 'string' || r == null)) {
             return rendered.filter(Boolean).join(', ') || null;

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

@@ -170,6 +170,16 @@
   width: 1rem;
   height: 1rem;
 }
+.mrd-layout-section__file-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--mrd-space-1);
+}
+.mrd-layout-section__file-list-item {
+  min-width: 0;
+  max-width: 100%;
+}
 .mrd-layout-section__boolean--true {
   color: var(--mrd-color-success);
   font-weight: var(--mrd-font-weight-semibold);

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, } from "../../../types/client-layout";
+import { ClientLayoutItemType, ClientLayoutItemFieldDataType, ClientLayoutNavigateBehaviour, resolveArchetype, ARCHETYPE_DOCUMENT, ARCHETYPE_INVOICE, ARCHETYPE_EMAIL, ARCHETYPE_INVOICE_LINE, } from "../../../types/client-layout";
 import { viewKeyFor, flattenItems, buildContainerHref } from "./layout-helpers";
 import { renderField } from "./field-value";
 export class MrdLayoutSection {
@@ -313,23 +313,53 @@ export class MrdLayoutSection {
             return null;
         return (h("div", { class: "mrd-layout-section__modal-backdrop", onClick: () => { this.imagePreviewUrl = null; } }, h("div", { class: "mrd-layout-section__modal", onClick: (e) => e.stopPropagation() }, h("button", { class: "mrd-layout-section__modal-close", onClick: () => { this.imagePreviewUrl = null; } }, "\u2715"), h("img", { class: "mrd-layout-section__modal-image", src: this.imagePreviewUrl, alt: "" }))));
     }
+    /** Related VIEW/RELATED_VIEW/SEARCH items to keep rendering below an archetype's
+     *  single-object view, excluding any item already consumed by that view itself
+     *  (e.g. invoice's `lines`, see renderInvoiceObject). */
+    relatedItems(exclude) {
+        return this.items.filter(it => it !== exclude &&
+            (it.type === ClientLayoutItemType.VIEW || it.type === ClientLayoutItemType.RELATED_VIEW || it.type === ClientLayoutItemType.SEARCH));
+    }
     /** Single-document view: the record's own type carries commons.document. Renders
      *  a recognisable document instead of generic fields, keeping any related views/
      *  searches below it. */
     renderDocumentObject(archetype) {
-        const related = this.items.filter(it => it.type === ClientLayoutItemType.VIEW ||
-            it.type === ClientLayoutItemType.RELATED_VIEW ||
-            it.type === ClientLayoutItemType.SEARCH);
         return [
             h("mrd-document-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }),
-            ...related.map(it => this.renderItem(it)),
+            ...this.relatedItems().map(it => this.renderItem(it)),
+        ];
+    }
+    /** Single-invoice view: the record's own type carries commons.invoice. The `lines`
+     *  RELATED_VIEW (matched generically by the commons.invoiceLine archetype on the
+     *  item, not by name) is rendered *inside* mrd-invoice-view via its `slot="lines"` —
+     *  reusing the existing renderRelatedView()/renderTable() wiring unchanged, so all
+     *  page/sort/aggregation state stays owned here, only the DOM placement moves. */
+    renderInvoiceObject(archetype) {
+        var _a, _b, _c;
+        const linesItem = (_a = this.items.find(it => {
+            var _a, _b;
+            return (it.type === ClientLayoutItemType.VIEW || it.type === ClientLayoutItemType.RELATED_VIEW) &&
+                !!resolveArchetype((_a = it.archetypes) !== null && _a !== void 0 ? _a : (_b = it.view) === null || _b === void 0 ? void 0 : _b.archetypes, ARCHETYPE_INVOICE_LINE);
+        })) !== null && _a !== void 0 ? _a : null;
+        const statusListItems = (_c = (_b = this.items.find(it => { var _a; return it.name === ((_a = archetype.slots) === null || _a === void 0 ? void 0 : _a.status); })) === null || _b === void 0 ? void 0 : _b.listItems) !== null && _c !== void 0 ? _c : null;
+        return [
+            h("mrd-invoice-view", { archetype: archetype, data: this.data, locale: this.locale, statusListItems: statusListItems, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }, linesItem && h("div", { slot: "lines" }, this.renderRelatedView(linesItem))),
+            ...this.relatedItems(linesItem).map(it => this.renderItem(it)),
+        ];
+    }
+    /** Single-email view: the record's own type carries commons.email. Fully read-only —
+     *  emails have no editable child collection, so this mirrors renderDocumentObject. */
+    renderEmailObject(archetype) {
+        return [
+            h("mrd-email-view", { archetype: archetype, data: this.data, locale: this.locale, onMrdNavigate: (e) => { e.stopPropagation(); this.mrdNavigate.emit(e.detail); }, onMrdDownload: (e) => { e.stopPropagation(); this.mrdDownload.emit(e.detail); }, onMrdAttachments: (e) => { e.stopPropagation(); this.mrdAttachments.emit(e.detail); } }),
+            ...this.relatedItems().map(it => this.renderItem(it)),
         ];
     }
     render() {
         const docArchetype = resolveArchetype(this.archetypes, ARCHETYPE_DOCUMENT);
-        return (h(Host, { key: '8585dae577d38e3c9517039b48aa9e798190937c' }, h("div", { key: '020b942996b1346bdc3bc89938e4b020823cfcea', class: "mrd-layout-section" }, docArchetype
-            ? this.renderDocumentObject(docArchetype)
-            : this.items.map(item => this.renderItem(item))), this.renderImageModal()));
+        const invoiceArchetype = !docArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_INVOICE) : undefined;
+        const emailArchetype = !docArchetype && !invoiceArchetype ? resolveArchetype(this.archetypes, ARCHETYPE_EMAIL) : undefined;
+        return (h(Host, { key: '0078764a136e7ca9561632718c1b527ec3bc01c5' }, h("div", { key: '0c1428ce20bd7d2bbce467a36b6c25ffa0e6367e', class: "mrd-layout-section" }, docArchetype && this.renderDocumentObject(docArchetype), invoiceArchetype && this.renderInvoiceObject(invoiceArchetype), emailArchetype && this.renderEmailObject(emailArchetype), !docArchetype && !invoiceArchetype && !emailArchetype && this.items.map(item => this.renderItem(item))), this.renderImageModal()));
     }
     static get is() { return "mrd-layout-section"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/merge/mrd-merge-view/merge-diff.js

@@ -0,0 +1,99 @@
+import { ClientLayoutItemType } from "../../../types/client-layout";
+/**
+ * Whether a layout item can appear in the merge diff at all. m-n relations
+ * (`multiple: true`) are unioned automatically server-side (DataService.merge)
+ * and must never be surfaced as a user choice — only FIELD and single-value
+ * (n-1) RELATION items are diffable.
+ */
+export function isDiffable(item) {
+    if (item.type === ClientLayoutItemType.FIELD)
+        return true;
+    if (item.type === ClientLayoutItemType.RELATION)
+        return !item.multiple;
+    return false;
+}
+/**
+ * Raw value for a field/relation off a record in the API's row shape (flat
+ * fields + `_links`). History-enabled fields come back as `{ current,
+ * history: [...] }` — this returns that whole object as-is, since a winning
+ * B value must carry its entire history into the patch (FINDING-0114: "the
+ * entire history list follows whichever value wins ... never interleaved").
+ */
+export function getRawValue(item, record) {
+    var _a, _b, _c, _d, _e;
+    const name = (_a = item.name) !== null && _a !== void 0 ? _a : '';
+    if (item.type === ClientLayoutItemType.RELATION) {
+        return (_d = (_c = (_b = record === null || record === void 0 ? void 0 : record._links) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.href) !== null && _d !== void 0 ? _d : null;
+    }
+    return (_e = record === null || record === void 0 ? void 0 : record[name]) !== null && _e !== void 0 ? _e : null;
+}
+/** Unwraps a history-enabled field's `{ current, history }` shape to its current value, for comparison only. */
+function comparableValue(item, value) {
+    if (item.historyEnabled && value != null && typeof value === 'object' && !Array.isArray(value) && 'current' in value) {
+        return value.current;
+    }
+    return value;
+}
+function normalize(value) {
+    return value === undefined || value === '' ? null : value;
+}
+function valuesEqual(a, b) {
+    const na = normalize(a);
+    const nb = normalize(b);
+    if (na === nb)
+        return true;
+    if (na === null || nb === null)
+        return false;
+    return JSON.stringify(na) === JSON.stringify(nb);
+}
+function isEmpty(value) {
+    return normalize(value) === null;
+}
+/**
+ * Splits diffable fields into `conflicts` (both records have a — different —
+ * value, user must pick) and `autoFilled` (A has no value, B does; silently
+ * taken from B without a UI choice).
+ */
+export function diffFields(fields, recordA, recordB) {
+    const conflicts = [];
+    const autoFilled = [];
+    for (const item of fields.filter(isDiffable)) {
+        const aValue = getRawValue(item, recordA);
+        const bValue = getRawValue(item, recordB);
+        const aComparable = comparableValue(item, aValue);
+        const bComparable = comparableValue(item, bValue);
+        if (valuesEqual(aComparable, bComparable))
+            continue;
+        if (isEmpty(aComparable) && !isEmpty(bComparable)) {
+            autoFilled.push({ item, aValue, bValue });
+        }
+        else {
+            conflicts.push({ item, aValue, bValue });
+        }
+    }
+    return { conflicts, autoFilled };
+}
+/**
+ * Builds the patch payload per the merge endpoint contract: every `autoFilled`
+ * entry is always included (A had nothing to lose); a `conflicts` entry is
+ * only included when the user explicitly resolved it to B — anything left
+ * unresolved keeps A's value by omission.
+ */
+export function buildPatch(diff, resolutions) {
+    var _a, _b, _c;
+    const patch = {};
+    for (const { item, bValue } of diff.autoFilled) {
+        patch[(_a = item.name) !== null && _a !== void 0 ? _a : ''] = bValue;
+    }
+    for (const { item, bValue } of diff.conflicts) {
+        if (resolutions[(_b = item.name) !== null && _b !== void 0 ? _b : ''] === 'B') {
+            patch[(_c = item.name) !== null && _c !== void 0 ? _c : ''] = bValue;
+        }
+    }
+    return patch;
+}
+/** Display label for a candidate record in the search results list. */
+export function candidateLabel(record) {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_b = (_a = record === null || record === void 0 ? void 0 : record.name) !== null && _a !== void 0 ? _a : record === null || record === void 0 ? void 0 : record.label) !== null && _b !== void 0 ? _b : (_d = (_c = record === null || record === void 0 ? void 0 : record._links) === null || _c === void 0 ? void 0 : _c.self) === null || _d === void 0 ? void 0 : _d.href) !== null && _e !== void 0 ? _e : '';
+}