@mmlogic/components 0.5.2 → 0.5.3

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/mrd-merge-view.js

@@ -121,14 +121,14 @@ export class MrdMergeView {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (h(MergeSearchStep, { key: '4b79504f62f85274c9cd9681b6819c2318f4246a', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', 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' ? (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 })) : (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 (h(Host, { key: 'f3fc046fa728646e2ff686d2eae30024da3121e1' }, h("div", { key: '55bef786973d22dce49be021cfb78588b119139c', class: "mrd-merge-view" }, stepContent)));
+        return (h(Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
     }
     static get is() { return "mrd-merge-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/dev/api.js

@@ -19,7 +19,21 @@ async function apiRequest(method, path, token, body) {
   const text = await resp.text();
   let json;
   try { json = JSON.parse(text); } catch (_) { json = text; }
-  return { status: resp.status, ok: resp.ok, body: json };
+  return { status: resp.status, ok: resp.ok, body: json, location: resp.headers.get('Location') };
+}
+
+/**
+ * Write (POST/PATCH) that returns no body — only a Location header
+ * (create/patch/merge on /data/**, per TASK-0203). Follows the Location
+ * header with a GET to hand callers the current record, mirroring
+ * content-app's ApiClientService create/update methods.
+ */
+async function apiWriteAndFetch(method, path, token, payload) {
+  const write = await apiRequest(method, path, token, payload);
+  if (!write.ok) return write;
+  const href = write.location || path;
+  const { body } = await apiRequest('GET', href, token);
+  return { ...write, body };
 }
 
 /** Resolve a file/image reference href to a signed, directly-usable URL.
@@ -95,7 +109,7 @@ async function apiFetchPage(token, baseHref, pageNumber, sort = '') {
 }
 
 async function apiSubmitForm(token, tenantCode, pluralName, values) {
-  const { status, ok, body } = await apiRequest('POST', `/data/${tenantCode}/${pluralName}`, token, values);
+  const { status, ok, body } = await apiWriteAndFetch('POST', `/data/${tenantCode}/${pluralName}`, token, values);
   return { status, ok, body };
 }
 
@@ -150,11 +164,12 @@ async function apiSearchMergeCandidates(token, tenantCode, mostSignificantClass,
 
 /**
  * Merge two DataObjects of the same basic type. Mirrors DataController.merge():
- * POST {winnerHref}/merge with { loser: loserHref, patch }. Returns the
- * patched winner record on success.
+ * POST {winnerHref}/merge with { loser: loserHref, patch }. Returns no body
+ * (204 + Location, per TASK-0203) — follows Location with a GET for the
+ * patched winner record.
  */
 async function apiMerge(token, winnerHref, loserHref, patch) {
-  const { ok, status, body } = await apiRequest('POST', `${winnerHref}/merge`, token, { loser: loserHref, patch });
+  const { ok, status, body } = await apiWriteAndFetch('POST', `${winnerHref}/merge`, token, { loser: loserHref, patch });
   if (!ok) throw new Error(`${status}: ${typeof body === 'string' ? body : JSON.stringify(body)}`);
   return body;
 }

package/dist/collection/dev/app.js

@@ -266,6 +266,41 @@ function initFilePreviewTab() {
     section.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
     section.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
   });
+
+  // Invoice View demo (commons.invoice archetype, TASK-0199) — the `lines`
+  // RELATED_VIEW is rendered inside mrd-invoice-view via slot="lines", but the
+  // page/sort data-loading stays owned by mrd-layout-section, exactly like any
+  // other RELATED_VIEW: answer mrdLoadViewPage the same way the Detail View tab
+  // does for appointments/share classes.
+  const invoiceSection = document.getElementById('invoice-view');
+  const invoicePreviewEl = document.getElementById('invoice-view-preview');
+  invoiceSection.items = window.EXAMPLE_INVOICE_ITEMS;
+  invoiceSection.data = window.EXAMPLE_INVOICE_DATA;
+  invoiceSection.archetypes = [window.EXAMPLE_INVOICE_ARCHETYPE];
+  invoiceSection.addEventListener('mrdLoadViewPage', async (e) => {
+    const { name, page } = e.detail;
+    logEvent('mrdLoadViewPage', e.detail);
+    await invoiceSection.setViewPage(name, page, window.EXAMPLE_INVOICE_LINES, window.EXAMPLE_INVOICE_LINES.length);
+  });
+  invoiceSection.addEventListener('mrdAttachments', (e) => {
+    logEvent('mrdAttachments', e.detail);
+    renderAttachmentPreview(invoicePreviewEl, e.detail.attachments);
+  });
+  invoiceSection.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
+  invoiceSection.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
+
+  // Email View demo (commons.email archetype, TASK-0199) — fully read-only, no
+  // RELATED_VIEW/table involved.
+  const emailSection = document.getElementById('email-view');
+  const emailPreviewEl = document.getElementById('email-view-preview');
+  emailSection.data = window.EXAMPLE_EMAIL_DATA;
+  emailSection.archetypes = [window.EXAMPLE_EMAIL_ARCHETYPE];
+  emailSection.addEventListener('mrdAttachments', (e) => {
+    logEvent('mrdAttachments', e.detail);
+    renderAttachmentPreview(emailPreviewEl, e.detail.attachments);
+  });
+  emailSection.addEventListener('mrdDownload', (e) => logEvent('mrdDownload', e.detail));
+  emailSection.addEventListener('mrdNavigate', (e) => logEvent('mrdNavigate', e.detail));
 }
 
 /* =====================================================================
@@ -620,7 +655,7 @@ async function renderSection(index) {
     try {
       const result = await apiRequest('POST', `${_baseHref}${path}`, authGetToken(), values);
       if (result.ok) {
-        const href = result.body?._links?.self?.href;
+        const href = result.location;
         if (href) await section.setViewCreatedObject(name, href);
       } else {
         console.error('[mrdCreateObject] mislukt', result.status, result.body);
@@ -873,17 +908,20 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
   if (_meUser) form.me = _meUser;
   form.values = record ? initialValues : {};
 
-  // Upload files immediately on selection; write binary URI back via setFieldValue
-    form.addEventListener('mrdChange', async (e) => {
-      const { name, value } = e.detail;
-      if (!(value instanceof File)) return;
-      try {
-        const uri = await apiUploadFile(authGetToken(), _selectedTenant, value);
-        await form.setFieldValue(name, uri);
-      } catch (err) {
-        console.error(`[upload] mislukt voor veld "${name}":`, err);
-      }
-    });
+  // Upload each selected file immediately (fires once per file for `multiple` fields);
+  // pass `file` back into setFieldValue so mrd-form can resolve the right array entry.
+  // The resolved value is { href, fileName } — same shape mrd-table/mrd-layout-section
+  // already expect when reading FILE/IMAGE data back — so the filename displays correctly
+  // instead of falling back to the upload URI's UUID.
+  form.addEventListener('mrdUpload', async (e) => {
+    const { name, file } = e.detail;
+    try {
+      const uri = await apiUploadFile(authGetToken(), _selectedTenant, file);
+      await form.setFieldValue(name, { href: uri, fileName: file.name }, file);
+    } catch (err) {
+      console.error(`[upload] mislukt voor veld "${name}":`, err);
+    }
+  });
 
     form.addEventListener('mrdSubmit', async (e) => {
       document.getElementById('panel-response').innerHTML =
@@ -922,7 +960,7 @@ async function renderForm(layout, record = null, selfHref = null, containerEl =
           renderResponse(200, 'Geen wijzigingen.');
           return;
         }
-        const result = await apiRequest('PATCH', selfHref, authGetToken(), patch);
+        const result = await apiWriteAndFetch('PATCH', selfHref, authGetToken(), patch);
         renderResponse(result.status, result.body);
       } else {
         // POST mode: new record

package/dist/collection/dev/example-data.js

@@ -69,7 +69,7 @@ window.EXAMPLE_LAYOUT = {
       label: "Assets",
       items: [
         { type: "FIELD", name: "projectLogo",  label: "Project Logo",  dataType: "IMAGE", required: false, accept: "image/*",                   maxSize: 5242880  },
-        { type: "FIELD", name: "attachments",  label: "Attachments",   dataType: "FILE",  required: false, accept: ".pdf,.doc,.docx,.zip",      maxSize: 10485760 }
+        { type: "FIELD", name: "attachments",  label: "Attachments",   dataType: "FILE",  required: false, accept: ".pdf,.doc,.docx,.zip",      maxSize: 10485760, multiple: true }
       ]
     },
     { type: "RELATION", name: "projectManager",  label: "Project Manager", relatedClass: "Employee", displayType: "SEARCH",   required: true,  multiple: false },
@@ -91,7 +91,15 @@ window.EXAMPLE_VALUES = {
   budget:       { amount: 150000, currency: "EUR" },
   isPublic:     true,
   startDate:    "2026-01-15",
-  contactEmail: "team@mosterd.nl"
+  contactEmail: "team@mosterd.nl",
+  // FILE/IMAGE values from the API are { href, fileName } — same shape as everywhere
+  // else in this library (mrd-table, mrd-document-view) — so the field shows the real
+  // filename instead of the href's UUID.
+  projectLogo:  { href: "/uploads/proj-9f2c/logo.png", fileName: "mosterd-logo.png" },
+  attachments: [
+    { href: "/uploads/proj-9f2c/9f2c-contract.pdf", fileName: "contract-2026.pdf" },
+    { href: "/uploads/proj-9f2c/1a3b-invoice.pdf",   fileName: "invoice-042.pdf" },
+  ],
 };
 
 // ─── Companies detail view demo ────────────────────────────────────────────────
@@ -441,3 +449,119 @@ window.EXAMPLE_DOCUMENT_DATA = {
     dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
   },
 };
+
+// ─── Invoice View demo (commons.invoice archetype, TASK-0199) ────────────────
+// Exercises mrd-invoice-view via mrd-layout-section's archetype path. `lines`
+// is a real RELATED_VIEW item bound to the commons.invoiceLine archetype — it
+// is rendered *inside* mrd-invoice-view via slot="lines" (mrd-layout-section
+// still owns the table's own page/sort wiring, see renderInvoiceObject()).
+
+window.EXAMPLE_INVOICE_ARCHETYPE = {
+  archetype: 'commons.invoice',
+  slots: {
+    invoiceNumber: 'invoiceNumber', invoiceDate: 'invoiceDate', dueDate: 'dueDate',
+    netAmount: 'netAmount', taxAmount: 'taxAmount', amount: 'amount', status: 'status',
+    customer: 'customer', supplier: 'supplier', lines: 'lines', attachments: 'attachments', container: 'dossier',
+  },
+};
+
+window.EXAMPLE_INVOICE_ITEMS = [
+  {
+    type: 'FIELD', name: 'status', label: 'Status', dataType: 'LIST', required: false,
+    listItems: [
+      { key: 'draft', label: 'Concept', color: '#6b7280', backgroundColor: '#f3f4f6' },
+      { key: 'sent', label: 'Verzonden', color: '#1d4ed8', backgroundColor: '#dbeafe' },
+      { key: 'paid', label: 'Betaald', color: '#15803d', backgroundColor: '#dcfce7' },
+    ],
+  },
+  {
+    type: 'RELATED_VIEW', label: 'Factuurregels', name: 'lines',
+    relatedClass: 'demo.invoiceLine', fromClass: 'demo.invoice', showTitle: true,
+    archetypes: [{ archetype: 'commons.invoiceLine', slots: { description: 'description', quantity: 'quantity', unitPrice: 'unitPrice', amount: 'amount' } }],
+    view: {
+      name: null,
+      defaultView: true,
+      values: [
+        { type: 'FIELD', label: 'Omschrijving', name: 'description', dataType: 'TEXT', required: true },
+        { type: 'FIELD', label: 'Aantal', name: 'quantity', dataType: 'DECIMAL', required: true },
+        { type: 'FIELD', label: 'Prijs', name: 'unitPrice', dataType: 'CURRENCY', required: true },
+        { type: 'FIELD', label: 'Bedrag', name: 'amount', dataType: 'CURRENCY', required: true, aggregate: 'sum' },
+      ],
+      type: 'demo.invoiceLine',
+      singularLabel: 'Factuurregel',
+      pluralLabel: 'Factuurregels',
+    },
+  },
+];
+
+window.EXAMPLE_INVOICE_DATA = {
+  invoiceNumber: 'INV-2026-0142',
+  invoiceDate: '2026-06-01',
+  dueDate: '2026-06-30',
+  status: 'sent',
+  netAmount: { amount: 1000, currency: 'EUR' },
+  taxAmount: { amount: 210, currency: 'EUR' },
+  amount: { amount: 1210, currency: 'EUR' },
+  attachments: [
+    { href: '/data/demo/invoices/142/attachments/0', fileName: 'invoice-142.pdf', mimeType: 'application/pdf' },
+  ],
+  _links: {
+    self: { href: '/data/demo/invoices/142' },
+    customer: { href: '/data/demo/entities/acme', name: 'Acme Corp.' },
+    supplier: { href: '/data/demo/entities/mosterd', name: 'Mosterd B.V.' },
+    dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
+  },
+};
+
+window.EXAMPLE_INVOICE_LINES = [
+  {
+    description: 'Consultancy — juni 2026',
+    quantity: 10,
+    unitPrice: { amount: 80, currency: 'EUR' },
+    amount: { amount: 800, currency: 'EUR' },
+    _links: { self: { href: '/data/demo/invoiceLines/1' } },
+  },
+  {
+    description: 'Projectmanagement',
+    quantity: 4,
+    unitPrice: { amount: 50, currency: 'EUR' },
+    amount: { amount: 200, currency: 'EUR' },
+    _links: { self: { href: '/data/demo/invoiceLines/2' } },
+  },
+];
+
+// ─── Email View demo (commons.email archetype, TASK-0199) ────────────────────
+// Exercises mrd-email-view via mrd-layout-section's archetype path. Fully
+// read-only — no RELATED_VIEW/table involved.
+
+window.EXAMPLE_EMAIL_ARCHETYPE = {
+  archetype: 'commons.email',
+  slots: {
+    subject: 'subject', date: 'date', from: 'from', to: 'to', cc: 'cc',
+    bodyHtml: 'bodyHtml', bodyText: 'bodyText', headers: 'headers',
+    attachments: 'attachments', container: 'dossier',
+  },
+};
+
+window.EXAMPLE_EMAIL_DATA = {
+  subject: 'RE: Contract 2026 — laatste versie bijgevoegd',
+  date: '2026-06-02T14:32:00',
+  bodyHtml: '<p>Beste Jan,</p><p>Bijgaand de laatste versie van het contract, inclusief de besproken wijzigingen in artikel 4.</p><p>Met vriendelijke groet,<br>Anne</p>',
+  headers: 'Message-ID: <abc123@mail.example.com>\nReceived: from mail.example.com by mx.mosterd.com',
+  attachments: [
+    { href: '/data/demo/emails/9/attachments/0', fileName: 'contract-2026-v3.pdf', mimeType: 'application/pdf' },
+    { href: '/data/demo/emails/9/attachments/1', fileName: 'wijzigingen.docx' },
+  ],
+  _links: {
+    from: { href: '/data/demo/entities/anne', name: 'Anne de Vries <anne@mosterd.com>' },
+    to: {
+      href: '/data/demo/entities/jan', name: 'Jan Bakker <jan@acme.com>',
+      values: [{ href: '/data/demo/entities/jan', name: 'Jan Bakker <jan@acme.com>' }],
+    },
+    cc: {
+      href: '/data/demo/entities/pietcc', name: 'Piet Claassen <piet@acme.com>',
+      values: [{ href: '/data/demo/entities/pietcc', name: 'Piet Claassen <piet@acme.com>' }],
+    },
+    dossier: { href: '/data/demo/dossiers/42', name: 'Acme Corp — Dossier 2026' },
+  },
+};

package/dist/collection/types/client-layout.js

@@ -72,6 +72,12 @@ export var ClientLayoutNavigateBehaviour;
 })(ClientLayoutNavigateBehaviour || (ClientLayoutNavigateBehaviour = {}));
 /** Well-known archetype ids the client renders specially. */
 export const ARCHETYPE_DOCUMENT = 'commons.document';
+export const ARCHETYPE_INVOICE = 'commons.invoice';
+export const ARCHETYPE_EMAIL = 'commons.email';
+/** Bound by a `commons.invoice`'s `lines` relation target class. Used to find the
+ *  RELATED_VIEW item for the line items generically, by archetype id rather than
+ *  by name/class string. */
+export const ARCHETYPE_INVOICE_LINE = 'commons.invoiceLine';
 /**
  * Find a binding for `archetypeId` in a published `archetypes` list.
  * Returns `undefined` when the archetype is absent — callers fall back to the

package/dist/collection/utils/document-attachments.js

@@ -1,20 +1,33 @@
 /**
- * Extract the `commons.document` archetype's file slot from a data record as a
- * `DocumentAttachment[]` — empty when the slot is unmapped or has no value.
- * Shared by mrd-document-view (on load/data-change) and mrd-document-container
- * (row-click prefetch on mrdNavigate), so both report the exact same shape.
+ * Extract an archetype's file slot from a data record as a `DocumentAttachment[]` —
+ * empty when the slot is unmapped or has no value. `slot` defaults to `'file'` (the
+ * commons.document single-file slot); pass `'attachments'` for the multi-file slots
+ * on commons.email / commons.invoice. A single-object slot value yields a one-entry
+ * array, an array-valued slot yields one entry per item.
+ * Shared by mrd-document-view / mrd-invoice-view / mrd-email-view (on load/data-change)
+ * and mrd-document-container (row-click prefetch on mrdNavigate), so all report the
+ * exact same shape.
  */
-export function attachmentsFromRecord(archetype, record) {
-    var _a, _b, _c, _d;
-    const field = (_a = archetype === null || archetype === void 0 ? void 0 : archetype.slots) === null || _a === void 0 ? void 0 : _a['file'];
+export function attachmentsFromRecord(archetype, record, slot = 'file') {
+    var _a;
+    const field = (_a = archetype === null || archetype === void 0 ? void 0 : archetype.slots) === null || _a === void 0 ? void 0 : _a[slot];
     if (!field)
         return [];
-    const fileRaw = record === null || record === void 0 ? void 0 : record[field];
-    if (!fileRaw)
+    const raw = record === null || record === void 0 ? void 0 : record[field];
+    if (!raw)
         return [];
-    return [{
-            href: fileRaw.href,
-            fileName: (_b = fileRaw.fileName) !== null && _b !== void 0 ? _b : String(fileRaw),
-            mimeType: (_d = (_c = fileRaw.mimeType) !== null && _c !== void 0 ? _c : fileRaw.contentType) !== null && _d !== void 0 ? _d : undefined,
-        }];
+    const items = Array.isArray(raw) ? raw : [raw];
+    return items.filter(Boolean).map(item => {
+        var _a, _b, _c;
+        return ({
+            href: item.href,
+            fileName: (_a = item.fileName) !== null && _a !== void 0 ? _a : String(item),
+            mimeType: (_c = (_b = item.mimeType) !== null && _b !== void 0 ? _b : item.contentType) !== null && _c !== void 0 ? _c : undefined,
+        });
+    });
+}
+/** Dedup key for the componentDidLoad/@Watch('data') "emit mrdAttachments only on
+ *  change" guard shared by mrd-document-view / mrd-invoice-view / mrd-email-view. */
+export function attachmentsKey(attachments) {
+    return attachments.map(a => a.href).join('|');
 }

package/dist/collection/utils/i18n.js

@@ -85,6 +85,21 @@ const translations = {
         merge_confirm_heading: 'Bevestig samenvoegen',
         merge_confirm_warning: 'Dit kan niet ongedaan worden gemaakt: de kandidaat wordt definitief verwijderd.',
         merge_confirm_button: 'Samenvoegen bevestigen',
+        // mrd-invoice-view
+        invoice_title: 'Factuur',
+        invoice_date: 'Factuurdatum',
+        invoice_due_date: 'Vervaldatum',
+        invoice_subtotal: 'Subtotaal',
+        invoice_tax: 'BTW',
+        invoice_total: 'Totaal',
+        invoice_customer: 'Klant',
+        invoice_supplier: 'Leverancier',
+        // mrd-email-view
+        email_from: 'Van',
+        email_to: 'Aan',
+        email_cc: 'Cc',
+        email_date: 'Datum',
+        email_show_headers: 'Toon technische headers',
     },
     en: {
         required: 'This field is required',
@@ -172,6 +187,21 @@ const translations = {
         merge_confirm_heading: 'Confirm merge',
         merge_confirm_warning: 'This cannot be undone: the candidate will be permanently deleted.',
         merge_confirm_button: 'Confirm merge',
+        // mrd-invoice-view
+        invoice_title: 'Invoice',
+        invoice_date: 'Invoice date',
+        invoice_due_date: 'Due date',
+        invoice_subtotal: 'Subtotal',
+        invoice_tax: 'Tax',
+        invoice_total: 'Total',
+        invoice_customer: 'Customer',
+        invoice_supplier: 'Supplier',
+        // mrd-email-view
+        email_from: 'From',
+        email_to: 'To',
+        email_cc: 'Cc',
+        email_date: 'Date',
+        email_show_headers: 'Show technical headers',
     },
     ar: {
         required: 'هذا الحقل مطلوب',
@@ -253,6 +283,21 @@ const translations = {
         merge_confirm_heading: 'تأكيد الدمج',
         merge_confirm_warning: 'لا يمكن التراجع عن هذا الإجراء: سيتم حذف المرشح نهائياً.',
         merge_confirm_button: 'تأكيد الدمج',
+        // mrd-invoice-view
+        invoice_title: 'فاتورة',
+        invoice_date: 'تاريخ الفاتورة',
+        invoice_due_date: 'تاريخ الاستحقاق',
+        invoice_subtotal: 'المجموع الفرعي',
+        invoice_tax: 'الضريبة',
+        invoice_total: 'الإجمالي',
+        invoice_customer: 'العميل',
+        invoice_supplier: 'المورد',
+        // mrd-email-view
+        email_from: 'من',
+        email_to: 'إلى',
+        email_cc: 'نسخة',
+        email_date: 'التاريخ',
+        email_show_headers: 'إظهار الترويسات التقنية',
     },
     fr: {
         required: 'Ce champ est obligatoire',
@@ -334,6 +379,21 @@ const translations = {
         merge_confirm_heading: 'Confirmer la fusion',
         merge_confirm_warning: 'Cette action est irréversible : le candidat sera définitivement supprimé.',
         merge_confirm_button: 'Confirmer la fusion',
+        // mrd-invoice-view
+        invoice_title: 'Facture',
+        invoice_date: 'Date de facture',
+        invoice_due_date: "Date d'échéance",
+        invoice_subtotal: 'Sous-total',
+        invoice_tax: 'TVA',
+        invoice_total: 'Total',
+        invoice_customer: 'Client',
+        invoice_supplier: 'Fournisseur',
+        // mrd-email-view
+        email_from: 'De',
+        email_to: 'À',
+        email_cc: 'Cc',
+        email_date: 'Date',
+        email_show_headers: 'Afficher les en-têtes techniques',
     },
     de: {
         required: 'Dieses Feld ist erforderlich',
@@ -415,6 +475,21 @@ const translations = {
         merge_confirm_heading: 'Zusammenführung bestätigen',
         merge_confirm_warning: 'Dies kann nicht rückgängig gemacht werden: der Kandidat wird endgültig gelöscht.',
         merge_confirm_button: 'Zusammenführung bestätigen',
+        // mrd-invoice-view
+        invoice_title: 'Rechnung',
+        invoice_date: 'Rechnungsdatum',
+        invoice_due_date: 'Fälligkeitsdatum',
+        invoice_subtotal: 'Zwischensumme',
+        invoice_tax: 'MwSt.',
+        invoice_total: 'Gesamt',
+        invoice_customer: 'Kunde',
+        invoice_supplier: 'Lieferant',
+        // mrd-email-view
+        email_from: 'Von',
+        email_to: 'An',
+        email_cc: 'Cc',
+        email_date: 'Datum',
+        email_show_headers: 'Technische Header anzeigen',
     },
     es: {
         required: 'Este campo es obligatorio',
@@ -496,6 +571,21 @@ const translations = {
         merge_confirm_heading: 'Confirmar fusión',
         merge_confirm_warning: 'Esto no se puede deshacer: el candidato se eliminará permanentemente.',
         merge_confirm_button: 'Confirmar fusión',
+        // mrd-invoice-view
+        invoice_title: 'Factura',
+        invoice_date: 'Fecha de factura',
+        invoice_due_date: 'Fecha de vencimiento',
+        invoice_subtotal: 'Subtotal',
+        invoice_tax: 'Impuesto',
+        invoice_total: 'Total',
+        invoice_customer: 'Cliente',
+        invoice_supplier: 'Proveedor',
+        // mrd-email-view
+        email_from: 'De',
+        email_to: 'Para',
+        email_cc: 'Cc',
+        email_date: 'Fecha',
+        email_show_headers: 'Mostrar encabezados técnicos',
     },
     it: {
         required: 'Questo campo è obbligatorio',
@@ -577,6 +667,21 @@ const translations = {
         merge_confirm_heading: 'Conferma unione',
         merge_confirm_warning: "Questa azione non può essere annullata: il candidato verrà eliminato definitivamente.",
         merge_confirm_button: 'Conferma unione',
+        // mrd-invoice-view
+        invoice_title: 'Fattura',
+        invoice_date: 'Data fattura',
+        invoice_due_date: 'Data di scadenza',
+        invoice_subtotal: 'Subtotale',
+        invoice_tax: 'IVA',
+        invoice_total: 'Totale',
+        invoice_customer: 'Cliente',
+        invoice_supplier: 'Fornitore',
+        // mrd-email-view
+        email_from: 'Da',
+        email_to: 'A',
+        email_cc: 'Cc',
+        email_date: 'Data',
+        email_show_headers: 'Mostra intestazioni tecniche',
     },
     uk: {
         required: "Це поле обов'язкове",
@@ -658,6 +763,21 @@ const translations = {
         merge_confirm_heading: 'Підтвердити об\'єднання',
         merge_confirm_warning: 'Цю дію не можна скасувати: кандидат буде остаточно видалено.',
         merge_confirm_button: 'Підтвердити об\'єднання',
+        // mrd-invoice-view
+        invoice_title: 'Рахунок-фактура',
+        invoice_date: 'Дата рахунку',
+        invoice_due_date: 'Термін оплати',
+        invoice_subtotal: 'Проміжний підсумок',
+        invoice_tax: 'ПДВ',
+        invoice_total: 'Разом',
+        invoice_customer: 'Клієнт',
+        invoice_supplier: 'Постачальник',
+        // mrd-email-view
+        email_from: 'Від',
+        email_to: 'Кому',
+        email_cc: 'Копія',
+        email_date: 'Дата',
+        email_show_headers: 'Показати технічні заголовки',
     },
 };
 export function t(key, locale) {

package/dist/components/cell-renderer.js

@@ -1 +1 @@
-import{d as r,e,f as t,c as n,a as u,b as a}from"./format.js";import{a as l}from"./client-layout.js";class o{static render(r,e,t){var n,u,a,c;if(r.type===l.RELATION){const t=null!==(n=r.name)&&void 0!==n?n:"",l=null===(u=null==e?void 0:e._links)||void 0===u?void 0:u[t];return l?Array.isArray(l)?l.map((r=>{var e;return null!==(e=r.name)&&void 0!==e?e:""})).filter(Boolean).join(", "):null!==(a=l.name)&&void 0!==a?a:"":""}if(r.type!==l.FIELD)return"";const s=null!==(c=r.name)&&void 0!==c?c:"",i=r.dataType,d=r.listItems;let E=null==e?void 0:e[s];return r.historyEnabled&&null!=E&&"object"==typeof E&&!Array.isArray(E)&&"current"in E&&(E=E.current),null==E||""===E?"":(Array.isArray(E)?E:[E]).map((r=>o.renderValue(null!=i?i:"TEXT",r,null!=d?d:[],t))).filter((r=>""!==r)).join(", ")}static renderValue(l,o,c,s){var i,d;switch(l){case"INTEGER":return u(Number(o),s,{maximumFractionDigits:0});case"DECIMAL":return u(Number(o),s);case"PERCENTAGE":return a(Number(o),s);case"CURRENCY":{const{amount:r,currency:e}="object"==typeof o&&null!==o?o:{amount:o,currency:""};return e?n(Number(r),e,s):u(Number(r),s)}case"DATE":return t(o,s);case"DATETIME":return e(o,s);case"TIME":return r(o,s);case"BOOLEAN":return o?"✓":"";case"FILE":case"IMAGE":return"object"==typeof o&&null!==o&&null!==(i=o.fileName)&&void 0!==i?i:"";case"LIST":{const r=c.find((r=>r.key===String(o)));return null!==(d=null==r?void 0:r.label)&&void 0!==d?d:String(o)}case"TEXTBLOCK":{const r=String(o).replace(/<[^>]*>/g,""),e=document.createElement("textarea");return e.innerHTML=r,e.value.trim()}case"LONGTEXT":return String(o).replace(/[\r\n]+/g," ").trim();case"JSON":return("object"==typeof o?JSON.stringify(o):String(o)).replace(/[\r\n]+/g," ").trim();case"SECRET":return o?"••••••••":"";default:return String(o)}}static formatJson(r,e=!1){try{const t="string"==typeof r?JSON.parse(r):r;return(e?JSON.stringify(t):JSON.stringify(t,null,2)).replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,(r=>{let e="color:#2aa198";return/^"/.test(r)?e=/:$/.test(r)?"color:#881391":"color:#268bd2":/true|false/.test(r)?e="color:#b58900":/null/.test(r)&&(e="color:#dc322f"),`<span style="${e}">${r}</span>`}))}catch(e){return String(r)}}}export{o as C}
+import{e as r,a as e,f as t,b as n,c as u,d as a}from"./format.js";import{a as l}from"./client-layout.js";class o{static render(r,e,t){var n,u,a,c;if(r.type===l.RELATION){const t=null!==(n=r.name)&&void 0!==n?n:"",l=null===(u=null==e?void 0:e._links)||void 0===u?void 0:u[t];return l?Array.isArray(l)?l.map((r=>{var e;return null!==(e=r.name)&&void 0!==e?e:""})).filter(Boolean).join(", "):null!==(a=l.name)&&void 0!==a?a:"":""}if(r.type!==l.FIELD)return"";const s=null!==(c=r.name)&&void 0!==c?c:"",i=r.dataType,d=r.listItems;let E=null==e?void 0:e[s];return r.historyEnabled&&null!=E&&"object"==typeof E&&!Array.isArray(E)&&"current"in E&&(E=E.current),null==E||""===E?"":(Array.isArray(E)?E:[E]).map((r=>o.renderValue(null!=i?i:"TEXT",r,null!=d?d:[],t))).filter((r=>""!==r)).join(", ")}static renderValue(l,o,c,s){var i,d;switch(l){case"INTEGER":return u(Number(o),s,{maximumFractionDigits:0});case"DECIMAL":return u(Number(o),s);case"PERCENTAGE":return a(Number(o),s);case"CURRENCY":{const{amount:r,currency:e}="object"==typeof o&&null!==o?o:{amount:o,currency:""};return e?n(Number(r),e,s):u(Number(r),s)}case"DATE":return t(o,s);case"DATETIME":return e(o,s);case"TIME":return r(o,s);case"BOOLEAN":return o?"✓":"";case"FILE":case"IMAGE":return"object"==typeof o&&null!==o&&null!==(i=o.fileName)&&void 0!==i?i:"";case"LIST":{const r=c.find((r=>r.key===String(o)));return null!==(d=null==r?void 0:r.label)&&void 0!==d?d:String(o)}case"TEXTBLOCK":{const r=String(o).replace(/<[^>]*>/g,""),e=document.createElement("textarea");return e.innerHTML=r,e.value.trim()}case"LONGTEXT":return String(o).replace(/[\r\n]+/g," ").trim();case"JSON":return("object"==typeof o?JSON.stringify(o):String(o)).replace(/[\r\n]+/g," ").trim();case"SECRET":return o?"••••••••":"";default:return String(o)}}static formatJson(r,e=!1){try{const t="string"==typeof r?JSON.parse(r):r;return(e?JSON.stringify(t):JSON.stringify(t,null,2)).replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,(r=>{let e="color:#2aa198";return/^"/.test(r)?e=/:$/.test(r)?"color:#881391":"color:#268bd2":/true|false/.test(r)?e="color:#b58900":/null/.test(r)&&(e="color:#dc322f"),`<span style="${e}">${r}</span>`}))}catch(e){return String(r)}}}export{o as C}

package/dist/components/client-layout.js

@@ -1 +1 @@
-var E,A,T,O,R,n;!function(E){E.OBJECT_FORM_DASHBOARD="OBJECT_FORM_DASHBOARD",E.CLASS_DASHBOARD="CLASS_DASHBOARD",E.GENERAL_DASHBOARD="GENERAL_DASHBOARD",E.NAVIGATION_PANE="NAVIGATION_PANE"}(E||(E={})),function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP",E.HEADER="HEADER",E.TEXT="TEXT",E.NAVIGATE="NAVIGATE",E.ACTION="ACTION",E.SEARCH="SEARCH",E.VIEW="VIEW",E.RELATED_VIEW="RELATED_VIEW",E.RELATED_OBJECT="RELATED_OBJECT"}(A||(A={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE",E.LONGTEXT="LONGTEXT",E.JSON="JSON",E.SECRET="SECRET"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(O||(O={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(R||(R={})),function(E){E.PAGE="PAGE",E.OVERLAY_PAGE="OVERLAY_PAGE"}(n||(n={}));const C="commons.document";function I(E,A){return(null!=E?E:[]).find((E=>E.archetype===A))}export{C as A,E as C,A as a,T as b,O as c,R as d,n as e,I as r}
+var E,A,n,T,O,R;!function(E){E.OBJECT_FORM_DASHBOARD="OBJECT_FORM_DASHBOARD",E.CLASS_DASHBOARD="CLASS_DASHBOARD",E.GENERAL_DASHBOARD="GENERAL_DASHBOARD",E.NAVIGATION_PANE="NAVIGATION_PANE"}(E||(E={})),function(E){E.FIELD="FIELD",E.RELATION="RELATION",E.SECTION="SECTION",E.GROUP="GROUP",E.HEADER="HEADER",E.TEXT="TEXT",E.NAVIGATE="NAVIGATE",E.ACTION="ACTION",E.SEARCH="SEARCH",E.VIEW="VIEW",E.RELATED_VIEW="RELATED_VIEW",E.RELATED_OBJECT="RELATED_OBJECT"}(A||(A={})),function(E){E.TEXT="TEXT",E.TEXTBLOCK="TEXTBLOCK",E.INTEGER="INTEGER",E.DECIMAL="DECIMAL",E.PERCENTAGE="PERCENTAGE",E.CURRENCY="CURRENCY",E.BOOLEAN="BOOLEAN",E.DATE="DATE",E.DATETIME="DATETIME",E.TIME="TIME",E.EMAIL="EMAIL",E.HYPERLINK="HYPERLINK",E.LIST="LIST",E.FILE="FILE",E.IMAGE="IMAGE",E.LONGTEXT="LONGTEXT",E.JSON="JSON",E.SECRET="SECRET"}(n||(n={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(T||(T={})),function(E){E.SEARCH="SEARCH",E.DROPDOWN="DROPDOWN",E.CHECKBOX="CHECKBOX"}(O||(O={})),function(E){E.PAGE="PAGE",E.OVERLAY_PAGE="OVERLAY_PAGE"}(R||(R={}));const o="commons.document",C="commons.invoice",I="commons.email",D="commons.invoiceLine";function N(E,A){return(null!=E?E:[]).find((E=>E.archetype===A))}export{o as A,E as C,A as a,n as b,T as c,O as d,R as e,C as f,I as g,D as h,N as r}